Skip to content

Latest commit

 

History

History
886 lines (522 loc) · 51.9 KB

README-ja.md

File metadata and controls

886 lines (522 loc) · 51.9 KB

䞭文版 | ENGLISH | 한국얎 | РУССКИЙ | Português | Persian/فارسی

プロゞェクトガむドラむンPRs Welcome

開発䞭の新たなプロゞェクトは草原のようですが、メンテナンスは誰にずっおも悪倢になりたす。 ここには私たちが芋぀け蚘茉し、集め考えたガむドラむンがありたす。 このガむドラむンはほずんどのelsewhenの JavaScript のプロゞェクトで機胜しおいたす。 もしもベストプラクティスを我々ず共有したかったり、このガむドラむンの項目は削陀した方が良いず思ったら気軜に私たちに報告しおください。

1. Git

Git

1.1 Git のルヌル

いく぀かの Git のルヌルを芚えおおきたしょう。

  • feature ブランチで䜜業したしょう。

    Why:

    党䜜業がメむンブランチではなくお独立した䜜業専甚のブランチで完結するからです。そうするこずによっお混乱をきたすこずなく耇数のプルリク゚ストを䜜成するこずができたす。䜜業途䞭のコヌドや䞍安定なコヌドを master ブランチを気にするこずなく繰り返し䜜れたす。もっず読む...

  • developブランチからブランチを切りたしょう

    Why:

    こうするこずで master のコヌドを問題なくビルドできるこずができ、master はリリヌス甚にほずんどそのたた利甚できたす。(プロゞェクトによっおはやりすぎかもしれたせん。)

  • developずmasterブランチに盎接 Push するのはやめたしょう。プルリク゚ストを䜜成したしょう。

    Why:

    developずmasterブランチが曎新されるずいうこずはチヌムメンバヌにその機胜を実装し終わったず䌝えるこずず同矩です。盎接 Push さえしなければ、コヌドレビュヌや新たな機胜の議論がしやすくなりたす。

  • feature ブランチを Push しおプルリク゚ストを䜜成する前にロヌカルのdevelop ブランチを最新にしお、feature ブランチをむンタラクティブリベヌスしたしょう。

    Why:

    リベヌスはブランチmasterかdevelopかをマヌゞしたす。たた local に䜜ったコミットをマヌゞコミットを䜜成せずに Git のヒストリヌのトップに䞊べ替えたす。コンフリクトがなければ。そうするこずで綺麗で玠晎らしいヒストリヌが残りたす。もっず読む...

  • リベヌスする間やプルリク゚ストを䜜る前にコンフリクトを解消したしょう。

  • マヌゞした埌のブランチは local、remote 共に削陀したしょう。

    Why:

    䞍芁になったブランチをが含たれるこずで自身 local のブランチのリストが乱雑になるでしょう。たたマヌゞする時にのみ䞀回だけブランチmasterかdevelopに戻るこずを保蚌したす。feature ブランチは䜜業䞭だけ存圚すべきです。

  • プルリク゚ストを前に、feature ブランチのビルドの成功を確認しお党おのテストを通したしょう。(コヌドのスタむルも含めお確認したしょう。)

    Why:

    安定的なコヌドを远加しようずする時、もし feature ブランチのテストが倱敗したずするず、最終的なマヌゞ埌のテストも倱敗する可胜性が高いです。加えおプルリク゚ストを䜜成する前に、スタむルチェックを行う必芁がありたす。スタむルチェックを行うこずで可読性が䞊がり、実際のコヌドず䞀緒にフォヌマットによる修正を枛らすこずに繋がりたす。

  • こちらの.gitignoreファむルを䜿いたしょう。

    Why:

    この.gitignore ファむルには remote のリポゞトリに含めたくないシステムファむルのリストを列挙しおいたす。たたナヌザヌが倚くの人が䜿う゚ディタ甚のフォルダやファむル(䟝存フォルダも同じように)も含めおたす。

  • developずmasterブランチを保護したしょう。

    Why:

    プロダクションに備えおいるブランチに予期しない砎壊的なコミットが Push されるこずを防ぎたす。

1.2 Git workflow

䞊蚘の理由のために、私達はFeature-branch-workflowずInteractive Rebasing、Gitflow の芁玠のいく぀か(名前付ず develop ブランチを持぀こず)を䜿いたす。䞻なステップは以䞋の通りです。

  • 新しいプロゞェクトにずっおは初期の git の蚭定。features/changes ブランチの䜜成は の次のステップなので無芖したしょう。

    cd <project directory>
    git init
  • feature/bug-fix ブランチを䜜成する。

    git checkout -b <branchname>
  • コヌドを倉曎する。

    git add
    git commit -a

    Why:

    git commit -aを䜿うず本文から䞻題を切り離しお始めるこずができたす。詳しくはsection 1.3を読みたしょう。

  • 取り蟌たれおいない倉曎を取埗する為にリモヌトのリボゞトリず同期したしょう。

    git checkout develop
    git pull

    Why:

    こうするこずでコンフリクトを含めながらプルリク゚ストを䜜成するのではなくおリベヌス(のちに)し぀぀、コンフリクトに察凊できる可胜性が高たりたす。

  • feature ブランチにむンタラクティブリベヌスをするこずで垞に develop の倉曎を取り蟌みたしょう。

    git checkout <branchname>
    git rebase -i --autosquash develop

    Why:

    --autosquash は党おのコミットを䞀぀にたずめるこずができたす。䞀぀の feature に察しお耇数のコミットがある状態は望たしくありたせん。もっず読む...

  • もしコンフリクトしおなかったらこの章は飛ばしお倧䞈倫です。ただしもしコンフリクトが起きおたら解決したしょう。そしおリベヌスを続けたしょう。

    git add <file1> <file2> ...
    git rebase --continue
  • 自分のブランチを Push したしょう。リベヌスはヒストリヌを改倉したすので、リモヌトに Push する際は-f のオプションを぀けお Push する必芁がありたす。もし他の人が同じブランチで䜜業をしおいたらより砎壊的でない--force-with-leaseを䜿いたしょう。

    git push -f

    Why:

    リベヌスをするず、䜜業ブランチのコミットヒストリヌを倉えるこずになりたす。結果ずしお Git に普通のgit pushは拒吊されるので代わりに -f や--force フラグを䜿えば倧䞈倫です。もっず読む...

  • プルリク゚ストを䜜りたしょう。

  • プルリク゚ストが受け入れられたら、レビュワヌによっおマヌゞされお課題が閉じられたす。

  • マヌゞが完了したらロヌカルのブランチを消したしょう。

    git branch -d <branchname>

    必芁のないリモヌトブランチを党お削陀するコマンド。

    git fetch -p && for branch in `git branch -vv | grep ': gone]' | awk '{print $1}'`; do git branch -D $branch; done

1.3 良いコミットメッセヌゞの曞き方

コミットを䜜成しお維持するための良い指針を持぀ず、Git をうたく䜿うこずができ他の開発者ずの共同䜜業をずおも簡単にしたす。ここにいく぀かの経隓則がありたす。(゜ヌス)

  • 本文を改行するこずで䞻題ず切り離したしょう。

    Why:

    Git は最初の行をそのコミットのサマリずしお区別したす。実際git logの代わりにgit shortlogを䜿うず、コミット ID ずサマリヌのみで構成される長いコミットメッセヌゞのリストを芋るこずができたす。

  • 䞻題は 50 文字以内、本文を含めおも 72 文字以内に制限したしょう。

    why

    コミットはできる限りきめ现やかで完結あるべきで、コミットメッセヌゞを冗長にするこずは避けたしょう。詳しく読む

  • 䞻題の先頭は倧文字にしたしょう。

  • ピリオドで終わるのをやめたしょう。

  • 䞻題郚分では呜什法 を䜿いたしょう。

    Why:

    コミッタが䜕を行ったかわかりやすいメッセヌゞを曞きたしょう。コミットがマヌゞされた埌にそのコミットが䜕をしたのかをうたく説明できるように考えるずいいでしょう。もっず読む...

  • 本文は How ではなくお What ず Whyを説明したしょう。

2. ドキュメント

ドキュメント

  • こちらのテンプレヌトを䜿っおREADME.mdを䜜成したしょう。空癜のセクションがあっおも気にしなくおも倧䞈倫です。
  • 䞀぀以䞊の Git リポゞトリがあるようなプロゞェクトでは、各々のREADME.mdファむルをリンクさせおあげたしょう。
  • プロゞェクトの成長に合わせおREADME.mdの情報を最新に保ちたしょう。
  • コヌドにはコメントを曞きたしょう。その際には自分の意図をできる限り簡朔に曞くように心がけたしょう。
  • もしコヌドや詊みおいるアプロヌチに぀いお github や stackoverllow でオヌプンな議論があれば、そのリンクもコメントに含めたしょう。
  • ダメなコヌドに察する蚀い蚳を曞くのはやめたしょう。コヌドを綺麗に保ちたしょう。
  • 綺麗なコヌドを党くコメントがないこずに察する蚀い蚳にするのはやめたしょう。
  • コヌドの成長に合わせおコメントを最新に保ちたしょう。

3. 開発環境

開発環境

  • 必芁ならdevelopment, test ずproductionの環境を分けお定矩したしょう。

    Why:

    デヌタやトヌクンや API、ポヌトなど環境によっお必芁ずされるものは様々です。。。テストの自動化ず手動のテストを簡単にさせるために、developmentモヌドは予枬可胜なデヌタを返すフェむクの API が欲しいかもしれたせん。もしくは Google Analytics はproductionでだけ有効にしたかったり様々でしょう。もっず読む...

  • 環境別の Config ファむルを環境毎に適甚するようにしお、コヌドベヌスに定数ずしお決しお曞き蟌たないでください。サンプル

    Why:

    トヌクン、パスワヌドなど様々な重芁な個人情報を持っおいたす。 その情報はコヌドベヌスがい぀公開されおもいいように、コヌドベヌスずは切り離さないずいけたせん。

    How:

    .envファむルを情報を保持するために䜿いたしょう。そのファむルは.gitignoreに加えお、Git リポゞトリからは陀倖されるようにしたす。その代わりに.env.exampleのようなサンプルを他の開発者向けのガむドずしおコミットしおおきたしょう。production 環境甚に、環境蚭定は暙準的なやり方で蚭定するようにしたしょう。 もっず読む...

  • アプリケヌションを開始する前に環境倉数を validate するこずをオススメしたす。サンプルを参照 倉数を Validate するためにjoiを䜿っおいたす。

    Why:

    トラブルシュヌティングに費やす時間を節玄するこずに繋がりたす。

3.1 統䞀された開発環境

  • node のバヌゞョンをpackage.jsonの䞭のenginesに蚭定したしょう。

    Why:

    どのバヌゞョンの node をそのプロゞェクトで䜿うべきかを瀺すこずができたす。もっず読む...

  • さらにnvm を䜿っお.nvmrcをプロゞェクトルヌトに䜜成したしょう。ドキュメント内に蚘述を残すこずを忘れないようにしたしょう。

    Why:

    nvmを䜿う人は誰でも誰でもnvm useを䜿うこずで node のバヌゞョンを切り替えるこずができたす。もっず読む...

  • preinstallスクリプトを䜿っお node ず npm のバヌゞョンを確かめるのがいいでしょう。

    Why:

    npm の新たなバヌゞョンでむンストヌルするず䟝存関係のラむブラリが倱敗するこずがありたす。

  • できるならば Docker むメヌゞを䜿いたしょう。

    Why:

    Docker むメヌゞは党おのワヌクフロヌを跚いで同じ環境を提䟛しおくれたす。䟝存関係やコンフィグファむルに悩む必芁があたりないようになりたす。もっず読む...

  • グロヌバルのモゞュヌルを䜿うのではなくロヌカルのモゞュヌルを䜿いたしょう。

    Why:

    同僚が特定のモゞュヌルを圌らのマシンにすでにむンストヌルしおいるこずを期埅するのではなく、䜿うラむブラリは共有できるようにしおおきたしょう。

3.2 䞀貫した䟝存関係

  • チヌムメンバヌが同じ䟝存関係を取埗できるこずを確認したしょう。

    Why:    > コヌドにはどんな開発マシンでも同じ挙動をしおほしいからです。もっず読む...

    how:

    npm@5以䞊でpackage-lock.jsonを䜿いたしょう。

    npm@5 は䜿っおない:

    Yarnを䜿いREADME.mdを確かめるこずで代替手段ずするこずができたす。各ラむブラリをアップデヌトした埌にロックファむルずpackage.json は同じバヌゞョンを保持しおいるでしょう。

    Yarnずいう名前が気にくわない:

    それは残念です。 叀いバヌゞョンのnpm甚に、パブリッシュする前に新しいラむブラリをむンストヌルしたりnpm-shrinkwrap.jsonを䜜るずきには、—save --save-exactを䜿いたしょう。もっず読む...

4. 䟝存関係

Github

  • 䜿甚可胜な最新のパッケヌゞを保ちたしょう。 e.g.,npm ls --depth=0. もっず読む...

  • 無関係であったり䜿っおいないパッケヌゞを確認したしょう: depcheck. もっず読む...

    Why:

    もしかしたら䜿っおいないラむブラリが production のサむズを増加させおいるかもしれたせん。䜿っおいない䟝存関係を芋぀けおそれを消すようにしたしょう。

  • ラむブラリをむンストヌルする前に、そのラむブラリがコミュニティでよく䜿われおいるかどうかを確認したしょう。npm-stat。もっず読む...

    Why:

    倚く䜿われおいるずいうこずは倚くのコントリビュヌタヌがいるずいうこずで、それは良いメンテナンスが行われおいるずいうこずになりたす。そのこずはバグが開発者によっおいち早く発芋され、修正されるこずに繋がりたす

  • ラむブラリをむンストヌルする前に、それがいい機胜を持っおいるか、倚くのメンテナヌがいお成熟したバヌゞョンを頻繁にリリヌスしおいるラむブラリかを確認したしょう。: e.g., npm view async. もっず読む...

    Why:

    もしメンテナヌが修正をマヌゞしなかったりパッチを玠早く圓おないず、コントリビュヌタが効率的な開発を行えなくなるでしょう。

  • それほど知られおないラむブラリが必芁な堎合には、䜿甚する前にチヌムメンバヌず議論したしょう。

  • ラむブラリはビルドを砎壊しない限りは垞に最新で動くかを確かめたしょう: npm outdated もっず読む...

    Why:

    䟝存パッケヌゞの曎新はたたに砎壊的倉曎が含たれおいるこずがありたす。アップデヌトが出たずきには垞にリリヌスノヌトを確認したしょう。䜕かあったずきにトラブルシュヌティングを簡単にするために、䟝存ラむブラリを䞀぀䞀぀曎新したしょう。npm-check-updatesのように玠晎らしいツヌルを䜿いたしょう。

  • 䟝存パッケヌゞに公開されおいる脆匱性が含たれおいる堎合があるのでチェックしたしょう。 e.g.,Snyk

5. テスト

テスト

  • 必芁であればtestの環境を甚意したしょう。

    Why:

    通垞は end to end のテストをproductionに行うだけで十分なですが、䟋倖がいく぀かありたす。統蚈デヌタをproduction環境で有効にしたくなく、テストデヌタでダッシュボヌドを汚したくない堎合です。あずはproductionの API に制限があっお、テストをする際のリク゚スト数が制限に達しおブロックされおしたう堎合です。

  • 単䜓テストコヌドはテストされるファむルの隣におきたしょう。 moduleName.spec.jsのように*.test.js や *.spec.js のようなファむル名が慣䟋ずなっおいたす。

    Why:

    ナニットテストを探すためにフォルダ構造を掘り進めたくないでしょう。もっず読む...

  • 远加のテストファむルがどこにあるか混乱を避けるために隔離されたフォルダに入れたしょう

    Why:

    いく぀かのテストコヌドは実装コヌドず関連しおないこずがありたす。他の開発者が芋぀けやすいフォルダ(__test__フォルダのような)にテストコヌドをおきたしょう。__test__フォルダはスタンダヌトであり、様々な JavaScript フレヌムワヌクのテストで䜿甚されおいたす。

  • テストの曞きやすいコヌドを曞きたしょう。副䜜甚を避けたしょう。副䜜甚を抜出したしょう。玔粋な関数を曞きたしょう。

    Why:

    結合を分けおロゞックのテストをしたい堎合。ランダムで非決定性のプロセスがコヌドの信頌性に䞎える圱響を最小にする必芁がありたす。もっず読む...

    玔粋関数は同じ入力に察しお垞に同じ結果を出力したす。逆に蚀えば玔粋でない関数は副䜜甚をもっおいるか結果を出力する際に倖郚の状況に巊右されたす。そのような関数は予想通りの結果が返っおきにくくなりたす。もっず読む...

  • 静的解析ツヌルを䜿いたしょう。

    Why:

    静的解析ツヌルが必芁な堎面があるかもしれたせん。コヌドが信頌できる基準をもたらしおくれたす。

  • developブランチにするリク゚ストを投げる前にロヌカルでテストを実行したしょう。

    Why:

    誰しもプロダクション準備䞭のビルドを倱敗される犯人になりたくたいでしょう。rebaseした埌、リモヌトの feature ブランチにリポゞトリに Push する前にテストを実行するようにしたしょう。

  • テストの実行方法などの情報を含めお、ドキュメントずしおREADME.mdファむルに蚘述したしょう。

    Why:

    ドキュメントを残すこずで他の開発者、DevOps の担圓者もしくは QA にプロゞェクトを匕き継いだ時に、圌らがあなたのコヌドで仕事をしやすくなりたす。

6. プロゞェクトの構造ず名前付け

Structure and Naming

  • ファむルを圹割ではなく商品、ペヌゞ、コンポヌネントのように集玄したしょう。テストファむルも実装の隣に配眮したしょう。

    Bad

    .
    ├── controllers
    |   ├── product.js
    |   └── user.js
    ├── models
    |   ├── product.js
    |   └── user.js
    

    Good

    .
    ├── product
    |   ├── index.js
    |   ├── product.js
    |   └── product.test.js
    ├── user
    |   ├── index.js
    |   ├── user.js
    |   └── user.test.js
    

    Why:

    長いファむルのリストの代わりに、テストコヌドを含めたカプセル化された単䞀責任の小さいモゞュヌルが出来䞊がりたす。そうするこずでコヌドのガむドがしやすくなり、䞀目で芋぀けるこずができるようになりたす。

  • 远加のテストファむルは混乱を避けるために test フォルダに眮きたしょう。

    Why:

    他の開発者やチヌムの DevOps の担圓者の時間を節玄するこずに぀ながりたす。

  • ./configフォルダを䜜成したしょう。違う環境のための違う config ファむルを䜜らないようにしたしょう。

    Why:

    異なる目的(䟋えばデヌタベヌスや API 等々)のために耇数の config ファむルに分割する時は、同じフォルダにconfigのようなわかりやすい名前でたずめおおきたしょう。ただし、異なる環境ごずに異なる config ファむルを䜜成しないように気を぀けおください。新たなデプロむ先が増えた時に新たな環境の名前が必芁ずなり、綺麗にスケヌルするこずができないからです。 config ファむル内の倉数は環境倉数から䞎えるのが良い方法です。もっず読む...

  • スクリプトは./scriptsフォルダに眮きたしょう。ここには node や bash のスクリプトが含たれたす。

    Why:

    プロダクション、デベロップのビルド、デヌタベヌスの構築ず同期等々を行う際に少なくずも䞀぀以䞊のスクリプトがプロゞェクトで必芁ずされる可胜性が高いでしょう。

  • ビルドの成果物は./buildに出力するようにしたしょう。build/を.gitignoreに加えたしょう。

    Why:    > 名前はなんでもよくお、dist ずいう名前でもかっこいいです。なんでもいいずはいえ、チヌムのメンバヌが矛盟なく理解できる名前でなければなりたせん。䟋えば䜕がそのフォルダで取埗できるのか、䜜成されたものなのかバンドルされたものなのか、コンパむルされたものなのか、もしくはただ移動されおきたものなのか。なにを出力するのか、チヌムメヌトがそこになにを出力できるのかもそうです。だからそのフォルダは特殊な事情がない限りですがリモヌトリポゞトリにコミットする必芁がありたせん。

  • PascalCaseずcamelCaseをファむルずディレクトリの名前に䜿甚したしょう。PascalCaseはコンポヌネントのみに䜿甚したしょう。

  • CheckBox/index.jsはCheckBoxのコンポヌネントを持っおいるべきです。CheckBox.jsもそうでしょう。しかしCheckBox/CheckBox.jsやcheckbox/CheckBox.jsのような名前は冗長なので避けるべきです。

  • 理想的にはフォルダの名前はindex.jsのデフォルト export の名前ず䞀臎させるべきです。

    Why:

    そうするこずで芪フォルダをシンプルに import するだけでモゞュヌルやコンポヌネントを想像できたす。

7. コヌドスタむル

Code style

7.1 コヌドスタむルガむドラむン

  • 新しいプロゞェクトでは stage-2 かそれよりバヌゞョンの新しいモダンな JavaScript を䜿甚するようにしたしょう。叀いプロゞェクトに぀いおは、モダンな JavaScript が動くプロゞェクトにさせたい堎合は別ずしお既存のバヌゞョンず互換性のあるバヌゞョンにずどめおおきたしょう。

    Why:

    チヌム次第ではありたすが、私たちはトランスパむラを䜿甚するこずで、新しいシンタックスの利点を掻甚しおいたす。stage-2 は残りわずかな改蚂で仕様の䞀郚になる可胜性が埐々に高くなっおいたす。

  • コヌドスタむルチェックをビルドプロセスに含めたしょう。

    Why:

    ビルドを壊すこずはコヌドスタむルを矯正する䞀぀の方法になりたす。あなたがだんだんコヌドスタむルを真剣に捉えなくなるずいうこずを防いでくれたす。クラむアントずサヌバヌサむドのコヌド䞡方に導入したしょう。もっず読む...

  • コヌドスタむルを匷制するためにESLint - Pluggable JavaScript linterを䜿いたしょう。

    Why:

    私たちはシンプルな eslint が奜きなだけなので、あなたがそうである必芁はないです。eslint 自䜓たくさんのルヌルをサポヌトしおいたす。ルヌルを蚭定でき、カスタムルヌルを远加するこずができたす。

  • 私たちはAirbnb JavaScript Style Guideを JavaScript に䜿っおいたす。もっず読む...。あなたのチヌムに求められた JavaScript のスタむルガむドを䜿甚したしょう。

  • 私たちはFlowTypeを䜿甚する時にはFlow type style check rules for ESLintを䜿っおいたす。

    Why:

    Flow には、特定のコヌドスタむルに埓っおチェックする必芁がある構文がほずんどありたせん

  • 特定のフォルダやファむルをコヌドスタむルチェックから陀倖するために.eslintignoreを䜿いたしょう。

    Why:

    耇数のファむルをスタむルチェックから陀倖する時に、eslint-disableのコメントでコヌドを汚す必芁がありたせん。

  • プルリク゚ストを䜜成する前にはeslintのコメントアりトを削陀したしょう。

    Why:

    ロゞックの実装に泚力しおいる時はスタむルチェックを無効にするのは䞀般的ですが、eslint-disable のコメントを削陀しおルヌルに埓うこずを忘れないようにしたしょう。

  • タスクのサむズによっお、//TODO: コメント䜿うか、チケットを起祚するかを遞択したしょう。

    Why:

    チヌムメヌトには小さなタスクの事(関数のリファクタリング、コメントのアップデヌトなど)を定矩しおおきたしょう。倧きめのタスクにはリントルヌル通りに//TODO(#3456)ず曞き、チケットの番号を蚘茉したしょう。

  • コメントは垞にコヌドの倉曎に関連させるようにしたしょう。コメントアりトされたコヌドは取り陀きたしょう。

    Why:

    コヌドは可胜な限り読みやすくする必芁があるず同時に、䜙分な郚分は陀去しおおくべきです。リファクタリングする時は既存コヌドをコメントアりトするのではなく、削陀したしょう。

  • 無関係であったりおかしなコヌドやログや名前付けは避けたしょう。

    Why:

    ビルドプロセスでそれらを陀去できるかも(すべき)です。あなたのコヌドは別䌚瀟や別クラむアントの枡される可胜性がありたすし、あなたのコヌドがどこかの誰かに芋られお笑われないようにしたしょう。

  • 短い名前を避けお、意味ずしお区別しやすい怜玢しやすい名前を぀けたしょう。関数には長くお蚘述的な名前を䜿いたしょう。関数の名前は動詞もしくは動詞のフレヌズにしたしょう。その関数の意図を䌝える必芁がありたす。

    Why:

    ゜ヌスコヌドをより自然により読みやすくさせるためです。

  • ファむル内の関数を降順によっおたずめおおきたしょう。高いレベルの関数は䞊郚ぞ、䜎いレベルの関数は䞋郚ぞ䜍眮させたしょう。

    Why:

    読むのに適した゜ヌスコヌドになるようにするためです。

7.2 暙準的なコヌドスタむルの匷制

  • .editorconfig ファむルを䜿っお開発者が異なる゚ディタや IDE のプロゞェクト間で䞀貫したコヌディングスタむルを定矩し維持するこずができるようにしたしょう。

    Why:

    EditorConfig プロゞェクトはコヌディングスタむル定矩ず゚ディタがファむルフォヌマット読み蟌んでスタむル定矩を有効にする゚ディタプラグむンからなりたす。EditorConfig ファむルは可読性が高くバヌゞョンコントロヌルシステムずもうたく機胜したす。

  • コヌドスタむルの゚ラヌを䌝えおくれる゚ディタを䜿いたしょう。既存の ESLint の蚭定ず䞀緒にeslint-plugin-prettierずeslint-config-prettierを䜿いたしょう。もっず読む...

  • Git hook の䜿甚を考えたしょう。

    Why:

    Git hook は開発者の生産性を倧きく高めおくれたす。ビルドの砎壊を怖がるこずなく、ステヌゞングやプロダクション環境に倉曎を䜜成、コミット、Push できたす。もっず読む...

  • Prettier をprecommit hookずずもに䜿いたしょう。

    Why:

    prettier自䜓はずおも力匷いものではありたすが、毎回のコヌドフォヌマットに察しお個別の npm task ずしおシンプルに実行するこずはあたり生産的ではありたせん。ここではlint-staged(ずhusky)が掻躍したす。lint-staged hereのhusky hereの蚭定をよく読みたしょう。

8. ログ

Logging

  • クラむアントサむドの console ログをプロダクション環境で出力するのは避けたしょう。

    Why:

    ビルドプロセスを通しお Console ログを取り陀くこずができたす(すべきです)が、コヌドスタむルチェックが吐き出す console log に぀いおの warning の情報を確認したしょう。

  • プロダクションのログは読みやすいように出力したしょう。理想的にはプロダクションモヌドで䜿われおいるロギングラむブラリを䜿いたしょう(winston もしくは node-bunyanのようなものがありたす。)

    _Why:_
    > ログのカラヌ化やタむムスタンプ、ログファむルの出力や日々のログファむルのロヌテヌトが、トラブルシュヌティングの䞍快感を少なくしおくれたす。
    

9. API

API

9.1 API デザむン

Why:

私たちは明快に構築された RESTful のむンタヌフェヌスでの開発を匷制するこずで、チヌムメンバヌやクラむアントがシンプルに矛盟なくそれを䜿えるこずができたす。

Why:

䞀貫性やシンプルさがない API はシステムの結合やメンテナンスのコストを増加させたす。だからAPI designをこのドキュメントに含めお説明しおいたす。

  • 私たちは倚くの堎面でリ゜ヌス志向アヌキテクチャに埓っおいたす。リ゜ヌス志向アヌキテクチャずは䞻にリ゜ヌス、集合、URL の芁玠で構成されたす。

    • リ゜ヌスはデヌタを持っおいお、ネストを取埗でき、それらのリ゜ヌスを操䜜できるメ゜ッドがありたす。
    • リ゜ヌスの集合はコレクションず呌ばれたす。
    • URL はオンラむンのリ゜ヌスの堎所はリ゜ヌスかコレクションで衚したす。

    Why:

    䞊蚘のこずは開発者(あなたの API を䜿う人たち)に呚知されおいるこずです。可読性や䜿いやすさを別ずしおも、REST API ではその API の詳现を知らずずも汎甚なラむブラリやコネクタを曞くができたす。

  • URL には kebab-case を䜿いたしょう。

  • リク゚スト内のパラメヌタやリ゜ヌス内のパラメヌタには camelCase を䜿いたしょう。

  • URL 内のリ゜ヌス名は耇数圢の kebab-case にしたしょう

  • コレクションを衚す url には垞に耇数圢の名詞を䜿いたしょう。/users

    Why:

    基本的にはそうするこずで読みやすさの向䞊 URL の䞀貫性を維持するこずになるでしょう。もっず読む...

  • ゜ヌスコヌド内での倉数やプロパティ名の耇数圢はリストのサフィックスにしたしょう。

    Why:

    耇数圢は URL においおは良いものですが、゜ヌスコヌド内では分かりにくく゚ラヌの原因になり埗たす。

  • コレクションで始たり識別子に終わる単䞀のパスを垞に䜿甚したしょう。

    /students/245743
    /airports/kjfk
    
  • 以䞋のような URL は避けたしょう。

    GET /blogs/:blogId/posts/:postId/summary
    

    Why:

    この URL はリ゜ヌスではなく、プロパティをさしおいたす。プロパティはレスポンスを敎えるようにパラメヌタに枡したしょう。

  • リ゜ヌスを瀺す URL からは動詞を含めないようにしたしょう。

    Why:

    各リ゜ヌスの操䜜に動詞を含めるず、各々のリ゜ヌスの操䜜に぀いお倧量の URL が出来おしたい、開発者にずっお理解するのが難しい䞀貫性のないパタヌンになっおしたうからです。私たちは他の箇所に動詞を䜿っおいたす。

  • リ゜ヌスではない郚分に動詞を䜿甚したしょう。このケヌスではこの API はリ゜ヌスを返さずに、操䜜を実行しお結果を受け取るのみです。CRUD(Create Retrieve Update Delete)の操䜜ではないこずに泚意したしょう。

    /translate?text=Hallo
    

    Why:

    CRUD に぀いおはリ゜ヌスやコレクションの URL に察しお HTTP メ゜ッドを䜿甚するからです。説明しおいる動詞はおおよそControllerずなりたす。通垞これらの URL をたくさん䜜成するこずはないでしょう。もっず読む...

  • リク゚ストボディやレスポンスタむプはJSONにしたしょう。そしお䞀貫性あるメンテナンスをしやすくするために、プロパティ名はcamelCaseを䜿甚するようにしたしょう。

    Why:

    このドキュメントは JavaScript プロゞェクトのガむドラむンであるため、JSON の読み曞きには JavaScript が䜿甚されおるこずを想定しおいたす。

  • リ゜ヌスオブゞェクトむンスタンスや DB のレコヌドず同じような単䞀なものであったずしおも、table_nameやcolumn_nameはリ゜ヌス名やプロパティ名にしないようにしたしょう。

    Why:

    あくたでリ゜ヌスを公開するのであっお DB のスキヌマの詳现を公開するためのものではないからです。

  • 念のためにもう䞀床、URL には名詞のみを䜿い、機胜を説明するような名前付けは避けたしょう。

    Why:

    名詞のみをリ゜ヌスの URL には䜿甚したしょう。/addNewUserや/updateUseのような゚ンドポむントを甚意するのはやめたしょう。同様にリ゜ヌス操䜜をパラメヌタを送るのも避けたしょう。

  • CRUD の機胜的説明には HTTP のメ゜ッドを䜿いたしょう。

    How:

    GET: 存圚するリ゜ヌスの取埗。

    POST: 新しいリ゜ヌスずサブリ゜ヌスの䜜成。

    PUT: 既存のリ゜ヌスの曎新。

    PATCH: 既存のリ゜ヌスの曎新。提䟛されたフィヌルドのみを曎新し、他のフィヌルドはそのたたにしおおきたす。

    DELETE: 存圚するリ゜ヌスの削陀。

  • ネストしおいるリ゜ヌスのために関連する URL 間にリレヌションを䜿甚したしょう。䟋えば䌚瀟の埓業員を関連されるために、id を䜿甚したす。

    Why:

    各リ゜ヌスを探玢しやすくするための自然なやり方です。

    How:

    GET /schools/2/students 。2 の孊校のすべおの生埒を取埗できるはずです。

    GET /schools/2/students/31 。2 の孊校に所属する、31 の生埒の詳现を取埗できるはずです。

    DELETE /schools/2/students/31 。2 の孊校に所属する 31 の生埒を削陀できるはずです。

    PUT /schools/2/students/31 。31 の生埒の情報を曎新するはずです。たた PUT はコレクションには䜿甚せずにリ゜ヌス URL のみに䜿甚するようにしたしょう。

    POST /schools。新たな孊校を䜜成しお、その䜜成された孊校の情報を返华するはずです。POST はコレクションの URL に䜿甚したしょう。

  • バヌゞョンにはvをプレフィックスずした単玔な敎数を䜿甚したしょう(v1,v2)。党おの URL を残したたた移動するために、バヌゞョンは䞀番䞊のスコヌプに䜿甚したしょう。

    http://api.domain.com/v1/schools/3/students
    

    Why:

    API がサヌドパヌティのために公開される時には、API の砎壊的倉曎を䌎うバヌゞョンアップは既存のプロダクトや API を䜿うサヌビスに倚倧な圱響を䞎えたす。バヌゞョンを URL に含めるこずで、これらの問題が起きるこずを防いでくれたす。もっず読む...

  • レスポンスメッセヌゞは自己蚘述的でなければなりたせん。良い゚ラヌレスポンスは以䞋のようなものになりたす。

    {
    	"code": 1234,
    	"message": "Something bad happened",
    	"description": "More details"
    }

    たたバリデヌション゚ラヌならこうです。

    {
    	"code": 2314,
    	"message": "Validation Failed",
    	"errors": [
    		{
    			"code": 1233,
    			"field": "email",
    			"message": "Invalid email"
    		},
    		{
    			"code": 1234,
    			"field": "password",
    			"message": "No password provided"
    		}
    	]
    }

    Why:

    API を䜿甚したアプリケヌションがそのナヌザヌの手元に届けられたあず、問題解決やトラブルシュヌティングをする重芁な時に、開発者は良いデザむンの゚ラヌメッセヌゞに頌るこずになりたす。

    Note: セキュリティの䟋倖のメッセヌゞは極力䞀般化したしょう。䟋えば"パスワヌドが間違っおいたす"ず蚀う代わりに、"ナヌザヌ名もしくはパスワヌドが間違っおいたす"ず蚀いたしょう。私たちの堎合はナヌザヌ名が正しくお、パスワヌドだけ間違っおいるず䌝えるこずはしないようにしおいたす。

  • 党おがうたく動いおいた、クラむアントアプリがうたく動いおなかった 、API がうたく動いおなかった 等 レスポンスの説明には 8 個のステヌタスのみを送るようにしたしょう。

    _䞀芧:_
    > `200 OK` `GET`、`PUT` 、`POST`リク゚ストが成功したこずを衚したす。
    
    > `201 Created` 新しいむンスタンスが䜜成された時に返华されたす。新しいむンスタンスの䜜成、`POST`メ゜ッドの䜿甚は`201`のステヌタスコヌドを返したす。
    
    > `304 Not Modified` ナヌザヌがすでにレスポンスのキャッシュを持っおいる堎合に返华されたす、最小の転送に抑えるこずになりたす。
    
    > `400 Bad Request` リク゚ストが凊理されなかった堎合に返华されたす。サヌバヌがクラむアントの芁求するリク゚ストを理解できなかったような時です。
    
    > `401 Unauthorized` リク゚ストの認蚌情報が䞍足しおいる時に返华されたす。芁求された認蚌情報で再リク゚ストを行うこずになるでしょう。
    
    > `403 Forbidden` サヌバヌはリク゚ストを解釈できおいたすが、認蚌を拒吊したずいう意味です。
    
    > `404 Not Found` リク゚ストしたリ゜ヌスが芋぀からなかったこずを瀺したす。
    
    > `500 Internal Server Error` リク゚ストは正しいが、サヌバヌが予期せぬ事態により動䜜しなかったこずを瀺したす。
    
    _Why:_
    > 倚くのAPIの提䟛者は少数のHTTPのステヌタスコヌドを䜿甚したす。䟋えばGoogleのGdata APIは10個のステヌタスコヌドしか䜿っおいたせん。Netflixは9぀です。Diggは8぀だけです。もちろんながらこれらのレスポンスは远加の情報をbodyに含めおいたす。70を超えるHTTPのステヌタスが存圚したすが。あたり䞀般的でないステヌタスコヌドを遞択するず、アプリケヌションの開発者は開発を離れお、ステヌタスコヌドが䜕を瀺しおいるのかを理解しようずwikipedia等で調べざるを埗なくなりたす。[もっず読む...](https://apigee.com/about/blog/technology/restful-api-design-what-about-errors)
    
  • レスポンスにはリ゜ヌスの数の合蚈を提䟛したしょう。

  • limitずoffsetのパラメヌタを受け぀けたしょう。

  • リ゜ヌスの公開するデヌタ量はよく考える必芁がありたす。API の利甚者は垞にリ゜ヌスの党おの衚珟が必芁ずいうわけではありたせん。フィヌルドのカンマ区切りリストを含むフィヌルドク゚リパラメヌタを䜿甚したす。

    GET /student?fields=id,name,age,class
    
  • ペヌゞネヌション、フィルタリング、゜ヌトは初めから党おのリ゜ヌスをサポヌトする必芁はありたせん。フィルタリングや゜ヌトのあずにこれらのリ゜ヌスを蚘述したしょう。

9.2 API セキュリティ

いく぀かのセキュリティのベストプラクティスをご玹介したす。

  • セキュアな通信(HTTPS)以倖ではベヌシック認蚌を䜿わないようにしたしょう。認蚌トヌクンを URL に含めおはいけたせん。GET /users/123?token=asdf....

    Why:

    トヌクンやナヌザヌ ID やパスワヌドが平文ずしおネットワヌクを超えおくるのでbase64 に゚ンコヌドされおいるでしょうが、base64 は可逆な゚ンコヌド方法です。、ベヌシック認蚌機構はセキュアではないです。もっず読む...

  • トヌクンは毎回のリク゚ストの認蚌ヘッダヌに乗せお送信されなければなりたせん。Authorization: Bearer xxxxxx, Extra yyyyy

  • 認蚌コヌドの生存期間は短く蚭定されるべきです。

  • 安党ではないデヌタの受け枡しを避けるために HTTP リク゚ストに応答しないこずで TLS ではないリク゚ストを拒吊するようにしたしょう。その際には403 Forbiddenで応答したしょう。

  • リク゚スト制限を䜿うこずを考えたしょう。

    Why:

    䞀時間あたり䜕千ものリク゚ストを送り぀けおくるボットから身を守るために、リク゚スト制限を早いうちから考えおおくべきでしょう。

  • HTTP ヘッダを適切に蚭定するこずは Web アプリケヌションをより匷固に、より安党にするのに圹立ちたす。もっず読む...

  • API は暙準的なフォヌムのデヌタを受け取っおデヌタを加工したしょう。できなければリク゚ストを拒吊するようにしたしょう。400 Bad Request ずずもにデヌタの䞍足や゚ラヌに぀いおの詳现を返华したしょう。

  • REST な API で亀換される党おのデヌタは API 䞊で Validate するようにしたしょう。

  • JSON をシリアラむズしたしょう。

    Why:

    JSON ゚ンコヌダの悩みの皮は、ブラりザ内でリモヌトからの任意の JavaScript の実行を防ぐこずです。もしくは node.js を䜿甚しおいるのであれば、サヌバヌサむドも同様です。ナヌザヌから䞎えられた入力がブラりザ内で実行されないように、ナヌザヌからの情報を゚ンコヌドできる適切な JSON シリアラむザヌを䜿甚するこずが重芁です。

  • Content-Type を Validate するようにしたしょう。倚くの堎合で application/*json (Content-Type ヘッダ)を䜿いたしょう。

    Why:

    䟋えば、application/x-www-form-urlencodedの mime-type を受け入れるこずは、攻撃者にフォヌムを䜜成させ、シンプルな POST リク゚ストを誘匕させるこずを蚱すこずになりたす。サヌバは受け入れる Content-Type を決しお掚定させないべきです。Content-Type ヘッダもしくは予期しない Content-Type ヘッダに察しおは4XXのレスポンスでリク゚ストを拒吊する結果を返华したしょう。

  • API のセキュリティをチェックリストを芋お確認したしょう。もっず読む...

9.3 API ドキュメント

  • README.md templateのAPI Referenceのセクションを埋めたしょう。
  • コヌドのサンプルずずもに API の認蚌方法に぀いお蚘述したしょう。
  • URL の構造(path に぀いおのみでいいです。root の URL に぀いおは必芁ありたせん。)をリク゚ストのメ゜ッドずずもに説明したしょう。

各゚ンドポむントに぀いお

  • URL パラメヌタはもし存圚する堎合は、URL セクションに蚘茉されおいる名前に埓っお指定したしょう。

    Required: id=[integer]
    Optional: photo_id=[alphanumeric]
    
  • リク゚ストタむプが POST なら、ちゃんず動く䟋も甚意したしょう。URL パラメヌタのルヌルはここにも適甚したす。Optional ず Required に分けたしょう。

  • レスポンスの成功の堎合ステヌタスコヌドは䜕でしょうかどんなデヌタを返されるでしょうかドキュメントは API の返答を開発者が知りたいずきに圹立ちたす。

    Code: 200
    Content: { id : 12 }
    
  • レスポンスの倱敗の時は、ほずんどの゚ンドポむントの倱敗は耇数通りありたす。認蚌されおいないアクセスからの䞍正な倀等。それら党おをここでは列挙したしょう。繰り返しになりたすが、こうするこずで憶枬のみで開発せざるを埗ない状況を防ぎたす。䟋

    {
    	"code": 403,
    	"message": "Authentication failed",
    	"description": "Invalid username or password"
    }
  • API デザむンツヌルを䜿甚したしょう。API Blueprint、Swaggerのようなオヌプン゜ヌスの良いドキュメンテヌションツヌルがたくさんありたす。

10. ラむセンス

Licensing

䜿甚できる暩利のあるリ゜ヌスを䜿甚しおいるこずを確認しおください。ラむブラリを䜿っおいるのであれば、MIT、Apache、BSD のラむセンスを芋぀けるこずを心がけたしょう。ラむブラリを修正したいのであれば、ラむセンスの詳现を少し芋お芋たしょう。著䜜暩で保護されおいる画像や動画が法的問題を匕き起こすかもしれたせん。


Sources: RisingStack Engineering, Mozilla Developer Network, Heroku Dev Center, Airbnb/javascript, Atlassian Git tutorials, Apigee, Wishtack

Icons by icons8