教材の内容に関係のない質問や教材とは異なる環境・バージョンで進めている場合のエラーなど、教材に関係しない質問は推奨していないため回答できない場合がございます。
その場合、teratailなどの外部サイトを利用して質問することをおすすめします。教材の誤字脱字や追記・改善の要望は「文章の間違いや改善点の指摘」からお願いします。
ここではmacOSで開発を進めるために必要なツールを紹介します。
はじめてテキストエディタやターミナルを使う人はぜひ参考にしてください。
これから紹介するツールは筆者の推奨例です。すでに使い慣れたツールがあれば、読み飛ばしてもかまいません。
プログラミングに必要なテキストエディタを準備します。
テキストエディタとは、テキストファイルを作成・編集・保存するためのソフトウェアです。
本教材では、Microsoftが開発した無償利用ができるテキストエディタのVisual Studio Codeを使って解説を行います。
(Visual Studio Codeは「VSCode」と通称され、本教材中でも「VSCode」と表記します)
Visual Studio Codeのインストール方法を説明します。
最初に、次のリンク先のページから「Visual Studio Code」をダウンロードしてください。
【Visual Studio Codeのダウンロードページ】
ダウンロードが完了したら、ダウンロードしたファイルを展開し、Visual Studio Codeのファイルを「アプリケーション」フォルダに移動します。
ファイルの移動方法はさまざまですが、次の動画ではFinderを2つ開いてドラッグ&ドロップで移動しています。
(Finderを開いた状態でcommand
+ N
キーを押せば、さらにFinderを開くことができます)
「アプリケーション」フォルダに移動したら、Visual Studio Codeアイコンをクリックしてください。
Visual Studio Codeが起動して、次の画面が表示されたらインストールの完了です。
Visual Studio Codeはデフォルト設定でも利用できますが、ここでは扱いやすいように次のカスタマイズを行います(各自の好みで設定しても問題はありません)。
設定をはじめるには、Command
+ ,
キーを押すか、画面左下の歯車アイコンをクリックして設定画面を開きます。
設定ファイルに直接書き込みができるsettings.jsonモードにします。
検索ボックスに「settings.json
」と入力してEnter
キーを押すと、「Edit in settings.json」というリンクが表示されます。
「Edit in settings.json」リンクをクリックすると、次の画面のようなsettings.json
ファイルが表示されます。
settings.json
ファイルに以下のコードをコピーします(内容を理解する必要はありません)。
json123456789101112131415161718 Copied!{
// 差分を横に並べて表示せずに、行内に表示する
"diffEditor.renderSideBySide": false,
// ファイル保存時に自動フォーマットする
"editor.formatOnSave": true,
// 現在の行を強調表示する
"editor.renderLineHighlight": "all",
// 空白文字を表示する
"editor.renderWhitespace": "all",
// スペース2個分のインデント
"editor.tabSize": 2,
// ウィンドウ幅右端で折り返す
"editor.wordWrap": "on",
// ファイル保存時に新しい行を末尾に挿入する
"files.insertFinalNewline": true,
// アイコンテーマの指定
"workbench.iconTheme": "vscode-icons"
}
このコードをコピー&ペーストしたら、settings.json
ファイルを上書きして保存します。
(command
+ S
キーを押して上書き保存ができます)
次の画面のように、空白文字に「・・・・」が表示されるとカスタマイズは完了です。
Visual Studio Codeで開発しやすくするため、さらに拡張機能を追加します。
追加する拡張機能は次の3つです。
Copied!● Japanese Language Pack for Visual Studio Code
→ 日本語対応のVSCodeのUIを提供する。
● vscode-icons
→ ファイルやフォルダにアイコンを追加する。
● Live Server
→ 画面の右下にGo Liveという選択肢が表示され、クリックすることでローカルサーバーが立ち上がり、ブラウザでHTMLが表示されます。
● Live HTML Previewer
→ 右クリックで表示されるメニュー内に「Open in browser」が追加され、これをクリックすることで、HTMLファイルのプレビューがブラウザ上で表示されます。
● Auto Rename Tag
→ 開始タグ、終了タグどちらか一方を変更した際に、対になるもう一方の開始タグ・終了タグも同時に変更する。
● Auto Close Tag
→ 開始タグを記述した際に、対になる終了タグも自動で記述する。
それでは拡張機能を追加します。
次の画像の左にある拡張機能アイコンをクリックしてください。
拡張機能の「MARKETPLACE」が表示されるので、検索バーでインストールする拡張機能を入力して検索します。
まずは「Japanese Language Pack」と検索します。
すると次の画像のように「Japanese Language Pack for Visual Studio Code」のプラグインが表示されるので、選択してインストールします。
これでJapanese Language Pack for Visual Studio Codeがインストールできました。
同じ方法で、「vscode-icons」、「Auto Rename Tag」、「Auto Close Tag」を検索して、それぞれインストールをしてください。
拡張機能のインストールができたら、VSCodeを再起動します。VSCodeが再起動されると拡張機能が使えるようになります。
以上でこのパートは終了です。
お疲れ様でした。