起動からホーム画面が表示されるまでの処理を見てみよう
※ネタバレの可能性もあるサンプルプログラム解説記事なので、まず「ヤンデレル ～記憶喪失からはじまる脱出ゲーム～」総合案内を読んでからこの記事を読んでください。
サンプルプログラムが起動してホーム画面が表示されるまでのプログラムの流れを見てみましょう。
大まかな起動からホーム画面が表示されるまでの処理イメージを掴んでもらうことを目的としており、プログラミングについては詳しく解説しません。
わからないことがあっても気にせず、気軽に読んでもらえればと思います。
なおサンプルコード（index.html）は画面構造・デザイン・プログラム処理（HTML/CSS/JavaScript）をまとめています。
HTML（*.html）・CSS（*.css）・JavaScript（*.js）は別ファイルに分けるほうが良いのですが、1つのファイルだけで完結する方がプログラムの全体像が掴みやすいかなと今回はあえてまとめました（画像と効果音は含めることができないため別フォルダ・ファイルとなっています）。
プログラムの本体であるJavaScript部分はこのindex.htmlファイルの後半に書いており、全体の半分ほどです。
そもそもサンプルコードにはコメントを多めに書いており、処理部分よりコメントの方が多い箇所も少なくありません。
また、このサンプルプログラムで採用しているReactライブラリでは、HTMLをプログラム内に書くことが多いので、実プログラミング量は見た目よりはずっと少ないとは思います。
ホーム画面表示までの処理内容
起動からホーム画面が表示されるまでの処理の流れは次のようになります。
- セーブデータのチェック・ロード
- 画面の初期化（共通のメニューやフッターのコピーライト表示など）
- ホーム画面の表示
プログラム部分のほぼ100％が値設定（定数宣言）や関数（呼ばれたらその処理が実行される）をひたすら書いているだけです。
これらはそれらの関数などが呼ばれるまでは実行されません。
サンプルコードでは最後に「Dispatcher.factory();」とその中の1つの関数を実行しているだけです。
サンプルプログラムが起動される時にこの関数が自動的に実行され、上記3つの処理が実行されることでホーム画面が表示されます。
Dispatcher.factory();
この「Dispatcher.factory();」では、ただDispatcherクラスのfactory関数を実行しているだけです。factory関数は次のような処理を行います。
この関数は3行で構成されており、1行目では定数dispatcherにDispatcherクラスのインスタンス（「new Dispatcher()」でインスタンスを生成しています）を入れています。
これにより、この関数内では定数dispatcherでDispatcherクラスのインスタンスを使えるようになります。
といっても、2行目で「dispatcher.init();」Dispatcherインスタンスのinit関数を実行しているだけです。
3行目は定数dispatcherをこのfactory関数の実行元に返しているだけです。
例えばサンプルコードを「const dspt = Dispatcher.factory();」などのように変更すれば、受け取ったDispatcherインスタンスが持つ関数を呼ぶことができます（受取る時は定数でも変数でも大丈夫ですし、「dspt」など任意の名前にもできます）。
ちなみに1行目のDispatcherクラスのインスタンスを生成する際に、Dispatcherクラスのコンストラクタが実行され（サンプルコード（c470321） 2411～2459行 ）、サンプルコードでは言語コードやミュート設定などの設定を行っています。
これはプログラムの仕様（決まり事）で、クラスインスタンスの生成時にコンストラクタが実行されます。
結局、このfactory関数内ではセーブデータのロード処理関数や画面表示処理関数すら直接実行していませんでした。
次は2行目のinit関数の処理を見てみましょう。
init関数
init関数では初期処理を行っており、ここでセーブデータのロード処理関数や画面表示処理関数を実行しています。
サンプルプログラムでは初期処理は1回のみ実行という仕様にしているため、1行目と2行目では初期処理が実行済みかどうかをチェックし、未実行であれば実行済みとフラグを設定しています。
3行目以降に実行している、セーブデータのチェック・ロード関数や画面表示処理関数内では具体的なプログラミング処理となっているため、解説などは割愛します。
参考までに、セーブデータのチェック・ロード関数内では、セーブデータが取得できた場合はそのセーブデータを取り込む処理を行っています。
そして画面表示処理関数内では、画面共通のメニューやフッターのコピーライト表示などを初期化し、最後にホーム画面表示関数を実行しています。
