目次
JavaScriptの概要
JavaScriptは、Webブラウザで動作するプログラミング言語で、HTMLやCSSと組み合わせて使われます。
ユーザーの操作に応じてページ内容を動的に変えたり、アニメーションや入力チェックを行えます。
近年はNode.jsなどにより、サーバーサイドやアプリ開発など幅広い分野でも利用されています。
JavaScriptの特徴
特に5つ挙げるとすれば
| Webブラウザで直接動作する | 特別なソフトをインストールしなくても、ほとんどのブラウザ（Chrome, Edge, Firefox, Safari など）で動作します。 |
| 動的でインタラクティブなページを作れる | HTMLやCSSと組み合わせて、ユーザーの操作に応じて内容を変えたり、アニメーションをつけたりできます。 |
| インタープリタ型で即実行可能 | コンパイルが不要で、ブラウザがそのままJavaScriptを解釈して実行します。修正したらすぐ反映できるのが強みです。 |
| オブジェクト指向・関数型の両方をサポート | クラスやオブジェクトを使ったオブジェクト指向もでき、関数を中心に書く関数型のスタイルでも使えます。柔軟性が高い言語です。 |
| 利用範囲が広い | もともとはWebページ用でしたが、今ではNode.jsを使ってサーバーサイド開発、スマホアプリ、デスクトップアプリ、ゲーム開発などにも利用できます。 |
JavaScriptの仕様は誰が決定するのか
Ecma Internationalという国際的な団体によってECMAScriptとして標準化されます。
メンバーにはGoogleやMicrosoft他入っています。
https://www.ecma-international.org/
https://www.ecma-international.org/about-ecma/members/
JavaScriptの動作の仕組み
画面に表示されるまでの流れ
| 1 | HTML/CSS読み込み → DOM/CSSOM構築 |
| 2 | JavaScriptエンジンがコードを実行 |
| 3 | イベントループで非同期処理を制御 |
| 4 | レンダリングエンジンが変更を描画 |
| 5 | ユーザーに表示（インタラクティブな画面） |
JavaScriptエンジンとは
| 説明 | JavaScriptのコードを解釈・実行する仕組み |
| 例 | V8（Google Chrome, Node.js） SpiderMonkey（Firefox） JavaScriptCore（Safari） |
| 主な役割 | JavaScriptをコンピュータが理解できる命令に変換する 処理を実行する（計算、DOM操作、イベント処理など） |
レンダリングエンジンとはとは
| 説明 | HTML, CSS, JavaScriptから画面に表示されるページを描画する仕組み |
| 例 | Blink（Chrome, Edge） Gecko（Firefox） WebKit（Safari） |
| 主な役割 | HTMLを解析してDOMツリーを作成 CSSを解析してスタイルを適用 レイアウトを計算して、ピクセル単位で画面に描画 |
JavaScriptのサンプルコード
Javaのサンプルコードです。実行すると「hello world」と表示されます。
<script>
alert("hello world");
</script>
alert命令で文字列を表示します。
JavaScriptでよく使われるライブラリ
| 名前 | 種類 | 主な用途・特徴 |
|---|---|---|
| jQuery | DOM操作・イベント処理 | 簡単な記述でDOM操作やAjax通信を実現。古いブラウザ対応に強い |
| D3.js | データ可視化 | データをSVGやCanvasでグラフ・図表として表現 |
| Chart.js | データ可視化 | 手軽に円グラフ・棒グラフ・折れ線グラフを描画 |
| Three.js | 3D描画 | WebGLを簡単に扱い、3Dコンテンツやゲームを作成 |
| Lodash | ユーティリティ | 配列・オブジェクト操作の便利関数を多数提供 |
| Axios | 通信 | HTTPリクエストをシンプルに実行できる |
JavaScriptでよく使われるフレームワーク
| 名前 | 種類 | 主な用途・特徴 |
|---|---|---|
| React | UIライブラリ寄り | コンポーネント指向で大規模開発に強い（Facebook製） |
| Vue.js | フロントエンドFW | シンプルで学習しやすく、日本でも人気 |
| Angular | フロントエンドFW | 大規模開発向け、Google製。TypeScript前提 |
| Next.js | ReactベースFW | サーバーサイドレンダリング（SSR）、静的サイト生成（SSG）に対応 |
| Nuxt.js | VueベースFW | Next.jsのVue版。SSRやSSGに強い |
| Express.js | サーバーサイドFW | Node.jsで動く軽量なWebアプリ開発フレームワーク |
| NestJS | サーバーサイドFW | TypeScriptで構築された構造的なサーバーサイドFW |
関連の記事