サークル体験入部に向けたトライアル
最初に
WEB技術者は，基本的にググリ力（調べる力）があればなれる職業と思っといてください（今のところは）
なので，わからないことがあったら基本的にググるクセをつけましょう．
最強のサイト教えます
- https://google.com
-
https://chat.openai.com
これだけです．
これらがあれば基本的にエンジニアになれます．あとは，精神論になるけど，根気だけです．
目的
WEB技術の素晴らしさ，凄さを知ってもらいたいためトライアルを行おうと思いました．
具体的に以下のような素晴らしさがあると考えています．
- すぐに世界中に自分の作成したサービスを公開できる．
- WEBの基本的な技術を覚えるだけで，WEBのみならず，基盤の制御やソフトウェアの制作が可能になる．
目標
以下のようなクイズゲームの制作を行い，全世界へ公開をしよう．
実際に，友人や家族に問題を解いてもらおう．
手順
- リポジトリを作成しよう
- 画面を制作しよう．
- 動作を付け加えよう．
- 世界に公開しよう．
実践
リポジトリを作成しよう
右上のプラスボタンを押して，New repositoryを押す．
Repository nameにquiz_gameと入力し，Create repositoryボタンを押す．
以下のような画面になればOK！
SSHボタンを押して，画面右端のコピーボタンを押す．
GitBashを開き，以下のコマンドを実行する．
git clone {先程コピーしたSSH}
cd guiz_game
これで，リポジトリの作成は完了！
新入生用
Host github github.com
HostName github.com
IdentityFile ~/.ssh/id_git_rsa_github #ここに自分の鍵のファイル名
User git
画面を制作しよう
まず，ファイルを作成します．
以下の画像にある，ボタンを押してください．
入力可能なテキストボックスが現れるので，以下の画像のように"index.html"と打ち，Enterを押してください．
画面右側にエディターが表示されると思います．
そのエディターに以下のプログラムをコピペしてください．
<!DOCTYPE html>
<html lang="en">
<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">
<link rel="stylesheet" href="./index.css">
<script src="./index.js" defer></script>
<title>Quiz Game</title>
</head>
<body>
<main class="main">
<div class="answer-result-correct">
<div id="correct">
</div>
</div>
<div class="answer-result-incorrect">
<div id="incorrect">
</div>
</div>
<p id="quiz-index"></p>
<h1 id="question"></h1>
<div class="to-answer-wrapper">
<input type="text" placeholder="答えを入力" id="input-answer">
<input type="button" id="to-answer-button" value="答えを送信">
</div>
</main>
</body>
</html>
これらのコードを解説していきます．
HTMLとは
HTML（HyperText Markup Language）は，ウェブページを作成するための言語です．
HTMLを使うことで，ウェブブラウザがどのようにページを表示すべきかが理解できます．
HTMLを書くことは，レシピを書くことに似ています．
レシピには材料や手順が書かれており，それに従って料理が作られます．
同様に，HTMLにはウェブページの構成要素が書かれており，ブラウザがそれに従ってページを表示します．
タグとは
HTMLでは，タグと呼ばれる特殊な記号を使って，ウェブページの構造を定義します．
タグは，<と>で囲まれたキーワードで構成されています．例えば，<p>は段落を表すタグで，<h1>は大きな見出しを表すタグです．
タグは，箱に入れるプレゼントに似ています．
箱には，プレゼントの種類や大きさに応じて適切なものが選ばれます．
同様に，タグには，表示したい情報の種類や構造に応じて適切なものが選ばれます．
Headタグ
<head>タグは，ウェブページのメタデータ（ページの情報を記述するデータ）を含む部分です．<head>タグは，本の表紙や目次に似ています．
本の表紙には，本のタイトルや著者名が書かれており，目次には章や節の構成が示されています．同様に，<head>タグには，ページのタイトルや構成要素が記述されています．
Bodyタグ
Bodyタグは，HTML文書の主要なコンテンツを含む部分です．
これは，ウェブページに表示されるテキスト，画像，リンク，フォームなど，ユーザーが直接見ることができるすべての要素を含みます．
Bodyタグは，まるで本の中身のようなもので，表紙や目次（Headタグ）が整理された後に，読者が目にする物語や情報が詰まっています．
上記のコードでは，Bodyタグの中に以下の要素が含まれています．
mainタグ: このタグは，ページの主要なコンテンツを囲むために使用されます．この例では，クイズゲームの要素が含まれています．
divタグ: これらは，ページのセクションやグループを作成するために使用されます．この例では，正解と不正解の結果を表示するための2つのdivタグがあります．
pタグ: これは段落を表すタグで，テキストを表示するために使用されます．この例では，クイズのインデックスを表示するために使用されています．
h1タグ: これは見出しを表すタグで，ページのセクションやトピックを示すために使用されます．この例では，質問を表示するために使用されています．
inputタグ: これはフォーム要素で，ユーザーがデータを入力できるようにするために使用されます．この例では，答えを入力するテキストボックスと，答えを送信するボタンがあります．
これらの要素が組み合わさって，クイズゲームのウェブページが構成されています．
CSSとは
CSSは，「Cascading Style Sheets」の略であり，Webページのデザインやレイアウトを定義するためのスタイルシート言語です．
CSSを使用すると，Webページのテキスト，色，レイアウト，背景，フォントなどのスタイルを定義することができます．これにより，Webページの見栄えを向上させ，ユーザーにより魅力的な体験を提供することができます．
HTML作成時と同様の手順で，index.cssというファイルを作成してください.
エディターに以下のプログラムをコピペしてください．
body {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 95vh;
margin: 0;
}
p,
h1 {
margin: 0;
line-height: 1.75;
}
.main {
display: flex;
flex-direction: column;
gap: 2rem;
}
.answer-result-correct,
.answer-result-incorrect {
align-items: center;
justify-content: center;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(51, 51, 51, .5);
display: none;
}
.display-answer-result {
display: flex;
}
#correct {
text-align: center;
width: 50rem;
height: 50rem;
border-radius: 50%;
border: solid 2rem red;
background-color: transparent;
}
#incorrect {
display: block;
position: relative;
width: 50rem;
height: 50rem;
}
#incorrect::before, #incorrect::after { /* 共通設定 */
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 2rem; /* 棒の幅（太さ） */
height: 100%; /* 棒の高さ */
background: #3333ff;
}
#incorrect::before {
transform: translate(-50%,-50%) rotate(45deg);
}
#incorrect::after {
transform: translate(-50%,-50%) rotate(-45deg);
}
#quiz-index {
font-size: 2rem;
font-weight: normal;
color: #333;
margin: 0;
}
#question {
color: #333;
font-size: 4rem;
font-weight: normal;
}
#input-answer {
padding: 1rem;
font-size: 1.2rem;
width: 100%;
box-sizing: border-box;
}
#to-answer-button {
border: 0;
background-color: #333;
color: #fff;
font-weight: bold;
padding: 1rem 4rem;
border-radius: 5rem;
transition: .3s;
}
#to-answer-button:hover {
cursor: pointer;
background-color: #777;
}
.to-answer-wrapper {
display: flex;
flex-direction: column;
gap: 1rem;
}
動作を付け加えよう
HTML作成時と同様の手順で，index.jsというファイルを作成してください.
エディターに以下のプログラムをコピペしてください．
const quizList = [
{
question: '日本の首都はどこですか？',
answer: '東京',
},
{
question: 'アメリカの大統領は誰ですか？',
answer: 'ジョー・バイデン',
},
{
question: '1+1は何ですか？',
answer: '2',
},
{
question: '日本語で「ありがとう」とは何ですか？',
answer: '感謝の気持ちを表す言葉',
},
{
question: '「おはようございます」は何時から使えますか？',
answer: '朝',
},
{
question: '世界最大の熱帯雨林はどこですか？',
answer: 'アマゾン',
},
{
question: '日本で最も高い山は何ですか？',
answer: '富士山',
},
{
question: 'ビートルズのボーカルは誰ですか？',
answer: 'ジョン・レノン',
},
{
question: '日本の現在の天皇は誰ですか？',
answer: '徳仁',
},
{
question: '世界で最も人口が多い国はどこですか？',
answer: '中国',
},
];
let currentQuizIndex = 0;
const answerResultCorrectElement = document.querySelector('.answer-result-correct');
const answerResultIncorrectElement = document.querySelector('.answer-result-incorrect');
const quizIndexElement = document.querySelector('#quiz-index');
const questionElement = document.querySelector('#question');
const inputAnswerElement = document.querySelector('#input-answer');
const toAnswerButtonElement = document.querySelector('#to-answer-button');
const displayQuestion = () => {
questionElement.textContent = quizList[currentQuizIndex].question;
quizIndexElement.textContent = currentQuizIndex + 1 + '問目';
}
const displayAnswerResult = () => {
if (inputAnswerElement.value === quizList[currentQuizIndex].answer) {
answerResultCorrectElement.classList.add('display-answer-result');
} else {
answerResultIncorrectElement.classList.add('display-answer-result');
}
setTimeout(() => {
currentQuizIndex++;
resetFormValues();
resetDisplayAnswerResult();
displayQuestion();
}, 3000);
}
const resetFormValues = () => {
quizIndexElement.textContent = '';
questionElement.textContent = '';
inputAnswerElement.value = '';
}
const resetDisplayAnswerResult = () => {
answerResultCorrectElement.classList.remove('display-answer-result');
answerResultIncorrectElement.classList.remove('display-answer-result');
}
toAnswerButtonElement.addEventListener('click', displayAnswerResult);
displayQuestion();
JavaScriptとは
JavaScriptは，ウェブページに動的な要素やインタラクティブ性を追加するためのプログラミング言語です．
例えば，ボタンをクリックしたときにアクションが起こるようにしたり，入力フォームに入力されたデータを処理したりすることができます．
変数とは
変数は，データを一時的に保持するための箱のようなものです．
例えば，あなたが買い物をしているときに，買ったものを入れるカゴのようなものです．変数には名前が付けられ，その名前を使ってデータにアクセスできます．
配列とは
配列は，複数のデータをまとめて保持するための構造です．
例えば，あなたが本棚に本を並べるように，配列にはデータが順番に並べられています．配列の各データにはインデックスと呼ばれる番号が付けられ，その番号を使ってデータにアクセスできます．
関数とは
関数は，特定のタスクを実行するためのコードのまとまりです．
例えば，あなたが料理をするときにレシピに従って手順を実行するように，関数には手順が記述されています．関数は，必要なときに呼び出すことができ，何度でも使い回すことができます．
IF文とは
IF文は，条件に応じて処理を分岐させるための構文です．
例えば，あなたが外出するときに，雨が降っているかどうかで傘を持っていくかを決めるように，IF文は条件が真（true）のときに特定の処理を実行し，偽（false）のときには別の処理を実行します．
条件式とは
const one = 1;
one >= 1 // true
one > 1 // false
one < 1 // false
one <= 1 // true
one === "1" // false
one !== "1" // false
one === 1 // true
one !== 1 // false
one == "1" // true
one != "1" // false
one == 1 // true
one != 1 // false
自分のオリジナル問題を作ろう
このプログラムでは，quizListという配列に問題と答えが格納されています．
自分だけのオリジナル問題を作成して，配列に追加してみましょう．
新しい問題を追加することで，あなたの知識や興味を共有することができます．
世界に公開しよう
リポジトリにpushしよう
以下のコマンドをGitBashを用いて，打とう．
git add .
git commit -m "クイズ実装完了！"
git push origin main
コマンドを打ち終わると，一番最初に作成したリポジトリにファイルがアップロードされていることがわかります．
GithubPagesを使用して公開しよう
リポジトリにあるファイルを公開するために，Settingsのタブを開きましょう．
その後，左メニューからPagesを選択．以下の画面になっていればおっけい！
BranchをNoneからmainに変更してsaveボタンをおしてください．
5分ほど待ってから，ページを開くとURLが表示されているため，それを開いてください．
すると実際に，ネット上で見れていることがわかるかと思います！
Discussion