naming cheatsheet
1.0.0
物事を命名するのは難しいです。このシートはそれを簡単にしようとします。
これらの提案は任意のプログラミング言語に適用できますが、JavaScriptを使用して実際に説明します。
変数や関数に名前を付けるときは、英語を使用します。
/* Bad */
const primerNombre = 'Gustavo'
const amigos = [ 'Kate' , 'John' ]
/* Good */
const firstName = 'Gustavo'
const friends = [ 'Kate' , 'John' ]好むと好まざるとにかかわらず、英語はプログラミングにおける支配的な言語です。すべてのプログラミング言語の構文は、英語で記述され、無数のドキュメントや教育資料が記載されています。コードを英語で書くことで、そのまとまりを劇的に増やします。
1つの命名規則を選択して、それに従ってください。それはcamelCase 、またはsnake_case 、あるいはとにかく関係なく、それは問題ではありません。重要なのは、それが一貫性を保つことです。
/* Bad */
const pages_count = 5
const shouldUpdate = true
/* Good */
const pageCount = 5
const shouldUpdate = true
/* Good as well */
const page_count = 5
const should_update = true 名前は短く、直感的で説明的でなければなりません：
/* Bad */
const a = 5 // "a" could mean anything
const isPaginatable = a > 10 // "Paginatable" sounds extremely unnatural
const shouldPaginatize = a > 10 // Made up verbs are so much fun!
/* Good */
const postCount = 5
const hasPagination = postCount > 10
const shouldDisplayPagination = postCount > 10 // alternatively 収縮を使用しないでください。それらは、コードの読みやすさを低下させる以外に何も貢献しません。短い、説明的な名前を見つけるのは難しいかもしれませんが、収縮はそうしないという言い訳ではありません。
/* Bad */
const onItmClk = ( ) => { }
/* Good */
const onItemClick = ( ) => { } 名前は、定義されているコンテキストを複製しないでください。読みやすさを低下させない場合は、常に名前からコンテキストを削除してください。
class MenuItem {
/* Method name duplicates the context (which is "MenuItem") */
handleMenuItemClick = ( event ) => { ... }
/* Reads nicely as `MenuItem.handleClick()` */
handleClick = ( event ) => { ... }
} 名前は、期待される結果を反映する必要があります。
/* Bad */
const isEnabled = itemCount > 3
return < Button disabled = { ! isEnabled } />
/* Good */
const isDisabled = itemCount <= 3
return < Button disabled = { isDisabled } />機能を命名するときに従うべき有用なパターンがあります。
prefix? + action (A) + high context (HC) + low context? (LC)
下の表に、このパターンがどのように適用されるかを見てください。
| 名前 | プレフィックス | アクション（a） | ハイコンテキスト（HC） | 低コンテキスト（LC） |
|---|---|---|---|---|
getPost | get | Post | ||
getPostData | get | Post | Data | |
handleClickOutside | handle | Click | Outside | |
shouldDisplayMessage | should | Display | Message |
注：コンテキストの順序は、変数の意味に影響します。たとえば、
shouldUpdateComponentコンポーネントを更新しようとしていることを意味しますが、shouldComponentUpdateはコンポーネントがそれ自体で更新され、更新する必要がある場合に制御していることがわかります。言い換えれば、高いコンテキストは変数の意味を強調します。
関数名の動詞部分。関数が何をするかを説明する最も重要な部分。
getすぐにデータにアクセスします（つまり、内部データの速記のゲッター）。
function getFruitCount ( ) {
return this . fruits . length
}Composeも参照してください。
set値AをBに、宣言的な方法で変数を設定します。
let fruits = 0
function setFruits ( nextFruits ) {
fruits = nextFruits
}
setFruits ( 5 )
console . log ( fruits ) // 5reset変数を初期値または状態に戻します。
const initialFruits = 5
let fruits = initialFruits
setFruits ( 10 )
console . log ( fruits ) // 10
function resetFruits ( ) {
fruits = initialFruits
}
resetFruits ( )
console . log ( fruits ) // 5fetch一部のデータをリクエストします。
function fetchPosts ( postCount ) {
return fetch ( 'https://api.dev/posts' , { ... } )
}removeどこかから何かを削除します。
たとえば、検索ページに選択したフィルターのコレクションがある場合、コレクションからそのうちの1つを削除することはremoveFilter deleteFilterれていません（これは英語でも自然にそれを言う方法です）：
function removeFilter ( filterName , filters ) {
return filters . filter ( ( name ) => name !== filterName )
}
const selectedFilters = [ 'price' , 'availability' , 'size' ]
removeFilter ( 'price' , selectedFilters )削除も参照してください。
delete存在の領域から何かを完全に消去します。
あなたがコンテンツエディターであると想像してください、そして、あなたが取り除きたいという悪名高い投稿があります。光沢のある「投稿の削除」ボタンをクリックすると、CMSはremovePostではなくdeletePostアクションを実行しました。
function deletePost ( id ) {
return database . find ( { id } ) . delete ( )
}削除も参照してください。
compose既存のデータから新しいデータを作成します。主に文字列、オブジェクト、または関数に適用されます。
function composePageUrl ( pageName , pageId ) {
return ` ${ pageName . toLowerCase ( ) } - ${ pageId } `
}Getも参照してください。
handleアクションを処理します。コールバックメソッドに名前を付けるときによく使用されます。
function handleLinkClick ( ) {
console . log ( 'Clicked a link!' )
}
link . addEventListener ( 'click' , handleLinkClick ) 関数が動作するドメイン。
関数は、多くの場合、何かに対するアクションです。操作可能なドメイン、または少なくとも予想されるデータ型とは何かを述べることが重要です。
/* A pure function operating with primitives */
function filter ( predicate , list ) {
return list . filter ( predicate )
}
/* Function operating exactly on posts */
function getRecentPosts ( posts ) {
return filter ( posts , ( post ) => post . date === Date . now ( ) )
}一部の言語固有の仮定は、コンテキストを省略することを可能にする場合があります。たとえば、JavaScriptでは、
filter配列で動作することがよくあります。明示的なfilterArrayを追加するのは不要です。
-
プレフィックスは変数の意味を強化します。関数名で使用されることはめったにありません。
is現在のコンテキスト（通常はboolean ）の特性または状態について説明します。
const color = 'blue'
const isBlue = color === 'blue' // characteristic
const isPresent = true // state
if ( isBlue && isPresent ) {
console . log ( 'Blue is present!' )
}has現在のコンテキストが特定の値か状態（通常はboolean ）を持っているかどうかを説明します。
/* Bad */
const isProductsExist = productsCount > 0
const areProductsPresent = productsCount > 0
/* Good */
const hasProducts = productsCount > 0should特定のアクションと相まって、肯定的な条件付きステートメント（通常はboolean ）を反映しています。
function shouldUpdateUrl ( url , expectedUrl ) {
return url !== expectedUrl
}min / max最小値または最大値を表します。境界または制限を記述するときに使用されます。
/**
* Renders a random amount of posts within
* the given min/max boundaries.
*/
function renderPosts ( posts , minPosts , maxPosts ) {
return posts . slice ( 0 , randomBetween ( minPosts , maxPosts ) )
}prev / next現在のコンテキストで変数の前または次の状態を示します。状態遷移を説明するときに使用されます。
function fetchPosts ( ) {
const prevPosts = this . state . posts
const fetchedPosts = fetch ( '...' )
const nextPosts = concat ( prevPosts , fetchedPosts )
this . setState ( { posts : nextPosts } )
} プレフィックスと同様に、変数名は、単一の値を保持するか複数の値を保持するかによって異なります。
/* Bad */
const friends = 'Bob'
const friend = [ 'Bob' , 'Tony' , 'Tanya' ]
/* Good */
const friend = 'Bob'
const friends = [ 'Bob' , 'Tony' , 'Tanya' ]
