モダンJavascript 基本概念

モダンなJavascriptでよく引き合いに出される用語や概念をまとめました。
【最新ver対応済】モダンJavaScriptの基礎から始める挫折しないためのReact入門で視聴したことを軽くメモしただけになっているので、近いうちに自分で調べたことをかみ砕いて補足するようにしたいです。

Javascriptってなに？

• もともとはHTML + CSSに動きを付けるために作られた言語

初学者にJSがおすすめの理由

• ブラウザ上で動くためとりあえず動かすだけなら開発環境の構築が不要
• モダンJSは技術の移り変わりが早い→比較的ブルーオーシャン
  (※ずっと勉強し続ける必要はあるが)
• Webシステムでは必ずJSを使う→大体のシステムで応用が利く
• バックエンドでアプリ開発もできる

モダンJSとは

• 仮想DOMを用いるライブラリ、フレーム
• npm yarn などのパッケージを用いる
• E16の記法を用いる
• モジュールハンドラーを使用
• トランパイラを使用

仮想DOM

• DOM操作をいきなり行わず、JS上で仮想DOMを操作し、差分を出してから実際のDOMに反映する技術
• 開発者は仮想DOMを意識しなくても良い

パッケージマネージャとは

パッケージファイル採用前

• プロジェクトの依存関係を管理するシステムのこと。
• パッケージマネージャを使用する前じゃ、すべて1つのJSにまとめていた。→共通化皆無。開発コストがかかる
  • →大きなまとまりごとにJSファイルを作成し、それを組み合わせる
    • コードの再利用や共通化ができるようになった
    • 依存関係が分かりにくくなった
    • 何をどこから読み込んだのか不明
  • npm, yarn →Node.jsが動いてくれる→依存関係を勝手に解決してくれるように。

npm, yarnの基本

1. NPM(様々なパッケージが保存・公開されているプラットフォームのこと。)から開発に必要なパッケージをインストールする(npm install)
2. package.json(パッケージの設計書)に何をどのバージョンでインストールするかの情報が記録される
3. 2.と同時にpackage-lock.jsonまたはyarn.lockが生成され、インストールしたモジュールが裏で使用しているほかのモジュールに関する情報が記録される(※手動で上書きとかしない)
4. nodeModulesに実際にモジュールがインストールされる(※ファイルが大きいのでGithubに上げない)

ECMAScript

• JSの標準規格(こういう決まりでJSを書きましょう)。毎年更新される
• ES2015(ES6)で新機能が多く追加された

ES6の追加点

• 変数宣言
• アロー関数
• クラス構文
• テンプレート文字列
• スプレッド構文
• 非同期処理
  など

モジュールバンドラー

• 複数のJSファイルを一つにまとめてくれる機能
  • 開発時は細かく分けて開発したい(開発効率)
  • 本番環境での実行時は分かれている必要がない、パフォーマンスに影響する
  • →本番環境様にビルドするときに、依存関係の解決もしつつ1つのファイルにまとめるようにしよう！
    ex Webpack

トランスパイラ

• JSの新しい記法を古い記法に変換してくれる機能
• ES6の機能追加などに対応しきれていないブラウザ(IEとか)で新しい記法を使ったファイルを実行できるように
  ex BABEL, SWC(Next.jsはSWCを内部で使用している)

SPA

Single Page Application

• 画面に動きが生じたときに、JSでサイトの一部を表現する
• 従来のWebシステムは、リクエストに応じたHTMLを探す
• SPAは遷移先の画面表示のために必要なデータだけ受け取り、受け取ったデータをJSで動かして画面を構築して見せる
• 画面遷移ごとのちらつきがなくなる
• 表示速度が上がる
• コンポーネント分割が容易になり開発効率が上がる

参考

【最新ver対応済】モダンJavaScriptの基礎から始める挫折しないためのReact入門