Vue + Rails ではてなブックマークをインポートできるアプリを作った

習作なので実用性は低い。
後述するように Heroku にデプロイしてきちんと動いているので、動作に問題はない。

作成した目的

サーバーサイドの知識がなさすぎるので、それを学ぶため。
実際に何かを作るのが一番勉強になるし、ソースコードが手元に残るという利点もある。
それと、Vue を使って一から自分で何かを作ったことはなかったので、それを経験するという目的もあった。

当面はウェブエンジニアをやっていくつもりだが、CRUDアプリの開発とその運用が出来れば、「ウェブプログラミングの基礎は出来る」と言えると思っている。
プログラマーのススメという記事に「Webアプリを作るってことは、一言で言えば、データベースのラッパー（CRUD）を作るだけの話。」という一文があるが、自分もそう思う。今回作ったアプリには削除機能はないので、CRUDのDはないが。
要は、ブラウザを通してデータベースとやり取りして、データを表示したり操作したりする、というものを作れればいいと思っている。

なのでその第一歩として、このアプリを作った。
もちろん内容としては初歩の初歩であり、「本物のプロダクト」からは程遠いものだが、今必要なのは広く浅く学んで概要や全体像を掴むことなので、これでいいはず。

「砂場」を作るのも目的の一つ。
気になったことをすぐに試せるような環境を、作っておきたかった。
フロントエンドや Rails で新しいことを学んだときに、それをすぐに試せる題材。既に書いたように、実際に使うのが一番勉強になる。そしてその対象は、「Hello world」ではなく出来るだけ実用的なもののほうがいい。そのほうが、新しく学んだ技術の具体的な使い勝手を学べる。
例えば、Vue や Vuex のテストや、Rails のE2Eテストをこれから学んでいくつもりだが、このアプリを対象にテストを書くことで、より実践的に学習できる。
AWSについてももっと学びたいが、そのための題材としてこのアプリを使うことも出来る。

技術的なこと

既に少し書いたが、全体像を掴むことが大事だと思っているので、クオリティを高めることよりも、ゼロから作ってそして最後まで完成させることを重視した。

フロントは、Vue + Vuex + Vue Routerという、オーソドックスな Vue アプリだと思う。
デザインにはBulmaというライブラリを使っている。
ビルドはwebpack。Webpackerは使っていないし、アセットパイプラインも使っていない。
なるべくフロントエンドと Rails が疎結合になるように心掛けたので、Rails はほとんとAPIサーバーのような使い方をしている。
これも「砂場」の一例で、フロントエンドだけを分離することで、新しい技術を学ぶときの素材として使える。例えば Ruby 以外のサーバーサイド言語を学ぶ際に、このフロントエンドに対応するAPIを作る、ということを題材にすることが出来る。

Rails 側の実装は『現場で使える Ruby on Rails 5速習実践ガイド』を参考にしたのであまり行き詰まることはなかった。
ただ、Active Record の知識がなさすぎて苦戦した。単純なことでも数時間悩んでしまったし、頑張って実装した機能が組み込みで用意してあったりした。
パフォーマンスの問題もある。ローカル環境では問題ないのだが、デプロイした本番環境だと、ファイルのインポートに時間がかかりすぎる。

Heroku へのデプロイ

作ったからにはデプロイしてネットに公開するところまでやり遂げたかったので、Heroku を使ってデプロイした。
初めての経験だったのでメモを残しておく。初心者なので間違った理解も含まれているかもしれない。

アプリ側の準備

Heroku を使う前にまず、アプリ側の作業を済ませておく。

config/database.ymlのproductionのusernameを編集する
- 初期状態だとアプリの名前がそのまま入っているはずだが、これだとエラーになる。
- Heroku の管理画面でDBのユーザー名を確認できるが、手っ取り早くデプロイしたい場合はusernameをコメントアウトしても動いた。
package.jsonのenginesとscriptsを編集する
- enginesにnodeとyarnの指定を追加する。
- scriptsにheroku-postbuildコマンドを追加する。このコマンドはデプロイ時に実行されるので、webpackによるビルドなどを書く。

Heroku CLI での作業

Heroku CLI のインストール
- https://devcenter.heroku.com/articles/heroku-cli#download-and-install
$ heroku login
$ heroku create {アプリ名}
- アプリのURLと Git のパスが表示される
$ git remote add heroku {パス}
- 先程表示された Git のパスを指定する
$ heroku config:set RAILS_MASTER_KEY=<your-master-key>
$ heroku config:set NPM_CONFIG_PRODUCTION=false
- この設定をしておかないと、ビルド時にwebpack: not foundというエラーが出てしまう
$ heroku buildpacks:add --index 1 https://github.com/heroku/heroku-buildpack-nodejs
- $ heroku buildpacksで確認したときにheroku-buildpack-nodejsが表示されていれば成功
$ git push heroku masterでデプロイする
$ heroku run rails db:migrateでマイグレーションする
- ちなみに$ heroku run rails cでコンソールに入れる
$ heroku openでアプリのページが表示されるので動作確認する