(第2回)フロントエンド開発のすすめ【前準備編】

(第2回)フロントエンド開発のすすめ【前準備編】

目次

はじめに
Visual Studio Code の日本語設定
Visual Studio Code で雛形プロジェクトを開く
Visual Studio Code から開発環境を起動させる
git for Windows のインストール
git for Windows の設定
次回予告

はじめに

前回は、フロンドエンド開発で React, Vue.js, Angular 使用するにあたり、開発環境の設定およびそれぞれの雛形プロジェクトを作成するところまで行いました。
今回は、雛形プロジェクトを元に実際にコーディングを進めていく前準備として、開発をスムーズに行うための各種設定を紹介していきます。

Visual Studio Code の日本語設定

Visual Studio Code をインストールした初期の状態では表示言語が英語になっているため、
まずはVisual Studio Code の日本語設定を行います。

赤枠のExtensions(拡張機能)を選択

グレーの検索ボックスに「japanese」と入力すると
候補に「Japanese Language Pack for Visual Studio Code」が出てくるため、
選択後、緑色のInstallボタンを押します

インストール後は、Visual Studio Codeを再起動すると日本語で表示されるようになります

Visual Studio Code で雛形プロジェクトを開く

日本語設定後、前回作成した雛形プロジェクトをVisual Studio Codeから開きます。

「ファイル > フォルダーを開く」を選択

ファイル選択ダイアログが開くので、フォルダを指定します。
今回は第3回で実装するReactの雛形プロジェクトを選択します。

前回作成した雛形プロジェクトのソースが表示されます

Visual Studio Code から開発環境を起動させる

前回はコマンドプロンプトから開発環境を起動して雛形プロジェクトを確認しましたが、
今回はVisual Studio Codeのターミナルを使用して、開発環境を起動させます。

「ターミナル > 新しいターミナル」を選択

画面下部にターミナルのウィンドウが表示され、
既にreact-appのディレクトリが選択されています。
この状態で前回と同じように「npm start」とコマンドを入力します。

ターミナルで「npm start」と入力

上記が表示されたら、ブラウザで確認できるようになります。

git for Windows のインストール


自動でインストーラーがダウンロードされます。

プロジェクトソースの変更履歴をローカル環境で管理できるようにするため、
Gitの設定を行います。
Gitとは、プログラムコードの変更履歴を自分のパソコンなどローカル環境でも管理できるツールです。
ネットワーク環境がなくてもプログラムの編集作業が出来るようになるので、大変便利なツールです。
今回はWindows OSのGitクライアントソフトウェアである git for Windowsを使います。

以下のURLからインストーラーをダウンロード
https://git-scm.com/download/win

インストールの詳細は以下のサイトをご参考ください。
Git for Windowsの入手とインストール

ワンポイントアドバイス

git for Windowsインストール後、Visual Studio Code上でこのままコミットしようとするとエラーが発生してしまいます。
コミットする前準備として、ユーザー情報を登録しなければなりません。
下記のgit for Windows の設定の箇所でこの手順に関して紹介しております。

ユーザー登録をしていない場合のエラーメッセージ

git for Windows の設定

雛形プロジェクトの初期ソースをコミットする前に、最低限のGit設定を行います。
以下、コマンドプロンプトにて名前とメールアドレスの設定を行います。

git config --global user.name 名前
git config --global user.email メールアドレス


名前とメールアドレスの設定が終わったら、初期ソースのコミットして履歴で管理できるようにします。

左側のソース管理のアイコンをクリック。
その後、ソース管理ウィンドウの右上にリポジトリの初期化アイコンをクリック。

画面上部にフォルダー選択のボックスが表示されるため、フォルダを選択するとリポジトリの初期化が行われます。

リポジトリの初期化後

リポジトリの初期化後、コミットを行います。

赤で囲まれたコミットのアイコンをクリック。
その下のグレーボックスに履歴内容を入力できます。
今回は「初期データ」としています。

アラートダイアログがでてきますが、「はい」を選択

初期ソースがコミットされ、初期データの履歴が登録されます。
以降は、任意のタイミングでソースコードをコミットし、履歴管理ができるようになります。

次回予告

次回以降は、数回に分けてReact, Vue.js, Angular
それぞれで同じ実装をした場合の検証を行っていきます。

第3回では、Reactでの実装を紹介予定です。