fatigue.dot

digraph {
  unhappy[
    shape="box",
    style=rounded,
    label="React はあなたを不幸にする。"
  ]
  unhappy -> are_you_using_react_boilerplates;

  # Boilerplate Fatigue

  are_you_using_react_boilerplates[
    shape="diamond",
    label="ひな形プロジェクトから
    コピーして React を学びましたか?"
  ]
  are_you_using_react_boilerplates -> boilerplates_dont_teach[label="はい"]
  are_you_using_react_boilerplates -> steal_from_boilerplates[label="いいえ"]

  boilerplates_dont_teach[
    shape="box",
    label="ひな形からコピーして React を学ぶことはすてきなレストランで食事をして
    料理を学ぼうとするようなものです。それはうまくいきません。
    見落としを恐れずに基本からはじめる必要があります。根拠がありません。
    自分が作り上げたものや学んだことを見せるためにひな形を作るのであって、
    あなたの学習を助けるためではありません。それらはパワーユーザによるパワーユーザのためのもので、
    しばしばそれは彼ら/彼女らが思っている以上に実験的な方法です。
    ひな形は肥大化によって注目を集めて競い合いをします。
    それらで React を学んでいるのであれば、Pete Hunt の解説がおすすめです:
    https://github.com/petehunt/react-howto
    自力で作れるようになるまではひな形は見ないでください。"
  ]
  boilerplates_dont_teach -> are_you_using_flux

  steal_from_boilerplates[
    shape="box",
    label="ひな形は各技術を学ぶ方法としては良くありませんが、
    それぞれの技術について個別に学んだ「あとで」
    それらをどのように組み合わせることができるのかを見るのには役立ちます。
    新しい技術の発見のためにはよい方法ですが、
    間違ってもそれらを使おうと思うべきではありません。
    ひな形を完全に毛嫌いしないでください。
    ただ、ひな形は裏技の寄せ集めであって、あなたのアプリケーションの
    強固な土台にはなり得ないということだけは心に留めておいてください。"
  ]
  steal_from_boilerplates -> are_you_using_flux

  # Flux Fatigue

  are_you_using_flux[
    shape="diamond",
    label="Flux ライブラリ (または Redux) を
    使っていますか?"
  ]
  are_you_using_flux -> is_too_much_flux[label="はい"]
  are_you_using_flux -> is_not_enough_flux[label="いいえ"]

  is_too_much_flux[
    shape="diamond",
    label="それは用途のはっきりしない
    ひな形をたくさん追加しますか?"
  ]
  is_too_much_flux -> remove_flux[label="はい"]
  is_too_much_flux -> are_you_using_bundler[label="いいえ"]

  is_not_enough_flux[
    shape="diamond",
    label="バグの温床になっている肥大化したステートフルな
    コンポーネントがアプリケーションのコンポーネント階層にありますか?"
  ]
  is_not_enough_flux -> add_flux[label="はい"]
  is_not_enough_flux -> are_you_using_bundler[label="いいえ"]

  add_flux[
    shape="box",
    label="Flux ライブラリの導入を検討してみてください。
    複数のコンポーネントで共有できる状態を外部化したり、
    一貫性のある状態更新に役立ちます。"
  ]
  add_flux -> are_you_using_bundler

  remove_flux[
    shape="box",
    label="Flux ライブラリの削除を検討してください。
    公式ドキュメントの「Thinking in React」を読んで素の React
    でいい感じにアプリケーションを構造化できる感覚をつかんでください。"
  ]
  remove_flux -> are_you_using_bundler

  # Bundler Fatigue

  are_you_using_bundler[
    shape="diamond",
    label="webpack や Browserify のような JavaScript
    の依存関係解決ツール (bundler) を使っていますか?"
  ]
  are_you_using_bundler -> are_you_working_on_production_app_with_bundler[label="はい"]
  are_you_using_bundler -> are_you_working_on_production_app_without_bundler[label="いいえ"]

  are_you_working_on_production_app_with_bundler[
    shape="diamond",
    label="本番のアプリケーションで使っていますか?"
  ]
  are_you_working_on_production_app_with_bundler -> do_you_know_es2015[label="はい"]
  are_you_working_on_production_app_with_bundler -> remove_bundler[label="いいえ"]

  are_you_working_on_production_app_without_bundler[
    shape="diamond",
    label="本番のアプリケーションで使っていますか?"
  ]
  are_you_working_on_production_app_without_bundler -> add_bundler[label="はい"]
  are_you_working_on_production_app_without_bundler -> do_you_know_es2015[label="いいえ"]

  add_bundler[
    shape="box",
    label="依存関係の管理と JavaScript コードの効果的な配信のために
    bundler をビルド処理として導入してください。
    効果測定には Google Page Speed Insights ツールを使用します。
    コードの minify と envify をお忘れなく。"
  ]
  add_bundler -> do_you_know_es2015

  remove_bundler[
    shape="box",
    label="React を学ぶのに bundler は不要です。
    https://github.com/jarsbe/react-simple をコピーしてビルド処理なしで
    はじめてください。React に慣れてきたり、モジュール機構や他の bundler
    について学びたくなるまでは <script> タグを使ってください。"
  ]
  remove_bundler -> do_you_know_es2015

  # ES2015 Fatigue

  do_you_know_es2015[
    shape="diamond",
    label="ES2015 (クラスや矢印のような関数定義など) を
    便利に感じますか?"
  ]
  do_you_know_es2015 -> use_es5[label="いいえ"]
  do_you_know_es2015 -> are_you_using_dangerous_features[label="はい"]

  use_es5[
    shape="box",
    label="まだ ES2015 を使わないでください。React を学ぶのにそれらは不要です。
    サードパーティ製のライブラリはしばしばサンプルとして ES2015 の構文を使用していますが、
    そもそも React 自体を学ぶのにサードパーティ製のライブラリは不要です。
    JavaScript の知識をアップデートしたいのであれば
    https://leanpub.com/understandinges6/read はすばらしい参考資料です。
    ちょっと試すのには http://babeljs.io/repl が使えます。"
  ]
  use_es5 -> do_you_update_packages_asap

  # ESnext Fatigue

  are_you_using_dangerous_features[
    shape="diamond",
    label="ES2015 で代用しにくい実験的な
    言語機能 (デコレータ構文など) を使っていますか?"
  ]
  are_you_using_dangerous_features -> can_you_spend_days_on_your_tooling[label="はい"]
  are_you_using_dangerous_features -> do_you_update_packages_asap[label="いいえ"]

  can_you_spend_days_on_your_tooling[
    shape="diamond",
    label="バグや非互換性、仕様変更によるビルドツール設定の
    メンテナンスに数週間ごとに時間を割けますか?"
  ]
  can_you_spend_days_on_your_tooling -> do_you_update_packages_asap[label="はい"]
  can_you_spend_days_on_your_tooling -> stick_to_es2015[label="いいえ"]

  stick_to_es2015[
    shape="box",
    label="ES2015、JSX、スプレッドオペレータの
    利用にとどめてください。"
  ]
  stick_to_es2015 -> do_you_update_packages_asap

  # Semver Fatigue

  do_you_update_packages_asap[
    shape="diamond",
    label="依存ライブラリの
    メジャーバージョンアップに追従しますか?"
  ]
  do_you_update_packages_asap -> give_it_two_months[label="はい"]
  do_you_update_packages_asap -> consider_updating_react[label="いいえ"]

  give_it_two_months[
    shape="box",
    label="React はすべてのリリースごとに徹底的にテストしているためその限りではありませんが、
    パッケージのアップデート頻度を落とすことを検討して下さい。
    依存パッケージの新しいバージョンを試してもいいですが、
    コミュニティが共通の問題を見つけて修正されるまでの数ヶ月間は
    現在のブランチを維持するのがベストです。
    間違った情報に基づいた意思決定はしないでください!
    古いドキュメントを見ているときは GitHub のタグ付けされたリリースの確認を忘れないでください。
    例えば https://github.com/reactjs/react-router/tree/0.13.x/doc"
  ]
  give_it_two_months -> are_you_still_sad

  consider_updating_react[
    shape="box",
    label="それはいい判断です。しかしながらまもなくリリースされる新しいバージョンの
    React を (別ブランチで) 試すことをおすすめします。
    多くのコミュニティによるパッケージと違って Facebook で徹底的にテストされています。
    リリースノートにある移行手順などが記述されたリンクを見落とさないようにしてください。"
  ]
  consider_updating_react -> are_you_still_sad

  # End

  are_you_still_sad[
    shape="diamond",
    label="まだ不幸ですか?"
  ]
  are_you_still_sad -> rant[label="はい"];
  are_you_still_sad -> happy[label="いいえ"];

  rant[
    shape="box",
    label="あなたが直面している問題について建設的なブログ記事を書いてください。
    個人攻撃は控えましょう。礼儀正しさを忘れずに。
    コミュニティが解決方法を見つけ出すのを手助けしましょう。
    あなたのニーズによりよく合う別のフレームワーク (例えば Ember など) について検討しましょう。"
  ]
  rant -> happy

  happy[
    shape="box",
    label="React はあなたを幸せにしました!
    少なくともこれ以上あなたを不幸にしません。"
  ]
  happy -> share

  share [
    shape="box",
    style=rounded,
    label="このフローチャートをシェアしてください: http://bit.ly/react-makes-you-sad
    参考元: https://github.com/petehunt/react-howto"
  ]
}