Web site

おみくじ2023

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属性を追加してスクリーンリーダーに画面の開閉を伝えるように実装しました。

GitHubでソースコードをみる

制作の流れ

Flow

要件定義

1日

素材作成

1日

GIFアニメ・おみくじイラストの作成

実装

3日

コーディング

テスト

0.5日

GitHub Pagesにデプロイ

公開

2023年1月1日

本番環境にデプロイ

おみくじであそぶ