（最終更新月：2023年12月）
✔このような方へ向けて書かれた記事となります
「Javascriptのif文の使い方が知りたい」
「if文の書き方を学びたい」
「if文を使った実際のコードが見たい」
✔当記事を通じてお伝えすること
- Javascriptのif文の基本概念
- if文の書き方とその活用法
- if文を用いた具体的なコード例
当記事では、Javascriptのif文の基本から、その活用方法、さらには具体例を取り上げつつ詳細に解説していきます。
最終章まで目を通していただければ、Javascriptでの条件分岐が自在に操れるようになるでしょう。
ぜひ最後までご覧ください。
筆者プロフィール
【現職】プロダクトマネージャー
【副業】ブログ（月間20万PV）/YouTube/Web・アプリ制作
「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。現在はプロダクトマネージャーとして、さまざまな関係者の間に入り奮闘してます。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。
【当ブログで紹介しているサイト】
✔人に見せても恥ずかしくないコードを書こう
「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。
- 見るからにきれいなコードの書き方
- コードの分割方法
- 変数や関数の命名規則
エンジニアのスタンダートとすべき基準を一から解説しています。
何回も読むのに値する本なので、ぜひ手にとって読んでみてください。
Javascriptとその用途
こちらでは、Javascriptとその多岐にわたる用途について詳しくお伝えしていきます。
Javascriptを理解することで、動的なウェブサイトの開発からサーバーサイドアプリケーションまで、幅広い領域での開発に役立つでしょう。
- JavaScriptの基本
- JavaScriptにおけるHTML操作
JavaScriptの基本
JavaScriptは、インタラクティブなウェブサイトを作成するためのプログラミング言語です。
HTMLとCSSと共に、ウェブ開発の3大要素とされており、その学習はあらゆるウェブ開発者にとって必須です。
JavaScriptにおけるHTML操作
JavaScriptを使用することで、HTMLドキュメントの内容やスタイルの動的な変更が可能です。
これにより、ユーザーのアクションに応じたページの更新や、リアルタイムでの情報表示がおこなえます。
Javascript Documentの概要
こちらでは、ウェブページを構成するDocumentオブジェクトについて解説します。
Documentオブジェクトの理解は、DOMの操作とウェブページの動的な振る舞いの設計に不可欠です。
- Documentとは
- コンストラクターとその目的
- インスタンスプロパティとは
- HTML拡張へのアプローチ
- 非推奨のプロパティについて
- インスタンスメソッドの実例
- HTML文書向けのメソッド拡張
Documentとは
Documentオブジェクトは、ブラウザが読み込んだウェブページのモデルを表し、ページの内容や構造にアクセスするためのインターフェースを提供します。
これを通じて、JavaScriptはウェブページを動的に制御できます。
コンストラクターとその目的
Documentオブジェクトには、直接的なコンストラクターは存在しません。
ブラウザが自動的に生成するオブジェクトであり、documentキーワードを通じてアクセスされます。
インスタンスプロパティとは
Documentオブジェクトは、以下のプロパティを持ちます。
- title
- body
- head
これらを通じてページの異なる部分にアクセス可能です。
HTML拡張へのアプローチ
Documentオブジェクトは、HTML DOM APIの拡張もおこないます。
開発者が新しい要素を作成したり、既存の要素を操作したりするメソッドを提供します。
非推奨のプロパティについて
一部のDocumentプロパティは非推奨とされており、現代のウェブ開発では避けるべきです。
将来的には使用できなくなる可能性があります。
インスタンスメソッドの実例
Documentオブジェクトには、ウェブページの特定のタスクを実行するためのさまざまなメソッドがあります。
たとえば、getElementByIdやquerySelectorはページから要素を取得するために頻繁に使われるものです。
let title = document.getElementById('page-title');
console.log(title.innerText); // ページのタイトルテキストをコンソールに出力HTML文書向けのメソッド拡張
Documentオブジェクトのメソッドは、HTML文書に対する操作を容易にします。
例えば、createElementメソッドを使って新しいHTML要素を作成可能です。
let newDiv = document.createElement('div');
newDiv.id = 'new-element';
document.body.appendChild(newDiv); // 新しいdiv要素をbodyに追加Javascript Documentのイベント
Documentオブジェクトとイベントハンドリングの関係を解説し、イベントがウェブページとユーザーのインタラクションにどのように利用されるかを学びます。
- イベント概要
- 各種イベントの詳細とコード例
イベント概要
Documentオブジェクトは、ページ上で発生するさまざまなイベント処理のために、イベントリスナーを登録する機能を持っています。
これにより、例えばユーザーのクリックやキーボード入力に応答できます。
各種イベントの詳細とコード例
ウェブページ上で最も一般的なイベントのひとつがクリックイベント。
以下は、ボタンがクリックされたときに特定のアクションを実行する例です。
let button = document.getElementById('my-button');
button.addEventListener('click', function() {
console.log('ボタンがクリックされました！');
});Javascript Documentとクッキー
Documentオブジェクトを使用してブラウザのクッキーを操作する方法について説明します。
- ブラウザのクッキーについて
- Cookieの保存・取得例
- クッキーへのアクセスと操作
- 実際のコードと実行結果
ブラウザのクッキーについて
クッキーは、ブラウザがユーザーの情報を記憶するための小さなデータ片です。
Documentオブジェクトのcookieプロパティを介してアクセスし、読み書きできます。
Cookieの保存・取得例
以下はクッキーを保存する例です。
document.cookie = "username=John Doe;
expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/";そして、保存されたクッキーを取得するには以下のようにします。
let username = document.cookie.split('; ').find(row => row.startsWith('username')).split('=')[1];
console.log(username); // "John Doe" を出力クッキーへのアクセスと操作
クッキーはセキュリティ上の理由から、HTTPプロトコルを介してのみ読み書きされることが推奨されます。
JavaScriptを使用してクッキーを操作する際は、サイトのセキュリティポリシーを遵守し、必要な属性の適切な設定が重要です。
// クッキーのセット
document.cookie = "userSettings=; Secure;";
// クッキーの取得と処理
let cookies = document.cookie.split("; ");
for (let c of cookies) {
let [key, value] = c.split("=");
console.log(`キー: ${key}, 値: ${value}`);
}実際のコードと実行結果
クッキーの操作は、ユーザーの環境設定やログイン状態の管理など、ユーザーエクスペリエンスの向上に役立ちます。
以下は、クッキーを使ってテーマ設定を保存する簡単な例です。
// テーマ設定の保存
function saveThemeSetting(theme) {
document.cookie = `theme=${theme}; path=/; expires=Fri, 31 Dec 9999 23:59:59 GMT`;
}
// テーマ設定の読み込み
function loadThemeSetting() {
let theme = document.cookie.split('; ').find(row => row.startsWith('theme')).split('=')[1];
return theme;
}Documentオブジェクトの種類の解説
以下のように異なるタイプのDocumentオブジェクトが存在し、それぞれ特有のメソッドやプロパティを持ちます。
- HTMLDocument
WebページのHTMLコンテンツを操作するためのメソッドが含まれます。 - XMLDocument
XMLドキュメントを操作するためのメソッドが含まれます。 - SVGDocument
SVGコンテンツを操作するための特有のメソッドが含まれます。 - DocumentFragment
DOMの一部を表し、高効率のDOM操作を実現するためのメソッドが含まれます。
| Documentオブジェクトの種類 | 主要なメソッド | 使用例 |
|---|---|---|
| HTMLDocument | getElementById() | document.getElementById('id') |
getElementsByTagName() | document.getElementsByTagName('tag') | |
querySelector() | document.querySelector('.class') | |
createElement() | document.createElement('div') | |
| XMLDocument | getElementsByTagNameNS() | document.getElementsByTagNameNS(namespaceURI, localName) |
createAttribute() | document.createAttribute('name') | |
createTextNode() | document.createTextNode('text') | |
| SVGDocument | getElementById() | svgDocument.getElementById('id') |
createElementNS() | svgDocument.createElementNS(namespaceURI, qualifiedName) | |
createSVGRect() | svgDocument.createSVGRect() | |
| DocumentFragment | appendChild() | fragment.appendChild(childNode) |
querySelector() | fragment.querySelector('.class') | |
cloneNode() | fragment.cloneNode(deep) |
これらのメソッドは、Webページやアプリケーションに応じてさまざまな方法で使われます。
まとめ
当記事では、Documentオブジェクトについて学習してきました。
Documentオブジェクトを熟知することは、高度なウェブ開発スキルを身に付けるための大切なステップです。
手を動かし学ぶことで、知識の深化と実践スキルの向上させましょう。