①基本
・React vue angular Riot等の仮想DOMを用いるライブラリ/フレームワークを使用
・npm/yarm等のパッケージマネージャを使用
・主にES2015(ES6以降)の記法を使用
・webpack等のモジュールバンドラーを使用
・Babel等のトランスパイラを使用
②そもそもDOMって？
・Document Object Modelの略。ドムと読む
・HTMLなどを解釈し木構造で表現したもの
これまでのDOMを直接操作していた
・素のjavascriptやjquery等
※デメリット：レンダリングコスト高、コードの複雑化
仮想DOMとは
・javascriptのオブジェクトで仮想的に作られたDOM
・いきなりDOMを操作せず、JS上で仮想DOMを操作し差分を出してからDOMに反映
③npm/yarm等のパッケージマネージャを使用
かつてのjavascriptは1つのJSファイルに全ての処理を記述していた
・ 処理が複雑になるにつれてコードがカオス化
・ コードの再利用ができない
ちょっと改善されたjavascript、他のJSファイルを読み込んで使っていた
・ コードの再利用、共通化ができるようになった
・ 読み込み順を意識しないとエラーになる(依存関係)
・ 何がどこから読み込まれたものかわからない
試行錯誤があったモダンJavaScript、npm/yarn等のパッケージマネージャーを使用
・ 内部ではNode.js(サーバサイドに実行されるJavaScript)が動いている
・ 依存関係を勝手に解決してくれる
・ import先に明示的にわかる
・ 世界中で公開されているパッケージをコマンド1つで利用可能
・ チーム内での共有も簡単に
④主にES2015(ES6以降)の記法を使用
ECMAScriotとは
・ えくますくりぷと
・ JavaScriptの標準規格(こういうルールで書くぜ！)
・ 欧州電子計算機工業会
・ 毎年1回発表される
・ ES5=ES2014、ES6=ES2015
・ ES20XXの呼び方を一般化
・ ES2015で機能追加が多くあり、近代JSの転換期と言える
★ES2015で追加された規格
・ let、constを用いた変数宣言
・ アローファンクション
・ Class構文(オブジェクト指向でよくでてくる)
・ 分割代入
・ テンプレート文字列
・ スレッド構文
・ Promise
⑤Webpack等のモジュールバンドラー、Babel等のトランスパイラを使用
モジュールバンドラーとは、
・ 複数のJS(css/image)ファイルを1つにまとめるためのもの
トランスパイラとは、(BABEL)
・ 新しいJavaScriptの記法を古い記法に変換してくれる
モジュールバンドラー/トランスパイラまとめ
・ 開発は効率よく、本番環境はうまく変換
・ 最近はフレームワーク/ライブラリが割と面倒見てくれる
・ まずは概念を押さえておけばOK
SPAとは(Single Page Application)
- モダンJavaScriptはSPAが基本
- HTMLは1つのみでJavaScriptで画面を置き換える
※ SPAを使用したWebシステムは、プロフィールを表示するための必要なデータだけを送る(htmlではなくデータのみ)
※ index.htmlを置き換える
SPAのメリット
- ページ遷移毎のチラつきがなくなる
- 表示速度のアップによるユーザー体験向上
- コンポーネント分割が容易になることで開発効率アップ
Promiseとは
- Promiseオブジェクトは、時間のかかる処理(非同期処理)を呼び出して、いつか結果を返すと約束するもの。
- 結果は、成功 or 失敗で返る
- Promiseのthenメソッドを使って、非同期処理が完了し、成功が変えてきた時の処理を、コールバック関数で登録できる。
・ 失敗時の処理はcatchメソッドで登録。
- Promiseを使うことで、コールバック関数による非同期処理のネストを解消できる。
- 標準ライブラリや、サードパーティのライブライリがPromiseを返すAPIを提供している。
※ネストとは入れ子(短縮されて書いているのでなんの作業をしているかがわからない)
※クローリングとはプログラムが「Webサイトを定期的に巡回し、情報を取得・保存する技術です。
※コールバックとはコンピュータプログラム中で、ある関数などを呼び出す際に別の関数などを途中で実行するよう指定する手法のこと
await/async
- await/asyncを利用することで、Promiseチェーンを使うよりすっきり書ける
- ただし、Promiseの上に成り立っているので、Promiseの理解は必須
- asyncキーワード
・ 関数を非同期関数にするキーワード
・ 返り値が暗黙的にPromiseになる - await キーワード
・ async関数の中でしか使えない
・ Promiseオブジェクトの前につける
・ Promiseが『成功(resolve)』を返すまで処理が中断でき、同期的(コードの順番)にかける(ブロッキングするわけではない)
・ 成功時の結果を受け取れる(thenのコールバックの引数を返す)
同期処理・非同期処理とは
- 同期処理、処理Aから順番に実行される。次の処理(処理B)は、前の処理(処理A)が終わるまで実行ができない
- 非同期処理、前の処理(処理B)が完了するのを待たずに、次の処理(処理C)を実行できる
なぜ非同期処理が必要なのか？(同期処理だと困ること)
- 同期処理だと、実行中の処理が終わるまで、次の処理を実行できない。
- 長時間かかるような処理を実行すると、次の処理をすぐ実行したくてもできない
- 処理をブロックせず、次の処理を実行できる。
- 非同期処理を使って効率的に処理を実行できる
(例),AppサーバーでHTTPリクエストごとにデータベースにアクセスする(I/O処理)し、完了待ちしているときに、 別のHTTPリクエストを捌けない
(例),ブラウザでAPIアクセスしている間に、ユーザーがボタンをクリックしても反応がしない
JavaScriptの非同期処理
- JavaScriptはシングルスレッドで実行される(同時に一つのことしか実行ができない)
・普通に書いていると、同時に1つのことしか実行できない(同期処理)
※スレッドとは、CPUの実行単位となっている - 非同期に処理されるAPI(以降、非同期API)を利用することで、非同期処理を実現すできる
JavaScriptでの非同期APIの例
- タイマー
・setTimeout
・setInterval - I/O
・fs.readFile
・fetch
=> コールバックを受け取るものや、Promiseを返すものなど違いがあり、たくさんあるが、利用するときはドキュメントをしっかり見るべし
コールバックの非同期処理
- 非同期APIは、コールバック関数を最後に引数にとり、非同期処理の終了時にコールバックが呼び出される。
・コールバックを登録しておいて、処理完了後に呼び出される(重要) - 昔は非同期処理といえば、コールバックを使うしかなかった。
- コールバック地獄
・コールバックの結果を使おうとすると、ネストが深くなって読みづらくなる。
JavaScriptはシングルスレッドで同時に一つのことしか実行できないのに、なんで[非同期API]というものを呼ぶだけで非同期処理ができる？
- イベントループとは
順次関数はコールスタックに溜まっていく、非同期APIに関したは別の場所にオフロードされます。そこがコールバックと一緒に渡されて行って実行が完了したらコールバックがメッセージキューに溜まります。溜まったキューに関してはイベントループがコールスタックが空になった時に動き出して先頭から一個取り出してコールスタックに貯めてコールスタックが実行される。また、空になったタイミングで次のキューを取り出す。実行していく - 特に重要なのはイベントループが動くようなことをしていない、常にイベントループが動けるような状態にしておかないと、メッセージキューが取り出せないのでそこ注意！！
よくあるつまづきポイント
- なぜか処理が呼び出されなかったり、期待する順番に動作させることがでいない
- いつ非同期処理が必要になるかわからない
- いつawaitをつけるべき？