Vueを用いたPinQulのweb版リリースまでの道のり
はじめまして。今年2月から株式会社Flattにインターンとして加わり、JavaScript, Go, Ruby, Pythonを書いている@akouryyと申します。 この記事では、5月23日にリリースされたPinQulのweb版フロントエンド(pinqul.com)で使用した技術等について説明します。
PinQulとは
「PinQul」はInstagramなどで人気の、トレンドに精通したモデルやインフルエンサーが
"それぞれ"にとっての"いいモノ"がもっと手軽に、気軽に、スムーズに。
をテーマに自らデザインしたアイテムや、自身がセレクトや買い付けを行ったアイテムを紹介するガールズファッションのECサイトです。 インターネットで様々な個人が活躍できるようになった時代に、人を基軸とした新たなショッピングプラットフォームとして展開しています。
開発の道のり
私の入社直後からweb版の開発を開始し、約3ヶ月でリリースに至りました。
デザインは@toyojuniが書き、ロジックの部分は主に私が(Goによるサーバーサイドの開発などと同時並行で)開発しました。また、@k0mach1もiOSアプリと同時並行で開発に参加しました。
この3人に加えて、フロントエンドエンジニアの@kitakさんにメンターとしてコードレビューをしていただきました。また、フレームワーク選定やVueのテクニックからGAEへのデプロイ、高速化、キャッシュまで、沢山のアドバイスをいただきました。以下の内容にも、kitakさんにお世話になった部分が多く含まれています。
使用した技術について
フレームワーク
最近GitHubでReactのスター数を上回ったことで話題になったVue.jsをベースに、サーバーサイドレンダリングの支援などを含めたNuxt.jsを使用しています。Nuxt.jsはReactに対するNext.jsのような位置付けで、ユニバーサルな(サーバー、クライアントの区別をほとんどせずに)アプリケーションを素早く開発できる素晴らしいフレームワークです。
VueやNuxtの素晴らしい点は、
- 何よりもまずドキュメントが充実しています。Vue, Nuxtに加えVuexなどのライブラリも、日本語のチュートリアルやドキュメントが豊富に用意されています。これらに一通り目を通せばすぐに開発に必要な知識を得ることができます。
- それ以外の素晴らしい点はドキュメントを読めばわかります！ Reactなどの他のフレームワークとの比較も載っていて、フレームワーク選択の際に役立ちます。
デザインパターン
(Vuex ドキュメントより)
上の画像の通り、VuexではFluxやReduxのような単方向フローの設計を用います。PinQulのWeb版の設計もこれに従っています。
アカウント認証
PinQulのアカウントはFirebase Authenticationで管理されています。iOSのこの記事をぜひご覧ください。web版でも既存のバックエンドに合わせてFirebase認証を使用しました。
開発の方針と困ったところ
サーバーサイドレンダリングを使う
今回開発したweb版は基本的にvue-routerによるシングルページアプリケーションで、ページ遷移時には基本的にクライアント側でコンテンツを描画する一方、外部から流入したアクセス時にはサーバー側でページを描画しています。
これはSEOやSNSシェアを意識してのことです。特にOGPタグを生成する処理をクライアント側で動的に行っても意味がないので、そのためにサーバー側のレンダリングが必要になります。
サーバーサイドレンダリングを使わない
体感の読み込み時間の短縮
リリース当初はトップページのライブ一覧や商品一覧もサーバー側でAPIを叩いてレンダリングしていたために、トップページにアクセスした際のサーバーの応答に時間がかかってしまいました。この状況を改善するために、トップページ(OGPは固定)ではサーバー側でAPIを叩くのをやめ、ブラウザにページの応答が返ってきた時点ではコンテンツが入るべき場所にダミーの長方形が表示されるようにして、クライアント側で叩いたAPIのレスポンスが返ってきてから置き換えるように変更しました。
全コンテンツが読み込まれるまでの時間は短くなっていませんが、「何も応答が返ってこない」という時間は大幅に短縮されました。
Firebase
Firebaseはサーバー側でうまく動作しなかったので、認証が必要な部分は全てクライアントで処理を行っています。そのためNuxt.jsを使っているとはいえ、結局ソースコードの様々な部分でサーバーサイドレンダリングかどうかを判別する必要がありました。
GAEへのデプロイ
pinqul-webのサーバーの処理はGAE上で行われています。しかし、GAEにデプロイする際にはとても苦労しました。 まず、devDependenciesがGAE上でインストールされず、仕方なく全ての依存パッケージをdependenciesに移してデプロイしました。 また、ヘルスチェックを正しくハンドリングできず、サーバーが502ばかり返すようになったこともありました。
現在ではデプロイは問題なく動いていますが、Flexible Environmentなので1回のデプロイに15分ほどかかってしまうのが少し残念です。 Node.js Standard Environmentの正式版リリースが待ち遠しいです。ベータ版も少し見てみましたが、短時間試しただけではうまくいきませんでした。
今後の展望
型
今回開発していて改めて、動的型付けのつらさを痛感しました。数え切れないほど undefined.f is not a function といったエラーに遭遇しました。
幸いVue.jsやNuxt.jsも他の多くのライブラリと同様に公式でTypeScriptサポートがなされています。そのため、いつになるかは分かりませんが、今後webの全ソースコードをTypeScriptで書き換えたいと思っています。
テスト
「そのうち書く」と言って3ヶ月以上が過ぎてしまいました……
キャッシュ
勉強不足でキャッシュに関して十分な知識を持っていませんが、適切にキャッシュを入れていきたいです。
エンジニア募集
Flattでは
- Flattという会社に興味がある方
- GoやJavaScript, そしてTypeScriptで開発したい敏腕プログラマ
- 素晴らしいメンターさんのもとで技術力をさらに向上させたいエンジニア
を募集しています！少しでも興味が湧いたという方は、気軽にお茶しながらFlattのメンバーとお話しましょう！お待ちしてます！
