Help us understand the problem. What is going on with this article?

Vue.jsだけで爆速に開発したい人へのヒント集

More than 1 year has passed since last update.

目的

仕事で知見がたまったので共有したい。

想定される読者

  • Vue.jsを普段使っているひと
  • とにかく早く実装したいひと
  • きれいに実装したいひと
  • まわりにVue使いがいないけどなぜかVue案件なひと

注意事項

効果には個人差があります。
開発メンバーのスキルや納期や規模感によります。
絶対の正解はないです。

著者のレベル感

  • Vue.js半年ちょいぐらいのレベル感
  • VuexとかNuxt.jsとか知らない
  • バックエンドが好みなのでJSは雰囲気で書いてる
  • コードの綺麗さよりも納期を優先されるところで働いています(泣)
  • CSSも雰囲気で書いてる

Component編

Componentを分けない

必要な場合を除き、なるべく分けないで、書きましょう。
分けると親子の変数の受け渡し、メソッドを叩く処理を実装しなくてはならず、時間がかかります。

Componentを分ける

上記と、矛盾しますが、ひとつのComponentでつらくなってくるときがあります。
そのとき、初めて分けましょう。

  • ロジックが複雑なときに分ける
    実装がシンプルになり、見通しがよくなります。
    1画面でも複数にわけるとよいです。

  • 小さくてもロジックが複雑なときは分けるとよい
    1機能1コンポーネントぐらいでもよいかも。
    小さく作るとよいです。

  • 孫まで作らない
    ポイントとして親子までで、孫は作らないほうがよいと思います。
    孫まで作ったらVuexなどのライブラリを利用を検討したほうがよいかもしれません。

データ編

  • なるべく親から子へデータを渡す。
  • 入力されたデータは子から親へ渡す。
  • その子コンポーネントしか使わないデータはその子コンポーネントでAPIを叩いてもってくる。
  • ある程度まとめてAPIでデータをもってくるとよい。入力されたデータに動的にとかやると実装が大変になる

ライブラリ編

  • importは最小限にする
  • 途中でやっぱ違うなと思ってライブリを変えない。書き直しで時間がかかる。
  • できるだけVue.jsでやる。
  • 本当につらくなってきたら、Vuexなどを使っていく。僕は使ったことありません。

メソッド編

  • できるだけ小さくメソッドをわける
  • わけないほうが、簡単にかけて、読みやすければ、わけない
  • 引数を少なくする。3個まで(諸説あります)
  • if文は2回まで。(諸説あります)
  • メソッドを早い段階で共通化しない
  • ある程度、実装するメソッドがでそろってきて時間があったら共通化する

引数やif文が多くなればなるほど、ロジックが複雑になって可読性とメンテナンス性が落ちてきます。

CSS編

  • scopedを使う
  • CSSフレームワークを使う CSSフレームワークを使って実装して、うまくできないところだけscoped内に書いて、調整していく。

心構え編

  • 早く実装できる方法を考える
  • 未経験なものを使わない。
  • 家で、練習してから使う

ライブラリ編

つらみが解消できるなら使ったほうがいいのですが、現実的に使ったことがあるひとがプロジェクト内にいないと学習コストが高すぎて破綻します。

最後に

やり方はひとつではないし、これも正解ではないかもしれません。
優しいマサカリをコメント欄でいただけますとうれしいです。

yoshinyan
Webアプリケーションエンジニア。 PHP/Laravel/JavaScript/Vue.js/Ruby/Rails
https://yoshinyan99.hatenablog.com/
yyphp
PHPerが毎週集まり、ざっくばらんに情報交換する雑談コミュニティ
https://yyphp.connpass.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした