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.3k
Re_ゼロから始めるNuxt生活
Hiromasa Kakutani
February 18, 2019
Tweet
Share
More Decks by Hiromasa Kakutani
See All by Hiromasa Kakutani
社会性フィルター付きTwitterクライアント作った
xkxaxkx
2
240
Other Decks in Programming
See All in Programming
Swift Updates - Learn Languages 2025
koher
2
470
[FEConf 2025] 모노레포 절망편, 14개 레포로 부활하기까지 걸린 1년
mmmaxkim
0
1.6k
AIと私たちの学習の変化を考える - Claude Codeの学習モードを例に
azukiazusa1
8
3.4k
そのAPI、誰のため? Androidライブラリ設計における利用者目線の実践テクニック
mkeeda
2
260
OSS開発者という働き方
andpad
5
1.7k
Flutter with Dart MCP: All You Need - 박제창 2025 I/O Extended Busan
itsmedreamwalker
0
150
もうちょっといいRubyプロファイラを作りたい (2025)
osyoyu
0
400
AI時代のUIはどこへ行く?
yusukebe
17
8.7k
意外と簡単!?フロントエンドでパスキー認証を実現する WebAuthn
teamlab
PRO
2
720
Zendeskのチケットを Amazon Bedrockで 解析した
ryokosuge
3
290
HTMLの品質ってなんだっけ? “HTMLクライテリア”の設計と実践
unachang113
4
2.7k
機能追加とリーダー業務の類似性
rinchoku
2
1.2k
Featured
See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.6k
Docker and Python
trallard
45
3.6k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Agile that works and the tools we love
rasmusluckow
330
21k
Testing 201, or: Great Expectations
jmmastey
45
7.6k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
Fireside Chat
paigeccino
39
3.6k
How to Ace a Technical Interview
jacobian
279
23k
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内部の処理の共通化とかよくわかっていない ◦ ほかにも色々ある... • トライアンドエラーと先人の知見を元にやっていくしかない
• あと、久しぶりにフロントエンド を開発するのもなかなか楽しい • 春には良いものが完成するようにやっていく所存
お し ま い