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属性を追加してスクリーンリーダーに画面の開閉を伝えるように実装しました。
情報設計|おみくじ2023
GitHubでソースコードをみる

制作の流れ
Flow

制作の流れ|情報設計

要件定義

1日

制作の流れ|素材準備

素材作成

1日

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

制作の流れ|開発

実装

3日

コーディング

制作の流れ|テスト

テスト

0.5日

GitHub Pagesにデプロイ

制作の流れ|公開

公開

2023年1月1日

本番環境にデプロイ

おみくじであそぶ