初心者として、おそらくコーディングスタイルについてあまり考えないでしょう。次の 3 つの原則を採用すると、コードの品質をすぐに向上させることができます。

過去数か月間、私は TechLabs の Digital Shapers プログラムに登録されている才能のある新しい Web 開発者のグループを指導する機会がありました。

このチームの学習プロセスをゼロから見て、最終的にアプリケーションをリリースするのはとても興味深いものでした。彼らのコードを見直すと、開発者としての最初の数年間を思い出します。特に正式な学歴を持たずに独学で学んだ場合は、とにかく努力を続けます。コーディングプラクティスの良し悪しを認識することはできません。機能するものは何でも満足できます。

「もっと早く知りたかったコーディングの原則は何ですか?」

これらの簡単なヒントをコーディングの練習にすぐに実装できます。シンプルですが、コードの書き方に大きな影響を与えました。

注: タイトルには「フロントエンド開発者」と明確に記載されていますが、これらの原則はプログラミングのすべての領域に適用されます。

1. ネストされた条件文の代わりに「早期復帰」を使用する

Web 開発では、特定の条件が満たされているかどうかを確認する必要がある多くの状況に遭遇します。

例として、リクエストを認証してユーザーオブジェクトを返す API ルートがあるとします。

export const handler = async (req, res) => {
 if (req.method === "POST" || req.method === "OPTIONS") {
  const email = validateEmail(req.body.email);
  if (email) {
   const user = getUserByEmail(email);
   if (user) {
    return res.status(200).json({ user });
   } else {
    return res.status(404).json({ message: 'No user found' });
   }
  } else {
   return res.status(422).json({ message: 'Missing email' });
  }
 } else {
  return res.status(405).json({ message: 'Unsupported message' });
 }
}

この関数にはあまりロジックのカプセル化はありませんが、すでに少しまとまりがないように見えます。具体的には、このコードには次の 2 つの問題があります。

コードフローを追跡するのは困難です。コードを上から下ではなく、左から右に読む必要があります (矢印のアンチパターン)。
if ごとに else ステートメントを見つけるのは困難です。これらは、if ステートメントの大部分で区切られています。

このコードを改善する簡単な方法は、Return-Early-Pattern を使用することです。「アーリーリターン」モードは、条件が満たされない場合に関数の実行を終了するため、関数の期待される結果は常に最後になります。上記の API ルートを書き直すと、次のようになります。

export const handler = async (req, res) => {
 if (req.method !== "POST" && !req.method !== "OPTIONS") {
  return res.status(405).json({ message: 'Unsupported message' });
 }

 const email = validateEmail(req.body.email);
 if (!email) {
  return res.status(422).json({ message: 'Missing email' });
 }

 const user = getUserByEmail(email);
 if (!user) {
  return res.status(404).json({ message: 'No user found' });
 }

 return res.status(200).json({ user });
}

「アーリーリターン」パターンを使用した後は、コードの実行を上から下まで簡単に追跡できます。すべてがうまくいくと想定し、欠損値のみをチェックするため、これにより、条件がネストしすぎるのを回避できます。

最後に、関数の期待される結果が一目でわかります。これは一番下にあります。

2. 人間向けのコードを書く

前のヒントの内容を要約すると、2 番目の原則にたどり着きます。それは、機械ではなく、他の人が読みやすいコードを作成することです。

当たり前のように聞こえますが、最初はまったく考え方が変わりました。私がプログラミングを始めたとき、私はいつもそれをコンピューターと通信する方法だと考えていました。私たちはコンピューターに何をすべきかを伝えます。しかし、私たちが書いたコードは、機械ではなく同僚に読まれて理解されます。

私たちの同僚は、コードを読んで理解する必要がある人々です。最終的に、コンピューターはすべてを 0 と 1 に変換し、読みやすさは気にしません。例として groupBy 関数を見てみましょう。

const groupBy = (arr, groupFn) =>
  arr.reduce(
    (grouped, obj) => ({
      ...grouped,
      [groupFn(obj)]: [...(grouped[groupFn(obj)] || []), obj],
    }),
    {}
  );

配列のグループ化という単純な操作を実行するために、複雑な 1 行の関数を記述する方法を明確に示します。

これにより、より専門的に感じられるかもしれませんが、コードを確認する必要がある人にとっては、作業がより困難になります。対照的に、次の実装を検討してください。

const groupBy = (arr, groupFn) => {
  const grouped = {};
  for (const obj of arr) {
    const groupName = groupFn(obj);
    if (!grouped[groupName]) {
      grouped[groupName] = [];
    }
    grouped[groupName].push(obj);
  }
  return grouped;
};

このコードを上から下まで読むと、コードの各行が何をするのかをすぐに理解できます。

これは以前の実装ほどクールに見えないかもしれませんが、将来このコードを再検討する必要がある人は、読みやすい実装に感謝するでしょう。

3. 関数の背後にある情報を隠す

ジュニア開発者として、コードスタイルを改善するための最後の考えは、無関係な情報を関数の背後に隠すことです。これは、コードの可読性にも役立ちます。

React に精通している場合、フックはこの原則の好例です。

import React, { useState, useEffect } from 'react';

function FriendListItem(props) {
  const [isOnline, setIsOnline] = useState(null);

  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }
    
  ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
  return () => {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

  return (
    <li style={
    
    { color: isOnline ? 'green' : 'black' }}>
      {props.friend.name}
    </li>
  );
}

ここでは、動的な状態の色でリスト項目を出力するコンポーネントがあります。このコードは正常に動作しますが、FriendListItem コンポーネントの目的に直接関係しないロジックをカプセル化しています。

そのロジックを抽出して、useFriendStatus というカスタムフックを作成すると、次のようにコンポーネントを簡素化できます。

import React, { useState, useEffect } from 'react';

function FriendListItem(props) {
  const isOnline = useFriendStatus(props.friend.id);

  return (
    <li style={
    
    { color: isOnline ? 'green' : 'black' }}>
      {props.friend.name}
    </li>
  );
}

これには 2 つの利点があります。

useFriendStatus のロジックを再利用できます。
コンポーネントをその機能の本質まで減らします。

より一般的には、情報を隠す原則は、抽象関数の背後にある無関係な情報をカプセル化することです。

したがって、抽象関数の内部で何が起こるか (実装の詳細) を気にする必要はありません。関数の名前 (問題ドメインレベル) である目的に集中できます。

要約する

これらの小さなヒントがお役に立てば幸いです。本質的に、より良いコードを書くことは、多くの場合、自分自身と他の人の両方にとって読みやすく、理解しやすくするだけです。

オリジナル:
https://konstantinmuenster.medium.com/3-tips-to-write-better-code-as-a-beginner-frontend-developer-ea0fe9b3492c

作地：コンスタンチン・ミュンスター

間接的な翻訳、いくつかの自己適応および追加部分、翻訳レベルは制限されています、省略があることは避けられません、修正を歓迎します

フロントエンドの初心者向けにより良いコードを書くための 3 つの原則を共有する

1. ネストされた条件文の代わりに「早期復帰」を使用する

2. 人間向けのコードを書く

3. 関数の背後にある情報を隠す

要約する

おすすめ