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
2.1k
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
CSC509 Lecture 04
javiergs
PRO
0
170
Hi, have you met Kotlin Multiplatform? | DevFest Vienna 2024
prof18
0
240
offers_20241022_imakiire.pdf
imakurusu
1
140
OpenTelemetryでRailsのパフォーマンス分析を始めてみよう(KoR2024)
ymtdzzz
1
240
Vaporモードを大規模サービスに最速導入して学びを共有する
kazukishimamoto
3
3.2k
gopls を改造したら開発生産性が高まった
satorunooshie
7
140
Folding Cheat Sheet #8
philipschwarz
PRO
0
140
watsonx.ai Dojo #3 プロンプトエンジニアリング入門
oniak3ibm
PRO
0
460
Universal Linksの実装方法と陥りがちな罠
kaitokudou
1
200
ActiveRecordの力でDBのメタデータを迅速に解析する
lnit
5
2.1k
Vue.js学習の振り返り
hiro_xre
1
100
自分だけの世界を創るクリエイティブコーディング / Creative Coding: Creating Your Own World
chobishiba
2
2.1k
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
43
13k
A Tale of Four Properties
chriscoyier
156
22k
KATA
mclloyd
29
13k
Building Better People: How to give real-time feedback that sticks.
wjessup
363
19k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Bash Introduction
62gerente
608
210k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
6.9k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.2k
Docker and Python
trallard
40
3k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.8k
Into the Great Unknown - MozCon
thekraken
31
1.4k
Making the Leap to Tech Lead
cromwellryan
131
8.9k
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内部の処理の共通化とかよくわかっていない ◦ ほかにも色々ある... • トライアンドエラーと先人の知見を元にやっていくしかない
• あと、久しぶりにフロントエンド を開発するのもなかなか楽しい • 春には良いものが完成するようにやっていく所存
お し ま い