JavaScript

JavaScriptは、開くメニュー、入力を確認するフォーム、ページを再読み込みせずに更新される内容など、Webページに動きを加えるために使われます。JavaScriptはNode.jsを通じてサーバーでも動き、多くのモバイルアプリやデスクトップアプリも支えています。最新のブラウザはどれも、標準でJavaScriptを実行できます。

JavaScriptとJavaは、名前の一部が同じだけの、まったく別のプログラミング言語です。JavaScriptは主にブラウザで動く動的型付けの言語で、Javaは静的型付けでJava仮想マシン用のバイトコードにコンパイルされる言語です。名前が似ているのは、1990年代のマーケティング上の判断によるものです。

DOM（Document Object Model）とは、JavaScriptがページを読み書きできるよう、ブラウザがHTMLページから作るオブジェクトのツリーです。DOMを通じて、JavaScriptは要素を探し、テキストを変え、クラスを追加し、新しい要素を作れます。スクリプトがページに加える目に見える変更は、すべてDOMを通じて行われます。

HTMLページにJavaScriptを追加するには、scriptタグの中に直接コードを書くか、src属性で別のJavaScriptファイルを指定します。scriptタグをbodyの最後に置くか、defer属性を付ければ、HTMLを先に読み込ませられます。別ファイルに分けたJavaScriptは、キャッシュしやすく保守もしやすくなります。

JavaScriptでは、letとconstはブロックスコープで、varは関数スコープかつ再宣言が可能です。constの変数には再代入できませんが、constに入れたオブジェクトの中身は変更できます。現代のJavaScriptでは基本的にconstを使い、値を変える必要があるときだけletを使い、varは避けます。

JavaScriptのイベントとは、クリック、キー入力、フォームの送信、ページの読み込み完了など、何かが起きたときにブラウザが送る合図です。スクリプトは、addEventListenerでリスナー関数を登録してイベントに応答します。イベントリスナーこそが、JavaScriptでページをユーザーの操作に反応させる仕組みです。

JavaScriptのイベントデリゲーションとは、子要素ごとにイベントリスナーを付ける代わりに、親要素に一つだけリスナーを付ける方法です。リスナーはイベントのターゲットを調べて、どの子要素がクリックされたかを判断します。イベントデリゲーションはメモリの使用量が少なく、後からページに追加された要素にも効きます。

JavaScriptでは、fetch関数でAPIにデータを要求し、レスポンスのjsonメソッドで本文を読み取ります。fetch関数はPromiseを返すため、通常はasyncとawaitで結果を待ちます。レスポンスのステータスを確認してエラーを捕捉しておけば、ネットワークが失敗してもページは動き続けます。

JavaScriptのPromiseとは、ネットワークリクエストの結果など、後で用意される値を表すオブジェクトです。Promiseの状態は、待機中、成功、失敗のいずれかです。コードはthenとcatch、またはasyncとawaitを使って、その結果に応じた処理を行います。

asyncとawaitを使うと、JavaScriptのコードは、通常の順番どおりのコードのように読める形でPromiseの完了を待てます。asyncを付けた関数は必ずPromiseを返し、awaitはPromiseが決着するまでその関数を一時停止します。async関数の中のエラーは、通常のtryとcatchのブロックで処理できます。

ES6はECMAScript 2015とも呼ばれ、2015年に行われたJavaScriptの言語仕様の大規模な更新です。ES6では、letとconst、アロー関数、クラス、テンプレートリテラル、分割代入、モジュール、Promiseが追加されました。最新のブラウザはすべてES6に対応しており、それ以降も毎年新しい機能が追加されています。

JavaScriptのアロー関数とは、=>の記法を使って関数を短く書く方法です。アロー関数は自分自身のthisを持たないため、thisは周囲のコードの値をそのまま引き継ぎます。アロー関数は、mapやfilterに渡すような短いコールバックによく使われます。

JSON（JavaScript Object Notation）とは、データをキーと値の組で保存し、やり取りするためのテキスト形式です。JavaScriptでは、JSON.stringifyでオブジェクトをJSONテキストに変換し、JSON.parseでJSONテキストをオブジェクトに戻します。ほとんどのWeb APIは、JSONでデータを送受信します。

ブラウザとテキストエディターさえあれば始められるため、JavaScriptは初心者でも気軽に始められます。難しくなるのは、非同期処理、スコープ、言語を取り巻く多くのツールなど、少し先の段階です。多くの学習者は、数週間の継続した練習で役に立つ動きのあるページを作れるようになります。

はい、ReactやVueの前に素のJavaScriptを学んでおくと、どちらのフレームワークもずっと理解しやすくなります。どちらも、関数、配列、オブジェクト、モジュール、Promiseといった基本的なJavaScriptの機能の上に作られています。基本を知っている開発者なら、当て推量ではなく、フレームワークのコードをきちんとデバッグできます。

TypeScriptはJavaScriptに静的な型を加えたもので、Microsoftが開発し、素のJavaScriptにコンパイルされます。型があることで、コードを実行する前にエディターが多くのミスを見つけてくれます。TypeScriptは、多くの開発者が同じコードを共有する大規模なプロジェクトで人気があります。

送るJavaScriptの量を減らし、deferやasyncでスクリプトを読み込み、大きなバンドルを分割して各ページに必要なものだけを読み込めば、JavaScriptを使ったページは速くなります。ファイルを圧縮、縮小すれば、ダウンロードのサイズも小さくなります。重い処理をメインスレッドから外せば、ページはクリックや入力にすぐ反応し続けます。

JavaScriptでは、===は値と型の両方を比較し、==は比較の前に型を変換します。たとえば 0 == "0" はtrueですが、0 === "0" はfalseになります。===を使えば予想外の結果を避けられるため、現代のJavaScriptでは===を使うのが一般的なルールです。

JavaScriptのモジュールとは、関数や値をexportし、必要なものをほかのファイルからimportする、独立したファイルです。モジュールを使うとコードが整理され、グローバル変数を避けられ、大規模なプロジェクトも保守しやすくなります。ブラウザでは、type属性をmoduleにしたscriptタグでモジュールを読み込みます。

ブラウザでJavaScriptをデバッグするには、F12キー、またはページを右クリックして「検証」を選んで開く開発者ツールを使います。Consoleにはエラーや出力した値が表示され、Sourcesパネルではブレークポイントを設定してコードを一行ずつ実行できます。Networkパネルには、ページが送るすべてのリクエストとそれぞれのレスポンスが表示されます。

イベントループとは、シングルスレッドのJavaScriptが固まらずに多くの処理をこなせるようにする仕組みです。タイマーやネットワークリクエストなどの時間のかかる処理はバックグラウンドで待機し、コールスタックが空になるとイベントループが完了したコールバックを一つずつ実行します。それでも長時間動くコードはイベントループを止めてしまうため、重いループがあるとページが反応しなくなります。

はい、JavaScriptはNode.js、Deno、Bunなどのランタイムを通じてサーバーで動きます。サーバー側のJavaScriptでは、APIを作り、ファイルを読み、データベースに接続できます。ブラウザとサーバーで同じ言語を使えば、チームはコードとスキルを共有できます。

信頼できないテキストをinnerHTMLでページに挿入しないこと、すべての入力をサーバーで改めて検証すること、秘密の情報をフロントエンドのコードに置かないことで、JavaScriptのコードを安全に保てます。APIキーを含め、ブラウザに送られたものはすべてユーザーに読まれる可能性があります。Content Security Policyと最新の依存パッケージで、よくある攻撃の多くを防げます。

JavaScriptでは、localStorageはデータをブラウザの中だけに保存し、Cookieはリクエストのたびにサーバーへ送られます。localStorageはより多くのデータを保存でき、選んだテーマのような設定に向いています。ログインのセッションには、スクリプトから読めないHttpOnlyとSecureを付けたCookieのほうが安全です。

小さな関数、わかりやすい名前、モジュール、統一された書式、そしてESLintなどのリンターを使えば、保守しやすいJavaScriptのコードを書けます。グローバル変数を避け、DOMを変更するコードとデータを扱うコードを分けておきましょう。自動テストがあれば、後からの変更も安全に行えます。