教材の内容に関係のない質問や教材とは異なる環境・バージョンで進めている場合のエラーなど、教材に関係しない質問は推奨していないため回答できない場合がございます。
その場合、teratailなどの外部サイトを利用して質問することをおすすめします。教材の誤字脱字や追記・改善の要望は「文章の間違いや改善点の指摘」からお願いします。
このパートでは開発を進めるために必要なツールを紹介します。
はじめてテキストエディタやターミナルを使う人はぜひ参考にしてください。
これから紹介するツールは筆者の推奨例です。すでに使い慣れたツールがあれば、読み飛ばしてもかまいません。
※本教材ではMac環境を例にして解説しています。
※使用できるツールをほかに用意してある場合は、この回を読み飛ばしてもかまいません。
プログラミングに必要なテキストエディタを準備します。
テキストエディタとは、テキストファイルを作成・編集・保存するためのソフトウェアです。
本教材では、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
ファイルが表示されます。
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!● PHP Intelephense
→ PHPのコード補完や定義への移動など様々な機能を提供。
● Japanese Language Pack for Visual Studio Code
→ VSCodeを日本語に対応したUIを提供。
● vscode-icons
→ ファイルやフォルダにアイコンを追加。
● Laravel Blade Snippets
→ Bladeテンプレートをシンタックスハイライトに対応するなど様々な機能を提供。
それでは拡張機能を追加します。
次の画像の左にある拡張機能アイコンをクリックしてください。
拡張機能の「MARKETPLACE」が表示されるので、検索バーでインストールする拡張機能を入力して検索します。
まずは「PHP Intelephense」と検索します。
すると次の画像のように「PHP Intelephense」が表示されるのでインストールします。
これで「PHP Intelephense」がインストールできました。
同じ方法で他の拡張機能もインストールしてください。
3つの拡張機能がインストールできたらVSCodeを再起動します。VSCodeが再起動されると拡張機能が使えるようになります。
ターミナルは命令文(コマンド)を入力してMacの操作や設定を行うためのツールです。
ターミナルはMacのデフォルトで用意されているため、新たにインストールする必要はありません。
ターミナルを起動するには、MacのFinderで「アプリケーション」―「ユーティリティ」フォルダを開いて、「ターミナル」をダブルクリックします。
また、Visual Studio Codeにもターミナルはあります。次の動画のようにVisual Studio Codeの画面下部をクリックすればターミナルが表示され、コマンドの実行ができます。
以上でこのパートは終了です。
お疲れ様でした。