スマレジエンジニアyushiのブログ

スマレジエンジニアのブログ

【テトリス #1】テトリスを作りたい

今回から、テトリスを作っていきます。

最近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

あとがき

今回は事前準備を進めました。

次回から本格的に実装していきます。