JavaScript

JavaScriptでHTMLDocumentオブジェクトを取得する方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptでHTMLDocumentオブジェクトを取得する方法について解説しています。HTMLDocumentオブジェクトの現在のブラウザでの対応状況、使い方の例を見ていきましょう。

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

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

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

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

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

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

HTMLDocumentオブジェクトを取得する方法について詳しく説明していくね！

お願いします！

HTMLDocumentオブジェクトとは

すでに非推奨になっているオブジェクトです。
使用するのは控えましょう。

Webページを表すDocumentオブジェクトにHTML特有の機能を追加したものです。

しかしながら、すでに非推奨となっていてHTMLDocumentのメンバーは、Documentインターフェースのメンバーに移行しています。

また、ブラウザの対応状況もほとんど非対応になっており、以下のように対応状況を確認できるサイトのCan I useを使って確認していきます。

このサイトではJavaScriptだけではなくCSSなどの対応状況も確認できるので複数のブラウザに対応する場合は重宝するでしょう。

HTMLDocumentの対応状況のスクリーンショットは下記になります。

[PR] フロントエンドで副業する学習方法を動画で公開中

JavaScriptでHTMLDocumentオブジェクトを取得する方法

HTMLDocumentオブジェクトはすでに非推奨になっているため、メンバーの移行先であるDocumentオブジェクトの取得方法をみていきましょう。

JavaScriptのグローバルオブジェクトに定義されている記述の省略が可能なwindowオブジェクトのメンバーにdocumentオブジェクトがあり、documentと記述するだけでそのまま使えます。

実際に書いてみよう

DocumentオブジェクトはHTMLを扱うためのたくさんのプロパティを持っています。

ここではそのいくつかをみていきましょう。

表示しているサイトのドメインを表示

document.domain

表示しているサイトのURLを表示

document.URL

windowが省略可能なので、このように.（ドット）でつなげてプロパティ名を記述するだけでWebサイトに関わる様々な情報が扱えます。

コラム

実は私も！？独学で損する人の特徴

「スクールは高いから独学で成功する」という気持ちの方は多いと思います。
もちろんその方が金額は低く抑えられるでしょう。
ただ独学には向き不向きがあり、実はスクールが向いている人も大勢います。

そんな方のために参考として、テックアカデミー卒業生がスクールを選んだ理由をご紹介します。

・困って挫折しそうなときに、質問や相談できる相手がいる環境で学んでいきたいなと思った
・わかった気になっているだけだったので、自分を追い込む環境に置いた方がいいと感じた
・スクールのカリキュラムで市場に求められるスキルを学ぶべきと思った

少しでも当てはまる部分があれば、スクールが向いているかもしれません。
お試しのつもりで、まずは一度無料相談に参加してみませんか？

現役エンジニア・デザイナーに何でも気軽に相談できる30分をすべて無料でできます。
無理な勧誘は一切ないので、お気軽にご参加ください。

今なら相談した方限定の割引・参加特典付き！無料相談はこちら

まとめ

HTMLDocumentオブジェクトの紹介をしました。

非推奨で移行されたオブジェクトであるため、documentオブジェクトを使ってください。
また、HTMLDocumentに限らず、JavaScriptもバージョンが上がるにつれブラウザの対応状況も変わります。
対応状況の確認も忘れないようにしてください。

執筆してくれたメンター

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

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

言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。

TechAcademyジュニアのゲームアプリコースを担当しています。

JavaScriptでHTMLDocumentオブジェクトを取得する方法がよく分かって良かったです！

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

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

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

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

プログラミングを独学していて、このように感じた経験はないでしょうか？

・調べてもほしい情報が見つからない
・独学のスキルが実際の業務で通用するのか不安
・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような学習に不安を抱えている方へ、現役エンジニア講師とマンツーマンで相談できる機会を無料で提供しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるよう厳しい試験を通過した講師があなたの相談に真摯に向き合います。

「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」
こんな気持ちでも大丈夫です。

無理な勧誘は一切ありませんので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）

今なら参加者限定の割引特典付き！無料相談を予約する

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

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

JavaScript

JavaScriptで正規表現を使って郵便番号をチェックする方法を現役エンジニアが解説【初心者向け】

JavaScriptで正規表現を使って郵便番号をチェックする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに...

JavaScript

JavaScriptでキーコードを取得する方法を現役エンジニアが解説【初心者向け】

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

JavaScript

JavaScriptのfor文におけるbreakについて現役エンジニアが解説【初心者向け】

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

JavaScript

JavaScriptのparseIntメソッドでエラーが発生する際の対処方法について現役エンジニアが解説【初心

JavaScriptのparseIntメソッドでエラーが発生する際の対処方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して...

JavaScript

DOM操作のためのJavaScriptのライブラリについて現役エンジニアが解説【初心者向け】

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

JavaScript

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

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

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

JavaScriptでDocument.formsプロパティを使ってform要素を取得する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 JavaScriptでDocument.formsプロパティを使うと、form要素を取得できます。実務でも、JavaScriptでDocument.formsプロパティを使って入力フォームの情報を操作するので、ぜひ学習してみてください。目次HTMLDocumentオブジェクトとはJavaScriptでHTMLDocumentオブジェクトを取得する方法実際に書いてみようまとめ執筆してくれたメンターそもそも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を利用する文法です。コラム実は私も！？独学で損する人の特徴「スクールは高いから独学で成功する」という気持ちの方は多いと思います。もちろんその方が金額は低く抑えられるでしょう。ただ独学には向き不向きがあり、実はスクールが向いている人も大勢います。そんな方のために参考として、テックアカデミー卒業生がスクールを選んだ理由

JavaScript

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

JavaScriptでオセロゲームを作成する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。目次HTMLDocumentオブジェクトとはJavaScriptでHTMLDocumentオブジェクトを取得する方法実際に書いてみようまとめ執筆してくれたメンターそもそも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のデバッグを行う方法を現役エンジニアが解説【初心者向け】コラム実は私も！？独学で損する人の特徴「スクールは高いから独学で成功する」という気持ちの方は多いと思います。もちろんその方が金額は低く抑えられるでしょう。ただ独学には向き不向きがあり、実はスクールが向いている人も大勢います。そんな方のために参考として、

JavaScript

JavaScriptでオブジェクトを使う方法【初心者向け】

JavaScriptをプログラミング初心者向けに紹介した記事です。今回は、JavaScriptでオブジェクトを使う方法について解説します。また、入門向けのJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。本記事では、テキストエディタのmiを使っていますが、JavaScriptの場合はWebブラウザとテキストエディタがあれば特別な開発環境がなくても開発することができます。なお本記事は、オンラインブートキャンプフロントエンドコース（JavaScript・jQuery講座）の内容をもとにしています。今回の記事の内容は動画でもご覧いただけます。テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。テキストと動画で、解説に少し違う部分があります。テキストは、JavaScriptの「ES6(ES2015)」というバージョンに基づいて解説しています。動画は、そのひとつ前の「ES5」というバージョンに基づいて解説しています。目次オブジェクトとは実際にオブジェクトを作ってみよう　―各プロパティを呼び出してみようプロパティの値を書き換えてみようオブジェクトとはオブジェクトとは、プロパティ（※）を複数集めたもの集合のことです。変数配列もオブジェクトの一種に当たります。データを管理するのに非常に重要なものなので、是非覚えましょう。 ※プロパティ…あらかじめ設定しておいた特定の情報（値）に、名前（プロパティ名）をつけたもの大石ゆかり田島メンター！オブジェクトというのは何でしょうか？変数配列もオブジェクト？？？なんですか？田島悠介少しややこしいんだよね。JavaScriptって全ての値がオブジェクト、もしくはオブジェクトのように振舞うから。大石ゆかりなぜ全ての値がオブジェクトのようにふるまうのでしょうか？田島悠介とりあえず簡単にオブジェクトっていう、変数や関数を格納しておける小さなプログラムの単位って考えるといいよ。さっそく書き方を見てみよう！ [PR] フロントエンドで副業する学習方法を動画で公開中実際にオブジェクトを作ってみよう traffic_light（信号機）という変数を作り、色に応じてメッセージが表示されるようなプログラムを書きます。 <!DOCTYPE html> <html lang = "ja"> <head> <meta charset = "utf-8"> <title>JavaScriptの練習</title> </head> <body> <script> const traffic_light = { blue: "go",

JavaScript

JavaScriptで関数を使う方法【初心者向け】

JavaScriptの使い方を初心者向けに紹介した記事です。今回は、JavaScriptで関数を使う方法にについて、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。関数を使うことによって、プログラムが不必要に長くなることを防いだり、同じことを何度も記述する必要がなくなったりします。それに伴ってプログラムの見通しがよくなり、より複雑なプログラムを書けるようにもなりますよ。また、入門向けのJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。本記事では、テキストエディタのmiを使っていますが、JavaScriptの場合はWebブラウザとテキストエディタがあれば特別な開発環境がなくても開発できます。目次HTMLDocumentオブジェクトとはJavaScriptでHTMLDocumentオブジェクトを取得する方法実際に書いてみようまとめ執筆してくれたメンターそもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。今回の記事の内容は動画でもご覧いただけます。記事の最後にありますので、動画の解説のほうがわかりやすいという方はご覧ください。関数とは関数とは、繰り返し使う処理をまとめて書いておき、プログラムの好きな位置で実行できるというものです。 JavaScriptのプログラミングに慣れてきて、数十～数百行くらい書くようになると、「1つのプログラムの中で全く同じ記述を繰り返し書いていた」といったことがあります。同じ記述を繰り返す状態は、「プログラムが冗長である」と言い、望ましくありません。プログラムを読み返す時、読みづらくなりがちです。そのため、繰り返し使う処理をまとめて書いておき、プログラムの好きな位置で実行できる「関数」を使います。まとめて書くことができるため、プログラムの見通しがよくなります。また、プログラムを修正する時、修正漏れを防ぐことができます。繰り返し使う処理に対して関数を使うことで様々なメリットがあります。大石ゆかり関数って自分で作ることもできるんですか？田島悠介そうなんだ。最初からJavaScriptに入っている関数だけじゃなくて、それらを組み合わせたりして、自分で作成することもできるんだよ。ユーザーが定義するのでユーザー定義関数とも言われてるよ。大石ゆかり定義しておくと、後から使えて便利そうですね！田島悠介その通り！関数も変数と同じように名前を付けて定義するんだ。さっそく関数を書いてみよう！関数の定義では、関数の定義の仕方についてみていきましょう。＜関数：基本のかたち＞関数を定義するときにまず必要となってくるのが、function（関数の意）です。それに続けて関数につける名前を書き、{ }のなかに処理を書きます。一番シンプルに書くとこのようになります。 <script> function 関数名( ) { 　　処理 } </script> ＜関数：引数や戻り値を入れて＞さらに、関数に対して引数（ひきすう）を渡したい場合、( )のなかに引数名を入れていきます。引数はいくつ入れてもよく、必要な分だけ「,」で区切って入れます。これによって、同じ処理をするにしても、渡した引数に応じて処理をする内容を少しずつ変えることができます。また、この関数が何らかの結果を返すようにしたい場合は、returnを使います。その後に関数のなかで処理した結果である戻り値（返り値）というのを渡してあげれば、関数を呼び出している元に渡って、関数の処理結果というのを改めて呼び出し元から使えるようになります。「処理が結果を返す」というイメージが沸かない場合は、人に何か頼む場面を想像してみましょう。例えば、「子どもに買い物を頼む」という処理をした場合、買った物やお釣りという結果が返ってくるでしょう。一方、「封筒をポストに入れてくるように頼む」という処理をした場合は、返ってくる結果はありません。 (無事にやってくれたようだ、というのが結果ではありますが、受け取るたぐいの結果ではないですね。) 例にように、関数には処理の内容を変えるための「引数」と処理の結果を返すための「戻り値」があり、以下のように書きます。 <script> function 関数名(引数1,引数2,…) { 処理 return 戻り値; } </script> [PR] フロントエンドで副業する学習方法を動画で公開中関数を使って実際にプログラムを書いてみようここまで、関数とはどのようなものかを説明しました。ここからは実際に関数を使ってプログラムを書いてみましょう。関数を使わずに書く場合と対比しながら説明していきますので、よく見比べてみてくださいね。まずは関数を使わず、変数だけで書いてみようまずは、関数を使わず書くのがいかに大変かを実感するために、変数のみを使って書いてみましょう。変数をmoneyと定義し、変数moneyに入る値に応じて、document.writeで出力する文字列を「お金持ち」「普通」「貧乏」の3通りにわけるという処理を書いてみます。 <!DOCTYPE html> <html lang = "ja"> <head> <meta charset = "utf-8"> <title>JavaScriptの練習</title> </head> <body> <script> const money = "○○○○"; // 「1000」や「5000」などの数値を入れる

JavaScript

Pythonのdatetimeによる時刻比較について現役エンジニアが解説【初心者向け】

Pythonのdatetimeによる時刻比較について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そもそもPythonについてよく分からないという方は、Pythonとは何なのか解説した記事を読むとさらに理解が深まります。なお本記事は、TechAcademyのオンラインブートキャンプPython講座の内容をもとに紹介しています。田島悠介今回は、Pythonに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 Pythonのdatetimeによる時刻比較について詳しく説明していくね！大石ゆかりお願いします！この記事では、Pythonにおけるdatetimeモジュールのdatetimeオブジェクトを使った時刻の操作方法について説明します。目次 datetimeとは datetimeの使い方 datetimeを利用して時刻を比較してみようまとめ datetimeとはまずは、「datetime」について簡単に説明しておきます。「datetime」はPythonにおける標準ライブラリである「datetimeモジュール」において、時刻情報や日付情報などの時間に関する情報を操作するためのオブジェクトです。 datetimeモジュールには、日付と時刻の両方を扱える「datetimeオブジェクト」、日付のみを扱う「dateオブジェクト」、時刻のみを扱う「timeオブジェクト」、が存在します。 datetimeオブジェクトが使えれば、dateオブジェクトやtimeオブジェクトで行うことのできる処理ができます。datetimeオブジェクトの使い方を知っていれば日付や時刻に関する操作で困ることはあまりないでしょう。また、datetimeモジュールには今紹介したオブジェクト以外にも、「timedeltaオブジェクト」があります。 timedeltaオブジェクトは、時間の差を扱うためのオブジェクトです。このtimedeltaオブジェクトを使うことで、2つの時間情報についてのオブジェクト間の時間差をとることや、経過時間などを扱うことができます。 [PR] フロントエンドで副業する学習方法を動画で公開中datetimeの使い方それでは、datetimeモジュールで一番便利とも言えるdatetimeオブジェクトの基本的な使い方と、2つのdatetimeオブジェクトの時間を比較する方法について紹介していきます。まず、datetimeモジュールをインポートします。 import datetime datetimeオブジェクトを生成するには、 datetime.datetime(年, 月, 日, 時, 分, 秒, ミリ秒, タイムゾーン) のように、生成したい時刻の指定を行います。引数のうち、「時」以後の5つの引数は省略することができます。その場合はタイムゾーン以外すべて0になるので注意してください。「タイムゾーン」という引数は、どこの日付、時刻かを指定するものです。例えば、2021年1月1日のオブジェクトを生成したい場合は、 datetime.datetime(2o21, 1, 1) と引数を指定します。また、現在時刻のdatetimeオブジェクトを取得することもできます。そのためには、now()メソッドを使って、 datetime.now() とするだけで取得ができます。また、生成したdatetimeオブジェクトの情報を知りたい場合は、 print(datetimeオブジェクト) とすると、全ての情報が表示されるほか、 print(datetimeオブジェクト.year) print(datetimeオブジェクト.hour) などとすれば、指定した部分だけを表示することができるということも知っておいた方が良いでしょう。 2つのdatetimeオブジェクトの時間差を取得したい場合は、単純に引き算をして、 timedeltaオブジェクト = datetimeオブジェクト1 - datetimeオブジェクト2 のようにすることでtimedeltaオブジェクトとして取得することができます。 datetimeを利用して時刻を比較してみようそれでは、datetimeオブジェクトを用いて2つの時刻の比較をしてみましょう。今回は、現在時刻のdatetimeオブジェクトと適当な時刻のdatetimeオブジェクトを生成して、その差を表示する処理を行います。 import datetime # datetimeモジュールのインポート datetime1 = datetime.datetime.now() # 現在時刻のdatetimeオブジェクトの生成 datetime2 = datetime.datetime(2021, 1, 1, 12, 00) # 2021年のdatetimeオブジェクトの生成 # 生成したdatetimeオブジェクトを表示して確認 print(datetime1) print(datetime2) # 2つのdatetimeオブジェクトの差を取得 timedelta = datetime1 - datetime2 # 表示して確認 print(timedelta) このコードを実行すると、 2021-01-05 18:54:28.108376 2021-01-01 12:00:00 4 days, 6:54:28.108376 のように表示されて、意図したとおりに時刻の差を取得することができました。コラム実は私も！？独学で損する人の特徴「スクールは高いから独学で成功する」という気持ちの方は多いと思います。

Python

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

JavaScriptでHTMLDocumentオブジェクトを取得する方法を現役エンジニアが解説【初心者向け】

目次

HTMLDocumentオブジェクトとは

JavaScriptでHTMLDocumentオブジェクトを取得する方法