Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
JavaScript勉強会
Search
kurochannel
March 10, 2022
Programming
0
51
JavaScript勉強会
社内向けに行ったJavaScript勉強会のスライドです。
JavaScriptの歴史からReactの概要(さわりまで)をまとめています。
途中、サンプルコードを交えながら進めました。
kurochannel
March 10, 2022
Tweet
Share
More Decks by kurochannel
See All by kurochannel
はじめてのReact
takumikuroiwa
0
230
子育てエンジニアの勉強習慣
takumikuroiwa
0
180
「コミュニティ」の勧め
takumikuroiwa
1
81
Java→PHPエンジニアに転向した話
takumikuroiwa
0
240
僕の夏休み(2021年)
takumikuroiwa
0
81
Other Decks in Programming
See All in Programming
ベクトル検索システムの気持ち
monochromegane
30
8.9k
Compose Navigation実装の見通しを良くする
hiroaki404
0
180
20250326_生成AIによる_レビュー承認システムの実現.pdf
takahiromatsui
17
5.5k
PHPによる"非"構造化プログラミング入門 -本当に熱いスパゲティコードを求めて- #phperkaigi
o0h
PRO
0
1.1k
goにおける コネクションプールの仕組み を軽く掘って見た
aronokuyama
0
140
requirements with math
moony
0
520
パスキーのすべて / 20250324 iddance Lesson.5
kuralab
0
120
本当だってば!俺もTRICK 2022に入賞してたんだってば!
jinroq
0
250
MCP世界への招待: AIエンジニアが創る次世代エージェント連携の世界
gunta
2
570
Firebase Dynamic Linksの代替手段を自作する / Create your own Firebase Dynamic Links alternative
kubode
0
180
ローコードサービスの進化のためのモノレポ移行
taro28
1
330
令和トラベルにおけるコンテンツ生成AIアプリケーション開発の実践
ippo012
1
260
Featured
See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Faster Mobile Websites
deanohume
306
31k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.8k
Scaling GitHub
holman
459
140k
BBQ
matthewcrist
88
9.5k
How GitHub (no longer) Works
holman
314
140k
Visualization
eitanlees
146
16k
How to Think Like a Performance Engineer
csswizardry
22
1.5k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Rails Girls Zürich Keynote
gr2m
94
13k
Transcript
Why?React? なぜReactなのか︖ JavaScriptの歴史を学ぶ How?React? Reactの概要
JavaScriptの歴史
1. JavaScriptの誕⽣〜第⼀次ブラウザ戦争 JavaScript: 1995年誕⽣ NetScape Communications社によって開発 Netscape Navigater2.0に実装 最初は「LiveScript」という名前だったが、当時⼈気のあった「Java」にあやかり 「JavaScript」に変更した
Microsoft: 1996年 Internet Explorer3.0にJavascript実装 Microsoftによる実装は「JScript」と呼ばれた NetScapeとは別の独⾃機能追加等も⾏っていた 開発者はそれぞれのブラウザに対応するサイトを作る必要があった
2. JavaScriptの標準化 なぜ、JavaScriptに標準化が必要なのか︖ JavaScriptはブラウザ向けのスクリプト⾔語として開発 → ブラウザがJavaScriptの ⾔語を解釈しないといけない ブラウザは各企業が独⾃に開発している 独⾃仕様を実装したりしていたので互換性に乏しかった ECMAScriptの誕⽣
JavaScriptのよりよい発展を⽬指してECMAScriptの誕⽣ 標準化団体: ECMA Internationalによって標準化された JavaScriptの中核となる⾔語仕様 / JavaScript = ECMAScriptに準拠した⾔語
JavaScriptとECMAScript(参照︓JavaScript Primer) https://jsprimer.net/basic/introduction/ JavaScript: ⾊々な実⾏環境がある ECMAScript = どの実⾏環境でも共通な動作のみが定義されている
第⼀次ブラウザ戦争の結果 1990年代後半, NetscapeとInternet Exploreの激しいシェア争いの結果、Internet Exploreが勝利︕ JavaScript暗⿊期 JavaScriptの実装に絡んだブラウザのセキュリティホールが断続的に⾒つかる JavaScript起因のクラッシュ、悪⽤ウイルスの多発 JavaScriptへの悪いイメージが定着 https://currents.google.com/communities/101745672472327891411
3. JavaScriptの復権︓Ajaxの登場, jQueryの誕⽣ 2005年︓Ajax × Google Maps Ajaxの登場によって、再びJavaScriptが注⽬を集める。
2006年︓jQueryの誕⽣ 「write less, do mode」 少ない記述で多くの実装ができる クライアントサイドプログラミングの敷居を圧倒的に下げる DOM操作, イベント処理, クロスブラウザ対応(jQueryで差異を吸収)
Ajaxとの相性も抜群︕ JavaScript = jQuery 4.第⼆次ブラウザ戦争 五択の戦争: IE, Google Chrome, Firefox, Safari, Opera https://ja.wikipedia.org/wiki/ブラウザ戦争#/media/ファイ ル:Usage_share_of_web_browsers_(Source_StatCounter).svg
ここまでのおさらい JavaScriptはあくまで「ブラウザ」で動く前提だった Ajax × jQuery でインタラクティブなUI×UXの実現が可能になった ここからのお話 JavaScriptの進化 JavaScriptがサーバサイド(=ブラウザ外で)としても使われるようになる (Node.js,
npm) JavaScript = ビルドが前提になってくる 脱JQuery → Reactへ・・・
5. JavaScriptの発展 Node.js の誕⽣ 2009年 ライアン・ダールによって作られた ブラウザから独⽴したJavaScript実⾏環境 Googleが開発したGoogle V8 JavaScript
Engineという⾼速なJavaScriptエンジンが 元になっている サーバサイド開発で⽤いられるようになる <参考> 【ブラウザレンダリングにおけるJavaScript実⾏環境】 https://zenn.dev/ak/articles/c28fa3a9ba7edb#全体図
npm (モジュール/パッケージ管理システム)の台頭 当時の⾔語としての問題: 名前空間が1つしかない/依存関係が管理しずらい 読み込み順が前後してしまうだけでバグがでてしまう… <!-- jQuery を前提にjQuery UIが作られている--> <script
src="./jquery.js"></script> <script src="./jquery-ui.js"></script> node.js独⾃のモジュール・パッケージ管理システムである「npm」が発展 Webサーバとしてサーバーサイドで活⽤され始める(yahoo, Linkedln, Paypal) モジュール︓名前空間の問題を解決 パッケージ︓npm(パッケージ管理システム)で解決
モジュールについて 1995年の誕⽣から⻑い間ずっと、JavaScriptにはコードから他のファイルを読み込 む仕組み︓モジュールという仕組みがなかった あるモジュールの関数を別のモジュールから呼び出す等・・・ Node.jsでモジュールの仕組みが導⼊され、現在はECMAScriptでモジュールが定義 されている https://jsprimer.net/basic/module/ 1ファイル1モジュールが基本 moduleサンプルコード https://codesandbox.io/s/moduletesuto-2mmr7?file=/index.html
npm(パッケージ管理システム)について パッケージ: パッケージとはpackage.jsonで記述されたファイルやディレクトリ JavaScriptの便利ライブラリのインストールをコマンドで⾏えるもの 依存関係の解決 npm よく使うコマンドまとめ https://qiita.com/standard-software/items/2ac49a409688733c90e7 npmってなんですか︖ https://sho03.hatenablog.com/entry/2021/02/01/194409
None
Node.js クライアント開発(React開発)でどう関係してくるの︖ バックエンド開発の為にnpmは使われるパッケージ管理システムであったが、フ ロントエンド⽤のパッケージを提供するのに使われるようになった React等、JSフレームワークでの⼤規模開発となると、様々なパッケージが必要に なり、そのパッケージ達が特定のバージョンで依存し合っている トランスコンパイル(変換処理)・バンドル(まとめる)→ ブラウザが解釈可能 な状態に変換してくれる 【参考】
なぜReactアプリ開発でNode.jsが必要なのか https://qiita.com/rpf-nob/items/6823fb8728754386ef30#なぜreactアプリ開発でnodejs が必要なのか
None
None
導⼊⽅法 https://tech-brook.com/525/
ECMAScriptをより詳しく ECMAScript 2015年: ES2015(第6版) 2015年からは毎年仕様策定がリリースされている ECMAScriptのバージョンの歴史 : https://jsprimer.net/basic/ecmascript/ ⾔語としての進化 jQueryを使わずに、標準仕様に準拠したJavaScriptで開発しよう
ECMAScriptに準拠した各JavaScriptライブラリ・フレームワークの台頭
6. Why? React? : なぜReact(フレームワーク)で開発するのか︖ JavaScriptは⾔語として進化している Reactは特にJavaScript標準の記法・考え⽅を重視している → JavaScript構⽂をしっかり押さえていれば習得しやすい かつ
応⽤が効きや すい(JavaScriptがベースにあるので) 標準のJavaScriptが使いやすくなった(⾮同期通信等) https://jsprimer.net/use-case/ajaxapp/promise/ SPAを開発しやすい(Single Page Application) 初回ロードで必要なリソースをまとめて読み込む ユーザーの操作に応じて、動的にUIを書き換える。ページ遷移における再読 み込み(ロード)がない。 例: Facebook, GoogleMap etc… https://www.oro.com/ja/technology/001/ API開発(バックエンド開発)と分業が可能
続き 仮想DOM 以前: HTML(DOM)= 操作する対象 JSX: HTML(DOM)= 拡張されたJavascript(JSX)の値(ファーストオブジェクト) よりDOMを扱いやすくなる 直接DOMを更新するのではなく,
JavaScriptのオブジェクトで仮想DOMツリー を実現 → 仮想DOM変更前と仮想DOM変更後の差分を計算して本DOMを更新 ※ 詳細は次のスライドで紹介 その他、Reactの特徴「状態管理」「コンポーネント指向」「宣⾔的View」etc… トランスコンパイル&バンドル = JavaScriptを気軽にビルドできるようになった TypeScript等、AltJSも組み合わせて開発&保守しやすくする
Reactの概要
仮想DOM key を付与して差分が検知できるようにする https://ja.reactjs.org/docs/lists-and-keys.html#basic-list-component
宣⾔的View ⼿続き型(jQuery) DOM(Document Object Model)を直接いじって動的ページを⽣成する。 ⾒た⽬(HTML)と操作(JavaScript)が分離していて、何をやったら何がどう変 更されるか把握しにくい。 あちこちから画⾯が参照・更新され、どこでどのような影響が出るかが分かりに くい傾向がある。 https://codesandbox.io/s/lt-sample-1-forked-q6kx8?file=/src/App.js
宣⾔的View 宣⾔的(React) https://codesandbox.io/s/lt-sample-1-forked-pk90o?file=/src/App.js HTMLの中に JavaScript が書かれていて、⾒た⽬と動作が同じ場所に書かれている アプリの内部状態がこの状態だったら、この⾒た⽬になるべし ⾒た⽬と動作の分離を防ぐソースコードが書ける コンポーネントベース Webページやアプリケーションの構成単位を細かい部品単位で作成し、作成した
部品を組み合わせていくのが構築⼿法。 コンポーネント化することで再利⽤が可能