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サイトに関わる様々な情報が扱えます。

まとめ

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

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

執筆してくれたメンター

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

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

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

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

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

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

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

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

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

JavaScriptでlocation.hashプロパティを使ってURLのハッシュを取得する方法を現役エンジニ

JavaScriptでlocation.hashプロパティを使ってURLのハッシュを取得する方法について、TechAcademyのメンター（現役エンジニア）が実...

JavaScript

JavaScriptにおけるcanvasの利用方法について現役エンジニアが解説【初心者向け】

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

JavaScript

JavaScriptで特定の範囲だけ印刷する方法を現役エンジニアが解説【初心者向け】

JavaScriptで特定の範囲だけ印刷する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...

JavaScript

JavaScriptでselectedIndexプロパティを使ってセレクトボックスで選択中のインデックス番号を

JavaScriptでselectedIndexプロパティを使って、セレクトボックスで選択中のインデックス番号を取得・設定する方法について、テックアカデミーのメ...

JavaScript

JavaScriptでselectオブジェクトの値（value）を取得する方法を現役エンジニアが解説【初心者向

JavaScriptでselectオブジェクトの値（value）を取得する方法についてテックアカデミーのメンター（現役エンジニア）が解説します。実際のコ...

JavaScript

JavaScriptのクラスで継承を使う方法を現役エンジニアが解説【初心者向け】

JavaScriptのクラスで継承を使う方法について解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。また、入門向けのJa...

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を利用する文法です。 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でオブジェクトを使う方法【初心者向け】

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

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で時刻情報を操作できるdatetimeモジュールのdatetimeオブジェクトを比較する方法について紹介しました。便利なモジュールなので使ってみてください。監修してくれたメンターメンターOS AIプログラミングを使って開発を行う。プログラミング歴は約3年でPythonは割と得意。好きな物理理論は一般相対性理論で動物も好き。大石ゆかり内容分かりやすくて良かったです！田島悠介ゆかりちゃんも分からないことがあったら質問してね！大石ゆかり分かりました。ありがとうございます！ TechAcademyでは、初心者でもPythonを使った人工知能（AI）や機械学習の基礎を習得できるオンラインブートキャンプPython講座を開催しています。挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。

Python

Photoshopのスマートオブジェクトについて現役エンジニアが解説【初心者向け】

Photoshopのスマートオブジェクトについて、TechAcademyのメンター（現役エンジニア）が初心者向けに解説します。なお本記事は、TechAcademyのオンラインブートキャンプPhotoshop講座のカリキュラムをもとに執筆しています。田島悠介今回は、Photoshopに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介スマートオブジェクトについて詳しく説明していくね！大石ゆかりお願いします！目次スマートオブジェクトとはスマートオブジェクト化する方法スマートオブジェクトの操作方法まとめスマートオブジェクトとはスマートオブジェクトとはPhotoshopで、配置した写真やオブジェクトなどを、オリジナルの状態を保ったまま編集ができる状態にする機能です。スマートオブジェクトに変換すると、変換直前のレイヤー情報がスマートオブジェクト内に保管され保護されるため、変換後のスマートオブジェクトを編集しても内部の情報には影響は及びません。例えば、画像を何度も拡大縮小した場合、通常は画像が劣化しますが、スマートオブジェクトに変換してから同じ編集を行うと、画像はスマートオブジェクト内に保管されるため、画像の劣化は起こりません。 [PR] フロントエンドで副業する学習方法を動画で公開中スマートオブジェクト化する方法スマートオブジェクト化する方法には以下の２つがあります。 1.レイヤーをスマートオブジェクト化するレイヤーパネルのスマートオプジェクトに変換したいレイヤーを選択し、右クリックします。メニューの「スマートオブジェクトに変換」をクリックし実行します。レイヤーパネルのアイコンがスマートオブジェクトのアイコンに変換され、スマートオブジェクトに変換されたことを示します。 2.スマートオブジェクトとして画像やオブジェクトを読み込む埋め込みを配置ーメニュー「ファイル」ー「埋め込みを配置」を実行し、読み込みたい画像を選び、「配置」をクリックします。埋め込みを配置では、スマートオブジェクト内に読み込んだ画像が埋め込まれます。リンクを配置ーメニュー「ファイル」ー「リンクを配置」を実行し、読み込みたい画像を選び、「配置」をクリックします。リンクを配置では、スマートオブジェクト内に読み込んだ画像は埋め込まれないため、その分、ファイルサイズを軽量化することができます。スマートオブジェクトの操作方法レイヤーパネルのスマートオブジェクトを右クリックすると操作できるコマンドの一覧が表示されます。一覧の中から適用したいコマンドを選び、クリックすると適用されます。機能説明スマートオブジェクトを複製スマートオブジェクトレイヤーが複製され、元のスマートオブジェクトと同じ名前の後に「のコピー」という接尾辞の付いた、新しいスマートオブジェクトが表示されますコンテンツを編集元のコンテンツファイルが別タブで表示され、編集可能となります。編集終了後、ファイルを保存すると、変更内容がスマートオブジェクトに反映されますコンテンツを置き換えファイルファインダーが表示され、元のコンテンツファイルが保存されているディレクトリーが表示されます。置き換えたいコンテンツを選択し、「配置」をクリックするとスマートオブジェクトに新しく選択したコンテンツが反映されますコンテンツを書き出しスマートオブジェクトを元のファイル形式（JPEG、AI、TIF、PDF およびその他の形式）で書き出します。スマートオブジェクトに複数のレイヤーが含まれる場合は、PSB形式で書き出されます変形を初期化変形したスマートオブジェクトが、元の状態に戻されますファイルに再リンクレイヤーに変換通常レイヤーに変換されます。スマートオプジェクトに複数のレイヤーが含まれている場合は、レイヤーパネル内に新しいレイヤーグループとして展開されますレイヤーをラスタライズ通常レイヤーに変換されます。スマートオプジェクトに複数のレイヤーが含まれている場合は、レイヤーは結合されますまとめ画像の編集の他にも、Webデザインをする場合、ヘッダーやフッターなど共通で使うパーツをスマートオブジェクトにする事で、複数ページに簡単に配置することができ便利です。監修してくれたメンターメンターOM Webデザインの勉強のためロサンゼルスに留学。その後、現地のWeb制作会社に就職し、Webデザイナーとしてのキャリアをスタート。現在もロサンゼルスで働く傍ら、フリーランスのWebデザイナーとして、アメリカだけでなく日本からのWeb制作も請け負う。また、画像のリタッチが得意なので、しばしばリタッチの依頼も請け負う。大石ゆかり内容分かりやすくて良かったです！田島悠介ゆかりちゃんも分からないことがあったら質問してね！大石ゆかり分かりました。ありがとうございます！ TechAcademyでは初心者でもフォトレタッチをマスターできるオンラインブートキャンプ Photoshop講座を開催しています。現役デザイナーに毎日チャットで質問することができます。

Photoshop

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

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

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

目次

HTMLDocumentオブジェクトとは

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