JavaScript、GitHub、webpackを使ったサイト構築の学習を目的におみくじゲームを作成しました。
- Client
- 自主制作 サイトをみる
- Role
-
- ヒアリング
- 要件定義
- 情報設計
- デザイン
- コーディング
- CMS実装
- テスト
- 公開作業
- 運用
- Development
-
- 言語:
- HTML / CSS / Sass / JavaScript
- 環境:
- Node.js / npm / webpack
- ツール:
- GitHub / VScode / Photoshop
- Term
- 約1週間
- Release
- 2023年1月
Background
目的
フロントエンドエンジニアを目指すにあたり「JavaScriptを書ける」から「JavaScriptで開発できる」人材を目指す。
- ES2015以降のJavaScriptの理解と実践
→ 機能ごとのモジュール化とファイル分割の理解
→ class構文、Promiseの理解 - webpackを使用した開発の理解と実践
→ webpackの機能とカスタマイズ方法の理解と開発環境の構築 - GitHubを活用した開発とソースコード管理の理解と実践
→ 基本の用語と操作の理解
→ GitHub Actionsとデプロイの理解
Result
小規模なコンテンツ制作を通して目的にあげた開発技術の基本を理解・実践するとともに、見る人が楽しめるコンテンツを意識しておみくじゲームを作成しました。
制作のポイント
- おみくじゲームの操作と結果の表示切り替えは、JavaScriptでクラスの有無とCSSで表示/非表示を制御しました。
- おみくじの結果がセットされてからモーダル画面を段階的に表示するために、Promiseを使って同期処理を実装しました。
- おみくじの占い中と結果表示中に背景(ホーム画面)が動かないように固定しました。
- 結果が表示されていない時は、モーダル画面にvisiblity: hidden;を指定し、モーダル内のボタンにフォーカスが当たらないように実装しました。
- おみくじの結果をモーダル画面で表示する際に、WAI-ARIA属性を追加してスクリーンリーダーに画面の開閉を伝えるように実装しました。

Flow
要件定義
1日
素材作成
1日
GIFアニメ・おみくじイラストの作成
実装
3日
コーディング
テスト
0.5日
GitHub Pagesにデプロイ
公開
2023年1月1日
本番環境にデプロイ