Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Re_ゼロから始めるNuxt生活
Search
Hiromasa Kakutani
February 18, 2019
Programming
0
1.9k
Re_ゼロから始めるNuxt生活
Hiromasa Kakutani
February 18, 2019
Tweet
Share
More Decks by Hiromasa Kakutani
See All by Hiromasa Kakutani
社会性フィルター付きTwitterクライアント作った
xkxaxkx
2
230
Other Decks in Programming
See All in Programming
Milestoner
bkuhlmann
1
400
GitHub Actionsで泣かないためにやっておきたい設定 / Recommended GHA settings to avoid crying
pinkumohikan
3
490
本格ローグライク制作にEbitengineを選んでみた
nagainaganawa
0
290
VSCodeでのDatabricks開発もお勧めしたい/I would also recommend Databricks development with VSCode.
kazumain
0
240
Doctrine ORMでValue Objectを扱う方法4選 #phpstudy / 4 ways to handle Value Objects with Doctrine ORM
77web
4
110
受託開発でGitLab CI を活用していく
xiombatsg
1
270
ログラスを支える設計標準について / loglass-design-standards
urmot
10
2.1k
Folding Cheat Sheet #3
philipschwarz
PRO
0
110
educure_カリキュラム生操作マニュアル.pdf
linew_official
0
460
今、知っておきたい! 生成AIエージェントの世界
elith
3
340
ONE WEDGE_company_guide
1wedge_one
0
380
App Router への移行は「改善」となり得るのか?/ Can migration to App Router be an improvement
takefumiyoshii
8
2.1k
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
331
56k
Code Reviewing Like a Champion
maltzj
513
39k
Designing the Hi-DPI Web
ddemaree
276
33k
Git: the NoSQL Database
bkeepers
PRO
422
63k
BBQ
matthewcrist
80
8.7k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
15
1.4k
WebSockets: Embracing the real-time Web
robhawkes
59
7k
The Cult of Friendly URLs
andyhume
74
5.7k
The Invisible Customer
myddelton
114
12k
Optimizing for Happiness
mojombo
370
69k
Fashionably flexible responsive web design (full day workshop)
malarkey
397
65k
Building a Scalable Design System with Sketch
lauravandoore
455
32k
Transcript
Nuxt.jsでWEBサイトをリニューアルしている話
◆目次 - 自己紹介 - サイトリニューアルの経緯 - なぜNuxt.jsを選んだのか - TypeScriptの導入について
◆自己紹介
◆氏名 ・角谷 太雅(Hiromasa Kakutani) ・@xKxAxKx ◆自己紹介 ・株式会社 nana music 所属
・音楽コラボアプリの開発/運営をやっています ・得意分野はサーバサイド(Python/Django) ・Nuxt.js歴は1ヶ月ちょっとくらい ◆趣味・関心事 ・音楽、サッカー、アニメ、写真、VTuber等...
None
◆サイトリニューアルの経緯
◆アプリの紹介ページがあったり
◆ニュースとかキャンペーンとかのブログ記事があったり
◆投稿された楽曲のページがあったり
◆ユーザページとか...
◆アプリ内コミュニティページとか...
◆歌詞ページなどなど
◆問題点 ①データ取得にアプリ用APIが使用しているDBに直接接続している • WEBサイトのフレームワーク(Djangoを使用)でもモデルを定義してしまっている ため密結合がすぎる ②SEO的に貧弱 • 今まで何もやってこなかったので、クソ雑魚状態 • このサイト自体をアプリDLの動線にしたいが、そもそも検索に引っかかりにくい
③Python2を使っている • 今時、Python2系を使っていると小学生にも煽られる
None
None
◆なぜNuxt.jsを選んだのか
◆ところで、このLTのタイトルについて • 「Re:ゼロから始めるNuxt生活」 • 実は今回がNuxt.js採用が初ではない • 昨年末、とある企画用に特別サイトを構築することになった • 保守がそれほど発生しない、作ったら終わりなサイトの予定だったのでトライアル的 なノリでNuxt.jsを採用
◦ SSRも簡単にしたかった • しかし、ちょっと開発を進めたところでその企画自体がポシャった... ◦ componentを少し開発したり、vuexのさわりの部分だけ探り探り開発したくらいで終わった • そういうわけで今回の開発はまさに「Re:ゼロから」
◆プロジェクトメンバーのスキルセット • エンジニア2名 • エンジニアY ◦ 得意分野はフロントエンド ◦ Vue.jsとNuxt.jsの経験あり ◦
Vue.jsのコミュニティのメンバー ◦ マークアップ得意 • @xKxAxKx ◦ 得意分野はサーバサイド ◦ フロントは前職でAngularをちょこっとやっていた ◦ JavaScript、雰囲気で書ける ◦ マークアップは苦手(わからない) ◦ サーバサイドの開発と兼務
◆フレームワーク選定基準 ①教育コスト低い • スケジュールにめちゃくちゃ余裕があるわけではない ②Server Side Rendering • どのフレームワークでもやれるけど、楽にやりたい ③TypeScriptが使える
• メンテナンスしやすく、バグの発生を最小限にしていきたい • 長く使いたいと思っているので、それなりのメンテは発生しそう ④WEBアプリケーションとして拡張しやすい • 将来的にはネイティブアプリと同等レベルのことをする、かもしれない • その場合、状態管理が非常に重要になるため、そのためのデータフローが用 意されていてほしい
◆リニューアル後の構成(今のところの予定)
◆TypeScriptの導入について
◆typescript-templateは使わない! • https://github.com/nuxt-community/typescript-template • Nuxt.js公式だけど、更新が止まっている • 型定義とかtsconfigについても不十分 • なのでwebpackを拡張してTSを入れていく必要がある(2.4.0以降はnuxt-tsが使え る)
◆ところで、Vuexを皆さんは使ってますか?
◆Vuex、良いと思う • 導入がものすごい楽 ◦ 割とこれに尽きるかもしれない ◦ $create-nuxt-app を使えば何も考えずに使える ◦ 先人たちはVueに苦労して自力でReduxを導入していたと考えるとものすごい
恩恵を受けている • Fluxライクなデータの流れが一方通行で明確 ◦ AngularでもFluxっぽいアーキテクチャで開発したことがあったので、すんなりと 理解できた ◦ ロジックとデータが分離されているので、保守しやすい(まだ保守の段階まで やってないので想像だけど)
◆現時点でTypeScriptとVuexがあんまり相性良くない印象 • v2.4.0でTypeScriptが公式対応されたけれど、その相性は変わらなさそう • TS入れてコードを書いてみたけれど型any地獄に陥ったし、可読性が著しく悪くなっ てしまった(特にaction) • ちゃんと導入しようと思えばできるっぽいけど、Vuexによる状態管理を含む最高に 快適な Vue.js
+ TypeScript の開発環境を目指す話を読んでここまでしてまでTS いれるモチベーションがわかなかった
None
◆だけど将来的にはTS対応していきたい • そのためにモジュールと処理を細分化 • TS移行する時に少しずつ対応できるようにする store ├── index.js ├── posts
│ ├── actions.js │ ├── getters.js │ ├── index.js │ └── mutations.js ├── users │ ├── actions.js │ ├── getters.js │ ├── index.js │ └── mutations.js …..
◆モジュールと処理を細分化する • store/index.js
◆モジュールと処理を細分化する • store/posts/index.js
◆モジュールと処理を細分化する • store/posts/actions.js • namespaced=true なので componentやpageからは await store.dispatch(posts/fetchPostByPostId', {
postId: 10 }) のような感じで呼 ぶ
◆全面的なTypeScriptの導入は見送った • しかし、将来的にはやっていくぞという気持ちがある • page/componentの.vue内部のJavaScriptに関してはTypeScriptに移行できそう • また、Vuexの内部に関してもstateの変数をまずは型定義をしていきたい ◦ どういう型のデータが入るべきであるか、型として明示されているだけで、開発 効率がめちゃくちゃ上がる、と思う
◆まとめ
• TypeScriptの導入以外にもまだまだ課題がある ◦ axiosを複数回呼ぶactionのテストコードのmockをどうすればいいのか ◦ mutationとかaction内部の処理の共通化とかよくわかっていない ◦ ほかにも色々ある... • トライアンドエラーと先人の知見を元にやっていくしかない
• あと、久しぶりにフロントエンド を開発するのもなかなか楽しい • 春には良いものが完成するようにやっていく所存
お し ま い