これは、不定期の記事のシリーズの最初の割賦です.
様々なチームで働いて、1つを構築する年を通して、私はチームが使う実際のツールより多くのコード品質を評価するために成長しました.あなたがどんな言語で書くか、どんなフレームワークを使用するかは重要ではありません.
私は私の経験を共有してスタートアップを支援し、彼らのコードベースを読みやすく理解することによって、彼らの雇用プールを展開します.

何が読めるか

いったい何を言っているのですか.十分な量ですか// comments ? 多分、それは豊富ですs p a c e s ? インデント?ドキュメント?
正しいならば、それらのすべては重要です.あいまいなコードがある場合は、明確なコメントを追加します.インデントとスペースは一貫していることを確認する必要があります.そして、あなたは最初からdocsを書くべきです(それはちょうどこのシリーズの記事であるかもしれません).
この投稿では英語について話します.即ち、言葉.スペイン語や中国語も動作することができますが、彼らは非常にあなたの雇用プールを制限しますので、英語です.

コーディングにおける言語の重要性

ほとんどの言語では、人間はオブジェクトと動詞を識別するために名詞を使います.それが私たちの英語の読み方です.
動詞と名詞を置き換えると文字通り言葉の意味を理解できない.この文は、動詞と名詞を交換したものです.

If we beginning substitution verbs and nouns, it start literally impossible to understanding the mean of speak.

地獄はこれですね.私はそれを書いて目を刻みたかった.
では、次のようにコードを書きます.

function user() {
  return {
    id: '1',
    name: 'Mr. Poopy Butthole'
  }
}


if (user()) {
  const gottenUser = user()
}

これは人間の言語で意味をなさない.これは、我々が文を読む方法でありません.これは小さな例ですが、もしあなたが全体のプロジェクトを人間の言語の文法のような無視と書かれている場合、それはすぐに混乱になります.それはあなたが何を心に保つためにはるかに多くの脳パワーがかかります.
コードを修正するには

function hasUser() {
  return true
}
function getUser() {
  return {
    id: '1',
    name: 'Mr. Poopy Butthole'
  }
}


if (hasUser()) {
  const user = getUser()
}

何を変えましたか.
まず、新しい機能を紹介しますif 文.これはBooleanを返します.これは、それ自体がより明確になりますが、名前もbooleanを返すことを示します.どうやって?試してみて質問:ユーザーがありますか?答えはyesまたはno -ブールです!
第二に、私はuser() 関数へgetUser() . 関数は動作であるため、関数名の動詞を使用することは適切です.
第三に、変数の現在利用可能な名詞を使うことができました.変数がオブジェクトであるので、再びそれはより多くの感覚を作ります.
今、英語のようなコードを読みましょう.あなたはすぐに何が起こっている理解することはできますか?私は、あなたがするのを疑いません.

規則

すべてを支配する一つの規則:

You must be able to read your code like English the day after.

あなたができない場合は、それをやり直す、あなたは叫んだ.
今、私はあなたが書いて、読んで、再書き込みして、読んで、書き直さなければならないと言っていません..それが正しいと感じるまで.あなたがそれを得るのを助ける規則のかなり明確なセットが、あります.実際には、これらのルールは、あなただけのwin - winされている懸念の明確な分離をするのに役立ちます!ここで我々は行きます:

常に動詞であなたの機能を名前します。

関数名を避けるuser() or post() , 特に誘惑を避けるために、全体のcrudを処理します.代わりに、オブジェクトに対してアクションを導入します.getUser() , addUser() , modifyPost() , deletePost() . すぐに、あなたはそれぞれの機能が何をするかについて見ます.

名前の関数が何であるかを説明する

これはトリッキーなものです.常に、あなたの機能が名前でするすべてを含みます.あなたの機能がユーザーをつくって、ウェルカム電子メールを送るならばcreateUserAndSendWelcomeEmail() . これは長くなっている2動詞でも表示される可能性があります.これは2つの関数に分割するための記号です.createUser() and sendWelcomeEmail() . それから、あなたはからイベントを放出することができますcreateUser それはウェルカムメールを送信します.
これは2ゴールを達成する.第一に、あなたの関数が何をするかは明らかになります.第二に、それはあなたの懸念によって機能を分割し、それらを短くする力を与える!

常に名詞で変数を命名して、必要に応じて形容詞を加えてください

あなたの変数にはデータ、またはオブジェクトが含まれます.このように、あなたの変数(オブジェクト)で行動するあなたの機能をするために、あなたの変数名は名詞でなければなりません.users or posts は許容できる.
この点を念頭に置いて、変数名の中には常に関連する形容詞が含まれています.特に1つ以上のコンテキストで同じデータ型を持つ場合は1を超える場合があります.たとえば、すべてのポストを取得し、それからPopopy Butthole氏が書いたものをフィルターしました.代わりにposts and posts2 , あなたはallPosts and postsByPoopy . それは巨大な違いになります!

これらの規則は愚かだ.それらに従って、必然的に読みやすいコードを生成します.
どのようにこれらのルールの悪い良い例?

// ❌ BAD

function users(id) {
  if (id) {
    return userByIdFromDatabase(id)
  } else {
    return allUsersFromDatabase()
  }
}

function posts(post, userId) {
  if (!post) {
    return allPostsFromDatabase(userId)
  } else {
    return updatePostInDb(post)
  }
}

const user = users('1')
const postsFromDb = (null, user.id)
const posts2 = postsFromDb.filter(post => post.author === 'Mr. Poopy Butthole')

posts2[0].title = 'I write bad code'
posts(posts2[0])

// ✔️ GOOD

function getUserById(id) {
  return getUserByIdFromDatabase(id)
}
function getAllPosts() {
  return getPostsFromDatabase()
}
function updatePost(id, post) {
  return updatePostInDatabase(id, post)
}

const user = getUserById('1')
const allPosts = getAllPosts()
const firstPostByPoopy = allPosts.filter(post => post.author === 'Mr. Poopy Butthole')[0]

updatePost(
  firstPostByPoopy.id, 
  {
    ...firstPostByPoopy,
    title: 'I write good code!'
  }
)

なんという違いだろう.最初の例は英語で読むことができません、関数名はあいまいで、彼らがすることを反映しません.しかし、第2の例は全く異なります!機能とその目的は明確です、それぞれの変数は理解可能です、そして、私はそれがあなたに読む時間がないと確信します.
私が最初に述べたように、私は別のチームの一員で、1つを構築しました.読みやすいコードを持つことは、私たちの特定のツールで経験を持っていない良い開発者を雇うために毎回私たちを助けました.人間の言語のようなコードに近づいて、あなたの新しい開発者は、あなたが書いたものを理解しようとするのではなく、生産的であることを時間を費やすことができます.

他に読みやすいコードの練習はありますか?コメントで議論しましょう!