Skip to content

Latest commit

 

History

History
779 lines (521 loc) · 52.1 KB

README-ja.md

File metadata and controls

779 lines (521 loc) · 52.1 KB

䞭文版 | ENGLISH | 한국얎 | РУССКИЙ | Português

プロゞェクトガむドラむン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等で調べざるを埗なくなりたす。もっず読む...

  • レスポンスにはリ゜ヌスの数の合蚈を提䟛したしょう。

  • 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