Vue.js

vue-cli4系によって作成された各ファイルの説明

はじめに

vue-cliでプロジェクトを作成してみたものの各ディレクトリやファイルの内容がよく分からない。。。

今回はこんな悩みに答えていきます。

本記事の内容

■ vue-cliが作成したディレクトリやファイルの説明

この記事を読み終えると、vue-cliで生成されたファイルについて理解できるようになり、プロジェクトをカスタマイズしたりする際の下地ができるでしょう。

ディレクトリ構成及び概要

vue-cliで作成したディレクトリの構成及び概要は以下の通りです。

各ファイルの説明

README.md

GitのプロジェクトTOPに表示されるREADME(説明書的なもの)でmarkdown記法で記述します。

markdownはHTMLの簡易版でGitだけでなく、Qiitaやslackでも採用されております。

業務でGitを使用する場合は、READMEをはじめissueやwikiをmarkdownで書かなければならないため、今のうちにmarkdownには慣れておきましょう。

学習コストはかなり低く、簡単に習得できます。

以下のQiitaの記事を見ながら実際に書いてみれば自然と習得できると思います。

マークダウン記法チートシート

ちなみに、記述したREADME.mdはGitのプロジェクトのTOPページに以下のように表示されます。

readme

babel.config.js

ES6以上の新しいjavascriptの書き方をES5(旧javascript)の書き方にトランスパイル(変換)するプラグインBabelの設定ファイルです。

通常はpresetsで複数あるbabelの変換ライブラリの内どれを使用するのかを指定するのですが、今回はvue-cliのbabelプラグインが指定されております。

こちらのファイルは基本的に初期設定から触りません。

package.json

package.jsonは各ライブラリやバージョン情報、プラグインなどの情報が記載されており、「npm install」コマンドを実行すると、記載されたライブラリやプラグインをローカルにダウンロードできます。

以降で重要な部分を抜粋して解説します。

「npm run script名」をターミナルで実行すると、script名に紐づくコマンドが実行されます。

例えば、「npm run serve」とターミナルで実行すると、「vue-cli-service serve」というコマンドがバックグラウンドで実行されます。

このscriptsの機能を利用すれば、自分でオリジナルのscriptを作成したり、変数を渡したりできます。

各ライブラリやプラグインのバージョン情報が記載されております。

dependenciesとdevDependenciesの違いですが、簡単にいうとdependenciesがビルド後(サーバアップ後)も使用するライブラリでdevDependenciesがビルド前〜ビルド時(開発時)にしか使用しないライブラリです。

「npm install」するときのオプションによって、どちらに振り分けられるかが決まります。

dependenciesに追加したいとき

devDependenciesに追加したいとき

サーバへファイルをアップするときはファイルが軽量であればあるほどよいので、不要にdependenciesに追加するのはやめましょう。

以上がpackage.jsonの説明ですが、package.jsonについてより詳しく学習したい方は、WebPackを学ぶことをおすすめします。

WebPackのおすすめ教材については以下の記事で詳しく紹介しておりますので、ご覧ください。

webpack
【無料あり】webpackの使い方がマスターできる書籍やUdemy等の教材まとめwebpackの使い方がマスターできる書籍やUdemy等の教材や勉強法をまとめました。体系的にwebpackを基礎から学びたい方やwebpackを使用してフロントエンドの環境構築したいけど、使い方がよく分からないという方はぜひ参考にしていただければと思います。...

index.html

index.htmlの中身をみると、前回画面に表示されていた要素が何もコーディングされておりません。

しかし、よく見てみると、以下のような記述があります。

実は上記のid=appの要素の中にVueで作成された要素が入ります。

開発者ツールでみてみると、以下の赤枠部分にVueで作成された要素が挿入されているのが分かります。

devtool

main.js

以降で詳しく中身について解説します。

Vueを使用するためのライブラリ(vue)とベースとなるコンポーネント(App.vue)をインポートしております。

次に、こちらの記述ですが、これはconsole.logにhelpを出力するかしないかをbooleanで設定するもので、特に必要ないのでデフォルトのままfalseでOKです。

ちなみにtrueにすると以下のようなhelpがconsole.logに出力されます。

You are running Vue in development mode.

Make sure to turn on production mode when deploying for production.

See more tips at https://vuejs.org/guide/deployment.html

「App」というコンポーネントをindex.htmlの「id=app」へマウント(挿入)しているということだけ知っておいていただければOKです。

「render: h => h(App)」の「h」というのが気になった方もおられると思うので簡単に解説しますと、こちらはjavascriptの標準メソッドのcreateElementがvueライブラリによって変数で表されております。

つまり、「h(App)」で「App」というコンポーネントのエレメントを作成し、そのエレメントを「$mount(‘#app’)」で「id=app」へ追加するという意味になります。

App.vue

main.jsから呼び出されていたApp.vueの中身を見てみると、先ほどブラウザに表示されていたロゴ画像や文字列を確認することができます。

「.vue」の拡張子のファイルを単一ファイルコンポーネントといい、以下の3つで構成されております。

単一ファイルコンポーネントの構成

■ templateタグ(HTML領域) => 見た目の構成

■ scriptタグ(javascript領域) => データ定義や処理を定義

■ styleタグ(cssやscss、post-css領域) => スタイルの定義

App.vueを見ていただくと、以下のような構成となっていることが分かります。

単一ファイルコンポーネントは、このようにtemplateとscriptとstyleの3つの構成で成り立っております。

まとめ:主要ファイルの相関図

主要ファイル相関図

さいごに

vue-cliによって作成された各ファイルの説明は以上です!

お疲れ様でした!

ここまで読んでいただいた方は、vue-cliによって作成された各ファイルについて理解できたと思いますので、ここからはガンガンVue.jsの開発をしていきましょう。

Vue.jsの開発にあたって、基本的な文法や機能、使い方・書き方について網羅的に学習したい方は、以下の記事で紹介しているUdemyの教材がおすすめです。

【これだけでOK!】おすすめのVue.js入門教材「Vue.jsを初めてみたいけど、どの教材から手をつけてよいか分からない」という方や「Vue.jsできるようになるためにどんなことをやったらよいのか?」という疑問をもった方向けにおすすめのVue.js入門教材の紹介とその教材の使い方について詳しく解説しております。...

さいごまで読んでいただき、ありがとうございました。

フリーランスエンジニア転職完全ロードマップ

知り合いから
「フリーランスエンジニアになれば、年収800万円以上の高報酬でかつ、自由な働き方をチョイスできる」
というのを聞いて、フリーランスエンジニアに興味を持ったのですが、
当時SIer企業でエンジニアをやっていたボクはなかなか一歩踏みだせませんでした。

というもの以下のような不安があったからです。

■フリーランスエンジニアってかなりの技術力がないとなれないのではないのか?

■フリーランスエンジニアって不安定なのではないのか?

■フリーランスエンジニアって人脈やコネ、営業力が必要なのではないのか?

しかし、実際にフリーランスエンジニアになってみて気づきました。

これらはすべて間違いです。

過去のボクのようにフリーランスエンジニアに興味あるけど一歩踏み出せないという方向けに
『フリーランスエンジニア転職完全ロードマップ』
という記事を書きました。

この記事読めば、どうすればフリーランスになれるのかが分かりますので、ぜひ一読ください。