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

JavaScriptによるhtmltagの要素取得について現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptによるhtmltagの要素取得について現役エンジニアが解説しています。htmltagを取得する方法には、ducumentオブジェクトのdocumentElementプロパティを参照します。documentElementの書き方や使い方、htmltagの要素取得について説明します。

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

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

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

 

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

 

田島悠介

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

大石ゆかり

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

田島悠介

JavaScriptによるhtmltagの要素取得について詳しく説明していくね！

大石ゆかり

お願いします！

 

目次

 

ducumentElementプロパティとは

ducumentElementプロパティとは、JavaScriptに標準で含まれているdocumentオブジェクトのプロパティです。

WebページのようなHTMLで記述されたドキュメントの場合は、ルート要素（全体を囲っている大元の要素）である<html>要素となります。
 

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

documentElementプロパティの使い方

documentElementプロパティは、documentオブジェクトのプロパティなので下記のように記述することで使えます。

document.documentElement

HTMLで記述されたWebページで実行した場合は、HTML要素が格納されています。

HTML要素はHTMLのドキュメントの大元であるルート要素なので、そこからheadやbodyのような子要素へとたどることができます。

XMLで記述されたドキュメントを読み込むなどして、documentElementプロパティをを使った場合はXMLのルート要素が格納されています。この場合は、XMLのルート要素から追加や削除などの操作ができます。
 

documentElementを利用してhtmltagの要素を取得してみよう

HTML要素を取得するにはHTMLで記述されたドキュメントに対して、下記の記述を実行することで取得できます。

let rootElement = document.documentElement;

これでrootElementという変数にHTML要素が取得されています。

ルート要素であるHTML要素が取得できたので、HTML要素を使った処理をいくつか紹介します。

言語の定義であるlang属性が設定されている場合は、下記のように記述することで確認できます。

console.log(rootElement.lang);

日本語環境のjaが設定されていれば、コンソールにjaと表示されます。

また、childNodesプロパティをつなげることでHTMLの子要素であるhead要素やbody要素にもアクセスできます。

console.log(rootElement.childNodes);

ここでは、コンソールに子要素のリストを表示しています。
 

まとめ

ルートの要素が格納されているducumentElementプロパティを紹介しました。

ルート要素であることを理解していれば、WebサイトのようなHTMLで作成されたものでもXMLのドキュメントでもいずれにも使うことができます。
 

筆者プロフィール

横山茂雄（よこやましげお）

フリーエンジニアとして活動中。サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。

言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。TechAcademyジュニアのゲームアプリコースを担当しています。

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

 

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

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。

記事を検索

関連するキーワード

関連する記事

JavaScriptの関数スコープについて現役エンジニアが解説【初心者向け】

JavaScriptの関数スコープについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。  ...
JavaScript

【2016年の完全保存版！】フリーで使えるjQueryのプラグイン30選

本稿は、Designmodeのブログ記事を了解を得て日本語翻訳し掲載した記事になります。 本記事は、Doru Ciobanu氏によって投稿されました。 ...
JavaScript

JavaScriptのtextareaオブジェクトの操作方法を現役エンジニアが解説【初心者向け】

JavaScriptのtextareaオブジェクトの操作方法について解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。 また...
JavaScript

JavaScriptでブラウザの「戻る」「進む」に 対応してイベントを発動させる方法を現役エンジニアが解説【初

JavaScriptでブラウザの「戻る」「進む」に 対応してイベントを発動させる方法について解説します。実際のコードをもとに解説していきますので、理解を深めてい...
JavaScript

JavaScriptの論理演算子「&&」「||」「!」の使い方を現役エンジニアが解説【初心者向け】

JavaScriptの論理演算子「&&」「||」「!」の使い方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って...
JavaScript

JavaScriptのPromise.rejectメソッドの使い方を現役エンジニアが解説【初心者向け】

JavaScriptのPromise.rejectメソッドの使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説...
JavaScript

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

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

CSSで書くcalcファンクションの使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 要素の水平や垂直のセンタリング、可変的な幅の指定や均等に要素を配置したい場合にもcalcファンクションを使えます。 異なる単位で複雑な計算も簡単に指定できます。 レイアウトやサイズ指定を楽に行うことができるので、少し応用的な使い方ですが、覚えておくと便利でしょう。 目次ducumentElementプロパティとはdocumentElementプロパティの使い方documentElementを利用してhtmltagの要素を取得してみようまとめ筆者プロフィール そもそも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

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

今回は、JavaScriptでDOMを操作する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。   本記事では、テキストエディタのmiを使っていますが、JavaScriptの場合はWebブラウザとテキストエディタがあれば特別な開発環境がなくても開発できます。 目次ducumentElementプロパティとはdocumentElementプロパティの使い方documentElementを利用してhtmltagの要素を取得してみようまとめ筆者プロフィール そもそも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

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

JavaScriptのDOM操作で要素を削除する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次ducumentElementプロパティとはdocumentElementプロパティの使い方documentElementを利用してhtmltagの要素を取得してみようまとめ筆者プロフィール そもそも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でオセロゲームを作成する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 実際のコードをもとに解説していきますので、理解を深めていきましょう。 目次ducumentElementプロパティとはdocumentElementプロパティの使い方documentElementを利用してhtmltagの要素を取得してみようまとめ筆者プロフィール そもそも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

JavaScriptでDateオブジェクトを使って日付を表示する方法【初心者向け】

JavaScriptをプログラミング初心者向けに紹介した記事です。 今回は、JavaScriptの組み込み関数の1つ、Dateオブジェクトを使って日付を表示する方法について解説します。 また、入門向けのJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。   本記事では、テキストエディタのmiを使っていますが、JavaScriptの場合はWebブラウザとテキストエディタがあれば特別な開発環境がなくても開発することができます。   なお本記事は、オンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）の内容をもとにしています。   今回の記事の内容は動画でもご覧いただけます。 テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。   目次 組み込み関数のDateオブジェクトとは Dateオブジェクトを実際に生成してみよう Dateオブジェクトのプロパティを呼び出してみよう 　プロパティ1. getFullYear()（現時点での年を取得する） 　プロパティ2. getMonth()+1（現時点での月を取得する） 　プロパティ3. getDate()（現時点での日を取得する） 　プロパティ4. getDay() （現時点での曜日を取得する） 　5. 最後に（現時点での年・月・日・曜日を一気に取得する）     組み込み関数のDateオブジェクトとは 組み込み関数とは、JavaScrip側であらかじめ用意してくれているオブジェクトのことです。Dateオブジェクトは、組み込み関数の1つで、日付を扱う際に使います。   参考までに、組み込み関数の代表的なものには次のようなものがあります。   <組み込み関数（代表的なもの）> String　文字列を扱う Number　数値を扱う Boolean　論理値を扱う Array　配列を扱う Date　日付を扱う Math　数値計算で扱う   はじめから関数の内容が決まっているので、こちらで定義する手間もなく、実行するだけ。非常に便利なので重宝します。 組み込みオブジェクトを使う場合、newを使って次のようにオブジェクトを生成します。 var オブジェクト名= new object();    大石ゆかり 田島メンター！日付を扱うにはどうしたらいいでしょうか？ 田島悠介 Dateオブジェクトっていう組み込みオブジェクトが用意されているので、それを使うといいね。 大石ゆかり 日付を処理する関数は最初から用意されてるんですね。 田島悠介 他のプログラミング言語でもそうなんだよ。さっそくDateオブジェクトについて見てみよう！   [PR] コーディングで副業する方法とはDateオブジェクトを実際に生成してみよう 適当なオブジェクト名（today）をつけ、Dateオブジェクトを生成してみましょう。日付に関する様々なプロオパティやメソッドを出力することができます。 var today = new Date(); <!DOCTYPE html> <html lang = "ja"> <head> <meta charset = "utf-8"> <title>JavaScriptの練習</title> </head> <body> <script> var today = new Date(); </script> </body> </html>   ここまでできたら、console.logを使って日付に関する様々なプロオパティやメソッドを呼び出してみます。 次の章から見ていきましょう。     Dateオブジェクトのプロパティを呼び出してみよう Dateオブジェクトでの文字列の操作の仕方を、4つのプロパティを例に見ていきましょう。 プロパティ1. getFullYear()（現時点での年を取得する） プロパティ2. getMonth()+1（現時点での月を取得する） プロパティ3. getDate()（現時点での日を取得する） プロパティ4. getDay() （現時点での曜日を取得する） 5. 最後に（現時点での年・月・日・曜日を一気に取得する）     プロパティ1.
JavaScript

JavaScriptでlengthを使って文字数をカウントする方法を現役エンジニアが解説【初心者向け】

JavaScript文字数をカウントする方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 文字列の長さ（文字数）や配列の要素数などを調べるとき「length」を使用します。 この「length」は文字列（String）や配列（Array）などのオブジェクトに定義されているプロパティです。 目次ducumentElementプロパティとはdocumentElementプロパティの使い方documentElementを利用してhtmltagの要素を取得してみようまとめ筆者プロフィール そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   ※オブジェクトとはデータ（値）とそのデータを処理する機能（関数）を1つにまとめた集合体です。オブジェクトについて、詳しくは公式ドキュメントの「JavaScript オブジェクトの基本」をご覧ください。   大石ゆかり JavaScriptで文字数を数えるにはどうしたらいいですか？ 田島悠介 JavaScriptで文字数を数えるにはlengthプロパティが使えるよ。 ただ、lengthプロパティで取得できるのは文字数だけじゃないんだ。 配列のlengthプロパティは要素数、関数のlengthプロパティは引数の数も取得できるんだよ。 大石ゆかり lengthプロパティって文字数だけじゃないんですね。 田島悠介 そうなんだ。 lengthプロパティを使うオブジェクトによっていろいろ使い方が変わるんだ。 じゃあ、さっそくJavaScriptで文字数をカウントする方法について詳しく説明していくね！ 大石ゆかり お願いします！   lengthプロパティとは 文字列の長さや配列の要素数を取得するプロパティがlengthです。 他にも関数の引数の数を調べたり、数値の桁数を取得したりできます。   lengthプロパティの使い方 書式 // 文字列 文字列の文字数 = 文字列.length; // 配列 配列の要素数 = 配列.length; // 関数 関数の引数の数 = 関数名.length; 文字列のlengthプロパティで、文字列の文字数を取得します。 文字列が空ならlengthプロパティは 0 です。 全角と半角文字の区別はなく数えられます。 配列なら要素数、関数なら引数の数がlengthプロパティの戻り値です。   [PR] コーディングで副業する方法とは文字列の文字数（length）を取得する 文字列の文字数を取得するサンプルコードです。 ソースコード const str = 'TechAcademyマガジン'; // HTMLに文字数を出力 document.body.textContent = str.length; 表示結果 See the Pen js_length_string by mentor-inoue-y (@mentor-inoue-y) on CodePen. 解説 const str = 'TechAcademyマガジン'; 文字数を調べたい文字列を定数 strに代入します。 document.body.textContent = str.length; Webページに文字数を出力します。 変数 strに入っている文字列「TechAcademyマガジン」は全部で15文字なので、str.lengthの値は「15」です。 ※「const」は固定された値である定数を宣言するキーワードです。constキーワードについて詳しくは解説記事「JavaScriptで書く「var,let,const」の違いと使い分け方法」をご覧ください。   【参考】数値の桁数を取得する 文字数を取得するlengthプロパティを応用して、数値の桁数を取得できます。 String( 数値 ).lengthで指定された数値の桁数が求められます。 数値の変数でも同じように求められますが、数値の変数なら 数値の変数.toString().length で求める方法もあります。 See the Pen js_length_int by mentor-inoue-y (@mentor-inoue-y) on CodePen.   配列の要素数（length）を取得する 配列の要素数を取得するサンプルコードです。 ソースコード const fruits = ['りんご', 'バナナ', 'ぶどう']; //配列の要素数を取得 document.body.textContent = fruits.length; 表示結果 See the Pen js_length_array
JavaScript

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

副業したい方

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

はじめての副業コース

転職したい方

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

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

スキルアップしたい方

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

Pythonコース

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

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

オーダーメイドコース
TechAcademy（テックアカデミー） フロントエンドコース プログラミング JavaScript JavaScriptによるhtmltagの要素取得について現役エンジニアが解説【初心者向け】