三目並べ – 0.導入

Home Academy 三目並べ – 0.導入

本アカデミー（三目並べ）について

HTML/CSS/javascriptを使用して、簡単な三目並べ（〇×ゲーム）を作成します。

HTMLやCSSについては、基本的な要素と頻出の装飾に触れ、javascriptについては基本的な文法に触れつつ、jQueryというライブラリを利用します。

また、開発するOSは依存しません。ブラウザが立ち上がれば、任意のOSで構いません。

jQueryについて

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で操作する場面がたくさんありますので、使いながら感覚を掴んでいっていただけますと幸いです。

三目並べ – 0.導入

本アカデミー（三目並べ）について

jQueryについて

採用情報

Avinton SDGs

Search

三目並べ – 0.導入

本アカデミー（三目並べ）について

jQueryについて

採用情報

Avinton SDGs

Search

タグ