JavaScript勉強会

社内向けに行ったJavaScript勉強会のスライドです。

JavaScriptの歴史からReactの概要（さわりまで）をまとめています。
途中、サンプルコードを交えながら進めました。

Transcript

1. Why?React? なぜReactなのか︖ JavaScriptの歴史を学ぶ How?React? Reactの概要
2. JavaScriptの歴史
3. 1. JavaScriptの誕⽣〜第⼀次ブラウザ戦争 JavaScript: 1995年誕⽣ NetScape Communications社によって開発 Netscape Navigater2.0に実装 最初は「LiveScript」という名前だったが、当時⼈気のあった「Java」にあやかり 「JavaScript」に変更した Microsoft: 1996年 Internet Explorer3.0にJavascript実装 Microsoftによる実装は「JScript」と呼ばれた NetScapeとは別の独⾃機能追加等も⾏っていた 開発者はそれぞれのブラウザに対応するサイトを作る必要があった
4. 2. JavaScriptの標準化 なぜ、JavaScriptに標準化が必要なのか︖ JavaScriptはブラウザ向けのスクリプト⾔語として開発 → ブラウザがJavaScriptの ⾔語を解釈しないといけない ブラウザは各企業が独⾃に開発している 独⾃仕様を実装したりしていたので互換性に乏しかった ECMAScriptの誕⽣ JavaScriptのよりよい発展を⽬指してECMAScriptの誕⽣ 標準化団体: ECMA Internationalによって標準化された JavaScriptの中核となる⾔語仕様 / JavaScript = ECMAScriptに準拠した⾔語
5. JavaScriptとECMAScript（参照︓JavaScript Primer) https://jsprimer.net/basic/introduction/ JavaScript: ⾊々な実⾏環境がある ECMAScript = どの実⾏環境でも共通な動作のみが定義されている
6. 第⼀次ブラウザ戦争の結果 1990年代後半, NetscapeとInternet Exploreの激しいシェア争いの結果、Internet Exploreが勝利︕ JavaScript暗⿊期 JavaScriptの実装に絡んだブラウザのセキュリティホールが断続的に⾒つかる JavaScript起因のクラッシュ、悪⽤ウイルスの多発 JavaScriptへの悪いイメージが定着 https://currents.google.com/communities/101745672472327891411
7. 3. JavaScriptの復権︓Ajaxの登場, jQueryの誕⽣ 2005年︓Ajax × Google Maps Ajaxの登場によって、再びJavaScriptが注⽬を集める。
8. 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
9. ここまでのおさらい JavaScriptはあくまで「ブラウザ」で動く前提だった Ajax × jQuery でインタラクティブなUI×UXの実現が可能になった ここからのお話 JavaScriptの進化 JavaScriptがサーバサイド（=ブラウザ外で）としても使われるようになる （Node.js, npm） JavaScript = ビルドが前提になってくる 脱JQuery → Reactへ・・・
10. 5. JavaScriptの発展 Node.js の誕⽣ 2009年 ライアン・ダールによって作られた ブラウザから独⽴したJavaScript実⾏環境 Googleが開発したGoogle V8 JavaScript Engineという⾼速なJavaScriptエンジンが 元になっている サーバサイド開発で⽤いられるようになる ＜参考＞ 【ブラウザレンダリングにおけるJavaScript実⾏環境】 https://zenn.dev/ak/articles/c28fa3a9ba7edb#全体図
11. npm (モジュール/パッケージ管理システム)の台頭 当時の⾔語としての問題: 名前空間が1つしかない/依存関係が管理しずらい 読み込み順が前後してしまうだけでバグがでてしまう… <!-- jQuery を前提にjQuery UIが作られている--> <script src="./jquery.js"></script> <script src="./jquery-ui.js"></script> node.js独⾃のモジュール・パッケージ管理システムである「npm」が発展 Webサーバとしてサーバーサイドで活⽤され始める（yahoo, Linkedln, Paypal） モジュール︓名前空間の問題を解決 パッケージ︓npm（パッケージ管理システム）で解決
12. モジュールについて 1995年の誕⽣から⻑い間ずっと、JavaScriptにはコードから他のファイルを読み込 む仕組み︓モジュールという仕組みがなかった あるモジュールの関数を別のモジュールから呼び出す等・・・ Node.jsでモジュールの仕組みが導⼊され、現在はECMAScriptでモジュールが定義 されている https://jsprimer.net/basic/module/ 1ファイル1モジュールが基本 moduleサンプルコード https://codesandbox.io/s/moduletesuto-2mmr7?file=/index.html
13. npm（パッケージ管理システム）について パッケージ: パッケージとはpackage.jsonで記述されたファイルやディレクトリ JavaScriptの便利ライブラリのインストールをコマンドで⾏えるもの 依存関係の解決 npm よく使うコマンドまとめ https://qiita.com/standard-software/items/2ac49a409688733c90e7 npmってなんですか︖ https://sho03.hatenablog.com/entry/2021/02/01/194409
15. Node.js クライアント開発（React開発）でどう関係してくるの︖ バックエンド開発の為にnpmは使われるパッケージ管理システムであったが、フ ロントエンド⽤のパッケージを提供するのに使われるようになった React等、JSフレームワークでの⼤規模開発となると、様々なパッケージが必要に なり、そのパッケージ達が特定のバージョンで依存し合っている トランスコンパイル（変換処理）・バンドル（まとめる）→ ブラウザが解釈可能 な状態に変換してくれる 【参考】 なぜReactアプリ開発でNode.jsが必要なのか https://qiita.com/rpf-nob/items/6823fb8728754386ef30#なぜreactアプリ開発でnodejs が必要なのか
18. 導⼊⽅法 https://tech-brook.com/525/
19. ECMAScriptをより詳しく ECMAScript 2015年: ES2015（第6版） 2015年からは毎年仕様策定がリリースされている ECMAScriptのバージョンの歴史 : https://jsprimer.net/basic/ecmascript/ ⾔語としての進化 jQueryを使わずに、標準仕様に準拠したJavaScriptで開発しよう ECMAScriptに準拠した各JavaScriptライブラリ・フレームワークの台頭
20. 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開発（バックエンド開発）と分業が可能
21. 続き 仮想DOM 以前: HTML（DOM）= 操作する対象 JSX: HTML（DOM）= 拡張されたJavascript（JSX）の値（ファーストオブジェクト） よりDOMを扱いやすくなる 直接DOMを更新するのではなく, JavaScriptのオブジェクトで仮想DOMツリー を実現 → 仮想DOM変更前と仮想DOM変更後の差分を計算して本DOMを更新 ※ 詳細は次のスライドで紹介 その他、Reactの特徴「状態管理」「コンポーネント指向」「宣⾔的View」etc… トランスコンパイル＆バンドル = JavaScriptを気軽にビルドできるようになった TypeScript等、AltJSも組み合わせて開発＆保守しやすくする
22. Reactの概要
23. 仮想DOM key を付与して差分が検知できるようにする https://ja.reactjs.org/docs/lists-and-keys.html#basic-list-component
24. 宣⾔的View ⼿続き型（jQuery） DOM（Document Object Model）を直接いじって動的ページを⽣成する。 ⾒た⽬（HTML）と操作（JavaScript）が分離していて、何をやったら何がどう変 更されるか把握しにくい。 あちこちから画⾯が参照・更新され、どこでどのような影響が出るかが分かりに くい傾向がある。 https://codesandbox.io/s/lt-sample-1-forked-q6kx8?file=/src/App.js
25. 宣⾔的View 宣⾔的（React） https://codesandbox.io/s/lt-sample-1-forked-pk90o?file=/src/App.js HTMLの中に JavaScript が書かれていて、⾒た⽬と動作が同じ場所に書かれている アプリの内部状態がこの状態だったら、この⾒た⽬になるべし ⾒た⽬と動作の分離を防ぐソースコードが書ける コンポーネントベース Webページやアプリケーションの構成単位を細かい部品単位で作成し、作成した 部品を組み合わせていくのが構築⼿法。 コンポーネント化することで再利⽤が可能