Vue CLI3 を使う
何度も使っているはずなんですけどいまいち毎回躓くのでメモっていきます。
バージョン
2018年10月現在のメジャーバージョンはVue CLI3です。
まず最初につまずくのがこのバージョンです。というのも、3にメジャーアップデートがなされたのはつい最近*1で、configの様相などがガラッと変わってしまったんですね。Vueは日本語コミュニティが比較的活発でたくさん解説記事が出ていたり商業本も出始めているのですが、当然Vue CLI2までを前提に解説しているところが多いので、親切な記事を読みながら手元では3を操作していると事故ります。事故りました。というか資料が全然ない。まずもって最初のプロジェクト作成からコマンド(というか思想)が違うので気をつけましょう。
参考
GUIあるの知らなかった。 jp.vuejs.org
そしてなんと実はVue CLI3のドキュメントはこの記事を書いている現在英語と中国語とロシア語版しかありません。これを機に英語ドキュメント読解力を磨いていきたい(?)。
以下 Vue CLI3 を前提にしていきます。
カレントディレクトリにプロジェクトを作る
Gitでコードを管理していたりするとまず最初にディレクトリが存在していることが多いと思います。自分は多いです。
しかし普通にCLIに身を任せプロジェクト名を指定してプロジェクトを作ると、新たなディレクトリが作成されそこにプロジェクトが生成されてしまいます。
Vue CLI3のプロジェクト作成コマンドは
vue create <project name>
ですが、すでにあるディレクトリ内からプロジェクトを展開したいときはカレントディレクトリを指定します。
vue create .
そうすると
? Generate project in current directory? (Y/n)
と聞かれるので、Y を入力して先に進みます。 package.json
の nameパラメータは勝手にカレントディレクトリの名称に設定されます。便利。
設定ファイルをつくる
プロジェクトを作成したのでこのままでも最低限開発を始めることはできるのですが、Webpackの設定をいじったり諸々ファイル管理を行う場合は vue.config.js
というファイルを手動で作成する必要があります。Webpackの設定もここに書きます。これが異様にややこしい。どのドキュメントをみればいいのかわからない。もともとドキュメント読めないけど
Webpackそのものもあんまり理解してないので二重苦なんですよね……
pugを入れる
一度閉じタグのない環境に慣れてしまったらもう戻れません。というわけで開発には必ずpugを使うのですが、CSSのプリプロセッサと違ってこれはCLIの設定項目にはありません。
調べていると pug-loader
がどうの pug-plain-loader
がどうのと出てくるんですが、自分でloaderを指定しようとすると爆死します(しました)。Vue CLI3ではpugの読み込みも親切な方がパッケージングしてくれているのでそれをつかいます。
導入は簡単。
vue add pug
これだけ。冗長と言わざるを得ないnpm モジュール名すら入力する必要がありません。これでもう vue.config.js
の configureWebpack
に長々とプロパティを書き込んで頭を抱えることもなく、ただ pages
の template
にpugファイルを指定すればよしなにコンパイルされます。爆速!*2
まとめ
Vue CLI3は2に比べて総合してカプセル化*3が進んで、設定が楽になった反面とっつきにくさと細かい設定のしにくさが増した感じがしますね。複雑なことをしようとするとまた頭を抱えそうです。
Vue CLIに限らないですが、こういう新しいものに触れるたび、ドキュメント原典に対する苦手意識をなくしたいと強く思います。
基礎から学ぶVue.jsを読んだ
業務でVue.jsを使っていて危機感を覚えたのでさらっておこうと思い買いました(紙の本過激派)。
- 作者: mio
- 出版社/メーカー: シーアンドアール研究所
- 発売日: 2018/05/29
- メディア: 単行本(ソフトカバー)
- この商品を含むブログを見る
どうでもいいけどなんで商品画像が写真なんだろう。
発見
学びは多すぎて全部書いたらこの本になってしまうんですが、個人的にすぐに役立ちそうだなあと思ったのは以下
Vue.jsのライフサイクルフックダイアグラム (p48)
新しい知識というより、mountedとかcreatedとか正直よくわからないしこれからもわからなくなるだろうなと思うので、本書序盤に掲載されているこの図はとても重宝しそうです。
繰り返し処理を実装するときは個々の要素に不変でユニークなkeyを設定する (p72)
v-forの話です。リストなどをオブジェクトの要素から繰り返し処理で描画する際、keyを設定しておくと、後々一部の要素だけ削除などの操作をしたときに他の要素の不要な再描画が防げるらしいです。
Vuexの設計について
Vuexストアの構成が冗長にしか思えず混乱していたので、綺麗に図で確認できたことですっきりしました。本書はとにかく図解がわかりやすくてよいです。
感想
基本的にフレームワークというものを理解していなかったので、1からさらうことでどういう想定でどんな風に機能がつけられていったのかというようなことが察せて面白かったです。文章も平易で大変読みやすいです。
ただそれなりの規模のアプリケーションを作り慣れている人の目線や、見えない前提知識を随所に感じたので、全く触れたことがない状態の初心者として読んだら数段つらかっただろうなと思います。そのへんの暗黙の意図であったり真の利便性や効力だったりは、これから実戦を経て理解していきたいです。
Google Spreadsheet を JSONファイルとしてダウンロードしたい(1)
GASとNode.jsでどうにかならないかと格闘した記録です。結論から言うとすんなりできなかったので続きます。
ゴール
JavaScript から API を叩いて、スプレッドシートを json ファイルとしてローカルにダウンロードできるようにしたい。
ただし業務効率化の一貫なので、作成するWebアプリのアクセスは社用のドメイン制限内に限る。
GASでスプレッドシートを jsonファイルとして取得できるAPIをつくる
スプレッドシートといえばGAS。jsonファイルのダウンロードができないか探してみます。
いい加減ググることから卒業したいんですが、未だぶっつけで公式ドキュメントと格闘しようとすると100倍くらい時間がかかって挫折しかねないので結局ググる。
素晴らしい記事をみつけました。何か有用性があるかもしれないと思い後半のパラメータつきのコードをお借りしてWebアプリを作成、出てきた実行用URLにブラウザでアクセスしてデータ取得成功。
1つだけ、最初の実行時に
TypeError: null のメソッド「getDataRange」を呼び出せません。
というエラーが出たんですが、対象にしているシートのタブ名がスクリプトと符合していないだけでした。このスクリプトでは Sheet1
と文字列指定している*1のですが、日本語環境でスプレッドシートを作成した際のデフォルトのタブ名は シート1
なので注意が必要かもしれません。
こちらも参考になった。
公式はこの辺らしい。
Content Service | Apps Script | Google Developers
ここまでは順調です。次はこの作成したAPIに、ローカルからアクセスする方法を探していきます。
*1:doGet()2行目