クイズゲームのアプリケーションの作成①

クイズゲームのアプリケーションの作成について

こちらが今回作る完成形のクイズアプリです。　　　　

それでは早速、少しずつ作っていきましょう!

今回もターミナルのコマンドプロンプトから作業を行いました。

尚、npmやNode.jsについてはこちらで説明してますので参考にしてみてください。

mkdir quiz // フォルダの作成
cd // quizフォルダへの移動 change directory
npm init // パッケージ管理の準備

quizフォルダが作成され、その中にpackage.jsonが作られました。

そしてその中に「QuizGame.html」「quiz.js」「quiz.json」ファイルを作成。

現時点でのそれぞれのファイルのコードは以下のようになっています。

QuizGame.html <!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>クイズゲーム</title>
</head>
<body>
<div id=”app”>
</div>
<script src=”quiz.js”>
</script>
</body>
</html>

quiz.js class quiz {
constructor(){
console.log(‘インスタンスの作成確認です’)
}
}
new quiz();

クラスを作成し、インスタンスが生成されたタイミングでコンソールにメッセージが出力されるか確認します。

今回のアプリケーションはAJAXを利用するものなので、以前こちら学んだターミナルからのhttp-serverを使って起動し確認してみます。

しっかりコンソールに出力されていますね。

クイズデータの取得確認

jsonファイルには次のようにクイズデータを作成しました。

quiz.json {
“難易度１”:{
“step1”:{“word”:”日本の首都は？”,”choices”:[“東京”,”大阪”,”福岡”],”answer”:”東京”},
“step2”:{“word”:”日本に原爆が最初に落とされた都市は？”,”choices”:[“東京”,”広島”,”長崎”],”answer”:”広島”},
“step3”:{“word”:”管首相の後の首相は？”,”choices”:[“安倍”,”管”,”岸田”],”answer”:”岸田”}
},
“難易度2”:{
“step1”:{“word”:”日本の伝統食は？”,”choices”:[“ハンバーガー”,”寿司”,”ラーメン”],”answer”:”寿司”},
“step2”:{“word”:”金閣寺がある県は？”,”choices”:[“奈良”,”東京”,”京都”],”answer”:”京都”},
“step3”:{“word”:”日本で一番高い山は？”,”choices”:[“富士山”,”浅間山”,”八ヶ岳”],”answer”:”富士山”}
},
“難易度3”:{
“step1”:{“word”:”お好み焼きで有名な都市は？”,”choices”:[“東京”,”大阪”,”福岡”],”answer”:”大阪”},
“step2”:{“word”:”日本で一番高い電波塔は？”,”choices”:[“東京タワー”,”大阪タワー”,”東京スカイツリー”],”answer”:”東京スカイツリー”},
“step3”:{“word”:”東京ディズニーランドがある県は？”,”choices”:[“東京”,”千葉県”,”静岡県”],”answer”:”千葉県”}
}
}

quiz.js class quiz {
async init(){
const response = await fetch(‘quiz.json’);
this.quizData = await response.json();
console.log(this.quizData)
}
}
new quiz().init();

次に実際にquiz.jsonをAJAXで取得できているか、ターミナルからのhttp-serverを使って出力しコンソールで確認してみましょう。

それでは改めて、「ブラウザ以外でのJavaScriptの実行」をしていきましょう。

ターミナルから「http-server」コマンドを実行

そうすると以下のようにサーバーアプリケーションの情報がターミナルに表示されます。

この表示されているどちらかの情報のURLをブラウザのアドレスバーにコピペしてみましょう。そしてquizフォルダからQuizGame.htmlファイルを選択します。

コンソールよりquiz.jsonのデータが取得できていることが確認できましたね。

お疲れ様でした。今回はここまでにしましょう。ゆっくりマイペースで継続しましょう。

この本から引用、参考にして学び、完成させることができました。しかし、ここではプログラミング初心者の私が詳しく解説することは、おこがましく、難しく出来ません（ToT）
その点、この本では丁寧な解説が載っていますので、解説とともにコードを書き、完成させればより深く学ぶことができます(^.^)、実際、初心者の私でもわかりやすかったです。身に付け消えないスキルが3,000円弱ならコスパよく、買っておいてよかったと満足してます。

レベルアップにプロからの学びを。

オンラインで受講ができるスクールですので、全国どこからでも。

クイズデータの取得確認

レベルアップにプロからの学びを。

就職・転職支援