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

間違いや改善の指摘

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

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

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

質問ポリシー①

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

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

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

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

0-2

開発を進める上で推奨されるツール(Mac Windows)

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

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

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

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

今回のパートで環境構築する対応のPCはmacOSになります。

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

テキストエディタ

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

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

本教材では、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モードにします。

検索ボックスに「settings.json」と入力してEnterキーを押すと、「Edit in settings.json」というリンクが表示されます。

image

「Edit in settings.json」リンクをクリックすると、次の画面のような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!
● 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 → 開始タグを記述した際に、対になる終了タグも自動で記述する。

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

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

image

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

image

まずは「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が再起動されると拡張機能が使えるようになります。

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

お疲れ様でした。