20190526のvue.jsに関する記事は7件です。

投稿日：2019-05-26T23:35:17+09:00

Vue+Vuetifyで作成したwebページをGitHub Pagesで無料公開

Vuetify.jsを使って作ったwebページをGitHubPagesで公開する機会があったので、環境構築の経緯を備忘録がてら残しておきます。

この記事ではデプロイすることに重きを置いているため、webページの中身には触れません。
私の見た限りでは、vue-cli3系についてビルドの仕方を詳しく書いてある記事が存在しなかった(2系は多くの記事に巡り会えました)ため、vuetifyを使わないという方でも参考になるかと思います。

nodebrewのインストールから書いているので、要らないところは目次を利用してスキップして下さい。

目次

nodebrewのインストール

vue-cli のインストール＆プロジェクトの作成

vuetifyのインストール

ビルドする

GitHub Pagesで公開

1. nodebrewのインストール

Homebrewでnodebrewを
ターミナル
$ brew install nodebrew

$ nodebrew setup
Fetching nodebrew...
Installed nodebrew in $HOME/.nodebrew
========================================
Export a path to nodebrew:

# ↓これをコピぺ
export PATH=$HOME/.nodebrew/current/bin:$PATH
========================================
# 自分のターミナルに表示された上のやつコピペしてパス通す
$ export PATH=$HOME/.nodebrew/current/bin:$PATH

# 保存
$ source ~/.bash_profile
ターミナル
# とりあえず安定版を入れておく
$ nodebrew install-binary stable

# 使用設定
$ nodebrew use stable

# npmをアップデート
$ npm update -g npm
これでnpmが使えるようになりました。

2. vue-cli のインストール

さっき入れたnodebrewのおかげでvue-cliがインストールできます！
ターミナル
$ npm install -g @vue/cli
プロジェクトの作成をします。プロジェクト名はなんでも良いですが、ケバブケース(大文字アンダーバー無しでハイフンあり)で作成しましょう。
ターミナル
$ vue create project-x
設定を色々聞かれますので、適宜設定してください。サンプルページや小規模なページであればEnter連打で問題ないかと思われます。

設定が完了したら、プロジェクトが作成されます。中に入って、サーバーを起動してみましょう。
ターミナル
$ cd project-x
$ npm run serve
App running at:
  - Local:   http://localhost:8080
  - Network: http://hogehoge:8080
ブラウザでhttp://localhost:8080にアクセスするとサンプルが表示されます。

3. vuetifyのインストール

このままvuetifyもインストールしちゃいましょう。
ターミナル
$ vue add vuetify
サーバを起動します.
ターミナル
$ npm run serve
App running at:
  - Local:   http://localhost:8080
  - Network: http://hogehoge:8080
ブラウザでhttp://localhost:8080にアクセスして、先ほどとページが変化しているのを確認しましょう。

4. ビルドする

いよいよビルドです。ビルドのコマンドは$ npm run build です。
コマンドを実行するとdistという名前のフォルダが作成され、その中に入っているindex.htmlが本体です。
しかし、ブラウザで開いてみると真っ白なページが表示されるだけでサンプルの姿はどこにもありません。
これはvue.jsがビルドする際にデフォルトでjsとcssを絶対パスで取得するようにdistを作成してしまうことが原因です。ビルドする際の設定は、vue.config.jsという名前のファイルをプロジェクト直下に作成し、そこを編集することで変更できます。
ということで、相対パスに変更しちゃいましょう。
ターミナル
$ touch vue.config.js
$ vim vue.config.js
vue.config.jsに下の4行を追加します。
vue.config.js
module.exports = {
  publicPath: "./",
  assetsDir: ""
}
※vue.config.jsをプロジェクト直下に作成し、上記の4行を追加すれば良いので勿論方法は自由です。

変更できたらビルドしましょう。
ターミナル
$ npm run build
サンプルページが表示されていれば成功です！

5. GitHub Pagesで公開

この記事ではCreate a new repositoryからPublicなリポジトリを作成する所まで割愛します。
GitHubのアカウント作成などのチュートリアルは優良な記事が大量に転がっているのでそちらを参考にしていただければ幸いです。

現状、.gitignore(隠しファイル)にdistが登録されているので、それを削除します。(Finderの場合、cmd+shift+. で隠しファイルの表示/非表示が設定できます。)
ターミナル
$ vim .gitignore
.gitignore
.DS_Store
node_modules
/dist <------- これを削除

# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
あとはクローンしてきて、クローンしたフォルダにプロジェクトの中身を全部入れます。(入れるのはdistだけでも表示できます。)
ターミナル
$ git clone https://github.com/アカウント名/リポジトリ名.git
あとはpushして準備完了。
ターミナル
$ git add -A
$ git commit -m "コメント"
$ git push origin master
githubリポジトリのSettingsから

SourceをNoneからmaster branchに変更して完成です。

https://ユーザ名.github.io/リポジトリ名/dist/index.html にアクセスして、無事ページが表示されればOKです！

最後に

vue-cli2系のconfig/index.jsと異なり、vue.config.jsは自分で作らなくてはならないことに気がつかず、気が狂うほどの時間を浪費してしまいました。公式リファレンスを熟読すれば一瞬でしたね...
余談にはなりますが、Vuetifyの公式リファレンスは英語で見ることを強く推奨します。日本語訳もありますが、なぜか情報の多くが欠落しています。ここも個人的ハマりポイントでした...

この記事に関してですが、自分自身理解の至らぬ点が多いと感じていますので、ミスの指摘や怪しいところがあれば、コメントに書いていただければ幸いです。
読んでいただきありがとうございました。

　 Tweet
Qiitaで続きを読む

投稿日：2019-05-26T23:35:17+09:00

VuetifyのsampleをGitHub Pagesで公開

Vuetify.jsを使って作ったwebページをGitHubPagesで公開する機会があったので、環境構築の経緯を備忘録がてら残しておきます。
nodebrewのインストールから書いているので、要らないところは目次を利用してスキップして下さい。
私の見た限りでは、vue-cli3系についてビルドの仕方を詳しく書いてある記事が存在しなかった(2系は多くの記事に巡り会えました)ため、vuetifyを使わないという方でも参考になるかと思います。

目次

nodebrewのインストール

vue-cli のインストール＆プロジェクトの作成

vuetifyのインストール

ビルドする

GitHub Pagesで公開

1. nodebrewのインストール

Homebrewでnodebrewを
ターミナル
$ brew install nodebrew

$ nodebrew setup
Fetching nodebrew...
Installed nodebrew in $HOME/.nodebrew
========================================
Export a path to nodebrew:

# ↓これをコピぺ
export PATH=$HOME/.nodebrew/current/bin:$PATH
========================================
# 自分のターミナルに表示された上のやつコピペしてパス通す
$ export PATH=$HOME/.nodebrew/current/bin:$PATH

# 保存
$ source ~/.bash_profile
ターミナル
# とりあえず安定版を入れておく
$ nodebrew install-binary stable

# 使用設定
$ nodebrew use stable

# npmをアップデート
$ npm update -g npm
これでnpmが使えるようになりました。

2. vue-cli のインストール

さっき入れたnodebrewのおかげでvue-cliがインストールできます！
ターミナル
$ npm install -g @vue/cli
プロジェクトの作成をします。プロジェクト名はなんでも良いですが、ケバブケース(大文字アンダーバー無しでハイフンあり)で作成しましょう。
ターミナル
$ vue create project-x
設定を色々聞かれますので、適宜設定してください。サンプルページや小規模なページであればEnter連打で問題ないかと思われます。

設定が完了したら、プロジェクトが作成されます。中に入って、サーバーを起動してみましょう。
ターミナル
$ cd project-x
$ npm run serve
App running at:
  - Local:   http://localhost:8080
  - Network: http://hogehoge:8080
ブラウザでhttp://localhost:8080にアクセスするとサンプルが表示されます。

3. vuetifyのインストール

このままvuetifyもインストールしちゃいましょう。
ターミナル
$ vue add vuetify
サーバを起動します.
ターミナル
$ npm run serve
App running at:
  - Local:   http://localhost:8080
  - Network: http://hogehoge:8080
ブラウザでhttp://localhost:8080にアクセスして、先ほどとページが変化しているのを確認しましょう。

4. ビルドする

いよいよビルドです。ビルドのコマンドは$ npm run build です。
コマンドを実行するとdistという名前のフォルダが作成され、その中に入っているindex.htmlが本体です。
しかし、ブラウザで開いてみると真っ白なページが表示されるだけでサンプルの姿はどこにもありません。
これはvue.jsがビルドする際にデフォルトでjsとcssを絶対パスで取得するようにdistを作成してしまうことが原因です。ビルドする際の設定は、vue.config.jsという名前のファイルをプロジェクト直下に作成し、そこを編集することで変更できます。
ということで、相対パスに変更しちゃいましょう。
ターミナル
$ touch vue.config.js
$ vim vue.config.js
vue.config.jsに下の4行を追加します。
vue.config.js
module.exports = {
  publicPath: "./",
  assetsDir: ""
}
※vue.config.jsをプロジェクト直下に作成し、上記の4行を追加すれば良いので勿論方法は自由です。

変更できたらビルドしましょう。
ターミナル
$ npm run build
サンプルページが表示されていれば成功です！

5. GitHub Pagesで公開

この記事ではCreate a new repositoryからPublicなリポジトリを作成する所まで割愛します。
GitHubのアカウント作成などのチュートリアルは優良な記事が大量に転がっているのでそちらを参考にしていただければ幸いです。

現状、.gitignore(隠しファイル)にdistが登録されているので、それを削除します。(Finderの場合、cmd+shift+. で隠しファイルの表示/非表示が設定できます。)
ターミナル
$ vim .gitignore
.gitignore
.DS_Store
node_modules
/dist <------- これを削除

# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
あとはクローンしてきて、クローンしたフォルダにプロジェクトの中身を全部入れます。(入れるのはdistだけでも表示できます。)
ターミナル
$ git clone https://github.com/アカウント名/リポジトリ名.git
あとはpushして準備完了。
ターミナル
$ git add -A
$ git commit -m "コメント"
$ git push origin master
githubリポジトリのSettingsから

SourceをNoneからmaster branchに変更して完成です。

https://ユーザ名.github.io/リポジトリ名/dist/index.html にアクセスして、無事ページが表示されればOKです！

最後に

vue-cli2系のconfig/index.jsと異なり、vue.config.jsは自分で作らなくてはならないことに気がつかず、気が狂うほどの時間を浪費してしまいました。公式リファレンスを熟読すれば一瞬でしたね...
余談にはなりますが、Vuetifyの公式リファレンスは英語で見ることを強く推奨します。日本語訳もありますが、なぜか情報の多くが欠落しています。ここも個人的ハマりポイントでした...

この記事に関してですが、自分自身理解の至らぬ点が多いと感じていますので、ミスの指摘や怪しいところがあれば、コメントに書いていただければ幸いです。
読んでいただきありがとうございました。

　 Tweet
Qiitaで続きを読む

投稿日：2019-05-26T22:37:10+09:00

Laravel Mix + Vue.jsで CSS Modules を使えるようにする

はじめに

Atomic Design ～堅牢で使いやすいUIを効率良く設計する、この本があまりに素晴らしくて、写経をしたいんだけど、実践で利用するのは Vue.js なので、読み替えて写経する必要がありました。

で、 https://github.com/katsuhiko/laravel-mix-template こちらで、 Docker + Laravel Mix で気軽に始めたんだけれども、コンポーネント内に CSS を閉じこめるところでつまづきました。

Vue.js には、スコープ付き CSS があるんですが、 slot を使った時や、子コンポーネントの扱いでイマイチな気がして、 CSS Modules を使うことにしたんですが、少し手間がかかったので、記録として残します。

webpack.mix.js の編集

CSS Modules を有効にするためには、 webpack.config.js の設定を追加する必要があります。

Quick webpack configuration の「2.」の方法、mix.webpackConfig() を利用する方法を今回は使います。
const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    // CSS Modules を有効にするために以下を追加
    .webpackConfig({
      module: {
        rules: [
          {
            test: /\.css$/,
            loaders: [
              {
                loader: 'css-loader',
                options: {
                  modules: true,
                  localIdentName: '[local]_[hash:base64:8]',
                },
              },
            ],
          },
        ],
      },
    });
component の作り方

設定が終われば、 CSS Modules を使ったコンポーネントの作り方は簡単です。

style タグで module 属性を指定し、CSSクラスを指定するときに $style オブジェクト経由で bind するのみです。
<template>
  <span :class="$style.balloon"><slot></slot></span>
</template>

<style module>
.balloon {
  background-color: #1a1a1a;
  border-radius: 2px;
  color: white;
  display: inline-block;
  font-size: 0.8rem;
  padding: 0.4rem 0.5rem;
  position: relative;
}

.balloon::after {
  border-color: #1a1a1a transparent transparent transparent;
  border-style: solid;
  border-width: 3px 3px 0 3px;
  bottom: 0;
  content: "";
  display: block;
  height: 0;
  left: 50%;
  position: absolute;
  transform: translate(-50%, 100%);
  width: 0;
}
</style>

<script>
export default {
}
</script>
上記コンポーネントを利用するために、テンプレートとして以下のように記述すると
<balloon-el>次へ</balloon-el>
HTML として出力されるときには以下のようになっています。
<span class="balloon_3tlcaaYA">次へ</span>
CSS Modules になっています！

さいごに

Laravel Mix はビルドの動きを知らなくても気軽に使える利点はあるのですが、一歩先に進もうとすると、やはり動きを知る必要が出てきます。

導入系記事は多いんですが、カスタマイズになると情報・記事が少ない気もします。案外、一歩先に進む人は、自前で Webpack を整備するのかな。それとも Vue cli かな。

しばらくは、Laravel Mix を使おうと思うのですが、Storybook との兼ね合いでも、一手間かかりそうな気がしています。

Rails の Assets Pipeline は、自分には合わない感じだったので、もうちょっと Vue.js のことが理解できるようになったら、 Laravel Mix も合わなく感じでしまうかもしれないなーっと、CSS Modules を調べていて思いました。

参考

https://github.com/JeffreyWay/laravel-mix/issues/1930

　 Tweet
Qiitaで続きを読む

投稿日：2019-05-26T21:08:51+09:00

Railsで開発したAPIをたたく from Vue.js/Vuex（ページング・アソシエーションを考慮してJSONで返す）

移転しました。今後はブログに書こうかと思います。
https://fuee72.hatenablog.com/entry/rails-api-vuex

　 Tweet
Qiitaで続きを読む

投稿日：2019-05-26T18:12:58+09:00

気軽に神グラフ作れるクソアプリ作った

やったこと

神グラフジェネレータ
https://k-karen.github.io/vue-chartjs-sample/
Vue.js + vue-chartjs + git hub-pages ( + Vuetify ) 　
で簡単なグラフ(折れ線・円・棒)を書けるSPAを作りました。
リポジトリ: https://github.com/k-karen/vue-chartjs-sample

神グラフとは

先日、Twitterで話題になった年収400万円と800万円の比較のグラフや、
古からネタになっているWindowsのversionのグラフなどの割とシンプルなグラフのことです。

サンプル



使い方

① - 各行を削除できます(入れ替え機能は実装していません)
② - 表示(⑦)した画像が表示されるエリア、画像を非表示にする で非表示にできます
③ - 行を追加できます
④ - このボタンの左側のcolorのinput formに入れた色で色を統一できます
⑤ - すべての行色をランダムに振り直します
⑥ - localStorageにグラフを保存します。上のドロップダウンリストから読込めます
⑦ - pngでページ右側(画面が狭いとページ下部)にグラフを出力します
⑧ - 選択中のlocalStorageのデータを削除します
⑨ - グラフのタイプ(棒/折れ線/円) を切り替えられます(フォームのデータは消えます)

上限・下限は、そのフォームの値よりも上の項目の値の最大・最小値が優先されます。

グラフの上限 = max(項目の上限, 上限フォームの値)
グラフの下限 = min(項目の下限, 下限フォームの値)

使用例

一度ホーム画面に追加すればオフラインでも使用でき、
localStorageを利用してSaveもできるので、
いつでもご自身のスマホにクソグラフネタを蓄積することができます。

参考リンクなど

Vue.js, git hub-pages

親コンポーネントと子コンポーネントの双方向バインディング
https://qiita.com/Sa2Knight/items/544b3f157108b96033fe
(折れ線グラフの色だけ、rgbaで受け取れるようにしたのですが、
そのcomponentを作るときに参考にしました)

travisでgh-pagesへ自動デプロイ
https://qiita.com/dorarep/items/010a8a7c278ff0107520
(記事はnuxtのものですが、vueでも設定することはほとんど同じでした)

自分の記事です(vue.config.jsを設定しようねという記事)
https://qiita.com/k-karen/items/9c8b38f54509369c5946

vue-chartjs

vue-chartjs
https://vue-chartjs.org/
componentの呼び方使い方だけはこれを見ればわかります

chartjs
https://www.chartjs.org/
実際は入力した数値以外にもoptionをあれこれ設定しているのですが、
optionについてはvue-chartjsのサイトにはあまり詳しく乗っていないので、
chartjsの方を参考にするか、都度ググりました。

最後に

実装内容を紹介しようと思ったのですが(特別なことはあまりないので)、
コードが汚すぎてキツかったので、諦めました。
作ったものをデプロイして公開するのは初めてなので、至らぬ点あるかと思いますが、
不具合などあればご報告いただければ力の及ぶ範囲では修正したいと思います。
皆様も積極的に数値を可視化し神グラフを量産、
最高の神グラフライフをお送りいただければと思います。
ここまで読んでくださった方々ありがとうございました。

　 Tweet
Qiitaで続きを読む

投稿日：2019-05-26T18:12:58+09:00

Vueとchart.jsで気軽に神グラフ作れるクソアプリ作った

やったこと

神グラフジェネレータ
https://k-karen.github.io/vue-chartjs-sample/
Vue.js + vue-chartjs + git hub-pages ( + Vuetify ) 　
で簡単なグラフ(折れ線・円・棒)を書けるSPAを作りました。
リポジトリ: https://github.com/k-karen/vue-chartjs-sample

神グラフとは

先日、Twitterで話題になった年収400万円と800万円の比較のグラフや、
古からネタになっているWindowsのversionのグラフなどの割とシンプルなグラフのことです。

サンプル



使い方

① - 各行を削除できます(入れ替え機能は実装していません)
② - 表示(⑦)した画像が表示されるエリア、画像を非表示にする で非表示にできます
③ - 行を追加できます
④ - このボタンの左側のcolorのinput formに入れた色で色を統一できます
⑤ - すべての行色をランダムに振り直します
⑥ - localStorageにグラフを保存します。上のドロップダウンリストから読込めます
⑦ - pngでページ右側(画面が狭いとページ下部)にグラフを出力します
⑧ - 選択中のlocalStorageのデータを削除します
⑨ - グラフのタイプ(棒/折れ線/円) を切り替えられます(フォームのデータは消えます)

上限・下限は、そのフォームの値よりも上の項目の値の最大・最小値が優先されます。

グラフの上限 = max(項目の上限, 上限フォームの値)
グラフの下限 = min(項目の下限, 下限フォームの値)

使用例

一度ホーム画面に追加すればオフラインでも使用でき、
localStorageを利用してSaveもできるので、
いつでもご自身のスマホにクソグラフネタを蓄積することができます。

参考リンクなど

Vue.js, git hub-pages

親コンポーネントと子コンポーネントの双方向バインディング
https://qiita.com/Sa2Knight/items/544b3f157108b96033fe
(折れ線グラフの色だけ、rgbaで受け取れるようにしたのですが、
そのcomponentを作るときに参考にしました)

travisでgh-pagesへ自動デプロイ
https://qiita.com/dorarep/items/010a8a7c278ff0107520
(記事はnuxtのものですが、vueでも設定することはほとんど同じでした)

自分の記事です(vue.config.jsを設定しようねという記事)
https://qiita.com/k-karen/items/9c8b38f54509369c5946

vue-chartjs

vue-chartjs
https://vue-chartjs.org/
componentの呼び方使い方だけはこれを見ればわかります

chartjs
https://www.chartjs.org/
実際は入力した数値以外にもoptionをあれこれ設定しているのですが、
optionについてはvue-chartjsのサイトにはあまり詳しく乗っていないので、
chartjsの方を参考にするか、都度ググりました。

最後に

実装内容を紹介しようと思ったのですが(特別なことはあまりないので)、
コードが汚すぎてキツかったので、諦めました。
作ったものをデプロイして公開するのは初めてなので、至らぬ点あるかと思いますが、
不具合などあればご報告いただければ力の及ぶ範囲では修正したいと思います。
皆様も積極的に数値を可視化し神グラフを量産、
最高の神グラフライフをお送りいただければと思います。
ここまで読んでくださった方々ありがとうございました。

　 Tweet
Qiitaで続きを読む

投稿日：2019-05-26T09:58:07+09:00

Nuxt.js・Vue.js の基本的な使い方を理解する

概要

Nuxt.js (Vue.js) を使って簡単な画面を実装することを通して、Nuxt.js の基本的な使い方を学びます。
今回実装する画面の仕様は以下の通りです。

API から json データを取得する（今回は json を取得する関数で代用）

データをテーブルに表示する

データの件数も表示する

実際にこんな画面ができあがります。

準備

必要なソフトウェア

事前に以下のソフトウェアをインストールしておく必要があります。

Node.js

Yarn

好みのエディタ (VSCode がおすすめ)

Nuxt.js のプロジェクトを作成する

Nuxt.js のプロジェクトは create-nuxt-app を使うとほんの数分で作成できます！
$ yarn create nuxt-app nuxt-json-to-table
いくつか質問されますが、以下のようにします。
詳しい説明は今回の本題から外れるので省略します。
? Project name nuxt-json-to-table
? Project description My super-duper Nuxt.js project
? Use a custom server framework none
? Choose features to install Linter / Formatter, Prettier
? Use a custom UI framework none
? Use a custom test framework none
? Choose rendering mode Universal
? Author name Taro Yamada
? Choose a package manager yarn
これで Nuxt.js のプロジェクトが作成されました！

開発環境を起動する

プロジェクトのディレクトリに移動し、yarn dev コマンドで開発環境を起動します。
$ cd nuxt-json-to-table
$ yarn dev
http://localhost:3000 を開き、以下のような画面が表示されたら起動成功です！

これで開発の準備が整いました！

実装

早速ですが、以下のような流れで実装していきます！

ページを作成する

json を取得する関数を用意する

ボタンを押すと json を取得してそのまま表示する

データをテーブルに表示する

件数を表示する

ページを開いたときに json を取得する

各ステップごとに、まず実装（コード）を示してから、その中で使った構文などを解説するというスタイルで進めます。

ページを作成する

まずはテーブルを表示するためのページを作成しましょう。
ページを作成するには、pages ディレクトリに Vue ファイルというものを作成する必要があります。

以下の内容で pages/table.vue を作成します。
pages/table.vue
<template>
  <div>
    <h1>table page</h1>
  </div>
</template>

<script>
export default {}
</script>
保存したら、http://localhost:3000/table を開いてみてください。
以下のような画面が表示されるはずです。

たったこれだけでページを作成することができました！簡単ですね！

せっかくなので、作成したページへのリンクをトップページに表示してみます。
pages/index.vue を以下のように編集します。
pages/index.vue
 <div class="links">
   <a href="https://nuxtjs.org/" target="_blank" class="button--green"
     >Documentation</a
   >
   <a
     href="https://github.com/nuxt/nuxt.js"
     target="_blank"
     class="button--grey"
     >GitHub</a
   >
+  <n-link to="table" class="button--grey">Table</n-link>
 </div>
保存したら、http://localhost:3000 を開いてみてください。
「Table」のリンクが増えているはずです！

これでページの作成は完了です！

「Vue ファイル」「pages ディレクトリ」「n-link」という見慣れないものが出てきたと思います。
以下で説明します。

Vue ファイル

pages/table.vue のように、Vue ファイルには関連する HTML・JavaScript・CSS を1つのファイルにまとめて書きます。
（外部から読み込むことも可能）

HTML は <template> ブロックに書く

JavaScript は <script> ブロックに書く

CSS は <style> ブロックに書く

HTML・JavaScript・CSS それぞれでファイルを分けることと比較して、以下のような利点があります。

UI コンポーネントごとにコードが分離される

影響範囲を Vue ファイルの中に閉じ込めることができる

保守しやすくなる

個人的にはもう HTML・JavaScript・CSS それぞれでファイルを分けることはしなくないです...笑

ちなみに、Vue ファイルのことを単一ファイルコンポーネント (Single File Component) と言います。SFC と略されることが多いです。（スーパー○ァミコンではないです）

Nuxt.js におけるルーティング

Nuxt.js では、pages ディレクトリに Vue ファイルを作成すると、そのディレクトリ構造に沿ってページが作成されます。

ルーティング - Nuxt.js
https://ja.nuxtjs.org/guide/routing

別のページへのリンクを作成するときは nuxt-link (n-link) タグを使います。

ちなみに、ルーティングには Vue Router を使っており、Nuxt.js を使わない場合は自分で設定する必要があります。

json を取得する関数を用意する

続いて、json を取得する関数を用意します。

<script> の直下に getJson() 関数を定義します。
table.vue
/**
 * 年齢別の推定ユーザー数を json で返す。件数はランダム
 */
function getJson() {
  const ages = Array.from(
    new Set(
      new Array(parseInt(Math.random() * 100))
        .fill(null)
        .map(() => parseInt(Math.random() * 100))
    )
  )
  return ages.map(age => ({
    age,
    users: Math.random() * 10000
  }))
}
この関数は以下のように年齢とその推定ユーザー数を返します。
[
    {
        "age": 32,
        "users": 66.6471422182191
    },
    {
        "age": 14,
        "users": 6426.058219829258
    },
    ...
]
実装の説明は今回の本題から外れるので省略しますmm

ボタンを押すと json を取得してそのまま表示する

定義した getJson() を使って、json を画面に表示してみましょう。

まずは、「ボタン」と「json を表示する場所」を pages/table.vue の <template> に記述します。
pages/table.vue
 <template>
   <div>
     <h1>table page</h1>
+    <button @click="fetch">fetch</button>
+    <p>{{ items }}</p>
   </div>
 </template>
ボタンには @click="fetch" を付与していて、クリックされたら fetch() メソッドを実行するようにしています。

次に、ボタンを押した時の処理を pages/table.vue の export default {} に記述していきます。
pages/table.vue
export default {
  data: () => ({
    items: []
  }),

  methods: {
    fetch() {
      this.items = getJson()
    }
  }
}
保存したら、http://localhost:3000/table を開いてみてください。

fetch ボタンをクリックすると json が表示されました！

data とか methods とか急に色々でてきましたね。順番に紹介していきます。

data

コンポーネントの状態をここに書きます。

画面に表示すべきデータ、表示の有無などを保持するのに使います。

関数にする必要があります。

{{ }} (ムスタッシュ構文)

data を DOM にバインディングします。

data の更新を検出して自動的に画面を更新してくれます。

methods

<template> 内で利用できるメソッドをここに記述します。

<template> 内で使う必要がなければ Vue インスタンス外に関数定義しても構わないです。

@click (v-on:click)

クリックイベントを登録するために使います。

上記の methods で定義したメソッドも指定できます。

@input は input イベント、@change は change イベントなど、基本的な DOM のイベントハンドラをこの構文で登録できます。

データをテーブルに表示する

では、取得した json からテーブルを描画してみます。
pages/table.vue で、json をそのまま表示させていた部分を table に置き換えます。
pages/table.vue
-<p>{{ items }}</p>
+<table border="1">
+  <tr>
+    <th>年齢</th>
+    <th>推定ユーザー数</th>
+  </tr>
+  <tr v-for="item in items" :key="item.age">
+    <td>{{ item.age }}</td>
+    <td>{{ item.users }}</td>
+  </tr>
+</table>
保存したら、http://localhost:3000/table を開いてみてください。

テーブルが表示されました！

このステップでは、v-for という構文が出てきました。

v-for

配列から同じ要素を繰り返し表示するために使います

繰り返される要素に key を指定することが推奨されています。

書き方によっては配列の変化を検出できないことがあるので注意が必要です。

件数を表示する

続いて、取得したデータの件数を表示してみましょう。

pages/table.vue の <template> に件数を表示する部分を追加します。
pages/table.vue
 <div>
   <h1>table page</h1>
   <button @click="fetch">fetch</button>
+  {{ length }}件 fetch しました
   <table border="1">
     <tr>
       <th>年齢</th>
length が必要なので、<script> 部分で以下のように定義します。
pages/table.vue
   items: []
 }),

+computed: {
+  length() {
+    return this.items.length
+  }
+},

 methods: {
   fetch() {
     this.items = apiRequest()
   }
保存したら、http://localhost:3000/table を開いてみてください。

件数が表示されました！

このステップでは、件数を求めるために computed という構文を使いました。

computed (算出プロパティ)

data の値を元に評価される値です。

呼び出し時に、data の更新を検出して再評価されます。

methods とは明確な違いがあります。

ページを開いたときに json を取得する

いよいよ最後です。ページを開いた時に自動的に json を取得するようにしてみます。
（開いた時点でデータが表示されていてほしいですよね？）

pages/table.vue の <script> に以下を追加します。
pages/table.vue
   }
 },

+created() {
+  this.fetch()
+},

 methods: {
保存したら、http://localhost:3000/table を開いてみてください。
fetch ボタンを押さずともテーブルにデータが表示されたはずです！

ページを開いたときに何か処理を実行したい場合は created を使います。

created

Vue インスタンスが生成された直後に呼び出されます。

mounted や updated など、他にも様々なタイミングで発火するライフサイクルフックがあります。

ページを開く時に API からデータを取得する場合は asyncData の方が適切なことが多い。

まとめ

ここまでで、最初に説明した仕様をすべて満たすことができました！

この記事では、取得したデータをテーブルに表示するページの実装を通して、Nuxt.js (Vue.js) について以下の内容を学びました。

SFC

ルーティング

data

methods

computed

ムスタッシュ構文

@click (イベント)

v-for

created (ライフサイクルフック)

これらは Nuxt.js・Vue.js のほんの一部にすぎませんが、

Nuxt.js・Vue.js のことが少し理解できた！

Nuxt.js・Vue.js を使ってみたくなった！

と思っていただけたら嬉しいです！

また、本文中でも Nuxt.js・Vue.js の公式ドキュメントへのリンクを入れていたのですが、Nuxt.js・Vue.js は公式ドキュメントが本当に充実しています！しかも日本語です！
そのおかげで勉強するにあたっての敷居はかなり低いので、少しでも興味を持ったらぜひ読んでみてくださいー！

おまけ

さらに改良してみる

今回実装したページにはまだまだ改善の余地がありますよね...！
改善案と、それを実現するために使う Nuxt.js・Vue.js の機能を紹介しておくので、ぜひチャレンジしてみてください！

小数点以下を四捨五入して、3桁区切りのカンマを表示する

filter を使う

fetch 中は「Loading...」と表示する

v-if を使う

値が大きいほどセルの背景色を濃くしてみる

v-bind を使う

表示する数値は推定ユーザー数固定ではなく、フォームから入力して指定できるようにする

v-model を使う

フォームで指定したものをクエリパラメーターとして保持する

route.query, watchQuery を使う

fetch ボタンとテーブルのコンポーネントを分離する

components, props, slot を使う

四捨五入の filter を共通化する

mixin or plugin を使う

実装サンプル

今回実装したコードは以下のリポジトリに置いてあります！
「おまけ」についてもすべてて実装済みです。
https://github.com/shun91/nuxt-json-to-table

　 Tweet
Qiitaで続きを読む