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
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
360
商品比較サービス「マイベスト」における パーソナライズレコメンドの第一歩
ucchiii43
0
180
ふつうの技術スタックでアート作品を作ってみる
akira888
1
1.3k
可変変数との向き合い方 $$変数名が踊り出す$$ / php conference Variable variables
gunji
0
180
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
660
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
170
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
140
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
99
37k
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
260
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
ivargrimstad
0
260
Python型ヒント完全ガイド 初心者でも分かる、現代的で実践的な使い方
mickey_kubo
1
240
TypeScriptでDXを上げろ! Hono編
yusukebe
3
770
Featured
See All Featured
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
GitHub's CSS Performance
jonrohan
1031
460k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Building Applications with DynamoDB
mza
95
6.5k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Fireside Chat
paigeccino
37
3.5k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Faster Mobile Websites
deanohume
308
31k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
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内部の処理の共通化とかよくわかっていない ◦ ほかにも色々ある... • トライアンドエラーと先人の知見を元にやっていくしかない
• あと、久しぶりにフロントエンド を開発するのもなかなか楽しい • 春には良いものが完成するようにやっていく所存
お し ま い