TechAcademy（テックアカデミー） フロントエンドコース プログラミング JavaScript JavaScriptのdocument.titleプロパティの使い方を現役エンジニアが解説【初心者向け】
リスキル支援事業について
icon
icon
JavaScript

JavaScriptのdocument.titleプロパティの使い方を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptのdocument.titleプロパティの使い方について現役エンジニアが解説しています。JavaScriptのdocument.titleプロパティを操作すると、Webサイトのタイトルを変更することが出来ます。documentがHTML全体のドキュメントページのことです。

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

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

JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。

 

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

 

田島悠介

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

大石ゆかり

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

田島悠介

JavaScriptのdocument.titleプロパティの使い方について詳しく説明していくね！

大石ゆかり

お願いします！

Webプログラミングを行っていくうえで、ページのタイトルを変更する必要が出てくることもあるかと思います。そこで、本記事ではJavaScriptのdocument.titleプロパティの使い方を現役エンジニアが解説します。

document.titleプロパティとは

JavaScriptにおいてdocument.titleプロパティは、Webページのタイトルを変更したいときに扱います。

document.titleプロパティの使い方

document.titleプロパティは以下のように記述します。

document.title="変更後のタイトル";

 

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

実際に書いてみよう

では、実際にタイトルを変更するコードを書いてみましょう。

<!DOCTYPE html>
<html lang = "ja">
  <head>
    <meta charset = "utf-8">
    <title>変更前</title>
  </head>
  <body>
      <input type="button" value="タイトルを変更" onclick="func1()">
    <script>
        var func1 = function () {
          document.title="変更後";
        }
    </script>
  </body>
</html>

JavaScriptのdocument.titleプロパティでタイトルを変更前のWebサイトのタイトル名

JavaScriptのdocument.titleプロパティでタイトルを変更した結果

 

まとめ

JavaScriptのdocument.titleプロパティの使い方を現役エンジニアが解説しました。動的なサイトの作成に使われるので、この際に使い方をマスターしましょう。

筆者プロフィール

メンターTKさん

大学院でVBAを扱う研究を行い、プログラミングの素晴らしさに目覚める。

その後、建設系企業のシステム担当として従事。JavaScriptやPHP、Processingなどに没頭中。

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

 

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

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

記事を検索

関連するキーワード

関連する記事

jQueryで要素を選択するセレクタの使い方【初心者向け】

JavaScriptのライブラリであるjQueryでセレクタの使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解...
JavaScript

JavaScriptのLocalStrage（ローカルストレージ） の使い方を現役エンジニアが解説【初心者向け

JavaScriptのLocalstrage（ローカルストレージ）の使い方について解説します。 実際のコードをもとに解説していきますので、理解を深めていき...
JavaScript

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

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

JavaScriptによるデバッグ(debug)の出力(print)方法について現役エンジニアが解説【初心者向

JavaScriptによるデバッグ(debug)の出力(print)方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者...
JavaScript

JavaScriptで数値の切り上げをする方法を現役エンジニアが解説【初心者向け】

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

JavaScriptでif文を一行で書く方法を現役エンジニアが解説【初心者向け】

JavaScriptでif文を一行で書く方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
JavaScript

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

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

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

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

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

JavaScriptの使い方を初心者向けに紹介した記事です。 今回は、JavaScriptで関数を使う方法にについて、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 関数を使うことによって、プログラムが不必要に長くなることを防いだり、同じことを何度も記述する必要がなくなったりします。 それに伴ってプログラムの見通しがよくなり、より複雑なプログラムを書けるようにもなりますよ。 また、入門向けのJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。 本記事では、テキストエディタのmiを使っていますが、JavaScriptの場合はWebブラウザとテキストエディタがあれば特別な開発環境がなくても開発できます。 目次document.titleプロパティとはdocument.titleプロパティの使い方実際に書いてみようまとめ筆者プロフィール そもそも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でlengthを使って文字数をカウントする方法を現役エンジニアが解説【初心者向け】

JavaScript文字数をカウントする方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 文字列の長さ（文字数）や配列の要素数などを調べるとき「length」を使用します。 この「length」は文字列（String）や配列（Array）などのオブジェクトに定義されているプロパティです。 目次document.titleプロパティとはdocument.titleプロパティの使い方実際に書いてみようまとめ筆者プロフィール そもそも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

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

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

副業したい方

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

はじめての副業コース

転職したい方

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

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

スキルアップしたい方

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

Pythonコース

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

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

TechAcademy（テックアカデミー） フロントエンドコース プログラミング JavaScript JavaScriptのdocument.titleプロパティの使い方を現役エンジニアが解説【初心者向け】