TechAcademy（テックアカデミー） フロントエンドコース プログラミング JavaScript JavaScriptでHTMLの要素を取得する方法を現役エンジニアが解説【初心者向け】
オーダーメイドコース
icon
icon
JavaScript

JavaScriptでHTMLの要素を取得する方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptでHTMLの要素を取得する方法について解説しています。document.getElementById、document.getElementsByName、document.getElementsByClassNameとquerySelectorそれぞれの機能と使い方の例を見ていきましょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査

JavaScriptでHTMLの要素を取得する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね！

大石ゆかり

どういう内容でしょうか？

田島悠介

JavaScriptでHTMLの要素を取得する方法について詳しく説明していくね！

大石ゆかり

お願いします！

 

HTMLの要素とは

HTMLの要素とは、タグで囲まれた１単位を指し示します。例えば、以下のコードはHTMLの１要素です。

<input type="text" name="tbox1" id="sampleTbox" class="font-tbox">

このinput要素により、テキストボックスを表示することができます。

 

JavaScriptでHTMLの要素を取得する方法

JavaScriptからHTMLの部品を操作するためには、まずHTMLから要素を探し出して部品情報を取得する必要があります。その際のキーとなるのが、HTMLの各要素が持つidやname属性の値、要素に付与されたclass名です。

これからご紹介するJavaScriptの特定メソッドの実行により、HTML上からキー値を検索して、HTMLの要素情報を取得することができます。

 

[PR] コーディングで副業する方法とは

document.getElementByIdとは

HTML要素が持つid値をキーとして、HTML要素を取得することができます。

書式

document.getElementById("id値");

テキストボックス内のテキストを取得する例

document.getElementById("sampleTbox").value;

 

document.getElementsByNameとは

HTML要素が持つname属性の値をキーとして、HTML要素を複数取得します。「Elements」と複数形でメソッド名を記載する点に気を付けてください。

書式

document.getElementsByName("name属性の値");

テキストボックス内のテキストを取得する例

document.getElementsByName("tbox1")[0].value;

複数取得した要素は配列に格納された状態で取得されるため、最初の1つを指定するために [0] を付与しています。

 

document.getElementsByClassNameとは

HTML要素が持つclass属性の値をキーとして、HTML要素を複数取得します。「Elements」と複数形でメソッド名を記載する点に気を付けてください。

書式

document.getElementsByClassName("class名");

テキストボックス内のテキストを取得する例

document.getElementsByClassName("font-tbox")[0].value;

複数取得した要素は配列に格納された状態で取得されるため、最初の1つを指定するために [0] を付与しています。

 

querySelectorとは

こちらはCSSのクラス定義時に指定するセレクタ記法を用いてHTML要素を一つだけ取得するためのメソッドです。jQueryをご存知の方は、jQueryと同じキー値の指定方式と考えてください。

書式

document.querySelector("CSSセレクタ記法による要素指定");

テキストボックス内のテキストを取得する例

// idをキーにして取得する場合
document.querySelector("#sampleTbox").value;
// class名をキーにして取得する場合
document.querySelector(".font-tbox").value;

このメソッドは複数候補が見つかった場合、最初の1つだけ取得します。

 

まとめ

javascriptから、いろいろな手段でHTML要素を取得できることがわかりました。HTMLコードが持つキー文字列に応じて使うメソッドも異なりますので、それぞれの特性を理解して使いこなしましょう。

 

監修してくれたメンター

寺谷文宏

WEBアプリケーションエンジニアとして数多くのプロジェクトを経験し、フロントエンドからサーバーサイドまで総合的な開発を得意としています。

TechAchademyではフロントエンド、Javaコースを担当。

 

大石ゆかり

内容分かりやすくて良かったです！

田島悠介

ゆかりちゃんも分からないことがあったら質問してね！

大石ゆかり

分かりました。ありがとうございます！

TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。

記事を検索

関連するキーワード

関連する記事

JavaScriptでPOST送信する方法を現役エンジニアが解説【初心者向け】

JavaScriptでPOST送信する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 Java...
JavaScript

JavaScriptのswitch文で正規表現を使う方法を現役エンジニアが解説【初心者向け】

JavaScriptのswitch文で正規表現を使う方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します...
JavaScript

JavaScriptからPHPを呼び出す方法を現役エンジニアが解説【初心者向け】

JavaScriptからPHPを呼び出す方法について解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。 また、入門向けのJa...
JavaScript

JavaScriptでfor文を使ってループ処理する方法【初心者向け】｜現役エンジニアが解説

JavaScriptについてプログラミング初心者向けに紹介した記事です。今回は、JavaScriptでfor文を使ってループ処理する方法について解説します。 ...
JavaScript

Webデザインに使えるJavaScriptのライブラリについて現役エンジニアが解説【初心者向け】

Webデザインに使えるJavaScriptのライブラリについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。...
JavaScript

JavaScriptで多次元配列をソートする方法を現役エンジニアが解説【初心者向け】

JavaScriptで多次元配列をソートする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。 ...
JavaScript

あわせてよく読まれている記事

JavaScriptでDOMを操作する方法【初心者向け】

今回は、JavaScriptでDOMを操作する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。   本記事では、テキストエディタのmiを使っていますが、JavaScriptの場合はWebブラウザとテキストエディタがあれば特別な開発環境がなくても開発できます。 目次HTMLの要素とはJavaScriptでHTMLの要素を取得する方法document.getElementByIdとはdocument.getElementsByNameとはdocument.getElementsByClassNameとはquerySelectorとはまとめ監修してくれたメンター そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   今回の記事の内容は動画でもご覧いただけます。 テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。 （動画は2つに分かれています） テキストと動画で、解説に少し違う部分があります。 テキストは、JavaScriptの「ES6(ES2015)」というバージョンに基づいて解説しています。 動画は、その1つ前の「ES5」というバージョンに基づいて解説しています。   DOMとは JavaScriptでは、表示されたWebサイトを動的に書き換えることができるというのが大きな特徴です。 そして、その特徴を支えているのがDOM（Document Object Model）です。   大石ゆかり 田島メンター！DOMというのは何でしょうか？ 田島悠介 簡単に言うと、HTMLのタグなどにアクセスして、CSSを追加したり、あるいはタグを追加したり・削除したりする仕組みのことなんだ。 大石ゆかり HTMLをJavaScriptで操作できるってことですか？ 田島悠介 その通り！実際にDOMがどんなものなのか詳しく解説していくね。   Windowオブジェクト DOMを理解するには、まずWindowオブジェクトを知る必要があります。 Windowオブジェクトは、ブラウザが持っている情報をそのまま持っています。 ブラウザのコンソールに以下のように記述すると、Windowオブジェクトの中身が見られます。 console.log(window); Windowオブジェクトが持っている、プロパティやメソッドがずらりと出てきます。 開発でよく使われるWindowオブジェクトのプロパティ / メソッドには、以下のようなものがあります。 location : 現在開いているページのURLに関する情報が格納されるプロパティです。 innerWidth / innerHeight : ブラウザ画面の幅や高さの情報が格納されるプロパティです。 alert : アラートを表示するためのメソッドです。 setTimeout / setInterval : 一定時間後や一定時間おきに処理を行うためのメソッドです。 また、Windowオブジェクトのプロパティ / メソッドのアクセスの際には、windowの記述を省略できるという特性があります。 console.log(window.location); console.log(location); //どちらも現在のURLの情報が入ったオブジェクトが表示される！ まとめると、今開いているタブが持っている情報をすべて格納しているのがWindowオブジェクトということです。   Documentオブジェクト DocumentオブジェクトはWindowオブジェクトのプロパティの1つで、こちらも現在のサイトに関する情報を保持しています。 Windowオブジェクトがブラウザそのものに関する情報だったのに対し、Documentオブジェクトはブラウザで表示しているHTMLに関する情報と言えるでしょう。 中身をみていくと、いろいろプロパティがありますね。 たとえば、bodyはHTMLのbodyタグの中身をあらわしています。   本題のDOMに戻ります。 名前の通り、DOM（Document Object Model）ではDocumentオブジェクトを通して、個々の要素を取得・操作できるのです。 次の章からは、DOMの仕組みやDOMの操作方法を具体的に見ていきましょう。   DOMのツリー構造 それでは、DOMの操作の仕方について見ていきましょう。 個別の操作方法の前に、「ツリー構造」と言われるDOMの構造について見ていきます。 ツリー構造は簡単に言えば、1つの親要素の下に子要素があって、さらにその子要素がそれぞれ親になり、またその下に子要素を持つ……というぶら下がり構造を意味します。   実際のHTMLのコードも、ツリー構造として捉えられます。 <html lang = "ja"> <head> <meta charset = "utf-8"> <title>JavaScriptの練習</title> </head> <body> <h1>見出し</h1> <div> <p>テキスト1</p>
JavaScript

PHPの配列でjoinメソッドを使う方法を現役エンジニアが解説【初心者向け】

PHPで配列を結合する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 PHPではさまざまな方法で配列を結合できますので、この記事では用途に合わせた使い分けについて解説しています。 目次HTMLの要素とはJavaScriptでHTMLの要素を取得する方法document.getElementByIdとはdocument.getElementsByNameとはdocument.getElementsByClassNameとはquerySelectorとはまとめ監修してくれたメンター そもそもPHPについてよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。   大石ゆかり PHPの配列を結合するにはどうしたらいいですか？ 田島悠介 配列を結合する方法はいろいろあるけど、array_mergeが使えるよ。 ただ連想配列でキーが同じだった場合に値が上書きされるよ。 大石ゆかり 連想配列？キー？上書き？　なんだか難しそうですね・・・ 田島悠介 聞いただけではイメージするのが難しいかもしれないね。 たとえば$sum[5]の「5」の数値が配列の添字、つまりキーだよ。 連想配列はこのキーが文字列の配列だね。 じゃあ、配列を結合する方法を実際のサンプルコードを使って説明するね。 大石ゆかり お願いします！ ※この解説記事では配列のキー（添字）が数値のものを添字配列といい、キーが文字列の連想配列と区別しています。PHPの配列については解説記事「PHPの配列の基本を現役エンジニアが解説【初心者向け】」を、連想配列については解説記事「PHPで連想配列を使う方法【初心者向け】」をご覧ください。   array_mergeで結合する方法 PHPで配列を結合するには、array_merge関数が使えます。 複数の配列をひとつに結合した配列を取得できます。 構文 結合された配列 = array_merge(配列1, 配列2); 配列1の後ろに配列2の要素が追加されて結合された配列が取得できます。 ※引数に指定する配列の数は、ひとつでも3つ以上でも指定できます。 ※結合された配列はarray_merge関数の戻り値で取得します。上記の構文だと配列1そのものが更新されるわけではありません。 配列のキーが同じ要素を結合すると？ 配列が連想配列（キーが文字列の配列）かどうかで結果が異なります。 キーが数値の添字配列の場合は、同じキーがあっても添字がゼロから振りなおされ、要素が追加されていきます。 キーが文字列の連想配列の場合は、同じキーがあると新しい要素に上書きされて追加にはなりません。 添字配列を結合する 配列のキーが数値の添字配列をarray_merge関数で結合すると、すべての要素のキーがゼロから振りなおされて追加されます。 ソースコード 色の名前が入った2つの配列 $colors1と$colors2の要素をarray_mergeで結合し、$colorsに代入します。 $colors1と$colors2の配列はキーが数値のため、結合したときにキーが降り直されます。 <?php $colors1 = array('赤', '緑', '青'); $colors2 = array('シアン', 'マゼンタ', '黄'); //配列を結合 $colors = array_merge($colors1, $colors2); //結合した配列を出力（preタグで改行させる） print_r('<pre>'); print_r($colors); print_r('</pre>'); ?> ※本来なら出力したいWebページ内で<html>タグなどを含める必要がありますが、今回はPHPのプログラムの解説が目的なので省略しています。基本的なPHPの書き方について詳しくは解説記事「基本的なPHPの書き方」をご覧ください。 表示結果 解説 $colors1 = array('赤', '緑', '青'); $colors1に3つの要素がある配列を代入しています。 配列 $colors1の中身は以下のように0から2のキーがあります。 Array ( [0] => 赤 [1] => 緑 [2] => 青 ) ※配列を作成するときに、値だけ指定すると自動的にゼロから始まる添字がついてキーが作成されます。配列の作成について詳しくは解説記事「PHPの配列の基本を現役エンジニアが解説【初心者向け】」をご覧ください。 $colors2 = array('シアン', 'マゼンタ', '黄'); $colors2にも3つの要素がある配列を代入しており、中身は以下の状態です。 Array ( [0] => シアン [1] => マゼンタ
PHP

JavaScriptでDocument.formsプロパティを使ってform要素を取得する方法を現役エンジニアが解説【初心者向け】

JavaScriptでDocument.formsプロパティを使ってform要素を取得する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 JavaScriptでDocument.formsプロパティを使うと、form要素を取得できます。 実務でも、JavaScriptでDocument.formsプロパティを使って入力フォームの情報を操作するので、ぜひ学習してみてください。   目次HTMLの要素とはJavaScriptでHTMLの要素を取得する方法document.getElementByIdとはdocument.getElementsByNameとはdocument.getElementsByClassNameとはquerySelectorとはまとめ監修してくれたメンター   そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptでDocument.formsプロパティを使ってform要素を取得する方法について詳しく説明していくね！ 大石ゆかり お願いします！   DOMとは Document Object Modelの略で、文章の構造を表したプログラミングインターフェイスです。 平たく言うと、文章構造を表現したり操作する部品の集まりです。 ChromeなどのブラウザでみているWebサイトは、HTMLという言語のタグを使って文章のレイアウトや表示の色などを表現しています。 DOMの中には、このHTMLの要素を操作する機能も用意されています。 HTMLの要素を操作することで、Webサイトの表示を切り替えたり色をつけたりというような動きをもたせることができます。   Document.formsプロパティとは Document.formsプロパティとは、文章を表すDocumentインターフェイスが持つプロパティの一種です。 Document.formsプロパティには、HTMLにあるformタグをすべて格納しています。 Document.formsプロパティで、formをすべて格納するため、formsと複数形のsが付いています。 Document.formsプロパティは、formタグを参照したり操作する場合に使用します。 formタグというのは、入力フォームのように、ユーザーが情報を入力する際に利用するタグです。   [PR] コーディングで副業する方法とはDocument.formsプロパティの使い方 ここでは、基本的なDocument.formsプロパティの使い方を解説します。 基本文法 document.forms[index] 解説 Document.formsプロパティは、document.formsと記述すれば使うことができます。 [index]の部分に、インデックスを指定することが可能です。 Document.formsの返り値は、配列ではなく HTMLCollection オブジェクトです。 JavaScriptに標準で用意されてる、Documentのオブジェクトであるdocumentを利用する文法です。   form要素を取得する方法 ここでは、form要素を取得する方法を解説します。 基本コード document.forms[0] document.forms['nameのプロパティ名'] 解説 Document.formsは複数のformを格納した配列のようなオブジェクトです。 厳密に言えば配列ではなく、HTMLCollection オブジェクトと言います。 document.forms[0]のようにformを指定することで任意のform要素を取得できます。 document.forms[‘nameのプロパティ名’]というように、該当するnameのプロパティ名を指定することで、該当するnameで指定されたform要素を取得できます。   form部品を取得する方法 ここでは、form部品を取得する方法を解説します。 基本コード document.forms[0].elements[0] document.forms['nameのプロパティ名'].elements['nameのプロパティ名'] 解説 document.forms[0].elementsでは、formタグの中にある入力欄などの部品を取得できます。 elements[0]の位置に、inputタグのような部品が該当する場合に、document.forms[0].elements[0]でinputタグの要素が取得可能です。 Document.formsと同じようにelementsもすべてのform部品を格納したHTMLCollection オブジェクトです。 そのため任意のform部品を扱う場合は、elements[0]やelements[【inputの名前】]のように[‘nameのプロパティ名’]を指定します。   実際に書いてみよう JavaScriptでのformの操作を見るために、まずはHTMLソースに2つのformタグを記述したものを用意しました。 HTMLに存在する要素を、Document.formsで実際に取得してみましょう。 HTMLサンプルコード <form name='form1'> 1つ目のformの入力欄：<input type="text" name='input1'> <input type="number"> <input type="checkbox" name='check' value='0'>確認する </form> <form name='form2'> 2つ目のformの入力欄：<input type="text" name='input2'> </form> JavaScriptサンプルコード document.forms[0].elements[0].value = '1つめのformの1つ目の入力欄に入る文字列です'; document.forms[0].elements[2].checked = true; document.forms[1].elements[0].value = '2つめのformの1つ目の入力欄に入る文字列です。' nameを利用した場合のサンプルコード document.forms['form1'].elements['input1'].value = '1つめのformの1つ目の入力欄に入る文字列です'; document.forms['form1'].elements['check'].checked = true; document.forms['form2'].elements['input2'].value = '2つめのformの1つ目の入力欄に入る文字列です。' 実行結果 See the Pen Document.forms by マインクラフトゲームアプリプログラミング学校 (@programjp) on CodePen. 解説 document.forms[0].elements[0].value = ‘1つめのformの1つ目の入力欄に入る文字列です’;では、document.forms[0].elements[0].valueで指定できる、HTMLの<input type=”text” name=’input1′>のvalueに、1つめのformの1つ目の入力欄に入る文字列ですを代入しています。 [0]のようなインデックスではなく、nameを利用して同じ指定を行う場合はnameを利用した場合のサンプルコードをご覧ください。 document.forms[0].elements[2].checked = true;では、document.forms[0].elements[2].checkedで指定できる、HTMLの<input type=”checkbox” name=’check’ value=’0′>のchecked に、trueを指定します。 checkedにtrueを指定することで、チェックボックスをチェックした状態にできます。 [0]のようなインデックスではなく、nameを利用して同じ指定を行う場合はnameを利用した場合のサンプルコードをご覧ください。 document.forms[1].elements[0].value
JavaScript

JavaScriptでDOM操作で要素を削除する方法を現役エンジニアが解説【初心者向け】

JavaScriptのDOM操作で要素を削除する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次HTMLの要素とはJavaScriptでHTMLの要素を取得する方法document.getElementByIdとはdocument.getElementsByNameとはdocument.getElementsByClassNameとはquerySelectorとはまとめ監修してくれたメンター そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptのDOM操作で要素を削除する方法について詳しく説明していくね！ 大石ゆかり お願いします！   ※DOMとはHTMLを操作する仕組みのことで、木の枝のような階層構造になっています。DOMの操作について、詳しくは解説記事「JavaScriptでDOMを操作する方法【初心者向け】」をご覧ください。   要素自身を削除する 呼び出した要素自身を削除するときは、removeメソッドを使います。 書式 削除する要素.remove(); 削除する要素自身から、removeメソッドを呼び出します。 removeメソッドで要素を削除すると、削除した要素内の他の子要素も含めてすべて削除されます。 クリックされた時の処理など、イベントを発生させた要素そのものを削除する場合は、受け取ったEventオブジェクトのtargetからremoveメソッドを呼び出せます。 他の要素を削除したいのであれば、「document.getElementById」などで取得します。 ※イベントとは、マウスのクリックやページの読み込みが完了したときなどの動作を指します。JavaScriptではイベントが発生したときに実行する関数を指定するために、各要素のonclick属性などに処理する関数を指定できます。onclick属性については解説記事「クリック時の処理！JavaScriptでonclickを使う方法【初心者向け】」をご覧ください。 ※Eventオブジェクトとは、イベントが発生したときの情報が収められているものです。イベントの発生源である要素などが取得できます。JavaScriptの関数にEventオブジェクトを渡すには、HTMLのonclick属性に「event」を引数として渡します。   サンプルコード クリックしたボタンそのものと、「パープル」の要素自身を削除するサンプルコードです。 ソースコード // 「このボタンを削除」 がクリックされた時の処理 function del_this(event) { //イベントの発生源の要素を削除 event.target.remove(); } // 「パープルを削除」 がクリックされた時の処理 function del_purple(){ //「パープル」の要素をIDから取得 const elem_purple = document.getElementById('purple'); //elem_purple（idがpurple）の要素自身を削除 elem_purple.remove(); } <p>レッド</p> <p id="purple">パープル</p> <p>グリーン</p> <p>ブルー</p> <button onclick="del_this(event)">このボタンを削除</button> <button onclick="del_purple()">パープルを削除</button> 実行結果 See the Pen js_remove_this by mentor-inoue-y (@mentor-inoue-y) on CodePen. 解説 クリックされた要素自身を削除 function del_this(event) { ～ } 「このボタンを削除」ボタンがクリックされたときに呼び出される関数を定義しています。 HTMLの「このボタンを削除」ボタン（button要素）にあるonclick属性に、「del_this(event)」と指定して関数が呼び出されるようにしています。 HTMLのonclick属性でeventを引数で渡すことにより、イベントを発生させた要素の情報を関数に送れます。 イベントを処理する関数 del_this(event)でeventを受け取って、クリックされた要素をevent.targetで取得できます。 event.target.remove(); event.targetはイベント（今回はクリック動作）の発生源の要素である「このボタンを削除」ボタンを指していて、removeメソッドにより要素自身を削除できます。   取得した要素自身を削除 function del_purple(){ ～ } 「パープルを削除」ボタンがクリックされたら呼び出される関数を定義しています。 HTMLの「パープルを削除」ボタン（button要素）にあるonclick属性に、「del_purple()」と指定して関数が呼び出されるようにしています。 const elem_purple =
JavaScript

JavaScriptでオセロゲームを作成する方法を現役エンジニアが解説【初心者向け】

JavaScriptでオセロゲームを作成する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 実際のコードをもとに解説していきますので、理解を深めていきましょう。 目次HTMLの要素とはJavaScriptでHTMLの要素を取得する方法document.getElementByIdとはdocument.getElementsByNameとはdocument.getElementsByClassNameとはquerySelectorとはまとめ監修してくれたメンター そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptでオセロゲームを作成する方法について詳しく説明していくね！ 大石ゆかり えっ？オセロゲームを作るなんて、難しそうですね、、、 田島悠介 大丈夫！1つ1つの処理を丁寧に解説するから、一緒に頑張ろう。 大石ゆかり はい！よろしくお願いします！   はじめに 対象読者 本記事は、JavaScriptを学習中であり、変数や関数などひととおりの基礎知識を学習した初心者の方向けに書いています。 本記事が難しすぎると感じた場合や、JavaScriptの基礎を学習してから挑戦したい場合には、以下で紹介しているサイトなどを用いて学習してみましょう！ 入門向けのJavaScriptを学習できるサイト   本記事の目的 本記事の目的は、JavaScriptを用いたオセロゲームの実装を通して、以下のようなスキルを習得・向上させることです。 設計から実装までの、エンジニアの思考プロセスを体験する ゲームロジックに基づいたプログラム実装を通して、論理的思考能力を鍛える オセロゲームの実現に必要な様々な処理を学び、JavaScriptという言語の仕様をより深く理解する 上記の目的を達成するために、本記事は読者のみなさんが実際に手を動かしながら学べるハンズオン形式をとっています。 解説に沿ってコードを書きながら、プログラミングに親しんでいきましょう！   注意点 本記事では、オセロゲームを0から実装するために必要な解説のすべてを記載しているため、記事の分量が多くなっています。 一気に最後まで進めようとせずに、ご自身のペースで学習を進めることを推奨します。 本記事では章ごとに所要時間の目安を記載しているので、学習の区切りを決める参考にしてください。   オセロゲームのルールに基づいて設計をしよう 🕛目安時間：1時間 ゲームに限らず、いかなる実装においても設計は非常に重要です。 機能要件を満たしつつも、できるだけシンプルでメンテナンスしやすい設計を考えるのもエンジニアの醍醐味の1つです。 「その設計、自分ならどうするかな？」ということを考えながら読み進めてみてください。   オセロゲームのルールを確認しよう オセロゲームを実装する上での機能要件は、一言でいうと「オセロゲームのルールに従って盤面の状態が変えられる」ということです。 まずは前提条件となるオセロゲームのルールを確認していきます。   オセロゲームのルール 盤は8×8マスを利用する 初期状態で真ん中の4マスに白黒の石を交互に配置する 先攻を黒とし、黒⇨白⇨黒…の順番で石を置いていく 石を置ける場所は、下記の条件を満たしている 置くマスに他の石がないこと 置くマスの上下左右、斜め1マスの場所に相手の石があること 置いた石、相手の石があった方向の延長上に自身の石があること 石を置ける条件を満たせない場合は、パスをして相手の番になる すべてのマスに石が置かれた時点でゲーム終了（「空きがあるが、白黒どちらも置けない」状況は今回は考えないことにする） ゲーム終了時点で石の数が多い方が勝ちとなる 以上がオセロゲームのルール概要です。   ルール以外の要件を定めよう ゲームのルールのほか、今回の実装では以下の条件を適用することとします。 自動でパスする機能は実装せず、「パス」ボタンを設置する 「現在どちらの手番であるか」を表示する ゲーム終了後、白黒それぞれの石の数と勝敗を表示する ゲームの初期化機能は実装しない 石が裏返るなどのアニメーションは実装しない CPUとの対戦機能は実装しない jQueryなどのフレームワークは使用しない 画像は用いない それでは、要件を確認したところで実際の設計に移りましょう。   要件に沿って実装設計をしてみよう 同じルールや条件でも、それをどのように実装に落とし込むかはエンジニア次第です。 実装設計では、いかに無駄なくすべての要件を満たした実装ができるかを考え尽くします。 それでは、紙やプレゼンスライドなどに、大まかな処理の流れを考えて書いてみてください。 想定されるケースを洗い出し、そのケースに応じてどう処理を分岐するかを矢印で表してみましょう。   本記事の執筆者は、以下のように流れを作成しました。 上図のように場合分けをしつつ、プログラムのフローを書き出すことで、コードに落とし込む際に整理がしやすくなります。 もちろん上記のフロー図が唯一の正解ということではなく、他にもいろいろなパターンの表現方法が考えられます。 想定されるケース・条件を網羅し、かつ無駄のない流れで設計できると、「良いフロー図」と呼ぶことができます。 本セクションは以上です。 休憩・復習などをして、ご自身のペースで次のセクションへ進んでください。   [PR] コーディングで副業する方法とは開発環境を整えよう 🕛目安時間：30分 今回の開発に必要な環境は以下の通りです。 コードエディタ（図解ではVisual Studio Codeを使用します） Webブラウザ（Google Chrome推奨）   コードエディタを用意しよう コードエディタは普段使い慣れているもので構いませんが、解説に用いるVisual Studio Codeを導入したい方は、以下の記事を参考にセットアップしてください。 Visual Studio Code（VSCode）とは？インストールや使い方も現役エンジニアが解説   Webブラウザの環境を整備しよう 主要なWebブラウザには、コードの構造を確認したり、エラーを発見したりするための開発者用ツールが備えられています。 本記事では、実務現場の多くで使われているGoogle Chromeを用いて開発を進めていきます。 開発者ツールの使い方をまだ学習していない方は、次のセクションに進む前に以下の記事に目を通しておいてください。 Chromeの開発者ツールを使ってJavaScriptのデバッグを行う方法を現役エンジニアが解説【初心者向け】 盤面と石をブラウザ上に表示しよう 🕛目安時間：1時間30分 このセクションでは、オセロゲームに必要な盤および石を表示するための実装を行います。 本格的にHTML / CSS / JavaScriptのコードが登場するので、要点を1つ1つ理解しながらコーディングをしていきましょう。   必要なフォルダとファイルを作成しよう まずはプロジェクトのルートとなるフォルダを1つ、PCの任意の場所に作成してください。 （例ではオセロゲームの一般的な英語名であるreversiというフォルダ名にしました）   フォルダ内には、以下の3つのファイルを作成してください。 index.html style.css main.js 下図のような構成にできていればOKです。   HTMLをコーディングしよう いよいよコーディング作業に入ります！ 今回はサンプルコードに従って、index.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> <link rel="stylesheet" href="style.css"> </head> <body> <!-- 盤 --> <div id="stage" class="stage"></div> <!-- 各マスを描画するためのテンプレート --> <div id="square-template" class="square"> <div class="stone"></div>
JavaScript

サイズ指定に役立つ！CSSでcalc( )を使う方法【初心者向け】

CSSで書くcalcファンクションの使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 要素の水平や垂直のセンタリング、可変的な幅の指定や均等に要素を配置したい場合にもcalcファンクションを使えます。 異なる単位で複雑な計算も簡単に指定できます。 レイアウトやサイズ指定を楽に行うことができるので、少し応用的な使い方ですが、覚えておくと便利でしょう。 目次HTMLの要素とはJavaScriptでHTMLの要素を取得する方法document.getElementByIdとはdocument.getElementsByNameとはdocument.getElementsByClassNameとはquerySelectorとはまとめ監修してくれたメンター そもそもCSSの記述方法がわからない場合は、 CSSの書き方について解説した記事を読むとさらに理解が深まります。   大石ゆかり CSSで3等分にした要素の幅を設定するにはどうしたらいいですか？ 田島悠介 いろいろ方法があるけどcalcファンクションを使えば簡単だよ。 大石ゆかり calc？CSSで計算ができるんですか？ 田島悠介 その通り！たとえば全体の幅から3等分した要素を作りたいならwidth: calc(100% / 3)のように指定できるよ。 大石ゆかり へぇー。わかりやすいですね。 田島悠介 そうなんだ。まずはどういった記述の仕方をするか見てみよう。 大石ゆかり はい！   calcファンクションとは CSSのcalcファンクションとは、レイアウトやサイズ指定に計算式を使えるようにしてくれるファンクションです。 通常だと100pxや3emのようにレイアウトやサイズを指定しますが、calcファンクションを用いることで、100px + 50pxや、3em – 1em のように四則演算を使えるようになります。 たとえば、縦横150pxの要素をブラウザの表示領域で中央に配置するには以下のように記述できます。 width: calc(100vw / 2 - 150px / 2); height: calc(100vh / 2 - 150px / 2); このように指定すれば、中央位置（50vw, 50vh）から150pxの要素の端から中心までの距離（150px / 2）だけずらした位置を求めて中央にセンタリングできます。   calcファンクションを使うメリット 異なる単位で計算することができる 計算が明白になる calc()は結果の値ではない 異なる単位で計算することができる CSSのcalcファンクションは、異なる単位の値で計算式を作成できます。 異なる単位で計算できれば、相対的な長さの単位（%、em、vwなど）と絶対的な長さの単位（pxやptなど）を組み合わせて、要素をセンタリングするなどの指定が簡単に記述できます。 %、em、pxなどいろいろな単位を組み合わせた計算が可能です。 たとえば、表示領域全体から固定幅 80pxの要素の残りの幅を calc(100% – 80px) のように計算式で求められます。 このように、固定幅の要素と幅が可変する要素を並べたいときに便利です。 計算が明白になる calcファンクションを使うと、値が何を意味しているかが分かりやすくなります。 たとえば3等分の幅にしたい場合、「width: 33.333333333%;」と指定するよりも「width: calc(100% / 3);」としたほうが、3等分の幅にしたいことが明白にわかります。 固定された値を指定するよりもわかりやすく、3分割や7分割などの割り切れない値も設定できます。 calc()は結果の値ではない calcファンクションの計算結果は固定されているわけではなく、ブラウザの幅などに合わせてリアルタイムに計算されます。 たとえば「height: calc(100vh – 50px);」と指定すれば、ブラウザの表示領域に合わせて常に高さが表示領域の半分より50pxだけ少なくなるように調整されます。   [PR] コーディングで副業する方法とはcalcファンクションの書き方 calcファンクションはCSSで値の代わりとして計算式を指定できます。 widthやheight、font-sizeなど値が指定できるところなら使えます。 構文 プロパティ（widthなど）: calc(式) 四則演算が使用できる 指定する式では四則演算の演算子（+、-、*、/）が使えます。 前後に空白が必要 加算（+）と減算（-）では演算子の前後に半角スペースを空ける必要があります。 除算（/）や乗算（*）では演算子の前後に半角スペースを入れなくても計算式が認識されますが、慣習として四則演算の演算子の前後には半角スペースを入れます。 ※演算子の前後に半角スペースを入れないと、加算や減算ではなく正の値や負の値として認識されます。詳しくは公式ドキュメント「calc() – CSS: カスケーディングスタイルシート | MDN」をご覧ください。 calcが利用できる場所 calcファンクションは、長さ（<length>）、周波数（<frequency>）、角度（<angle>）、時間（<time>）、数量（<number>）、整数値（<integer>）の値を設定する場所に対して使用できます。 入れ子が可能 calcファンクションは入れ子にできます。 入れ子にすると計算式の優先順位を決める、単なる括弧( )として扱われます。   calcファンクションの実装例 実際にcalcファンクションを使った実装例を見てみましょう。 ルートに基づいたサイズ指定 要素を3等分の幅にする 左右のセンタリング 上下の中央配置 ヒーローヘッダーの高さ調整 ルートに基づいたサイズ指定 calcファンクションを使えば、フォントのサイズを相対的に指定できます。 たとえば、calcファンクションでルート（最上位の要素。html要素）のフォントサイズより5px大きいサイズを指定しておけば、ルートのフォントサイズが変更されたら一緒に変わるようにできます。 スマートフォンとPCなどでフォントサイズを一括して変更したいときに便利です。 ソースコード 「text_plus」クラスの要素のフォントサイズをルートのフォントサイズの1.5倍になるようにcalcファンクションで計算します。 ルート（html要素）のフォントサイズが変更されたら、「text_plus」クラスの要素のサイズも変更されます。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8">
CSS

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から
Webエンジニアに

Webエンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の行うリスキリングを通じたキャリアアップ支援事業の補助金対象コースです。条件を満たすことで支払った受講料の最大70％がキャッシュバックされます。詳しくは こちら のページをご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

オーダーメイドコース
TechAcademy（テックアカデミー） フロントエンドコース プログラミング JavaScript JavaScriptでHTMLの要素を取得する方法を現役エンジニアが解説【初心者向け】