はじめに
煽りみたいなタイトルですみません。
Web ダンジョンというサイトを作りました。
階段を降りて行き、各階層にある答えを見つける、といった腕試しサイトです。
昔、隠しリンクを見つけて進んでいくようなサイトが流行ったよな〜と懐かしみながら作りました。
ちなみに階によっては開発者ツールを使ってもらう前提になっています。
駆け出しエンジニアの方や、これからエンジニアを目指すような人に、ちょっとした開発者ツールの使い方みたいなものを知ってもらえたらな、と思っています。
ベテランの方は暇潰しがてら遊んでみてください。
技術スタック
フロントエンドのみのシンプルな SPA です。
バックエンドはありません。
言語
パッケージ管理
-
pnpm
- ライブラリ追加もビルドも全体的に速い気がする
- npm, yarn が代替案として挙げられますが、使用感が一番良かった pnpm にしました
バンドラ
フレームワーク
-
React
- Solid も考えましたがとりあえず React
ルーター
-
TanStack Router
- 最初は React Router を使っていたのですが、TanStack Router に変えたところ gzip 化後のサイズが 5kB 減ったので移行しました
linter + formatter
-
Biome
- 速い
- eslint と prettier を別々に設定したりとか面倒な作業がない
-
check --writeでコードを直してもらうのが楽
css
-
tailwind
- 楽
デプロイ先
- CloudFlare Pages
- 日本にエッジがある
- github リポジトリを指定して、ビルドコマンドを設定すればデプロイできる
- CloudFlare でドメインを取っているので、サブドメインで簡単にデプロイできました
開発
同様の構成で開発できる手順をまとめておきます。
Vite プロジェクト作成
- プロジェクト作成
pnpm create vite
? Select a framework:
❯ React
? Select a variant:
❯ TypeScript
- パッケージインストール
pnpm install
- 開発サーバー立ち上げ
pnpm run dev
biome 導入
- インストール
pnpm add --save-dev --save-exact @biomejs/biome
- 設定ファイル作成
pnpm biome init
このコマンドで設定ファイル(biome.json)が生成されます。
ちなみに私は不要なセミコロンを極力省きたいので、以下のように設定を変更しています。
{
"$schema": "https://biomejs.dev/schemas/1.8.3/schema.json",
"organizeImports": {
"enabled": true
},
"linter": {
"enabled": true,
"rules": {
"recommended": true,
"a11y": {
"useKeyWithClickEvents": "off"
}
}
- }
+ },
+ "javascript": {
+ "formatter": {
+ "semicolons": "asNeeded"
+ }
+ }
}
tailwind 導入
- インストール
pnpm install -D tailwindcss postcss autoprefixer
- 設定ファイル作成
pnpx tailwindcss init -p
tailwind.config.js と postcss.config.js が生成されます。
tailwind.config.js は下記のように追記します。
/** @type {import('tailwindcss').Config} */
export default {
+ content: [
+ "./index.html",
+ "./src/**/*.{js,ts,jsx,tsx}",
+ ],
theme: {
extend: {},
},
plugins: [],
}
-
index.cssの修正
@tailwind base;
@tailwind components;
@tailwind utilities;
TanStack Router 導入
pnpm add @tanstack/react-router
以上の設定で開発環境が整います。
答え合わせのロジックについて
答えを js に書いておくと、js ファイルを覗けば答えがわかってしまいます。
今回はバックエンドを用意していないので、バックエンド側に答えを隠しておいて答え合わせをする、という手段も取れません。
暗号化やハッシュ化した答えを js コードに埋め込んでおいて付き合わせるという方法も取れますが、今回はフロント側で答えを動的に生成するようにしました。
React コンポーネント生成のタイミングで答えも生成されるようになっています。
この方法にしたことで、答えを誰かと共有することができないようになりました。
ちなみに答えの作成方法ですが、二つの単語を _ で区切ってくっつけて、総当たり対策のためにランダムで大文字と小文字を含めるようにしています。
BlAcK_SpideR みたいな感じ。
終わりに
是非チャレンジしてみてください！！
余談
個人開発にありがちだと思いたい超絶綺麗なコミット履歴
5c069e0 update
6deec1f update
89f267a update
fd8ff6f update
6c2b180 update
97c2caf update
ed751a6 update
1798d2f update
7002819 update
fdbb774 update
3435c3a update
2d7c9ce update
5c119e8 update
cb5eb44 update
adfeb5e update
8e48a88 update
eb41a5e update
15fa18f update
37f0623 update
9f8bc3f update
余談2
ChatGPTに、駆け出しと中堅とシニアのエンジニアを演じてもらってコメントを言わせてみた。
駆け出しエンジニアとしての感想
「このWebダンジョン、すごく面白そうです！ReactやTypeScriptを使っているので、今勉強している技術にぴったり。開発者ツールを使う前提の仕掛けも、デバッグの練習になりそうで、良い勉強になりそうです。駆け出しエンジニアでも楽しめるコンテンツだと思います！技術を学びながら遊べるって、いいですね。自分も挑戦してみたいです！」
中堅エンジニアとしての感想
「このWebダンジョンのコンセプト、懐かしさと新しさが共存していて面白いです。技術スタックもpnpmやTanStack Routerの選定理由がしっかりしていて好印象です。特にgzip化後のサイズ削減を考えてReact Routerからの移行は賢いですね。シンプルなSPA構成ですが、将来的なスケーラビリティも気になります。駆け出しにも、ベテランにも楽しめる良いプロジェクトです。」
シニアエンジニアとしての感想
「Webダンジョン、非常に興味深いですね。技術スタックはモダンかつ効率的で、pnpmやViteの選択は賢明だと思います。開発者ツールを使う設計も、新人エンジニアにとって実践的な学びを提供できる点が素晴らしい。ただ、将来のスケーラビリティやメンテナンス性も視野に入れて、どう発展させていくかがポイントでしょう。今後の展開も期待しています。」
すごい