Kodokon kodokon.com

コードエディタを入れて設定する

自分に合ったエディタを選んで導入し、すべてを変えるいくつかの設定を適用しましょう。

6 分 · 3 問

このレッスンを Kodokon で開く

コードはテキストなのですから、技術的にはメモ帳でも用は足ります。けれども実際には、コードエディタを使えば時間が大きく節約でき、何十もの間違いを避けられます。これは内輪の人だけが使うプロ向けの道具ではありません。むしろ、まだ目が慣れていない初心者のうちこそ、いちばん役に立ちます。自分では気づけない取りこぼしを教えてくれるからです。

四つの機能だけでも、導入する価値は十分あります。シンタックスハイライトは、キーワード、テキスト、数値を違う色で表示します。閉じ忘れたテキストがあれば、たちまち目に飛び込んできます。自動インデントはコードの行をそろえ、構造を読みやすいまま保ちます。自動補完は打っている途中で続きを提案してくれるので、打ち間違いがなくなります。そしてエラーの下線は、プログラムを動かす前から問題を浮かび上がらせます。

どれを選べばよいでしょうか。始めるならVisual Studio Code、よくVS Codeと略されるものにしましょう。無料で、Windows、macOS、Linuxで動き、そして圧倒的によく使われています。あなたが読むチュートリアルは、まずこれを前提にしています。ダウンロードは公式サイトの code.visualstudio.com からだけにしてください。ほかがよければ選択肢は二つ、ZedSublime Textで、どちらももっと軽量です。ただし三日もかけて比べないこと。エディタは道具にすぎませんし、あとからいくらでも乗り換えられます。

インストールに驚くところはありません。ファイルをダウンロードして実行し、初期状態の選択肢をそのまま受け入れます。Windowsでは、右クリックメニューに「Codeで開く」を追加するかどうかのチェックボックスが出てきます。これはチェックを入れておきましょう。本当に便利です。初回起動時には、明るいテーマか暗いテーマかを選ぶよう言われます。目が疲れない方を選んでください。それ以外に影響はありません。

このレッスンでいちばん大切な習慣がこれです。必ずフォルダを開くこと。ファイル単体を開かないことファイルからフォルダーを開くを選び、プロジェクトのフォルダを指定します。するとエディタは横のパネルに階層構造をまるごと表示し、すべてのファイルを横断して検索でき、ファイル同士のつながりも理解できるようになります。ファイル一つだけを開くのは、本から破り取った一ページを読むようなものです。

JSON
{
  "files.encoding": "utf8",
  "files.eol": "\n",
  "files.autoSave": "afterDelay",
  "editor.tabSize": 2,
  "editor.renderWhitespace": "boundary"
}
おすすめのVS Codeの設定。UTF-8、LFの改行コード、そして2スペースのインデントです。

理解度チェック

このレッスンの要点をしっかり覚えているか確認しましょう。

  1. シンタックスハイライトが初心者の役に立つのはなぜですか?
    • 閉じ忘れたテキストなど、間違いが目に見えるようになるから
    • プログラムの実行が速くなるから
    • ファイルを自動的に保存してくれるから
    • コードを日本語に翻訳してくれるから
  2. プロジェクトの作業をするとき、エディタでは何を開くべきですか?
    • プロジェクトのフォルダ全体
    • 一度に一つのファイルだけ
    • ディスク全体
  3. はじめのうち、拡張機能とはどう付き合うのがよいですか?
    • 一つも入れず、必要が出てきてから追加する
    • 最初から人気の高い二十個を入れておく
    • 見落としがないよう全部入れる