HTML/CSS/javascriptを使用して、簡単な三目並べ(〇×ゲーム)を作成します。
HTMLやCSSについては、基本的な要素と頻出の装飾に触れ、javascriptについては基本的な文法に触れつつ、jQueryというライブラリを利用します。
また、開発するOSは依存しません。ブラウザが立ち上がれば、任意のOSで構いません。
jQueryはjavascriptのライブラリで、利用することでコード量を削減し、可読性を向上することができます。
ライブラリ利用には、jquery.min.jsファイルのパスを、script要素のsrc属性に指定する必要があります。ファイルの配置場所は、WEBサーバ上でもローカルでも構いません。
ここで、同一処理におけるコード量を比較してみます。例えば、以下のようなHTMLがあると仮定します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>〇×ゲーム</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div id="game_title">
<h1>〇×ゲーム</h1>
</div>
</body>
</html>
body要素の中の、h1要素のテキスト「〇×ゲーム」という文字列を取得する場合、それぞれ以下のように記載できます。
// raw javascript
document.getElementById('game_title').children[1].innerHTML
// jQuery
$('#game_title').children[1].html()
ご覧いただいたとおり、同一の操作を行なう場合も、コード数を削減することができます。
先頭の $ を付与する、セレクタで要素を指定することで、jQueryの関数を利用できます。
本AcademyではHTMLやCSSをjQueryで操作する場面がたくさんありますので、使いながら感覚を掴んでいっていただけますと幸いです。