今回から、テトリスを作っていきます。
最近30分で作るXXが話題になっていたので、興味が出た次第でした。
ただ自分ではそんなスピーディには作れないので、React・TypeScriptの勉強も兼ねつつじっくり作っていきます。
技術スタックは下記の通りです。
- TypeScript
- React
- SCSS
- Create React App
EditorConfig
ひとまずEditorConfigを導入します。
root = true [*] indent_style = space indent_size = 2 end_of_line = lf charset = utf-8 trim_trailing_whitespace = true insert_final_newline = true [Makefile] indent_style = tab [*.md] trim_trailing_whitespace = false
Create React App
Reactのプロジェクト作成方法はnext.js、viteなど複数あります。
私自身のReactの経験が浅いため、今回は王道のCRAを採用します。
TypeScriptベースで作成します。
npx create-react-app frontend --template typescript
Prettierの導入
コードの質を担保する仕組みとしてLinterやCIなど幾つかありますが、一旦Prettierだけ導入します。
Linterで検出するような記述ミスは動作確認でほぼ見つけられますが、細かいコード規約はどうしても自力で守り切るのが難しいためです。
スピード重視で他は省略します。
singleQuote: true
App.tsxのリセット
CRAでデフォルトで記述されているApp.tsx、App.cssをリセットします。
SCSSの導入
SCSSを導入しておきます。
npm i sass
Pull Request
- https://github.com/nek0meshi/tetris/pull/1
- https://github.com/nek0meshi/tetris/pull/2
- https://github.com/nek0meshi/tetris/pull/3
- https://github.com/nek0meshi/tetris/pull/4
あとがき
今回は事前準備を進めました。
次回から本格的に実装していきます。