前のパートに戻る 完了して次のパートへ  

  0-2 開発環境(Mac)

ここでは開発を進める上で必要なツールを紹介します。ここで紹介しているツールはあくまで私が推奨するツールです。普段から使用しているツールなどがあればそちらを利用していただいても問題ありません。

※ 今回のパートは PC が Mac の方を対象としています。Windows をお使いの方は「0-3 Cloud9 を利用する手順」を参考にしてください。

ターミナル


ターミナルとは、コマンドと呼ばれる命令文を用いて Mac の操作や設定を行うためのツールです。ターミナルに関しては、Mac にはデフォルトで用意されているので、今回はそれを使用します。ターミナルはコマンドを入力する際に利用します。

また本講座では bash をシェルとして利用します。下記のコマンドで /bin/bash と表示されることを確認してください。

$ echo $SHELL
/bin/bash

なお本講座ではシェルに対しての詳しい説明は行いません。興味を持たれましたらご自身で調べていただくようお願いいたします。

Web ブラウザ


Web ブラウザについての説明は今更不要でしょうが、インターネットで Web ページを見るためのツールです。本講座では Google Chrome を使用します。

Google Chrome の導入

下記の URL から Google CHrome をインストールしてください。

Google Chrome ウェブブラウザ

Vue.js devtools の導入

Vue.js devtools は Vue.js の開発をサポートする Google Chrome の拡張機能です。Google Chrome の開発者ツールから data の中身などを確認できるようになります。下記の URL にアクセスして Chrome に追加 ボタンからインストールしてください。

Vue.js devtools - Chrome ウェブストア

下図のようになっていればインストールは完了しています。

なお最後に「Appendix」として「Vue.js devtools」の使い方を載せています。ある程度開発が進んだ本講座で作成するアプリケーションを利用して説明していますので、今の時点ではわかりづらいところもあるでしょうが、興味がありましたら軽く目を通しておいていただくと開発時に便利です。

Homebrew


Homebrew とは、ソフトウェアの導入を単純化する Mac OS のパッケージ管理システムです。

Homebrew の導入

下記の URL から Homebrew をインストールしてください。

Homebrew

Node.js


Node.js とはブラウザ上ではなくあなたのコンピュータ上で JavaScript を動かすためのプログラムです。本講座では Vue.js をコンパイルするために利用します。

nodenv の導入

まず Node.js のインストールの前に、今回は nodenv というソフトウェアを導入します。nodenv を利用することで将来新しいバージョンの Node.js に簡単に切り替えたり、特定のプログラムの Node.js のバージョンを固定したりすることが簡単にできるようになります。

それでは下記のコマンドをターミナルから実行してください。(コマンドを実行する際に$は含めないでください。行の頭に「$」を表示するスタイルを使って、その例がコマンドラインであることを示しています。)

nodenv は nodenv 本体であり、node-build は nodenv install というコマンドを利用するために必要です。

$ brew install nodenv
$ brew install node-build

nodenv コマンドを使用するためにパスを通します。下記のコマンドを実行してください。

$ echo 'export PATH="$HOME/.nodenv/bin:$PATH"' >> ~/.bash_profile

次に下記のコマンドを実行してください。PC にログインしたすると自動的に nodenv が実行されるようになります。

$ echo 'eval "$(nodenv init -)"' >> ~/.bash_profile

これまでの変更を有効とするために再起動、もしくは下記のコマンドを実行してください。

$ source ~/.bash_profile

一連の作業で正常に nodenv がインストール・セットアップされたことを確認するために下記のコマンドを入力してみてください。

$ nodenv --version
nodenv 1.3.0

このようにバージョン情報が表示されていれば OK です。なお、1.3.0 は執筆当時のバージョンですので別の数字が表示されても問題ありません。

Node.js の導入

nodenv をインストールしましたので、nodenv を使って Node.js をインストールします。

今回は執筆時点で最新の LTS である、バージョン 10.16.0 を利用します。(LTS とは Long Term Support の略で長期間サポートされる安定版を意味します。)なおこのバージョンは執筆当時のものです。10.16.1 といったように更新されたバージョンが出ている場合、そちらを使用してもかまいません。

下記のコマンドを実行してください。

$ nodenv install 10.16.0

インストールはされても、現時点ではまだ使用できません。次にシステム全体で使用するバージョンを設定します。

$ nodenv global 10.16.0

これで Node.js を利用する準備が整いました。下記のコマンドでバージョンを確かめてみましょう。

$ node --version
v10.16.0

このように v10.16.0 が表示されていれば成功です。

Visual Studio Code


Visual Studio Code はテキストエディタと呼ばれ、作成・編集・保存するために必要なソフトウェアです。Microsoft が開発しており無料で使用できます。

Visual Studio Code の導入

まず以下のリンクから Visual Studio Code をダウンロードしてください。

Visual Studio Code - Code Editing. Redefined

ダウンロードが完了したらダウンロードしたファイルを展開してください。そのあと展開したファイルをアプリケーションフォルダに移動してください。移動させる方法色々ありますが、下記の動画では Finder を 2 つ開いてドラック&ドロップで移動させています。(Finder を 2 つ開くには、Finder を開いた状態で command + N を押すことで 2 つ開くことができます。)

アプリケーションフォルダに移動できたら、Visual Studio Code を起動してください。下記の画面のようになっていればうまく導入ができています。

Vue.js 開発に役に立つ Visual Studio Code の拡張機能を導入する

ここからは開発に役に立ついくつかの拡張機能をインストールします。ご自身ですでにお好みの環境が構築されている場合ここからは飛ばしても問題ありません。

まずは Visual Studio Code の拡張機能画面に移動してください。

EditorConfig

EditorConfig とは設定ファイルでエディタの挙動をある程度コントロールする共通の仕組みです。例えばこの言語のファイルはタブを半角空白 2 文字にするといった挙動をエディタの設定にかかわらずコントロールできます。また、設定を共有することで異なるエディタを使用していても同じスタイルで編集できます。

EditorConfig の導入

Visual Studio Code の拡張機能画面で EditorConfig と入力してください。そこで(おそらく先頭に表示されるであろう)EditorConfig for VSCode をクリックしてください。

するとこのような画面が表示されます。ここで矢印の箇所が editorconfig.editorconfig となっていることを確認してください。これを Identifier(識別子) といいます。今後は Identifier で統一します。

VSCode の拡張機能は同じ名前で作成できますが、この部分は必ずユニークになります。ですので目的の拡張機能かどうかはこの Identifier を見て判断します。

インストールするには緑色の Install ボタンをクリックしてください。

このように Installed となってチェックが付いていればインストールは成功です。

なお、拡張機能のアンインストールは Uninstall ボタン、もしくは歯車アイコンをクリックして Uninstall メニューをクリックします。

Prettier

Prettier とはコードフォーマッター(ソースコードを整形してくれるツール)です。JavaScript, HTML, CSS などを整形してくれます。毎回自分の手で書式を統一するのは大変ですし、ミスも出てしまいます。Prettier はそれを自動で行ってくれます。また、書式にミスがあるときは整形が行われず、何がおかしいかを教えてくれます。

Prettier の Identifier は esbenp.prettier-vscode です。

EditorConfig と同様に Install ボタンからインストールしてください。

ESLint

ESLint とは JavaScript の静的解析ツールです。コードを実行する前にバグを見つけたり好ましくない書き方を警告してくれます。

ESLint の Identifier は dbaeumer.vscode-eslint です。

EditorConfig と同様に Install ボタンからインストールしてください。

Vetur

Vetur とは Vue.js の開発を行う際に様々なサポートをしてくれる拡張機能です。.vue ファイルのシンタックスハイライトを行ったり、スニペットが使用できたりします。

Vetur の Identifier は octref.vetur です。

EditorConfig と同様に Install ボタンからインストールしてください。

その他の拡張機能

ここでは必須ではありませんが、あると便利な拡張機能を紹介します。

change-case

TestButton -> test-button というような変更をやりやすくします。Identifier は wmaurer.change-case です。

Bracket Pair Colorizer

対応する括弧の色をレベルによって変えてくれるので、対応する括弧がわかりやすくなります。Identifier は coenraads.bracket-pair-colorizer です。

Visual Studio Code のカスタマイズ

そのまま使用することもできますが、いくつか開発に役に立つ設定をしておきましょう。お好みの設定がある場合はそのままで問題ありません。

まず Command + , を押して設定画面を開きます。

検索ボックスに settings.json と打ち込んで Enter を押してください。Edit in settings.json というリンクが表示されますのでそれをクリックします。

すると下のような画面になります。これは settings.json という設定ファイルに直接書き込みできるモードです。

ここに下記のコードをコピーして、すでに書いてあるコードに上書きして Command + S で保存してください。

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

お疲れ様でした。

議論

0 質問

このコースの評価は?