はじめに
クソアプリ Advent Calendar 2018 4日目の記事です。みなさん原稿が〆切に間に合ってて偉いです。
こんにちは。りまりま団のもふもふです。この記事はノリでクソアプリ Advent Calendar2018 （https://qiita.com/advent-calendar/2018/kuso-app）に申し込んでしまったもふもふちゃんでもVue.jsの力でクソアプリを作ることができました。あ、これ以降くそをKUSOと表記しますのでご了承ください。
完成形
出来上がったものはこちらです。
みてくださいこの色使い！！！見辛さからもKUSO感が伝わってきます。
ただ、中身はVue.jsの基本機能を用いたWebアプリケーションとなっています。JSONからのデータの取得・Propsを利用した親子間でのデータ受け渡し・Propsで取得したデータを用いたDOM操作・SVGの利用などを行っています。ちなみにKUSOアプリなのでPCで見ないとCSSが崩れます。そして画面の大きさによって崩れが発生するところもあります。KUSOですね。
使った技術スタック
このWebアプリケーションを作成するために使ったモノを全部書きます。
周辺機器
Mac Book Pro 2015を使っていたのですが、Photoshopが動かなくなってしまったのでMac miniを購入しました。瞬きしている間にVueアプリケーションのビルドが終わります。メモリ32GBの力を感じます。
- Mac Book Pro（2015年購入）
- Mac mini（2018年11月購入）
- iPad Pro (9.7-inch)
- Apple Pencil
アプリを作るのに使った技術
Vue CLI3を利用してセットアップしました。始めて触るのであればCDNを利用した方が良いでしょう。Vue CLIを利用する場合、所々公式ドキュメントの記述と違う書き方をする必要が出てくるので、「これどうすればいいんじゃ〜」となってしまって進まないからです。
- Vue.js(2）
- Vue CLI3
- JavaScript（ECMAScriptの記法を利用）
- CSS
- HTML5
- SVG
検査ツール
どちらもVisual Studio Code（以降VS Codeと記述します）記述のスタイルを検査するためだけに使用したため、本格的には導入できませんでした…。本格的な利用は次回に向けての宿題とします。
- ESLint
- Vue.js Extension Pack
デバッグツール
普段ブラウザはChromeを利用しているので、デバッグもChromeで行いました。Vue.js公式からデバッグツールが提供されているため、データがきちんと割り当てされているかはChromeで確認しました。
処理のデバッグ？それはconsoleメソッドを使って行いました。VS Codeのデバッグツールは私には早すぎました。
devtoolsと一緒に使えなかった、という理由もあるのですが、セットアップ方法が間違ってたのかもしれません。この点も次回への宿題としたいと思います。
- Vue.js devtools
アプリ用データ
文字列はJSONで、本の画像はPNGで管理することにしました。
- JSON
- png
Vue.js JSONで検索すると、90%くらいの確率でaxiosを利用した方法を使っているのですが、今回はデータ数が少ないのでassetsにJSONファイルを配置し、importで取得する方法をとりました。
バージョン管理
portfolio-vueという名前でGitHub上にリポジトリを作成しました。
- Git
- GitHub
デプロイ先
費用はかけたくないし、できればGitHub連携したい。それに規模も小さい、ということでNetlifyを利用しました。
- Netlify
Vue.jsでプロジェクトフォルダ内のJSONデータを取得する方法
Vue.jsでのアプリケーション作成方法は情報が多いのですが、これは情報がなかったので…。
はじめに、JSONデータを作成してassetsディレクトリへ配置します。Vue CLI３を用いてプロジェクトを作成していることが前提ですが、他の場所でもimport文を変更すればうまくいくと思います。
[
{
"book_description": "Elasticsearch社のプロダクトであるElasticsearch・Logstash・Kibanaを用いてログを分析してみようという本です。各ミドルウェアのインストールからKibanaでグラフを描画するまでの道のりを一通り網羅しつつまとめました。インプレスR＆Dさんから商業化もされています。",
"book_id": 1,
"book_info": [
{
"book_info_id": 1,
"book_info_title": "技術書典2 もふもふちゃんの戦い履歴",
"book_info_url": "http://rimarimadan.hatenablog.com/entry/2017/04/12/技術書典2_もふもふちゃんの戦い履歴"
},
{
"book_info_id": 2,
"book_info_title": "商業本",
"book_info_url": "http://amzn.asia/d/be7bGtk",
}
],
"book_title": "ログと情報をレッツ・ラ・まぜまぜ！～ELK Stack で作るBI環境～",
"booth_url": "https://booth.pm/ja/items/490460",
"overviews": [
{
"overviews_id": 1,
"overviews_promotion": "ふざけたタイトル"
},
{
"overviews_id": 2,
"overviews_promotion": "なにも伝わってこない表紙"
},
{
"overviews_id": 3,
"overviews_promotion": "布教本のはずなのにまさかの省略記法を使っている"
}
]
},
次に、JSONデータを利用したいコンポーネントへJSONファイルをインポートします。+の箇所がインポートしているコードです。
<template>
<div class="book-description">
<div class="description" v-bind:description="descText">{{ descText }}</div>
</div>
</template>
<script>
+ import bookData from '../assets/book-data.json'
export default {
name: 'bookDescription',
data() {
return {
bookData: bookData
}
}
}
</script>
<style scoped>
.book-description {
margin-top: 20px;
width: 570px;
}
.description {
font-size: 16px;
line-height: 26px;
}
</style>
JSONからデータを取得するときはインポート時につけたJSONファイル名[何番目のJSON項目かを示すインデックス番号].取得したいデータに対応する名前とすれば取得できます。実際に見てみましょう。このコードでは、1番目の同人誌の情報が入ったJSONからbook_descriptionという名前の項目の情報を取得しています。
次に示す例では"Elasticsearch社のプロダクトである...という値がdescriptionというクラス名のHTML要素として画面に描画されることになります。
<template>
<div class="book-description">
<div class="description" v-bind:description="descText">{{ descText }}</div>
</div>
</template>
<script>
import bookData from '../assets/book-data.json'
export default {
name: 'bookDescription',
data() {
return {
bookData: bookData
}
},
+ computed: {
+ descText : function() {
+ return bookData[0].book_description
+ }
+ }
}
</script>
<style scoped>
.book-description {
margin-top: 20px;
width: 570px;
}
.description {
font-size: 16px;
line-height: 26px;
}
</style>
JSONの項目名overviewsのように、1つの項目に複数のデータが紐づく場合、bookData[0].overviews[ほしいデータのインデックス番号].overviews_promotionのように記載するとデータを取得することが可能です。
次のコードを記載した場合、returnの値はふざけたタイトルとなります。
computed: {
// importしたJSONデータをdataListに代入
const dataList = bookData;
return bookData[0].overviews[0].overviews_promotion;
}
データ量が少ない場合、HTTP通信が発生するaxiosを使うよりもassetsディレクトリにJSONを配置して値を取得する方が良いと思います。記述量も減りますし、単純な実装でアプリケーションを作成することができるからです。もちろんこれはKUSOアプリを作るに当たってのお気持ちです。実業務ではまず利用しないと思います。
おきもち
よかった点
まず、完成してデプロイできたということでしょう。諦めずに最後まで取り組んだだけでも十分だと思います。次に、SPAとして動的なWebサイトを作れたことです。難しいことはしていませんが、それなりにきちんと動くものができる。これはVueのすごいところだと思います。
改善点
時間がなくて手が回らなかった部分です。GitHubのissuesに記載していますので、順次対応していこうと思います。特にレスポンシブ対応はやりたいです。かなり崩れが発生するので…。独自ドメインはお金がかかるので一旦保留ですね。設定方法はわかるのですが…。また、テストもぜひやりたいです。業務でテスト書かない現場ばかりだったので…。
- トップページの実装
- アプリ内のページ遷移の実装
- 画面のURL表示をタイトル表示に切り替える
- レスポンシブ対応
- フォントの埋め込み
- 独自ドメインの取得
- コンポーネントへのテストを記載する
- Nuxt.jsで同じ実装をするとどうなるのか比較する
総括
今までWebアプリケーションを完成させてデプロイした経験が無かったのですが、なんとか見せられるものができてよかったです。しかし、まだ戦いは終わっていません。
手が回らなかった分は順次対応したいですし、何よりこのKUSOアプリケーションを作った記録をコミックマーケット95の新刊として出すのです。なんとかスマブラ発売前に入稿することができましたが、恐怖の印刷所からの不具合電話対応が待っています。
さあ無事新刊は出るのか？？？？出ないのか？？？
コミックマーケット2日目のりまりま団でお会いしましょう。