開発ガイドラインとGetting started

TypeScript/Node

内向きに開発ガイドラインとGetting Startedを兼ねたようなものを書こうとしたが、目次だけ書き出したけどこれでも環境作るところだけ、この後にコーディング編とテスト編とリポジトリ＆CI＆デプロイ編があって、そもそもコーディング編にはSPA章とサーバレス章と自前WEBサーバを含むローカルツール章があり、さらにSPA章には画面出すところまでとFluxとコンポーネントとルーターとAPI通信とイベントハンドリングがあり、フォーム＆バリデーションやi18nやレスポンシブがある。。。さらに続く。 いつか暇になって、かつ書いたら効果が高い時にもっと目次も練って書こうと思う。おそらくそんな時は来ないだろうとも思いつつ。

  • node環境構築
    • brewインストール
    • nインストール: brewによる
    • nodeインストール: nによる
    • yarnインストール: brewにより--without-nodeスイッチ付き
  • プロジェクトの作成
    • 空フォルダにpackage.jsonを作る
    • ソースフォルダと出力先フォルダを決める
    • もしくはcliツールの利用: create-react-app、vue-cli、serverlessなど
  • package.jsonの基本的な書き方
    • プロジェクト設定: version、private、license
    • yarn addおよび-Dスイッチ付き
  • トランスパイルとリントの設定
    • yarn add typescript tslint tslint-config-airbnb -D
    • tsconfig.jsonの書き方
      • compilerOptions.target
      • compilerOptions.module
      • compilerOptions.outDir： 出力先フォルダ
      • compilerOptions.strict
      • compilerOptions.libおよびcompilerOptions.typesの意味
      • include: ソースフォルダ
      • exclude
      • compilerOptions.baseUrlとcompilerOptions.pathsの意味
    • tslint.jsonの書き方
      • extends: [tslint-config-airbnb]
      • rulesの意味
      • おまけ：ソースインラインでリント設定を抑制する方法
  • （SPAであれば）バンドラーの設定
    • cliでプロジェクトを作った場合
      • create-react-appの場合
      • vue-cliの場合
    • yarn add webpack webpack-dev-server awesome-typescript-loader tslint-loader -D
    • ルールの書き方
    • DevServerの設定
  • (SPAであれば) WEBブラウザ設定
  • テストツールの設定
    • yarn add jest ts-jest @types/jest @types/node -D
    • package.jsonにjest追加
      • moduleFileExtensions
      • testMatch
      • transform
  • package.jsonでのscriptsの書き方
    • node実行
    • ライブラリのbin
      • tsc
      • jest
      • webpack
    • シェルコマンド
    • rimrafなどの定番ツール
    • 自作JS
  • 環境の維持
    • brewでのupgradeとcleanup
    • nでのアップデートと旧版への切り替えおよび削除
    • yarn upgradeとyarn remove

考察

しかし考えるに、チェック項目として目次だけ書くのも有用かもしれない。その点で目次ツリーの大きさを抑制するためには以下の分岐をまず決める事なんだろう。

  • プラットフォーム：node（python、go）
  • node -> 言語：TypeScript（node、Babel）
  • TypeScript -> 対象：SPA（サーバレス、ローカル）
  • SPA -> フロントエンド：Vue（React、Angular）

でTypeScriptまで決めておけば先の目次みたいな感じになりますな。