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