見出し画像

作りながら学ぶVue.js パート２【vueファイルの構成】

tis_engineer

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

前回のPart1でVue.jsで開発を始めるための準備が整いました。

今回はその準備において自動生成されたファイルを見ながら、

・Vue.jsの一般的なファイル構成
・Vue.jsの開発の流れ

について説明していきます。

スタート地点となるファイル

Vue.jsで作ったアプリケーションが画面を表示するまでの流れにおいて、スタート地点となるファイルが２つあります。

src/main.jsとpublic/index.htmlです。

まずindex.htmlの方ですが、こちらは単純なHTMLファイルとなっています。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>vue-demo</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but vue-demo doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

ページタイトルや表示領域に関するmetaタグなどの設定、JavaScriptが使えないブラウザにおける表示メッセージなどが記載されているのがわかるかと思います。

試しに<title>vue-demo</demo>の部分を書き換えてみるとブラウザで表示されているページのタイトルが変わっていることに気づくでしょう。

Vue.jsの開発において関連してくるのは主に

<div id="app"></div>

の部分となるので覚えておいてください。

次に見ておいてもらいたいのが、main.jsです。

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

こちらについてはVue CLIのバージョンによって変わってくる部分があるかもしれませんが、重要なのは、

new Vue({
  render: h => h(App),
}).$mount('#app')

・render: h => h(App)
・.$mount("#app")

の部分はわかりやすく言うと

Appという部品をHTMLにおけるid="app"となっている要素に表示する

と言うことになります。

index.htmlの部分で<div id="app"></div>を覚えておくようにと説明しましたが、この部分に対してmain.jsがアプローチしていると言うことになるわけです。

Appという部品についてですが、これはmain.jsの上部に記載されている、

import App from "./App.vue";

で取り込まれたものが使われています。次はこの表示する部品として利用されているApp.vueを見てみましょう。

基本的な画面表示

まずはsrc/App.vueのソースコードを眺めてみましょう。

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'app',
  components: {
    HelloWorld
  }
}
</script>

<style lang="scss">
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Vue.jsではこのApp.vueと似たような構成で部品、コンポーネントと呼ばれるものを作って組み合わせることで開発を進めていきます。

まず大枠として見ていただきたいのが、

・<template>
・<script>
・<style>

と言うタグで分けられたグループです。

なんとなくお分かりかと思いますが、それぞれWebの表示において使われるHTML/CSS/JavaScriptと対応しており、

・<template>の中はHTML
・<script>の中はJavaScript
・<style>の中はCSS

といった構成となっており、ぱっと見で非常にわかりやすい構成で開発が進められるようになっています。

この構成は「単一ファイルコンポーネント」と呼ばれており、最近のプロジェクトにおいてはこの開発手法が用いられることが多いです。用語として覚えておくと良いでしょう。

<template>について

src/App.jsを構成している大枠ごとにそれぞれ説明していきます。まずは一番上に記載されている<template>タグの中身について。

こちらは先ほど申し上げた通り、HTMLの役割である画面構成の骨組みを記載していく形になります。

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

で、divタグ・imgタグまではわかるのですが、<HelloWorld>と言う見慣れないタグの存在に気づいたかと思います。ここだけ通常のHTMLの文化とは異なった考え方が必要になってきます。

先ほどmain.jsの説明において、

「Appという部品をHTMLにおけるid="app"となっている要素に表示する」

と言う説明をしましたが、ここでも同じように、

HelloWorldという部品を記載している部分に表示する、と言う意味になります。

そしてこのHelloWorldを読み込んでいるのが、次に説明するscriptタグの部分になります。

<script>について

次にtemplateタグの下にあるscriptタグについて。

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'app',
  components: {
    HelloWorld
  }
}
</script>

このscriptタグの中にはJavaScriptの処理を記述していくことになります。

まずtemplateタグのところで使用するHelloWorldコンポーネントをimportしています。ちなみにこの部分については、

import HelloWorld from './components/HelloWorld'

のように拡張子を省略してimportすることも可能です。

そして次にあるexport defaultでVue.jsの作法に乗っ取った形でオブジェクトを出力することにより機能させています。

今回利用されているプロパティはnameとcomponents。

nameプロパティについては、今回のように単一ファイルコンポーネントで開発するときは必須ではありません。省略した場合はファイル名がコンポーネント名として扱われます。

componentsプロパティはそのvueファイルにおいて利用するコンポーネントを登録します。

templateのところで<HelloWorld>タグを使用していますが、このcomponentsプロパティに設定することで使用可能となっています。

このscriptタグはVue.jsでの開発における要と言える部分で、他にもそのコンポーネントにおける動的な処理を記載するmethodsや、そのコンポーネントで扱うデータを定義するdataなどを活用して、画面を作り上げていくことになります。

これから実際にアプリケーションを作りながら、説明していくことになりますが、気になる人は公式のAPIリファレンスなどを眺めてみるといいでしょう。

<style>について

最後にstyleタグについてですが、見ての通りスタイルシートを記述する場所になります。

<style lang="scss">
#app {
    font-family: "Avenir", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
}
</style>

最初にvue createした時に、CSS Pre-processorsを選択したことにより、通常のcssによる記述に加えて、scss/sassによる記述が可能になっています。

scss/sassは通常のcssを拡張したもので、変数を使ったり階層化した定義ができるようなっており、より開発効率と保守性をあげることが可能な機能です。

<style lang="scss">と記述していることにより、最初の状態だとscssによる設定が可能になっています。

この部分を<style lang="sass">に変更することにより、sassの記法でも設定することができます。

<style lang="sass">
#app
    font-family: "Avenir", Helvetica, Arial, sans-serif
    -webkit-font-smoothing: antialiased
    -moz-osx-font-smoothing: grayscale
    text-align: center
    color: #2c3e50
    margin-top: 60px
</style>

またVue.jsにおいてはスコープ付きcssと言う機能を利用することもできます。

<style lang="scss" scoped>
#app {
    font-family: "Avenir", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
}
</style>

styleタグのプロパティにscopedと言う記載を追加することによって、その中のスタイルはコンポーネントの中でのみ有効となります。

現時点ではこの機能によって何が嬉しいのかわかりにくいかも知れませんが、アプリケーションが大規模になった時、影響範囲の制御・把握が容易になるので積極的に使っていくことをオススメします。

propsについて

vueファイルを構成する各エリアについての説明は以上となりますが、最後にVue.jsでの開発における重要な要素であるprops(プロパティ)について説明しておきます。

templateタグの中でこのような記述がありました。

<HelloWorld msg="Welcome to Your Vue.js App" />

HelloWorldコンポーネント自体についてはscriptタグの中のcomponentsプロパティで設定することで使えるようになると説明しましたが、HelloWorldタグの属性にあるmsgと言う部分が気にかかったと思います。

通常のHTMLでは見慣れないこのmsg属性。これがVue.jsの開発において重要なpropsです。

このpropsを使うことで、他のコンポーネントにデータを受け渡すことが可能となります。

具体的にどう言う意味か理解するためにもHelloWorld.vueの中身を見てみましょう。一部省略して、重要な部分のみ載せておきます。

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <!-- 省略 -->
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

まずscript部分でpropsと言うプロパティが書かれています。

props: {
    msg: String
  }

このように記載することでこのHelloWorldコンポーネントはmsgと言うString型の値を受け取ることができる、と言う宣言になります。

そしてtemplate内のh1にその値を表示することができるようになっています。

src/App.vueのHelloWorldコンポーネントの呼び出し部分を、

<HelloWorld msg="こんにちは！Vue頑張るよ！" />

と書き換えることによって、表示される画面が変わっていることが分かります。

このpropsと言う機能によってコンポーネントを再利用できるようになり、開発効率と保守性を保ちながら大規模なアプリケーションを構築することができるようになります。

まとめ

ここまででVue.jsの基本の基本について説明が終わりました。

作って学ぶという名前を掲げておきながら説明ばかりの序盤となってしまいましたが、次回から実際にアプリケーションを作りながらより詳細にVue.jsの機能を身につけていきましょう。

続きはこちら


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