コードエディター

どのようなコードエディターが利用できるか

プログラミングを始める前に、Microsoft Wordなどのプログラムでテキスト文書を扱った経験をお持ちの方も多いでしょう。また、こうしたプログラムでコードを扱うことができるのか、と疑問に思っている方もいるかもしれません。残念ながら、その答えは「そうとは言えません」です。

• Microsoft Word のようなプログラムはバイナリーファイルエディターであり、そのファイルには、それらのプログラムでしか理解できない非テキスト形式のデータが含まれています。一方、ウェブサイトのソースコードはプレーンテキストとして格納されます。
• Word ではプレーンテキストファイルを開いて編集することは可能ですが、その扱い方はあまりよくありません。Word にはコードを扱うために設計された一連の機能がありません。Word は、手紙や報告書などの文書を作成するためのものです。プレーンテキストを適切に処理し、コードを扱うことができるように設計されたプログラムが必要です。

おそらく、お使いのコンピューターにはすでにプレーンテキストエディターがインストールされているでしょう。デフォルトで、Windows にはメモ帳が、macOS にはテキストエディットが搭載されています。Linux ディストリビューションによって異なりますが、Ubuntu 22.04 LTS リリースには、デフォルトで GNOME Text Editor が搭載されています。OS に標準搭載されているプレーンテキストエディターでも十分ですが、機能には制限があります。

本格的なコードエディター、例えば Visual Studio Code （マルチプラットフォーム、無料）、Sublime Text（マルチプラットフォーム、無料ではない）、Notepad++（Windows、無料）などを使った方が良いでしょう。

Visual Studio Code (VS Code) は、私たちが最もよく使用しているエディターなので、お勧めします。まだ VS Code（または他のコードエディター）を持っていない場合は、先にインストールしてから進めてください。

基本的なコードエディターの機能

この節では、コードエディターに搭載されている最も重要な機能のいくつかを見ていき、それらがコーディング作業にどのように役立つかを説明します。

ファイルを開いて編集

これは当たり前のことのように思えるかもしれませんが、コードエディターをインストールしておくと、開発作業で必要となるあらゆるコードファイルを単一のアプリで開けるようになるため便利です。コンピューター上のファイルをダブルクリックしたのに、関係のないアプリで開いてしまったり、OS から「そのファイルを認識できません」と指示されたりすることほど、イライラすることはありません。

これは VS Code のインストール時に自動的に行われるはずですが、それでも特定のファイル形式で問題が発生する場合は、そのアプリで開くための設定を手動で行うことができます。これはお使いのオペレーティングシステムによって異なる場合がありますので、探すには、お好みの検索エンジンで「<OS 名とバージョン> でファイル形式を開くためのアプリケーションを選択する」と検索してください。例えば、Windows 11 をお使いの場合は、「Windows 11 でファイル形式を開くためのアプリケーションを選択する」と検索します。

ファイルやフォルダーの開くための方法や編集方法については、次の記事でさらに詳しい情報を見つけることができます。

構文強調表示

VS Code のようなコードエディターには、構文強調表示機能があります。つまり、認識されたコードの特徴が、それぞれ異なる色で表示されます。これにより、コード全体をすべて一色で表示されるよりも、はるかに読みやすくなります。例として、次の JavaScript の関数を見てみましょう。

function createGreeting(name) {
  const greeting = `${name} さん、こんにちは！`;
  return greeting;
}

今のところ、このコードが何をしているのか理解する必要はありませんが、上の例で構文強調表示がどのように表示されるかはすでに見ているでしょう。そうです、MDN でも構文強調表示を提供しています！

それでは、VS Code で練習してみましょう。

1. 上記のサンプルコードをクリップボードにコピーします（MDN のコードブロックには右上にコピーアイコンがあり、これをクリックするとコピーできます）。
2. VS Code を開き、ファイル > 新しいファイル... を選択して新しいファイルを作成します。
3. 新しいファイル内で、言語を選択というテキストをクリックし、表示されるドロップダウンメニューから JavaScript を選択します。
4. コードを新しいファイルに貼り付けて、VS Code の JavaScript 構文強調表示がどのようになるかを確認してください。

VS Code には、それ以外にもさまざまな構文関連の機能があります。例えば次のようなものです。

• function キーワードから閉じ中括弧 (}) に向かって下へ伸びる細い縦線が表示されます。この線は、コード内のさまざまな インデントレベルを示すために使用され、ブロックの開始位置と終了位置を識別しやすくします。
• 同時に、点滅しているテキストカーソルを開き中括弧や閉じ中括弧（{ や }）の上に移動してみてください。どちらも強調表示されます。これもブロックの開始位置と終了位置を特定するのに役立つほか、入れ子になったブロックが多数ある複雑な構造のコードで、文字が 1 つ抜けていないか探す際に便利です。この強調表示は、丸括弧（( および )）や角括弧（[ および ]）などの他の区切り文字でも使用できます。

コードの補間/提案

コードエディターにコードを入力すると、次に何を入力すべきかを提案として示してくれたり、定型コード（常に同じ内容になる標準的なコード）を自動で補完してくれたりすることが多くの場合あります。

さっそく VS Code で試してみましょう。

1. 前回作成した JavaScript ファイルに戻ります。

2. ファイルの一番下まで移動し、Enter/Return キーを数回押して、新しい行になっていることを確認します。

3. "function" を入力し始めると、テキストの右側に選択肢の一覧が現れます。

4. 右側に Function Statement と書かれた選択肢 function を選択します。すると、以下のコードが自動的に入力されます。

   js

   function name(params) {
   
   }
   

5. 関数内の、2 つの中括弧の間にある空白行をクリックします。"document" と入力し始めると、再び選択肢の一覧が指定されます。その中から最初の項目を選択してください。これは Document オブジェクトへの参照です（ここでも、現時点ではその意味について気にする必要はありません）。

6. document の直後にドット (.) を入力してください。再びオプションの一覧が表示されますが、今回は document オブジェクトで利用できるすべてのプロパティとメソッドが含まれています。

ひとまずこれで十分です。次に移動しましょう。

デバッグの補助

コードエディターは、コードの問題をすべて自動的に修正できるわけではありませんが、タイプミスやその他の単純なエラーを見つけるのには確かに役立ちます。いくつか例を見てみましょう。

1. JavaScript ファイルに戻り、現在そこに書かれているコードをすべて削除してください。代わりに、以下のコードを入力してください。

   js

   function createGreeting(name) {
     const greeting = `${Name} さん、こんにちは！`;
     return greeting;
   }
   
   const helloChris = createGreeting("Chris);
   
   console.log(helloChris;
   

2. 上記のコードリストの右側にある小さな十字のアイコンは、MDN が不適切なサンプルコードを示すためのマークであり、その指摘はまさに的を射ています。実際、上記のコードには 3 つのエラーがあります。VS Code のハイライト表示を見て、エラーがどのように強調表示されているか確認してみてください。その後、一緒にエラーを修正していきましょう。

3. 最初のエラーは、1 行目で name を使用するのに対し、2 行目では同じ変数を参照するのに Name を使用する点です。JavaScript は大文字と小文字を区別するため、これらを 2 つの異なる名前として見なしてしまうため、問題となります。VS Code はこのエラーを 2 つの方法で強調表示しています。1 つは、name を濃い灰色で表示して、値が宣言されているものの使用されていないことを示しています（これは、どこかにタイプミスがあることを示す良い指標となることが多くの場合あります）。もう 1 つは、Name の下に 3 つのドットを表示して、コードを改善するための提案があることを示しています（この場合は、「name と書くつもりだったのか」と尋ねています）。このエラーを修正するには、Name を name に変更してください。

   メモ: それぞれのハイライト部分にマウスポインターを当てることで、詳細情報を取得することができます。

4. 2 つ目のエラーは 6 行目で、"Chris と記述している部分です。JavaScript で、テキスト（文字列と呼ばれます）は 2 つの引用符で囲む必要がありますが、2 つ目の引用符が抜けています。VS Code では、エラーがまず検出された箇所（必ずしもエラーが実際に存在する場所とは限りません）のテキストに、Microsoft Word で綴りミスを強調表示する際と同様に、波線状の赤い線の下線を引いて、このエラーを強調表示しています。これを修正するには、"Chris を "Chris" に変更してください。

5. 最後の行では、前回のエラーを修正した後も、行の終わり付近に赤い波線の下線がわずかに残っています。これは 3 つ目のエラーが原因です。JavaScript で、開き括弧には常に閉じ括弧が必要です。これを修正するには、(helloChris を (helloChris) に変更してください。

検索と置換

優れたコードエディターには、いずれも強力な検索・置換機能が備わっています。これは、例えば特定の関数でエラーが発生していることが判明し、コード内でその場所を見つけたい場合や、変数の名前を変更することにして、その変数を参照しているすべての場所で確実に変更されるようにしたい場合などに役立ちます。

これまでにコンピューターを使用したことがある方なら、検索と置換という概念は比較的馴染み深いものだと思いますが、念のため軽く説明しておきましょう。

1. VS Code で JavaScript ファイルに戻り、メニューから 編集 > 検索 を選択して、検索モードの「検索と置換」パネルを開きます。
2. 検索 ボックスに createGreeting と入力します。すると、両方の出現箇所がハイライト表示され、パネル内の上下矢印キーを使ってそれらの間を移動可能になります。現在アクティブにハイライトされている箇所は、より明るい色で強調表示されます。
3. これで、メニューから_編集_ > 置換 を選べます。また、検索 ボックスの左側にある矢印をクリックして、置換モードの「検索と置換」パネルを開きます。
4. 表示されている_置換_ボックスに sayHello を入力してください。これで 置換 ボックスが表示されます。
5. _置換_ボックスの右側にある 2 つのボタンを使用して、コード内の createGreeting をすべて sayHello に置き換えることができます。左のボタンを 1 回クリックすると、検索文字列の次の出現箇所に移動し、2 回クリックするとその箇所が置換されます。右のボタンを 1 回クリックすると、すべての出現箇所が一度に置換されます。

VS Code には、多くの強力な検索と置換機能があります。詳しくは検索と置換をご覧ください。

拡張機能でコードエディターを強化

ほとんどのコードエディターには、デフォルトでは利用できない機能をプログラムに追加することができる拡張機能やプラグのシステムが備わっています。これらは、次のようなさまざまなタスクを実行できます。

• デフォルトで対応していない言語に対して、コード補完、リンティング、デバッグ機能などを有効にしたり、対応している言語に対して追加機能を提供したりします。
• バージョン管理ツールやローカルテストサーバーなど、他のツールの機能をコードエディター内から直接利用できるようにします。
• 追加のユーザーインターフェイスや、コードの強調表示用テーマ／配色を提供します。
• 要件を満足するコードスニペットを提案として提供します。これらは静的テンプレートから生成することも、AI ツールを介して生成することも可能。AI をコードスニペットの生成に使用すると、検索結果を生成する場合と同様の利点や注意点が多くあります（詳細については、情報の検索 > AI の活用を参照してください）。

VS Code 拡張機能の探索

VS Code の拡張機能は、VS Code の 表示 ＞ 拡張機能 メニューからアクセスできる「拡張機能マーケットプレイス」パネルで管理されます。これで、見ていきましょう。

1. 「拡張機能マーケットプレイス」パネルを開きます。
2. パネル上部の 検索... ボックスに "JavaScript" と入力し、JavaScript 関連の拡張機能がどのようなものがあるか確認します。現れた検索結果の中からいくつかクリックして、それぞれの機能を確認してみてください。現時点では、どの拡張機能もインストールしないでください。
3. その代わりに、理解しやすく、この一連のモジュールで扱うほぼすべてのコードファイルに有益な拡張機能をインストールしましょう。検索... ボックスに "Prettier" と入力し、検索結果の Prettier - code formatter をクリックしてください。Prettier 拡張機能がインストールされると、ファイルを保存するたびにコードの書式化が行われ、その結果、コードがはるかに読みやすくなります。そのため、ファイルを保存するたびにコードの書式化を使用することができます。
4. 拡張機能 タブにある インストール ボタンをクリックします。インストールが完了したら、そのタブを閉じます。
5. Prettier が動作するようには、いくつかの設定を更新する必要があります。VS Code の [設定] タブを開きます（macOS の場合は Code > Settings... > Settings、Windows の場合は ファイル > ユーザー設定 > 設定）。
6. 上部の 検索設定 ボックスに "formatter" と入力すると、設定リストが絞り込まれ、 "formatter" が含まれている設定のみが表示されます。
7. Editor: Default Formatter オプションを探し、関連付けられたドロップダウンから Prettier - Code formatter オプションを選択してください。
8. Editor: Format On Save オプションを探し、そのチェックボックスをクリックして有効にしてください。
9. 設定 タブを閉じます。

それだけです。それでは、Prettier が実際にどのように動作するか見てみましょう。

1. JavaScript ファイルのタブに戻り、ファイルを保存します（ファイル > 保存）。Prettier が機能するには、ファイルを保存する必要があります。ファイル名は test.js にしてください。保存する場所は特に問いません。

2. 現在の内容を以下のコードに置き換えてください。

   js

   function sayHello(name){const greeting = `Hello, ${name}!`;
   return greeting;}
   

3. ファイルをもう一度保存してください。Prettier がこのように、コードをきれいに整形し直してくれるはずです。

   js

   function sayHello(name) {
     const greeting = `Hello, ${name}!`;
     return greeting;
   }
   

• 前のページ
• Overview: 環境設定
• 次のページ