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
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.5k
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
510
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
5
870
生成AI時代のコンポーネントライブラリの作り方
touyou
1
210
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
2
150
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
11k
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
120
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
470
RailsGirls IZUMO スポンサーLT
16bitidol
0
180
ふつうの技術スタックでアート作品を作ってみる
akira888
1
840
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
590
0626 Findy Product Manager LT Night_高田スライド_speaker deck用
mana_takada
0
170
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
KATA
mclloyd
30
14k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Practical Orchestrator
shlominoach
189
11k
Automating Front-end Workflow
addyosmani
1370
200k
Site-Speed That Sticks
csswizardry
10
690
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
A Modern Web Designer's Workflow
chriscoyier
695
190k
Balancing Empowerment & Direction
lara
1
430
Side Projects
sachag
455
42k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
How GitHub (no longer) Works
holman
314
140k
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内部の処理の共通化とかよくわかっていない ◦ ほかにも色々ある... • トライアンドエラーと先人の知見を元にやっていくしかない
• あと、久しぶりにフロントエンド を開発するのもなかなか楽しい • 春には良いものが完成するようにやっていく所存
お し ま い