構成

• UIの実装：React.js + TypeScript ( https://reactjs.org/ )
  • 関数型コンポーネント + React-Hooks
• スタイリング：Styled-Components ( https://styled-components.com/ )
• バンドルツール：Webpack ( https://webpack.js.org/ )
• Linting：ESLint ( https://eslint.org/ )
• フォーマット： Prettier ( https://prettier.io/ )

環境のセットアップ

開発環境

エディタ

VSCode (他のエディタが好みの人もいるかもしれませんが、今回はVSCodeで統一してください)

拡張機能

• 必須のもの
  • ESLint
  • Prettier
• 入れると便利なもの
  • ES7 React/Redux/GraphQL/React-Native snippets
  • vscode-styled-components
  • Path Intellisense
  • GitLens
  • Git Graph
  • Bracket Pair Colorizer
  • Auto Rename Tag
  • Auto Close Tag

プロジェクトのセットアップ

node.js, npm は各自インストールしてください。

yarn -v 

でyarnが無い場合は、

npm install -g yarn

でyarnをインストールしてください。

本リポジトリをクローンしたら、

yarn install # 必要パッケージのインストール

yarn start # localhost:3000にアプリが立ち上がる

開発上の注意

パッケージ回り

• 新しくパッケージをインストールする際は、必ず yarn add を用いること (npm install はダメ)

命名規則

• 命名は、基本的に CamelCase を用いること。snake_case は使わない
• コンポーネント名・型名は、大文字スタート、関数名・変数名は小文字スタート
• 自明な prefix, suffix は避ける (例えば、型名に ○○Type は不要)
• booleanの変数は is○○ にするなど、変数名や関数名をみて役割が分かるようにする