作りながら学ぶVue.js パート１【開発環境構築】

2019年5月5日 00:05

メニュこのnoteは、JavaScriptのフレームワークであるVue.jsを初心者でも扱えるようになることを目指して、実際にアプリケーションを作りながら学んでいくチュートリアルの準備編です。

このシリーズの主な対象読者は以下の通り。

・HTML/CSS/JavaScriptについて基本的な知識/経験がある
・Vue.jsを身に付けたいと思っている

プログラミング初心者の方でもつまずかないよう、できる限り丁寧に説明しながら進めていきます。

また最優先目標は「Vue.jsを用いてアプリケーションを作れるようになる」こととして、ビルドや仮想DOMについての解説などは基本的にしない方針ですので、あらかじめご了承ください。

※筆者のPCがMacである都合から、開発環境はMacを基準に説明しております。コーディング部分についてはOSによる差は生まれにくいかと思いますが、環境構築等においてはOS独自のエラーや差分が生まれる可能性があります。できる限り補足は行なっていくつもりですが、その際は御手数ですが別情報源を用いた解決をしていただければと思います。

開発の準備をする

では早速Vue.jsを用いたWebアプリケーションの開発を始めていきましょう。と言いたいところですが、その前にちょっと下準備。

Vue.jsで開発するにはNode環境とパッケージマネージャーをPCに準備しておく必要があります。

すでにPCにNode.jsとyarnがインストールされているという人はこの項目をスキップしてください。

Node.js

ゆくゆくはnodebrewなどのバージョン管理ツールを利用した方がいいかもしれませんが、既にPCにNode.jsが入っていて、バージョンが古すぎなければそちらを利用する形で構いません。

ターミナルを開いて以下のコマンドを入力します。

node -v

実行結果としてバージョンを表す表示がされたら既にnodeがPCにインストールされているということになります。

インストールされていたか否かに応じて、以下のいずれかを実行してパッケージマネージャーをインストールします。

Macを使っていてHomebrewをインストールしていない場合、以下サイトからインストールしてください。

Node.jsがインストールされている場合

brew install yarn --ignore-dependencies

Node.jsがインストールされていない場合

brew install yarn

※brew install yarnはオプションをつけない場合、Node.jsも同時にインストールされます。

他のOSをお使いの場合はYarnの公式ページにて環境に応じたインストール手順が掲載されているので、そちらを参考にしてみてください。

アプリケーション開発の始め方

Vue.jsの開発においては、一般的なWeb製作のようにHTMLやJavaScriptのファイルを新規作成して。。。というような始め方はあまりしません。

必要なライブラリや基本的な構成を自動生成してくれるVue CLIというコマンドラインツールを利用していきます。

このVue CLIを利用することで複雑な設定や、お決まりのコーディングなどを省略してスムーズに開発を始めることができます。

ところでVue.jsの入門記事などを巡っていると、新規アプリケーションの始め方について複数パターンの手順が紹介されていることに気づくでしょう。

この情報の揺れは基本的にVue.js用コマンドラインツールのバージョンの差異によって生まれています。

これからVue.jsを始めるという人はVue CLI 3というバージョンを利用していく方が適切ですので、そちらの手順について説明していきます。

Vue CLIのインストール

Vue CLIはバージョン3からパッケージ名が変更されています。

今までにVueに触ったことがあるという人は旧バージョンのVue CLIをアンインストールしておきましょう。

yarn global remove vue-cli

そして今後使っていくことになるVue CLI 3をインストールします。

yarn global add @vue/cli

このVue CLIを用いてアプリケーションの雛形を作っていきます。

雛形を作る

まずはターミナル上でアプリケーション用のディレクトリを作成したい場所まで移動します。僕の場合、ホームディレクトリ下にworkspaceというディレクトリを作成し、そこでアプリケーション開発をしているので、以下のようにコマンドを実行します。

cd ~/workspace

移動できたら、ターミナルにおいて以下のコマンドを実行します。[vue-demo]の部分はあなたの作りたいアプリケーション名を入力します。

vue create vue-demo

そうするとターミナル上に選択肢が表示されます。

┌───────────────────────────┐
│  Update available: 3.7.0  │
└───────────────────────────┘
? Please pick a preset: (Use arrow keys)
❯ default (babel, eslint)
  Manually select features

まずは説明しやすい構成で生成させたいので、以下の手順に沿って選択していってください。

・矢印キーの上下・またはj/kのキーを押下することで上下移動
・スペースキーでチェックボックスをチェック
・Enterで次の選択肢へ

といった操作方法になります。

まずManually select features(手動で機能を選択)に移動してEnter

? Please pick a preset:
  default (babel, eslint)
❯ Manually select features

Babel/CSS Pre-processorsを選択した状態でEnter

? Check the features needed for your project:
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◯ Router
 ◯ Vuex
 ◉ CSS Pre-processors
❯◯ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

Sass/SCSS (with node-sass)を選択した状態でEnter

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
  Sass/SCSS (with dart-sass)
❯ Sass/SCSS (with node-sass)
  Less
  Stylus

In package.jsonを選択した状態でEnter

? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?
  In dedicated config files
❯ In package.json

最後は大文字Nを入力してEnterを押してください。

? Save this as a preset for future projects? (y/N)

これで必要な諸々がインストールされていきますので、しばし待ちましょう。

コマンドが完了すると、以下のような文字が並び、ご丁寧に起動コマンドガイドも表示されています。

📄  Generating README.md...

🎉  Successfully created project vue-demo.
👉  Get started with the following commands:

 $ cd vue-demo
 $ yarn serve

このガイドに従い、ディレクトリを移動して開発環境を起動してみましょう。

cd vue-demo
yarn serve

ブラウザでlocalhost:8080にアクセスしてみると以下のような画面が表示されるかと思います。

ここまでできれば開発環境の構築が完了です。

開発ツールについて

HTMLやCSSを触ったことのある方ならご存知かと思いますが、プログラミングは基本的にテキストエディターと呼ばれるツールを使います。一番シンプルなのは最初からPCに入っているメモ帳などですね。

テキストエディターは種類がたくさん有り、どれを使えばいいか迷うかと思いますが、Vue.jsで開発するには特にこだわりがない限り、Microsoftが作っているVisual Studio Codeの利用をオススメします。

プログラミング用に便利な機能が揃っていながら、動作が軽量なところがポイント。追加機能を提供する様々なプラグインも用意されており、必要に応じてカスタマイズできるので幅広い局面で活用できる優等生なエディターです。

プラグインは必要に応じて導入していけばOKですが、Vue.jsの開発をするにあって欠かせないVeturというプラグインがあるので、それだけはひとまずインストールしておきましょう。

Visual Studio Codeを起動して、左側にある四角いアイコンを選択して、入力フォームにveturと入力します。

すると検索結果の一番上にVeturという名前のプラグインが表示されるので、Installという部分を選択しましょう。

これで先ほど生成されたファイルたちが見やすい形で色付けされて表示されるようになっています。便利ですね。

次のパートでは生成されたファイルを繰り返し見ていく形になるので、ディレクトリごとワークスペースというものに登録しておきましょう。

メニューの中にあるFileを選択して、その中にかるAdd Folder to Workspace...というのをクリック。

そうするとフォルダ選択画面が開かれるので、今回コマンドで作成されたディレクトリを追加しておきましょう。

これでファイルを快適に移動しながら開発を進めることができます。

まとめ

今回でVue CLIを使ったプロジェクトの初期設定と、開発環境の準備が整いました。

次回では画面を表示させている自動生成されたファイルを眺めながら、Vue.jsの構成と開発の進め方についてお話していきます。

Part2はこちら

この記事が気に入ったらサポートをしてみませんか？