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
47
JavaScript勉強会
社内向けに行ったJavaScript勉強会のスライドです。
JavaScriptの歴史からReactの概要(さわりまで)をまとめています。
途中、サンプルコードを交えながら進めました。
kurochannel
March 10, 2022
Tweet
Share
More Decks by kurochannel
See All by kurochannel
はじめてのReact
takumikuroiwa
0
220
子育てエンジニアの勉強習慣
takumikuroiwa
0
160
「コミュニティ」の勧め
takumikuroiwa
1
76
Java→PHPエンジニアに転向した話
takumikuroiwa
0
210
僕の夏休み(2021年)
takumikuroiwa
0
68
Other Decks in Programming
See All in Programming
今年一番支援させていただいたのは認証系サービスでした
satoshi256kbyte
1
240
数十万行のプロジェクトを Scala 2から3に完全移行した
xuwei_k
0
140
Haze - Real time background blurring
chrisbanes
1
490
CSC509 Lecture 14
javiergs
PRO
0
130
テスト自動化失敗から再挑戦しチームにオーナーシップを委譲した話/STAC2024 macho
ma_cho29
1
1.2k
Amazon Aurora Serverless v2のアプデと、Amazon Aurora PostgreSQL Limitless DatabaseのGAについて
satoshi256kbyte
0
120
17年周年のWebアプリケーションにTanStack Queryを導入する / Implementing TanStack Query in a 17th Anniversary Web Application
saitolume
0
240
AWS認定資格を勉強した先に何があったか
satoshi256kbyte
2
210
StarlingMonkeyを触ってみた話 - 2024冬
syumai
3
260
Semantic Kernelのネイティブプラグインで知識拡張をしてみる
tomokusaba
0
170
eBPF Deep Dive: Architecture and Safety Mechanisms
takehaya
12
1.4k
Effective Signals in Angular 19+: Rules and Helpers @ngbe2024
manfredsteyer
PRO
0
120
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
66
4.5k
Become a Pro
speakerdeck
PRO
26
5k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.2k
Git: the NoSQL Database
bkeepers
PRO
427
64k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
38
1.9k
Site-Speed That Sticks
csswizardry
1
180
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
1.9k
Automating Front-end Workflow
addyosmani
1366
200k
Side Projects
sachag
452
42k
Facilitating Awesome Meetings
lara
50
6.1k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
How to Ace a Technical Interview
jacobian
276
23k
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ページやアプリケーションの構成単位を細かい部品単位で作成し、作成した
部品を組み合わせていくのが構築⼿法。 コンポーネント化することで再利⽤が可能