カテゴリー
サインイン 新規登録

間違いや改善の指摘

内容の技術的な誤り・誤字脱字やミスのご報告・解説やトピックの追記/改善のご要望は教材をさらに良くしていく上でとても貴重なご意見になります。

少しでも気になった点があれば、ご遠慮なく投稿いただけると幸いです🙏

実際には誤りではなく勘違いであっても、ご報告いただけることで教材のブラッシュアップにつながります。

質問ポリシー①

教材受講者みなさんのスムーズな問題解決のために、心がけていただきたいことがあります。

教材の内容に関する質問を投稿しましょう

教材の内容に関係のない質問や教材とは異なる環境・バージョンで進めている場合のエラーなど、教材に関係しない質問は推奨していないため回答できない場合がございます。

その場合、teratailなどの外部サイトを利用して質問することをおすすめします。教材の誤字脱字や追記・改善の要望は「文章の間違いや改善点の指摘」からお願いします。

1-1

開発を進める上で必要なツール(macOS)

このパートでは開発を進めるために必要なツールを紹介します。

はじめてテキストエディタやターミナルを使う人はぜひ参考にしてください。

これから紹介するツールは筆者の推奨例です。すでに使い慣れたツールがあれば、読み飛ばしてもかまいません。

※本教材ではMac環境を例にして解説しています。

※使用できるツールをほかに用意してある場合は、この回を読み飛ばしてもかまいません。

テキストエディタ

プログラミングに必要なテキストエディタを準備します。

テキストエディタとは、テキストファイルを作成・編集・保存するためのソフトウェアです。

本教材では、Microsoftが開発した無償利用ができるテキストエディタのVisual Studio Codeを使って解説を行います。

(Visual Studio Codeは「VSCode」と通称され、本教材中でも「VSCode」と表記する場合があります)

Visual Studio Code のインストール

Visual Studio Codeのインストール方法を説明します。

最初に、次のリンク先のページから「Visual Studio Code」をダウンロードしてください。

【Visual Studio Codeのダウンロードページ】

image

ダウンロードが完了したら、ダウンロードしたファイルを展開し、Visual Studio Codeのファイルを「アプリケーション」フォルダに移動します。

ファイルの移動方法はさまざまですが、次の動画ではFinderを2つ開いてドラッグ&ドロップで移動しています。

(Finderを開いた状態でcommand + Nキーを押せば、さらにFinderを開くことができます)

image

「アプリケーション」フォルダに移動したら、Visual Studio Codeアイコンをクリックしてください。
Visual Studio Codeが起動して、次の画面が表示されたらインストールの完了です。

image

Visual Studio Code の設定をカスタマイズ

Visual Studio Codeはデフォルト設定でも利用できますが、ここでは扱いやすいように次のカスタマイズを行います(各自の好みで設定しても問題はありません)。

設定をはじめるには、Command + ,キーを押すか、画面左下の歯車アイコンをクリックして設定画面を開きます。

image

設定ファイルに直接書き込みができるsettings.jsonモードにします。

画面右上にあるアイコンのうち、次のアイコンをクリックしてください。

image

アイコンをクリックすると、次の画面のようにsettings.jsonファイルが表示されます。

image

settings.jsonファイルに以下のコードをコピーします(内容を理解する必要はありません)。

json
123456789101112131415161718
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キーを押して上書き保存ができます)

次の画面のように、空白文字に「・・・・」が表示されるとカスタマイズは完了です。

image

Visual Studio Codeの拡張機能をインストール

Visual Studio Codeで開発しやすくするため、さらに拡張機能を追加します。追加する拡張機能は次の3つです。

Copied!
● PHP Intelephense → PHPのコード補完や定義への移動など様々な機能を提供。 ● Japanese Language Pack for Visual Studio Code → VSCodeを日本語に対応したUIを提供。 ● vscode-icons → ファイルやフォルダにアイコンを追加。 ● Laravel Blade Snippets → Bladeテンプレートをシンタックスハイライトに対応するなど様々な機能を提供。

それでは拡張機能を追加します。

次の画像の左にある拡張機能アイコンをクリックしてください。

image

拡張機能の「MARKETPLACE」が表示されるので、検索バーでインストールする拡張機能を入力して検索します。

image

まずは「PHP Intelephense」と検索します。

すると次の画像のように「PHP Intelephense」が表示されるのでインストールします。

image

これで「PHP Intelephense」がインストールできました。

同じ方法で他の拡張機能もインストールしてください。

3つの拡張機能がインストールできたらVSCodeを再起動します。VSCodeが再起動されると拡張機能が使えるようになります。

ターミナルを確認する

ターミナルは命令文(コマンド)を入力してMacの操作や設定を行うためのツールです。

ターミナルはMacのデフォルトで用意されているため、新たにインストールする必要はありません。

ターミナルを起動するには、MacのFinderで「アプリケーション」―「ユーティリティ」フォルダを開いて、「ターミナル」をダブルクリックします。

また、Visual Studio Codeにもターミナルはあります。次の動画のようにVisual Studio Codeの画面下部をクリックすればターミナルが表示され、コマンドの実行ができます。

image

以上でこのパートは終了です。

お疲れ様でした。

現在のパート (0)
全パート (15)
みんなで助け合おう!
現在のパートのディスカッション 全0件