🌟
フロントエンド｜コードを書く時に気をつけていること
日々、フロントエンドのコードを書く時に気をつけていることあります。それは、読みやすいコードを書くことです。読みやすいコードを書くために、必要なことは何か。その内容をまとめてみました。
※文章内のコンポーネントの記述は、Svelteのものです。
コンポーネント
- コンポーネントの行数は最大200行（理想）。
- 200行を超えたら、子コンポーネントの作成を考え始めるべき。
- 子コンポーネントから親コンポーネントへのデータの受け渡しは、dispatchを使う。
- bindを使って、子コンポーネントから親コンポーネントへデータは送れる。ただ、bindだと子コンポーネントでのデータの変更が、予期せぬ形で親コンポーネントに影響してしまうことがあるので、極力dispatchを使うべき。
関数
- 重複しているコードを共通化する場合、変更時期と変更理由は同じである必要がある。
- 処理が複雑になる場合、フラグは使わない。
- 処理が複雑な関数にフラグがあると、ソースコードが読みにくくなる傾向がある。
変数
- 変数の最大文字数は20文字。
- 変数名に使われている単語は短縮しない。
- TypeScriptを使っている場合に、コンポーネント内のグローバル変数は型定義する。
参考リンク
Discussion