自作アプリRESPECTS!の開発記録

はじめに

先日下記の記事にて、RESPECTS!という自作アプリを作るに至った経緯を書かせていただきました。今回は技術編です。どのような言語、フレームワーク、インフラを利用してアプリを作成したのか、その他開発記録の詳細をお伝えしたいと思います。是非最後までご覧頂ければと思います。また、そもそもこのアプリがどういったアプリかと言った説明は前回の記事にて説明しておりますので、こちらも併せてご覧いただけるとありがたいです。

自作アプリRESPECTS!を作るに至った経緯

はじめにこんにちは、現在WEBエンジニアとして就職活動中の讀谷山です。就職するにあたり、企業様にポートフォリオをお示しする必要があると考え、2019/4/12から自作WEBアプリを作成し始めまし...

https://www.wantedly.com/users/100781197/post_articles/169534

構成

まず構成です。これは非常に言葉で説明するのが難しいと感じたため、図解しました。ご覧下さい。

多少不正確な図ではありますが、大きくは違いません。なんとなくイメージを掴んで頂ければありがたいです。

なぜこの構成？
現役のエンジニアさんとお話する機会があり、以下の事を伺いました。
・実際の現場ではRails のViewを除いてAPIとして使うことが結構多い
・Vue, React, Angularのどれかを使えるといい
元々Vue.jsの基礎は勉強していましたので、この方の意見を信じてフロントとバックを分けて作ることにしました。また、どうせだったらvuex, vue-router, AWS, heroku etc... 使ったことないものに挑戦してみたいという思いがあり、この構成で開発を進める事にしました。我ながら安易でしたが、この時点ではワクワクしかありませんでしたので仕方ありません。最終的に人間を動かすのは情熱です。これは東大卒プロゲーマーのときどさんも仰っていたことです。

気づいた事や苦労したところ

開発期間と前提

開発期間は4/12 〜 5/15です。前提として4/1時点の私のスキルは以下のとおりです。
・Ruby及びRails => 2018年の中頃にProgateクリアした事がある。
・Vue.js => vue.js の基本はざっと公式サイトを見て学んだ。Vuetifyはある程度学んだ。それらを使って自分の紹介サイト作る事が出来る。
・Firebase => hosting機能を用いて↓のサイトをデプロイした事がある。

TOMOYUKI YOMIYAMA PEM!

Hi I'm Tomoyuki Yomiyama. This page is my portfolio.

https://peme-fdcbe.firebaseapp.com/#top

ちなみに4/1〜4-11の間はRubyやRailsの復習、vuex, vue-router等の基礎、Google map の基礎を公式で学ぶ、何となくだったアプリのイメージを要件に落とし込む、等の作業をしていました。基礎ばっかりだと、身についた気がしないので、後は実装しながら学ぶことにしました。後述しますが、実践に移った事で自分が何が分かってて、何が分からないのかが初めて分かりました。実践に移った判断は間違ってなかったと思います。これが無知の知というやつでしょうか？初めてソクラテスの言っていた事が頭では無く心で理解できた気がします。それまでは「この人何言っているんだろう？」と思っていました。

苦労したところ、ハマったところ

ほぼ全てです。と言ったら話が終わってしまうので、特にハマったところ、思い出深いところを列挙します。全体を通して言えることは「プログラミング」だけではなく「仕事の進め方」という部分でもハマったように思うので非常に学びがあったと感じております。

・gemの選定 => Active Model Serializer, Jbuilder どちらにするか等、gemの選定で悩み時間を取られました。今思えば右も左も分からないのに、あまり時間を掛けるべきではなかったと感じます。
・Rubyの基礎 => Rails関係は、なるべく公式のgithubで作例等を見て実際に動かしながら行っていました。しかし、Rubyの基礎の無さを感じたので「プロを目指す人のためのRuby入門言語仕様からテスト駆動開発・デバッグ技法まで」を購入しました。しばらくの間、１日の内２時間は開発の手を止め、この本で基礎固めを行いました。すごく分かりやすい本です。伊藤先生のファンになり、Qiitaでフォローして開発の合間に記事を拝見しておりました。ありがとうございます。
・HTTPリクエスト、レスポンスの深い理解 => 主にフロントとバックのやり取りをする時に理解が足りないのではないかと感じました。そこで「Webを支える技術 -HTTP、URI、HTML、そしてREST (WEB+DB PRESS plus)」を購入し、１日開発の手を止めて読み込みました。httpリクエストとレスポンス、ブラウザの表示までの簡単な流れは把握しておりましたが、より深い理解を得ることができました。まだ理解が浅いところがあるので何回か読み返したい本です。
・認証やToken => HTTPリクエストと重複しますが、axios を使ってHTTPヘッダにAuthorizationを付加する事が中々出来ませんでした。axios の公式の通りやっているはずなのにおかしいなぁと思っていたらただのタイポでした。どうかしてました。疲れてる人間はタイポするものだという前提で開発する必要がありますね。
・認証と認可の違い => これも少し時間をとられました。Pundit というgemの説明を読んでいる時にAuthorization と Authentication を混同していたので理解が中々出来ませんでした。
・Google map マーカー描画のタイミング => vue.js のライフサイクルに関係してくる処理でした。ライフサイクルをもう少し深く理解する必要があると思いました。vue.jsは公式が教科書として優れているため、あまり書籍の必要性を感じませんでしたが、ライフサイクルが理解しにくかったため「基礎から学ぶ Vue.js」を購入しました。非常にコンパクトかつ平易に書かれており、分かりやすかったです。vuexやvue-routerの説明も非常に分かりやすくこの本を読んでから公式ドキュメントを読むという流れが良かった様に感じます。
・Vuex mutations に非同期処理を書いてしまう事件 => これは失敗した事です。ドキュメントでこの記述を見落としていたようです。大分書いてから、なんかやりにくいなぁ？と思ったタイミングで調べてみるとアンチパターンで書いてしまっている事に気づきました。泣きそうでした。actionsへせっせこせっせこお引越ししました。泣きました。
・変数名（関数名）の付け方 => これは行数が多くなってから、「付けたい変数名が取られている。取ったの誰だよ！」「何の関数だっけ？」と思う事が多くなったのをきっかけに問題だと認識しました。そこで「WEB+DB PRESS vol.110 名前付け大全」という雑誌の特集「名前付け大全」が非常に勉強になりました。これを読んでから名前を意識するようになりました。もちろんすぐには出来るようにはなりませんが、辞書を引く癖と意味が広すぎたり、狭すぎたりする変数名を付けない様に意識するようになり、マシにはなりました。
・タスク管理 => 開発当初は優先順位等を意識せず思いついた順にやっていましたが、あまりにも無策でした。色やボタンの形とか「それ後ででいいよ」と言ったところに拘ってしまって開発が進まないと言った問題をすぐに自覚しました。何らかのツールで管理しようと思いZenhubというツールを発見し使ってみました。issueを看板で管理する事は非常にシンプルですが十分効果はありました。余談ではありますが、マイケル・ジョーダンがいた頃のブルズ黄金期にヘッドコーチのフィル・ジャクソンが禅の考え方をマネジメントに用いていたそうです。
・ActiveStorageを使った画像のアップロード => フロント側でBase64エンコードし、バックでデコードするという処理が出来ませんでした。「どうやらそのままではデコード出来ないらしい」ということを調べるのに時間がかかりました。正規表現を使って文頭を取り除く必要があったようです。
・Corsの設定 => これはRailsを先にデプロイした時に発覚した問題です。ローカルでは動いていたのに、動きませんでした。以下図です。

この図で言うと②のリクエストが全てOPTIONSメソッドになってしまいRails側で③が返せないという問題でした。調べてみるとクロスサイトスクリプティング（XSS）対策でこういう挙動になるとのこと。つまりこれが正しい挙動である事が分かりました。回避するにはCORSの設定を行う必要があります。Rails側でRack-corsというgemを使いCorsの設定を書きましたが、回避できません。２日程ハマりましたが、プリフェライトという手順を理解してexpose['access-token', 'uid']という設定項目を追加したらようやく回避できました。これが最近一番ハマったところなので非常に良く覚えています。

今後の課題

・認証にOAuthを取り入れる
・フロント部分の速度改善。webpackのコード分割機能を試す。
・vuex(store.js)が肥大化しているのでリファクタリングする。モジュール化等検討。
・投稿へのmetoo機能を実装。
・テストの量と質を充実させる。
・環境をDockerに移行したい。
・Nuxt.jsを使えば良かった。