こんにちは、Reiです。
最近のJavaScript開発では、
モダンJavaScript という言葉をよく耳にします。
ReactやVueなどのフレームワークを学び始めると、
・npm
・ES6
・Vite
・SPA
など、さまざまな用語が登場します。
最初は少し難しく感じるかもしれません。
でも実はこれらはすべて、
現代のJavaScript開発がどのように行われているか を説明するための仕組みです。
今回は、モダンJavaScriptとは何か というテーマで、
現在のWebアプリがどのような仕組みで作られているのかを整理していきましょう！
モダンJavaScriptとは？
モダンJavaScriptとは、
JavaScriptの最新仕様と開発ツールを組み合わせた現代的な開発スタイル
のことを指します。
昔のJavaScriptは、
1つのHTMLファイルの中にJavaScriptを書いて動かすことが一般的でした。
しかし現在のWebアプリは、
・多くの機能
・大量のコード
・複雑な画面更新
を扱う必要があります。
そのため、JavaScriptは
仕様の進化 と 開発ツールの進化によって、
より大規模なアプリを作れる環境へと変化しました。
これが、モダンJavaScript開発 と呼ばれるスタイルです。
JavaScriptの進化「ES2015」
JavaScriptには
正式な仕様があります。
その仕様の名前が ECMAScript です。
そして2015年、JavaScriptは大きな進化を迎えました。
それがES2015（ES6）と呼ばれるアップデートです。
このアップデートで、
現在のJavaScript開発で当たり前に使われている
多くの機能が追加されました。
代表的な機能
let / const
let count = 0;
const name = "React";
変数をより安全に扱えるようになりました。
アロー関数
const add = (a, b) => a + b;
関数を短くシンプルに書くことができるようになりました。
テンプレート文字列
const message = `こんにちは ${name}`;
文字列の中に変数を埋め込めるようになりました。
ES2015以降、JavaScriptは毎年アップデートが続いており、
現在のJavaScript開発は
この新しい仕様を前提にしている と言えます。
ファイルを分けて管理する「モジュール」
モダンJavaScriptでは、
コードを 複数のファイルに分けて管理する のが一般的です。
この仕組みを モジュール と呼びます。
JavaScriptでは、
export const add = (a, b) => a + b;
のようにして機能を外に公開し、
別のファイルでは
import { add } from "./math.js";
のようにして読み込むことができます。
この仕組みによって、
コードを機能ごとに整理しながら
開発できるようになります。
ライブラリを管理する「npm」
現在のJavaScript開発では、
すべての機能を自分で作ることはほとんどありません。
代わりに、
世界中の開発者が作ったライブラリ を組み合わせてアプリを作ります。
そのライブラリを管理する仕組みが
パッケージマネージャー です。
代表的なものが npm です。
npmは、JavaScriptのライブラリを
インターネットからダウンロードして管理するためのツールです。
必要な機能をコマンド一つで追加できるため、
開発者はすべての機能を自分で作る必要がなくなります。
例えば、
npm install react
と書くだけで、
Reactというライブラリをプロジェクトに追加できます。
npmを使うことで、開発者は 必要な機能を組み合わせながら
効率よくアプリを作れる ようになりました。
開発を支えるビルドツール
モダンJavaScriptでは、
開発時のコードとブラウザで実行するコードを 分けて考える ことが一般的です。
開発中は、
・読みやすい
・管理しやすい
コードを書くことが重要になります。
一方、公開するときは、
・ブラウザが読み込みやすい
・実行速度が速い
コードにする必要があります。
公開時にブラウザが実行しやすい形に
自動で変換を行うのが ビルドツール です。
ビルドツールには、さまざまな役割があります。
代表的なものとして、「モジュールバンドラー」と「トランスパイラ」があります。
モジュールバンドラー
モジュールバンドラーは、
分かれているJavaScriptファイルを まとめたり分割したりするツール です。
JavaScriptを複数のファイルに分けて開発すると、
ブラウザがそれぞれのファイルを読み込む必要があります。
ファイル数が多いと読み込み回数が増え、ページ表示が遅くなることがあります。
モジュールバンドラーは、これらのファイルを最適な形にまとめることで
アプリの読み込み速度を改善します。
代表的なツール例
・Vite
・Webpack
トランスパイラ
トランスパイラは、
最新のJavaScriptコードを古いブラウザでも動くコードに変換するツール です。
JavaScriptは新しい機能が次々に追加されていますが、
古いブラウザではそれらの機能が動かないことがあります。
トランスパイラを使うことで、
新しい書き方のコードを古いブラウザでも動く形に変換できます。
もし変換を行わない場合、
ユーザーのブラウザによってはアプリが正常に動かない可能性があり、
画面が表示されなかったり、JavaScriptエラーが発生して機能が動かなくなることがあります。
代表的なツール
・Babel
・SWC
モダンWebアプリの形「SPA」
モダンJavaScript開発では、
SPA（Single Page Application）
という形のアプリが多くなっています。
SPA（Single Page Application）とは、
1つのWebページの中で画面を切り替えながら動作するWebアプリの仕組みです。
SPAでは、最初に 1つのHTMLページ を読み込み、
その後は、JavaScriptがデータを取得しながら
必要な部分だけ画面を更新していきます。
例えば、
・一覧データを表示する
・ボタンを押して内容を切り替える
・フォームの入力結果を反映する
といった操作のときも、
ページ全体を作り直すのではなく、一部だけを書き換えることで画面を更新します。
そのため、ボタン操作や画面切り替えが
待ち時間の少ないスムーズな動きで表示されるのが特徴です。
ReactやVueなどのフレームワークは、
このSPAを作るためによく使われるJavaScriptツールです。
まとめ
ここまで、モダンJavaScript開発の仕組み を整理してきました。
＼＼ 今回のまとめ ／／
・ モダンJavaScriptは現代のJavaScript開発スタイル
・ ES2015でJavaScriptは大きく進化した
・ モジュールでコードをファイル分割できる
・ npmでライブラリを管理する
・ ビルドツールがコードを最適化する
・ SPAは1ページで動くWebアプリ
モダンJavaScriptは、
最初はたくさんの用語が出てきて少し難しく感じるかもしれません。＜用語なのかな？変えた方が良さそう＞
でも、それぞれの役割を理解すると、
現在のWebアプリがどのように作られているのか が少しずつ見えてきます。
ReactやVueなどのフレームワークも、こうした仕組みの上で動いています。
これからコードを書きながら、
モダンJavaScriptの開発スタイルに
少しずつ慣れていきましょう！
コメント