破壊しやすい

Nuxtプロジェクトの作り方

masaakikunsan

お前は誰だ?

・石岡 将明 (@masaakikunsan)

・株式会社SCOUTER

・フロントエンドエンジニア

・22歳

・自称フロント界隈1の加藤恵オタク

尊い

アジェンダ

・宣伝

・なぜ破壊しやすいほうがいいのか

・破壊すること前提で作るこつ

・オススメ

・さいごに

宣伝

開発メンバーの人数は

フロントエンジニア二人

フロントエンジニア二人

新規プロダクトに求められること

バグが少ないこと

少人数で仮設検証を回すこと

なるはやでのコア機能の開発

とにかくスピードが求められる!

その上でどうすれば良いか

破壊しやすく
かつ

運用しやすく作る

なぜ破壊しやすい方がいいのか

新規プロダクトにおいて

・爆速開発が求められる

・度重なるデザインの変更

・仕様変更の可能性大

新規プロダクトにおいて

・爆速開発が求められる

・度重なるデザインの変更

・仕様変更の可能性大

これに耐える必要がある

まじめに作ったら時間がいくら合っても足りない

早く始めたい仮設検証

作り直す前提で
破壊しやすく運用しやすい綺麗なコードでやれたら素敵!

破壊する前提で作ろう

1. ディレクトリ構成はしっかり考える

Nuxtのディレクトリ構成でやれば基本OK

2. カラーは変数で定義

3.Componentはなるべく最小単位で作成

ただAtomicDesignは破壊しずらくなるので採用しない

4. 実装を進め共通処理がでてきたらMixins化する

5. 同じStyleはCSSファイルまとめる

共通StyleをScssでまとめimport

6. 再利用性を考えるのは最低限で

どうせ使い回さないので

これで破壊しやすいプロジェクトの完成

実際にbach checkチームでは
3度のデザイン変更と
3種類のユーザーロールを
二ヶ月でほぼ作りきった

おすすめ

おすすめ

CSSすらも考えるのをやめて

爆速の開発を

さいごに

Nuxt.jsの魅力は規約・開発スペードの向上等色々あります
その魅力を最大限活用し、破壊しやすく爆速の開発をやっていきましょう

なお、運用フェーズになったらちゃんと考えて実装しよう

株式会社SCOUTERでは全てのプロダクトでVue,Nuxtを使っています!

フロントエンドエンジニアを募集しているので気になる方は僕のところまで来てください!

Made with Slides.com