Slide 1
Slide 1 text
Nuxt.jsでWEBサイトをリニューアルしている話
Slide 2
Slide 2 text
◆目次
- 自己紹介
- サイトリニューアルの経緯
- なぜNuxt.jsを選んだのか
- TypeScriptの導入について
Slide 3
Slide 3 text
◆自己紹介
Slide 4
Slide 4 text
◆氏名
・角谷 太雅(Hiromasa Kakutani)
・@xKxAxKx
◆自己紹介
・株式会社 nana music 所属
・音楽コラボアプリの開発/運営をやっています
・得意分野はサーバサイド(Python/Django)
・Nuxt.js歴は1ヶ月ちょっとくらい
◆趣味・関心事
・音楽、サッカー、アニメ、写真、VTuber等...
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
◆サイトリニューアルの経緯
Slide 7
Slide 7 text
◆アプリの紹介ページがあったり
Slide 8
Slide 8 text
◆ニュースとかキャンペーンとかのブログ記事があったり
Slide 9
Slide 9 text
◆投稿された楽曲のページがあったり
Slide 10
Slide 10 text
◆ユーザページとか...
Slide 11
Slide 11 text
◆アプリ内コミュニティページとか...
Slide 12
Slide 12 text
◆歌詞ページなどなど
Slide 13
Slide 13 text
◆問題点
①データ取得にアプリ用APIが使用しているDBに直接接続している
● WEBサイトのフレームワーク(Djangoを使用)でもモデルを定義してしまっている
ため密結合がすぎる
②SEO的に貧弱
● 今まで何もやってこなかったので、クソ雑魚状態
● このサイト自体をアプリDLの動線にしたいが、そもそも検索に引っかかりにくい
③Python2を使っている
● 今時、Python2系を使っていると小学生にも煽られる
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
◆なぜNuxt.jsを選んだのか
Slide 17
Slide 17 text
◆ところで、このLTのタイトルについて
● 「Re:ゼロから始めるNuxt生活」
● 実は今回がNuxt.js採用が初ではない
● 昨年末、とある企画用に特別サイトを構築することになった
● 保守がそれほど発生しない、作ったら終わりなサイトの予定だったのでトライアル的
なノリでNuxt.jsを採用
○ SSRも簡単にしたかった
● しかし、ちょっと開発を進めたところでその企画自体がポシャった...
○ componentを少し開発したり、vuexのさわりの部分だけ探り探り開発したくらいで終わった
● そういうわけで今回の開発はまさに「Re:ゼロから」
Slide 18
Slide 18 text
◆プロジェクトメンバーのスキルセット
● エンジニア2名
● エンジニアY
○ 得意分野はフロントエンド
○ Vue.jsとNuxt.jsの経験あり
○ Vue.jsのコミュニティのメンバー
○ マークアップ得意
● @xKxAxKx
○ 得意分野はサーバサイド
○ フロントは前職でAngularをちょこっとやっていた
○ JavaScript、雰囲気で書ける
○ マークアップは苦手(わからない)
○ サーバサイドの開発と兼務
Slide 19
Slide 19 text
◆フレームワーク選定基準
①教育コスト低い
● スケジュールにめちゃくちゃ余裕があるわけではない
②Server Side Rendering
● どのフレームワークでもやれるけど、楽にやりたい
③TypeScriptが使える
● メンテナンスしやすく、バグの発生を最小限にしていきたい
● 長く使いたいと思っているので、それなりのメンテは発生しそう
④WEBアプリケーションとして拡張しやすい
● 将来的にはネイティブアプリと同等レベルのことをする、かもしれない
● その場合、状態管理が非常に重要になるため、そのためのデータフローが用
意されていてほしい
Slide 20
Slide 20 text
◆リニューアル後の構成(今のところの予定)
Slide 21
Slide 21 text
◆TypeScriptの導入について
Slide 22
Slide 22 text
◆typescript-templateは使わない！
● https://github.com/nuxt-community/typescript-template
● Nuxt.js公式だけど、更新が止まっている
● 型定義とかtsconfigについても不十分
● なのでwebpackを拡張してTSを入れていく必要がある(2.4.0以降はnuxt-tsが使え
る)
Slide 23
Slide 23 text
◆ところで、Vuexを皆さんは使ってますか？
Slide 24
Slide 24 text
◆Vuex、良いと思う
● 導入がものすごい楽
○ 割とこれに尽きるかもしれない
○ $create-nuxt-app を使えば何も考えずに使える
○ 先人たちはVueに苦労して自力でReduxを導入していたと考えるとものすごい
恩恵を受けている
● Fluxライクなデータの流れが一方通行で明確
○ AngularでもFluxっぽいアーキテクチャで開発したことがあったので、すんなりと
理解できた
○ ロジックとデータが分離されているので、保守しやすい(まだ保守の段階まで
やってないので想像だけど)
Slide 25
Slide 25 text
◆現時点でTypeScriptとVuexがあんまり相性良くない印象
● v2.4.0でTypeScriptが公式対応されたけれど、その相性は変わらなさそう
● TS入れてコードを書いてみたけれど型any地獄に陥ったし、可読性が著しく悪くなっ
てしまった(特にaction)
● ちゃんと導入しようと思えばできるっぽいけど、Vuexによる状態管理を含む最高に
快適な Vue.js + TypeScript の開発環境を目指す話を読んでここまでしてまでTS
いれるモチベーションがわかなかった
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
◆だけど将来的にはTS対応していきたい
● そのためにモジュールと処理を細分化
● TS移行する時に少しずつ対応できるようにする
store
├── index.js
├── posts
│ ├── actions.js
│ ├── getters.js
│ ├── index.js
│ └── mutations.js
├── users
│ ├── actions.js
│ ├── getters.js
│ ├── index.js
│ └── mutations.js
…..
Slide 28
Slide 28 text
◆モジュールと処理を細分化する
● store/index.js
Slide 29
Slide 29 text
◆モジュールと処理を細分化する
● store/posts/index.js
Slide 30
Slide 30 text
◆モジュールと処理を細分化する
● store/posts/actions.js
● namespaced=true なので componentやpageからは
await store.dispatch(posts/fetchPostByPostId', { postId: 10 }) のような感じで呼
ぶ
Slide 31
Slide 31 text
◆全面的なTypeScriptの導入は見送った
● しかし、将来的にはやっていくぞという気持ちがある
● page/componentの.vue内部のJavaScriptに関してはTypeScriptに移行できそう
● また、Vuexの内部に関してもstateの変数をまずは型定義をしていきたい
○ どういう型のデータが入るべきであるか、型として明示されているだけで、開発
効率がめちゃくちゃ上がる、と思う
Slide 32
Slide 32 text
◆まとめ
Slide 33
Slide 33 text
● TypeScriptの導入以外にもまだまだ課題がある
○ axiosを複数回呼ぶactionのテストコードのmockをどうすればいいのか
○ mutationとかaction内部の処理の共通化とかよくわかっていない
○ ほかにも色々ある...
● トライアンドエラーと先人の知見を元にやっていくしかない
● あと、久しぶりにフロントエンド を開発するのもなかなか楽しい
● 春には良いものが完成するようにやっていく所存
Slide 34
Slide 34 text
お し ま い