フロントエンド界隈で凄まじい人気を誇るVue.js。
最近のフロントエンド案件ではVue.jsのスキルが当たり前のように要求されているようです。
今までサーバーサイドをメインとして活動してきた僕。
初心者に毛が生えたぐらいの技術力しかないフロントエンドのスキルに磨きをかけるためにも、独学でVue.jsをマスターしてみようという思いでこの記事を書いています。
備忘録的な内容になるかもしれませんので、多少の読みづらさはご容赦いただければと思います。
とはいえ、何から始めたらいいんだ・・・？ということで、まずは環境を構築していきたいと思います。
環境を整えないことには始まりませんからね。
裸で戦場には出れませんので、まずは装備を整えてから出陣といったところです。（どういう例え）
それでは参りましょう！
まずはエディタを入手
まずは、エディタを入手しましょう。
当たり前ですが、エディタがないとコードが書けませんので。
Vue.jsの開発で使用するエディタは「Visual Studio Code(以下、VSCode)」がメジャーのようですね。
僕はVSCodeを既にインストール済みだったので、いちばん慣れ親しんだVSCodeで開発していこうと思います。
VSCodeをまだインストールしてないよという方は以下の記事を見ながらインストールしてください。
VSCodeインストール手順
VSCode日本語化手順
ちなみに、VSCode以外だと以下のエディタも人気のようです。
- Atom
- Sublime Text
- Vim
- Visual Studio
- Brackets
- IntelliJ
- Emacs
- Kate
awsome-vueのページに各エディタで推奨されるプラグインも載っているので、VSCode以外を使いたい人は開発効率を上げるためにもプラグインを入れておきましょう。
ちなみに、上記のページにVSCodeのプラグインも記載されていますが、調べた感じだともっと便利なプラグインがありそうだったので、今回はそっちを入れようと思います。(詳しくは次で書きます)
Visual Studio Codeにプラグインを入れる
先ほどのawsome-vueで推奨されていたVSCodeのプラグインは以下のプラグインでした。
- Vetur
- Vue VSCode Snippets
- Ionic Snippets
なので、これらを入れれば良いわけですが、調べてみるともっと便利なものがありました。
それが「Vue.js Extension Pack」です。
Vue.js Extension Packとは？
「Vue.js Extension Pack」は、Vue.jsの開発でよく使われるプラグインをひとまとめにしてくれたものです。
このパックには以下のプラグインが含まれています。
よく使われるであろうプラグインを親切にまとめてくれたものっていう感じですね。
それならば使ってやろうじゃないかということで、とりあえずは「Vue.js Extension Pack」を入れてみます。
Vue.js Extension Packのインストール手順
インストール手順といっても難しいことはありません。
- 左側の拡張機能を選択
- 検索窓に「Vue.js Extension Pack」と入力
- 検索結果として出てきた「Vue.js Extension Pack」のInstallをクリック
これだけです。以下の画像を参考にインストールしてみてください。
※インストールに数分かかる場合があります。
無事にインストールが完了したら、Installと表示されていたボタンが歯車ボタンで表示されます。
これで、VSCodeでVue.jsを開発する最低限の準備が整いました。
Vue.js Extension Packをインストールしたことで、コード補完やコードフォーマット、構文のチェックを行ってくれるようになりました。
他にも便利なプラグインはたくさんあると思いますが、開発を進めていく中でおすすめのプラグインが出てきたらまた別の記事で紹介しようと思います。
Vueのインストール
先ほどまでの手順は、VSCodeでVue.jsを開発しやすい状態に整えただけです。
ここからは、Vue自体のインストールを行っていきましょう。
Vueのインストール方法
Vueのインストール方法は大きく分けて2つあります。
- CDN(Content Delivery Network)を使う → 手軽にVue.jsを触ってみたい人向け
- Vue-CLIをインストール → 本格的にVue.jsの開発をやりたい人向け
1.のCDNを使ったインストール方法は、公式で用意されているサーバーからダウンロードしてインストールする方法です。
具体的には、HTMLファイルを用意して、その中に<script>タグでURLを記載するだけでVue.jsが使えるようになるので、ほんとにお手軽です。
2.のVue-CLIというのは、アプリケーション開発に必要なツールやライブラリを簡単に構築できるコマンドラインインターフェイスです。
Command Line Interfaceの頭文字を取ってCLIということですね。
こういうの知っておくと覚えが早くなるので意外と大事。
Vue-CLIをインストールすることで、vueコマンドというものが使えるようになります。
そのvueコマンドを使って、作成するアプリケーションのプロジェクトを構築していくというわけです。
僕の場合は今後の仕事で本格的に開発することを見据えて、Vue-CLIのインストールをやってみたいと思います。
※CDNで手軽に触ってみたいという方はこちらの記事を参考にしてみてください。
Vue-CLIのインストール手順
じゃあ、Vue-CLIとやらをインストールしてさくっとVueが使える状態を目指しましょう。
Vue-CLIをインストールするためには、関連する以下のツールをインストールする必要があります。
- Node.js
- Yarn
- Vue-CLI
ちなみに、②のYarnは必須ではありません。
代わりに①のNode.jsインストールで付随するNPMを使うことでもVue-CLIのインストールは可能です。
ただ、NPMの様々な問題点を改善したものがYarnというパッケージマネージャーでして、速度やセキュリティ面でNPMよりも優れています。
それならばNPMではなくYarnを使ってやるぜ、ということで今回はYarnをインストールすることにしています。
①Node.jsのインストール手順
Vue-CLIを使うためには、まずNode.jsをインストールする必要があります。
(正確にはNode.jsに付属するNPMというパッケージマネージャーが必要)
公式サイトからLTS版のインストーラーをダウンロードしましょう。
ダウンロードが完了したらインストーラーを起動して「Next」を選択。
「I accept ～」にチェックを入れて「Next」を選択。
インストール先のフォルダを指定して「Next」を選択。
特に変更せず「Next」を選択。
(ここでNPMパッケージマネージャーが含まれていることが分かりますね)
特にチェックを入れずに「Next」を選択。
(チェックを入れると関連するモジュールもインストールされるが特に不要なのでそのまま)
「Install」を選択。
インストールが開始される。
「Finish」を選択。
これでNode.jsがインストールされて、NPMも使えるようになりました。
ためしにNPMがインストールされているかどうか確認してみます。
ここでコマンドプロンプトを立ち上げてバージョンを確認する流れになりますが、せっかくVSCodeを使っていくので、VSCodeのターミナルから確認してみましょう。
そのために、VSCodeの設定を少し変えてあげる必要があります。
※コマンドプロンプトでさくっと確認したい場合は以下のVSCodeの設定変更は読み飛ばしてください。
補足：VSCodeでコマンドプロンプトを使うための設定手順
左下の歯車ボタン→Settingsを選択。
「Features」→「Terminal」→「Integrated -> Shell : Windows」→「Edit in settings.json」を選択。
「terminal.integrated.shell.windows」の値に以下を入力。
C:\\Windows\\System32\\cmd.exe
これでVSCodeからコマンドプロンプトが使えるようになりました。
上部のメニューから「ターミナル」→「新しいターミナル」を選びましょう。
Node.js、NPMのバージョン確認
起動したターミナル上で以下のコマンドを入力して、Node.jsとNPMのバージョンを確認します。
node --versionnpm --versionバージョンが正しく表示されていればインストールが完了しています。
※「操作可能なプログラムまたはバッチ ファイルとして認識されていません。」と表示される方はVSCodeを起動した状態でNode.jsをインストールした可能性があります。
その状態だと、Node.jsのパスが通ってないタイミングでVSCodeを起動していることになるのでコマンドが認識されていません。
その場合は一度VSCodeを再起動してみてください。
②Yarnのインストール手順
続いてYarnをインストールします。
まずは、公式サイトから安定版を選んでインストーラをダウンロードしましょう。
ダウンロードが完了したらインストーラを起動して「Next」を選択。
「I accept ～」にチェックを入れて「Next」を選択。
インストール先を入力して「Next」を選択。
「Install」を選択。
インストールが開始される。
「Finish」を選択。
これでYarnのインストールが完了しました。
正しくインストールされているか確認してみましょう。
先ほどのNode.jsの時と同じようにVSCodeのターミナルで以下のコマンドを打ってバージョンを確認してみます。
yarn --versionバージョンが正しく表示されていればインストールが完了しています。
※「操作可能なプログラムまたはバッチ ファイルとして認識されていません。」と表示される方はNode.jsインストール時と同じ理由でコマンドが認識されていない可能性があるので、一度VSCodeを再起動してみてください。
③Vue-CLIのインストール手順
ここまできてやっとVue-CLIのインストールです。
以下のコマンドを実行することでVue-CLIをインストールすることが出来ます。
yarn global add @vue/cli少し時間がかかりますが、以下のようになればインストール完了です。
こちらも正しくインストールされているか確認してみましょう。
以下のコマンドを打ってバージョンが表示されれば正しくインストールされています。
vue --version
これでようやくvueコマンドが使えるようになりましたね、意外と長かった・・・
よし、じゃあこのvueコマンドを使っていよいよプロジェクトを作っていきますぞ！(^o^)／
と言いたいところですが、記事がだいぶボリューミーになってきたので、プロジェクトの作成は次回の記事で書こうと思います。
とりあえず、エディタとVue-CLIが使えるようになれば開発は出来るんじゃないかな。
他にもこれが必要だった！とかあれば、記事を更新していきます。
ということで、Vue.jsの環境構築はここまでです。それでは～。
コメント