ペン子

JavaScriptのsleep機能ってどんな機能なんだろう。

非同期処理での制御もできるのかな。

こんな悩みをもっている初心者の方が多いかと思います。
今回はそんな悩みを解消するためにJavaScriptのsleep機能についてまとめました。
JavaScriptのsleep機能を使いこなし、同期・非同期処理での動かし方をできるようになりましょう。

一般的なsleep機能とは

一般的なsleep機能とは、プログラムの実行を一定時間停止する機能です。

一定時間後に処理を継続することができ、主に繰り返し処理やスレッド処理などで使われます。
時間をおいて処理を実行したい場合や高負荷の処理抑えたい場合に便利な機能です。

#include <stdio.h>
#include <unistd.h>
int main(void) { printf("START"); sleep(3); printf("FINAL"); return 0;
}

例えば、C言語でsleep機能を記述すると上記のようになります。
sleepメソッドの引数に一時停止したい秒数を指定することでその時間プログラムの実行を停止してくれます。
上記の例では3秒間の停止をコンピュータに命令しています。

JavaScriptのsleep機能を実現させる方法

JavaScriptには他の言語で使用できるようなsleep機能は実装されていません。
しかし、他の方法を利用して一時停止処理を実現することができます。
ここでは、sleep機能の代わりになるような一般的な方法を紹介します。

setTimeout関数

setTimeout(function() { console.log("sleep機能の代替");
}, 4000);

JavaScriptでsleep機能と同じように一時停止させる一般的な方法としては、setTimeout関数を使用します。
setTimeout関数は、第２引数で指定した時間（ミリ秒単位）が経過した後に、第１引数で指定した関数を実行するようにスケジューリングしています。
例として、上記の例では4000ミリ秒後に「sleep機能の代替」をコンソールに出力しています。

JavaScriptのsleep機能を非同期処理で実現させる方法

一時停止処理を非同期処理で扱うこともできます。
この章では、非同期処理で記述する方法を２つ紹介します。

Promiseオブジェクト

function sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms));
}
async function main() { console.log("START"); await sleep(1000); console.log("sleep機能の代替"); console.log("FINAL");
}
main();

Promiseオブジェクトを使用することで非同期処理を扱うことができます。
Promiseオブジェクトを使うことによって、非同期処理が完了した後に処理を継続することができます。
例として、上記のコードでは1000ミリ秒後に「sleep機能の代替」というメッセージをコンソールに出力します。

async/await

async function sleep() { await new Promise(resolve => setTimeout(resolve, 3000)); console.log("sleep機能の代替");
}
sleep();

async/awaitを使用して、一定時間待機させることができます。
上記の例では、async functio内で、await演算子をPromiseオブジェクトに使うことによって3000ミリ秒後に「sleep機能の代替」というメッセージをコンソールに出力します。

sleep機能をワンライナー（一行）で簡潔に書ける方法

(async () => { console.log('START'); await new Promise(resolve => setTimeout(resolve, 1000)); console.log('Final');
})();

JavaScriptのsleep機能をワンライナーで処理する方法は、asynv/awaitとPromiseオブジェクトをアロー関数で組み合わせることによって実現できます。
アロー関数は様々な処理をワンライナーで記述することができるので覚えておきましょう。

まとめ

今回はJavaScriptのsleep機能についてまとめました。
async/awaitやPromiseを使って非同期処理を行う方法が実務では多く出てくると思うので覚えておきましょう。
ついでに、ワンライナーで処理できるとコードの可読性が上がるので意識してみてください。

ペン子

Linuxってなんだろう.。

初心者にもわかりやすく教えてほしいな。

こんな悩みをもっている初心者の方が多いかと思います。
今回はそんな悩みを解消するためにLinuxを初心者向けにわかりやすくまとめました。
Linuxの基本情報となぜ使うのかを理解して、普段使いできるように初心者からの脱却を目指していきましょう。

初心者でもわかるLinuxとは何かについて

Linuxとは、OSS（オープンソースソフトウェア）のオペレーティングシステム（OS）です。

WindowsやMac OSと同じOSの一種であり、システムの根幹を担当しています。
オペレーティングシステムとは、ソフトウェアとハードウェアの間でリソースをつなぐ役割をもっており、CPUやストレージなどのハードウェアを直接管理しています。
このOSというソフトウェアがないと、ハードウェアは機能だけ備わった動かない入れ物となってしまいます。

Linuxは、基本的なコンピュータシステムの機能を提供するカーネルから構成されており、リソースの管理やパフォーマンスの設定などを行うことができます。
ディストリビューション（必要な機能をパッケージ化している）サービスも豊富で、一から全部構築せずに簡単に利用ができてしまうのも魅力の一つです。

Linuxは、誰でも無料で使えるオープンソースのOSとして世界中で有名です。
WindowsやMac OSと異なり、開発・改良を行ることができるため、自分の好きなようにカスタマイズができます。
再配布も可能なため、世界中の開発者が新しいLinuxを開発して発信しています。

Linuxの基本的な特徴・できること

この章では、Linuxの基本的な特徴・できることについて３つ解説します。

誰でも無料で使える

Linuxは、OSS（オープンソースソフトウェア）のオペレーティングシステム（OS）なので、誰でも無料で使うことができます。
忘れがちですが、いつも私たちが使っているWindowsやMac OSは有料のOSです。
追加でWindowsやMac OSを組み込む場合には購入しなければなりません。
Linuxは何個組み込もうと無料で利用できるため金銭面で優しいOSとなっています。

カスタマイズ性が自由で豊富

Linuxは、WindowsやMac OSなどの有料OSとは違いソースコードを自分の好きなように書き換えることができます。
初心者でも手軽にOSについて学ぶことができるため、学習用としても人気を集めています。
カスタマイズした結果、動かなくなっても安心です。
一度OSを削除して、再インストールすればいいため怖がらずにどんどん触ってみることをおすすめします。

セキュリティ性が高い

Linuxは、厳重なセキュリティでリリースされているため初心者でも安心して使用することができます。
オープンソースとして利用されているため、多くのユーザーがセキュリティを上げることに貢献してくれています。
パッケージとして提供されているRed Hadなどのディストリビューションなどもセキュリティが担保されているので安全性の高いサーバーとして使うことができます。

Linuxのメリット・デメリット

この章では、Linuxのメリットとデメリットを紹介します。

メリット

豊富なディストリビューション

Linuxには、多くのディストリビューションが存在しています。
ディストリビューションとは、必要な機能をパッケージ化しているサービスのことです。
主にRed Hatなどが有名で、その他にも多くの企業がディストリビューションを提供しています。
ディストリビューションは有料であることが多いです。

軽量で動作が高速

Linuxは、WindowsやMac OSなどの他のオペレーティングシステムよりも軽量で高速に利用できます。
個人用の小規模なコンピュータシステムにも利用することができ、自身のPCで構築して学習することができます。

コストフリー

Linuxは、導入や運用にコストがかからないため企業の他にも個人用の開発環境としても利用できます。
学習するときに一番考えることは費用面だと思いますが、Linuxを使用する際はそのようなことを考える必要はありません。
たくさん触って、壊して、直して、運用して、改善する作業を繰り返しましょう。

デメリット

自己解決が必要

LinuxはオープンソースのOSであるため、何かトラブルがあった際は自己解決しなければいけません。
周辺機器が動作しなかったり、ソフトウェアが停止したりするケースがあると思います。
その際には、自身で解決方法を調べて状況に応じて対処しなければならない必要があります。

ソフトウェアのサポートが限定される

Linuxは、WindowsやMac OSなどと比べて利用可能なソフトウェアのサポートが制限されています。
購入したソフトウェアが使えなかったり、ゲームなどのコンテンツも一部利用不可だったりします。
ソフトウェアを利用する際は対応可能なOSを必ず見てから使用するようにしましょう。

学習時間が多い

Linuxは、自由なカスタマイズが可能なぶん学習時間が多くなる傾向があります。
初心者にとっては、専門用語が数多く出てきて一番苦労するところかもしれません。
しかし、乗り越えれば自分の好きなOSを作成することができるので、時間をかけて学習する価値はあります。

Linuxを普段使いする方法

Linuxを普段使いする人にはディストリビューションの利用をおすすめします。
ディストリビューションには普段使いするための機能が備わっており、開発をすぐに始めることができます。
以下では、おすすめのディストリビューションを３つ紹介いたします。

Linuxの基本的なコマンド３選

Linuxではコマンドを入力することでコンピュータに操作を命令することができます。
Linuxの基本的なコマンドを３選紹介します。

まとめ

今回はLinuxを初心者向けにわかりやすくまとめました。
Linuxを普段使いするためにはディストリビューションの利用が推奨されます。
あなたも無料のOSを自分なりにカスタマイズしてOSの仕組みを勉強していきましょう。

ペン子

HTMLの改行の仕方ってどうやるんだろう？

brタグとかよく聞くけど…。

こんな悩みをもっている初心者の方が多いかと思います。
今回はそんな悩みを解消するためにbrタグによる改行の仕方や属性についてまとめました。
brタグの仕組みを理解して、HTMLファイルでいつでも改行できるようになりましょう。

HTMLのbrタグとは

HTMLのbrタグとは、HTML文書のテキストを改行するために使うHTMLタグのことです。
「break」の略称で、brタグを記述すればどんなに途中の文章でも改行することができます。
HTML文書の中ではエンターキーによる改行は無視されるため、改行するには一般的にはこのbrタグを使うことが多いです。
例えば、web ページの文章のなかで、「しかし」などの接続詞が入る場合があります。
このような文章の中で主張が変わったり、主張の説明を追加で入れたいときに便利なのがこのbrタグです。
brタグを使うには<br>とHTML文書にマークアップして記述します。
一般的に、<>で囲まれたものをタグといいます。

HTMLのbrタグで改行する方法

HTML文書の中でbrタグが使われるシーンには以下のような場合があります。

ひとまとまりの文章の中で改行を入れたい場合

<p>こんにちは。<br>私はユキです。</p>

brタグは、上記のように内容が変わらない同じ文章で改行を入れたい場合によく使われます。
主にpタグの中で使用されます。

リスト以外の短い文章を複数記述したい場合

<p>
氏名：○○<br>
性別：○○
</p>

brタグは、上記のようなリスト以外の短い文章を改行するときに役立ちます。
しかし、項目が多くなってきた場合は別のアプローチを考えたほうがいいでしょう。

HTMLのbrタグを使用するうえでの注意点

HTML文書の中でbrタグを使用する場合はいくつか注意点があります。
この章では注意したほうがいいことを３つ紹介します。

段落としてbrタグを使用する

HTML文書の中でbrタグを使用するときは段落としての使用はやめましょう。

段落として利用する場合はpタグを使用するのが一般的です。
理由は、brタグで改行しようとすると空白行が挿入されないからです。
長い文章でそのようなことが起こってしまうと、ユーザーにとって読みにくい文章になってしまいます。
ユーザビリティの低下に繋がってしまうので気をつけましょう。

brタグの連続使用

HTML文書の中でbrタグを使用するときは、一つのブロックでの連続使用は控えましょう。

一つのブロックで連続で使用してしまうと、開発者にとってコードが読みにくくなり、コンテンツの区別がつきにくくなってしまいます。
コードが長くなってくると、修正を加えたいときに時間がかかってしまうためbrタグの連続使用は推奨されません。

CSSの代わりとしてbrタグをデザインに活用する

CSSの代わりにbrタグでデザインを調節するのは推奨されません。

HTMLはあくまで文書をマークアップするための言語で、デザインに活用するための言語ではありません。
基本的な属性によってある程度の調整はできますが、基本的にはデザインはスタイルシート言語であるCSSに任せましょう。

HTMLのbrタグの属性

この章では現在のHTMLのバージョンで使われているbrタグの属性について紹介します。

HTML 4.01以前までは、clear属性がありましたが、HTML 4.01以降の現在はclear属性は非推奨になっています。
バージョンが「HTML Living Standard」になった現在では、brタグで使用できる属性はありません。

HTMLのbrタグ以外の改行する方法

この章ではbrタグ以外で改行できる方法を紹介します。
改行できるといっても、用途が違うため必要な場面で使えるようになってください。

pタグ

HTML文書の中で使わるpタグは、段落を表現するために利用されるタグです。
使用頻度が高く、HTMLの中で一番利用されるタグとなります。

preタグ

HTML文書の中で使われるpreタグは、HTMLで整形済みテキストを利用した場合に使用されるタグです。
絵文字の表現や、ファイル内の表現をそのままwebページに再現したい場合に使用されます。

divタグ

HTML文書の中で使わるdivタグは、コンテンツをひとまとめにして、各コンテンツごとに明確に区切るために利用されるタグです。
CSSでコンテンツごとにデザインを活用したい場合などに便利です。

まとめ

今回はbrタグによる改行の仕方や属性についてまとめました。
文章の途中で改行を入れたい場合は、pタグよりもbrタグを利用したほうがHTMLでのマークアップを直感的に利用できます。
HTML文書の中でbrタグを使いこなして改行マスターになりましょう。

ペン子

JavaScriptってどんなプログラミング言語なんだろう.。

開発にどうやって使うのかな。

こんな悩みをもっている初心者の方が多いかと思います。
今回はそんな悩みを解消するためにJavaScriptについて初心者でもわかるように簡単にわかりやすくまとめました。
JavaScriptの仕組を理解して、JavaScriptを使って開発ができるようにしていきましょう！

JavaScriptとは

JavaScript（ジャバスクリプト）は、HTML/CSSなどで記述したWebページを動的な処理で動かしたり、Web上のゲームなどのWebアプリケーション開発に使用されるプログラミング言語です。
一般的にはJavaScriptはフロントエンドのプログラミング言語と呼ばれ、JavaScriptで開発することをフロントエンド開発といいます。
フロントエンドとはユーザー側が閲覧できるWebページ上などのことで、このWebページを開発する言語がHTMLやCSSです
HTML/CSSとともにWeb開発するうえでは必須の技術であるため、ITエンジニアを目指している人は基本ぐらいは覚えておかなければならないプログラミング言語です。
また、JavaScriptはデスクトップのアプリケーションだけでなく、携帯で操作ができるモバイルアプリケーションの開発にも利用できるため、モバイルにも対応できるようにコードを書く必要がある時もあります。

JavaScriptの基礎

JavaScriptの基礎的な構文を紹介します。
JavaScriptには変数や条件分岐などのプログラミング言語として基礎的な構文が用意されています。
関数という処理を一つの処理をまとめたもの、テキストフォームの入力チェックなど初心者には理解しにくい構文もたくさんあります。
これらの基礎的な構文を使えるようになると、様々な理想的な機能を実現することができます。
JavaScriptは、他の数あるプログラミング言語と比べて比較的学習のしやすい言語です。
参考書も数多くあり、参考になる情報もWeb上にたくさん転がっているため実装したい機能がある場合は積極的に情報を探しに行きましょう。

定数

// 定数の宣言
const message = "JavaScript";
// 定数の参照
console.log(message);

JavaScriptでは、値を格納するための定数を宣言できます。
定数に格納した値は書き換えることができません。
値を間違えて書き換えてバグを起こさないようにするのに便利です。

変数

// 変数の宣言
let message = "初心者でも簡単にわかりやすくJavaScriptを解説";
// 変数の参照
console.log(message);

JavaScriptでは、値を格納するための変数を宣言できます。
変数に格納した値はいつでも更新することができます。
値を定義したけど後で値を書き換えて使いたいという場合に便利です。

条件分岐

let count = 5;
if (count < 5) { console.log("カウントが5未満です");
} else { console.log("カウントが5以上です");
}

JavaScriptでは条件分岐を使って変数が違うときに場合分けをすることができます。
ある特定の条件で別々の処理をさせたい場合などに便利です。

繰り返し処理

for (let i = 0; i < 5; i++) { console.log(i + "回目");
}

for文を使って繰り返しの処理をすることができます。
同じ処理を何回も書くことがなく、コードの冗長化を防ぎます。
リストから値を取り出す場合などの時に便利です。

JavaScriptの応用技術

JavaScriptはフロントエンド開発で使う言語ですが、最近ではサーバーサイドでの開発でも使うプロジェクトが増えてきました。
Node.jsという実行環境によって、JavaScriptだけでフロントエンドもサーバーサイドも利用できるようになります。
ここでは代表的なJavaScriptの応用的な技術を3つ紹介します。

JavaScriptの始め方

JavaScriptを始めるためには基礎から学ぶことが最も重要でしょう。
前の章でも紹介した技術は基礎を使いこなせることで最大限に利用することができます。
フレームワークなどを使う前に、まずは徹底的に情報収集することをおすすめします。

以下では、効果的にJavaScriptを始める方法について紹介します。

JavaScriptの基本的な使い方

この章では、JavaScriptでアプリケーションを開発するうえでの基本的な使い方について解説します。

HTMLファイルを作成する

まず一番最初に始めることはHTMLファイルの作成です。
JavaScriptを使い始めるには、テキストエディタでファイルを作成し、そこにコードを書き込んでいきます。

<!DOCTYPE html>
<html>
<head>	<title>JavaScriptの始め方</title>
</head>
<body>	<h1>JavaScriptの始め方</h1>
</body>
</html>

JavaScriptコードをHTMLファイル内に記述する

HTMLファイルを作成したらbodyタグ内にJavaScriptコードを記述していきます。
bodyタグ内scriptタグを記載し、その中にJavaScriptコードをどんどん書き込みます。
こうすることにより、一つのファイルでHTMLファイルと連動させて使用することができます。

<!DOCTYPE html>
<html>
<head>	<title>JavaScriptの始め方</title>
</head>
<body>	<h1>JavaScriptの始め方</h1>	<script>	// JavaScriptのコードを記述する	</script>
</body>
</html>

外部ファイルからJavaScriptを読み込んで使用する

開発の規模が大きくなると、たくさんのJavaScriptコードを書かなければいけません。
こうなると、一つのファイル内でJavaScriptのコードを書くと冗長化してしまうため、基本的には外部ファイルを読み込んで使用します。

<!DOCTYPE html>
<html>
<head>	<title>JavaScriptの始め方</title>
　　　　<script src="main.js"></script>
</head>
<body>	<h1>JavaScriptの始め方</h1>
</body>
</html>

function hello() {	alert('Hello, World!');
}

ライブラリやフレームワークを活用してJavaScript開発をする

企業でJavaScriptを使って開発する場合は、フレームワークを使うのが一般的です。
フレームワークを活用することで共通化している処理は自分で新しく書く必要がなくなり、コードを書く時間が短縮されます。

詳細はこちらから

2022年7月23日 HTMLはVue.jsでも使う？覚えるべきフレームワークで使い方を知ろう！

最新のJavaScriptトピック

この章では、JavaScriptの最新の機能やトピックについて紹介します。
JavaScriptは常にアップデートは重ねており、最新機能も随時追加されるため定期的なチェックが必要です。
2023年現在の最新のトピックは以下のようなものがあります。

まとめ

今回はJavaScriptについて初心者でもわかるように簡単にわかりやすくまとめました。
JavaScriptはフロントエンド開発をする際には必須のプログラミング言語です。
JavaScriptを学んでユーザーが喜ぶような機能を開発できるようになりましょう。

ペン子

クラウドコンピューティングサービスってなんだろう。

最近よく聞くからわかりやすく教えてほしいな。

こんな悩みをもっている初心者の方が多いかと思います。
今回はそんな悩みを解消するためにクラウドコンピューティングサービスについて代表例を用いながらわかりやすくまとめました。
クラウドコンピューティングのサービスを覚えながら、導入する際のメリットを理解していきましょう！

クラウドコンピューティングとは

クラウドコンピューティングとは、インターネットを通して様々なITリソースを必要な時に柔軟に利用することができるサービスです。
主にクラウドコンピューティングは「クラウド」と呼ばれることが多く、場合によってはクラウドサービスとも呼ばれますがすべて同じ意味をもっています。
オンデマンド（必要な時に必要な分だけ）で利用できるため、需要に応じたITリソースにアクセスすることができ、コスト削減にもつながります。
従来では、必要な分を予想して社内にコンピューティングを設置すること（オンプレミス）が一般的でした。
この場合、使わないリソースが発生した場合にコストの無駄になってしまいます。
また、メンテナンス作業や多額の初期投資なども発生してしまい設置して使えるようになるまで時間がかかってしまいます。
クラウドコンピューティングはそのようなデメリットをほとんどすべて解消してしまうサービスです。
自分たちでやる必要のない設定はクラウドコンピューティングを提供している企業がやってくれて、自分たちで柔軟に構築したいところだけできるようになります。
これにより、人的リソースや多額の資金面を解消できるため、余ったリソースを自社の必要な業務に割り当てることができます。
クラウドコンピューティングを導入することで自社内の生産性が上がり、他のライバル企業との競争において優位に立つことができるでしょう。

クラウドコンピューティングを使うメリット

この章ではクラウドコンピューティングを導入することによって得られる３つのメリットについて解説します。

コスト最適化

クラウドコンピューティングのサービスを導入することにより、コストを限りなく最適化することができます。
従来のオンプレミスによるコンピューティングは、変動費はランニングコストだけですが導入に多額の初期投資を必要とします。
資金だけではなく、人的リソースやメンテナンス作業による工数もとられるため運用に大きなリスクを伴います。
それに比べて、クラウドコンピューティングは必要な時に必要な分だけ使う、変動コストを抑えた運用が可能です。
もし、クラウドコンピューティングを導入したサービスが終了した場合も、運用を停止すれば追加費用はかからないためリスクを最小限にまで抑えることができます。

自由なキャパシティ調整

ユーザーのアクセスが急な増減をした場合においても必要に応じてキャパシティを調整できる点も魅力です。
従来のオンプレミスのように必要となるキャパシティを予想して導入してしまうと、アクセスが突然減ったときに無駄なリソースが発生して高額なコストが無駄になってしまいます。
反対に、急激にアクセスが増加し、予想したキャパシティよりも大幅に超えてしまったらサーバーダウンになってしまい、サービスが停止になってしまう危険性もあります。
クラウドコンピューティングならスケールアップ・スケールダウン・スケールアウト・スケールインを必要に応じて行うことができるため、このような危険性を排除することができるようになっています。

導入速度の向上

クラウドコンピューティングは迅速な導入を可能にしています。
ITリソースが追加で必要になったときに設定をするだけで最短数分で導入ができるという魅力をもっています。
従来のオンプレミスでは、追加の導入が発生した場合に何週間もかかることが一般的でした。
この待っている時間のうちに他の企業が同様のサービスを展開してしまうということがよくあります。
クラウドコンピューティングなら、追加導入が決まった際にすぐに実装できるので他社に機会創出を奪われるという危険性も最小減に抑えられます。

代表的なクラウドコンピューティングの種類

この章ではクラウドコンピューティングの種類を３つ紹介します。
すべてのクラウドコンピューティングサービスはこの３つのどれかに当てはまります。

IaaS（Infrastructure as a Service）

IaaS （Infrastructure as a Service） はインフラのほとんどを提供しているサービスです。
仮想マシン・ネットワーク・ストレージなど様々な領域のものを提供しています。
IaaS は、インフラを構築するうえで柔軟に開発者が設定できる点が魅力といえます。
サービス提供側の管理体制もととのっており、トラブルが起きた際に問い合わせることも可能です。
自身が構築したいサービスを最も柔軟に決めることができるクラウドコンピューティングとなっています。

Paas（Platform as a Service）

Paas（Platform as a Service）は、基本的なインフラをサービス提供者側が管理しているプラットフォームサービスです。
ハードウェアやネットワーク、オペレーティングシステムなどを開発者が設定する必要がなく、自身のアプリケーション開発に集中することができます。
メンテナンス作業などの無駄な工数を削減することができるため、導入すると業務スピードが飛躍的に向上します。

SaaS（Software as a Service）

SaaS（Software as a Service）は、企業が完成したソフトウェアを提供しているサービスとなっています。
これを導入するとインフラの構築、メンテナンス作業、アプリケーション開発をする必要がなく、やることは提供されたソフトウェアの使い方を学ぶだけになります。
みなさんが使っているMicrosoft製品（WordやExcelなど）やWeb会議でよく使用されるZoomもこれにあたります。
導入したらすぐにサービスを使うことができるため、余計なことを考える必要がなくなります。

クラウドコンピューティングサービスの代表例

この章ではクラウドコンピューティングサービスの代表例３つを紹介します。
下記のものは一般的に「世界３大クラウドサービス」と呼ばれてます。

AWS（Amazon Web Services）

AWS（Amazon Web Services）は、Amazonが運営しているクラウドコンピューティングサービスです。
世界３大クラウドサービスの中でNo.1のシェアをほこっています。
導入している企業も多く、クラウドコンピューティングを使ってみたい人はまずはこのサービスを使えば間違いないでしょう。
UI（ユーザーインターフェース）にも優れており、初心者でもわかりやすくサービスが記載されています。

GCP（Google Cloud Platform） 

GCP（Google Cloud Platform）は、Googleが運営しているクラウドコンピューティングサービスです。
基盤となるインフラ構築が可能で、だれでも使用することができます。
Google MapなどのGoogleの製品と関連づけられているため、GoogleのAPIを使って開発を行いたいときに便利です。
今なら初回クレジット$300がもらえるので、ほとんどの機能を試しに使ってみることができます。

詳細はこちらから

2023年3月1日 GCPとは？仕組みや使い方を理解しよう【2023年最新版】

Azure（Microsoft Azure）

Azure（Microsoft Azure）は、Microsoftが運営しているクラウドコンピューティングサービスです。
AWSやGCPなどと同じく、基盤構築を簡単に行うことができます。
WindowsなどのMicrosoft製品などと関連性が強く、Microsoft製品を使用して開発を進めたい人には強いメリットがあるサービスです。

まとめ

今回はクラウドコンピューティングサービスについて代表例を用いながらまとめました。
クラウドコンピューティングは導入することによって、コスト最適化などの多数のメリットをもっています。
ぜひあなたも導入してみて実際に数々のメリットを体験してみてください。

ペン子

基本情報技術者試験ってなんだろう。

よく聞くから詳しく知りたいな。

こんな悩みをもっている初心者の方が多いかと思います。
今回はそんな悩みを解消するために基本情報技術者試験についてまとめました。
基本情報技術者試験の内容をを知り、人気のIT・情報系資格を取得しましょう！

基本情報技術者試験（FE）とは

基本情報技術者試験（FE）とは、ITエンジニアとしての基礎知識を問われるITエンジニアの登竜門といわれる試験です。
IT・情報処理系の国家試験として長い歴史をもつIPAが提供しています。
この試験を学習することにより、ITに関する基礎的な知識がつき、そのあとの応用的な技術も身に着けやすくなります。
今後、ITに関するサービスの開発やIT製品の営業などに携わる予定のある人を対象としており、基本的な情報知識・技能をあわせもった人材に成長していくために必要な試験といえます。

基本情報技術者試験の概要

この章では基本情報技術者試験の主な概要について解説します。

申込方法

申し込みはIPAの公式ページからできます。
申し込み受付開始日と試験開始日が掲載されているため、試験日程が近づいてきたらチェックするようにしましょう。

こちらのURLから申し込みをすることができます。
【IPA基本情報技術者試験申し込みページ】

試験日程

以前までは上半期と下半期に分けての２回しかありませんでしたが、2023年4月からCBT方式（通年）での実施にへんこうされました。

自身の受験したいときに試験に挑戦することができるため、常に忙しい人でも時間の合間をぬって受験することができるようになりました。
試験が迫ってきたけど十分な準備ができていなくてあせる必要がなく、どんな人でも余裕を持つことができます。

試験概要

基本情報技術者試験の対策方法

この章では基本情報技術者試験の主な対策方法について解説します。

科目A試験（旧午前試験）

基本情報技術者試験の科目A試験（旧午前試験）の対策方法は、主に過去問練習になります。

過去問練習をすることによって、今までの問題の傾向がわかるようになり、同じ傾向の問題を何回も繰り返し解くことで脳内にインプットされるようになります。
時間に余裕があれば、一夜漬けのような短期記憶をするのではなく、これからインプットされたIT知識を生かすためにも長期記憶になるように練習しましょう。
具体的には、10年分の過去問を解くと十分な練習量といえます。
過去問練習が終わり、余裕が出てきた人は様々な参考書に掲載されている予想問題集も解いてみましょう。
今までの傾向を企業が分析して問題を作っているため、出題される可能性が高いです。

科目B試験（旧午後試験）

基本情報技術者試験の科目A試験（旧午前試験）の対策方法は、科目A試験と同じ過去問練習と解きやすい選択科目を選ぶことです。

科目B試験も過去問練習をすることによって、傾向を掴むことができ、どんな問題がきても余裕の構えで受けることができます。
しかし、それだけでは科目B試験は一筋縄ではいきません。
問題量がとてつもなく多く、問題も科目A試験とは違って、まったく同じものが出ることは少ないです。
そのため、適切な分野選択が大事となってきます。
幸いにも科目B試験は15の分野の中から5分野選択する方式をとっています。
自分にとって一番解きやすい分野を選ぶことが合格への近道です。

詳細はこちらから

2022年10月29日 基本情報技術者試験の午後選択はどれを選ぶ？おすすめの勉強しやすいカテゴリを紹介【基本情報技術者編】

基本情報技術者試験の参考書・過去問題集

基本情報技術者試験の参考書・過去問題集はたくさんありあります。
いくつも買う必要はないので気に入ったものを一つ手に入れて、使い倒しましょう。

基本情報技術者試験の過去問で勉強する最も効果的な方法は、数回繰り返すことと解説をしっかり理解することです。
人間は一回だけ勉強してもそれを長く覚えておくことはできません。
よっぽどの天才でない限り不可能でしょう。
全然解説の意味がわからなくても、まずは回数をこなすことが大切です。
回数をこなしたら理解できるようになっていると思うので、自分で内容の意味を咀嚼しながら過去問を解くようにシフトしましょう。

おすすめの過去問については他の記事で詳しく解説しています。

詳細はこちらから

2023年2月4日 基本情報技術者試験の午後の過去問はどれがおすすめ？選び方と特徴を紹介【基本情報編】

まとめ

今回は基本情報技術者試験についてまとめました。
基本情報技術者試験はITエンジニアへの登竜門を抜けるために必要な国家資格です。
ぜひ合格を目指してITエンジニアへのキャリアの一歩を踏めるようになりましょう。

ペン子

Amazon VPCを構築したいけど、やり方がわからない…。

どうやって進めればいいのか教えてほしいな。

こんな悩みをもっている初心者の方が多いかと思います。
今回はそんな悩みを解消するためにAmazon VPCについてまとめました。
Amazon VPCの仕組をを知り、AWSでネットワークを構築していきましょう！

Amazon VPCとは

Amazon VPC（Amazon Virtual Private Cloud）は、AWS（Amazon Web Services）のクラウドコンピューティングサービスです。
AWSのネットワーク関連のサービスの一つで、ユーザーが独自の仮想ネットワークをAWS内に構築し、そのネットワーク上で仮想マシンやサービスを実行できるようにします。
Amazon VPCを使用すると、AWS内の仮想ネットワーク内に以下のようなものを設定できます。

上記のようなものを使って、独自の仮想プライベートクラウドを構築できます。

他にも、Amazon VPCはオンプレミスのデータセンターや他のクラウドプロバイダーとVPN接続を確立することができたり、
ハイブリッドクラウド環境を構築することができたりします。
このように、Amazon VPCは、セキュリティと可用性を高めたクラウドネットワークを構築するための重要なサービスとして確立しています。

Amazon VPCの仕組み

この章では、Amazon VPの仕組みについていくつか解説します。
下記に主な仕組みを５つあげます。

これらの仕組みにより、AWS上のリソースを安全かつ効率的に利用することができるようになります。

Amazon VPCの使い方

この章ではAmazon VPCの使い方について解説します。
Amazon VPCは主に下記のような使い方ができます。

Amazon VPCのメリットとデメリット

この章ではAmazaon VPCの主なメリット・デメリットを紹介します。

メリット

Amazon VPCのメリットには以下のようなものがあります。

デメリット

Amazon VPCのデメリットには以下のようなものがあります。

Amazon VPCできること

この章ではAmazaon VPCの主なできることを紹介します。
下記に３つの代表的なものを簡単に解説します。

Amazon VPCのネットワーク構成

この章ではAmazon VPCの主なネットワーク構成を紹介します。
代表的なネットワーク構成を３つ簡単に解説します。

Amazon VPCのセキュリティ

この章ではAmazon VPCのセキュリティについて解説します。
Amazon VPCにおけるセキュリティに関するポイントを３つ紹介します。

Amazon VPCの利用料金

Amazon VPCの利用料金は以下のように決定されています。

これらがAmazon VPCの主な利用料金となります。
しかし、AWSの料金体系は複雑であるため、詳しい料金説明はAWSの料金ページを再度確認することをおすすめします。

まとめ

今回はAmazon VPCについてまとめました。
Amazon VPCを使用して、あなた独自の仮想ネットワークをAWS内に構築してみましょう。

ペン子

GCPを始めたいけど、やり方がわからない。

どうやって進めればいいのか教えてほしいな。

こんな悩みをもっている初心者の方が多いかと思います。
今回はそんな悩みを解消するためにGCPについてまとめました。
GCPの仕組みを知り、実際に使ってみてインフラを構築していきましょう！

GCPとは

GCP (Google Cloud Platform) は、Googleが提供するクラウドコンピューティングプラットフォームサービスです。
Googleと同じインフラストラクチャでアプリケーション、Webサイト、サービスを構築、導入、拡大することができます。
GCPは、コンピューティング、ストレージ、ネットワーキング、データベース、分析、人工知能、開発ツール、セキュリティなどの様々な機能を提供しています。
これらの機能を構築することにより、IT企業のサービスの提供者は、インフラストラクチャ上で動く、機能の開発により注力することができます。
世界中の企業や組織がビジネスの要件に応じてスケーリングしやすい柔軟なクラウドインフラストラクチャを提供することで、ビジネスの成長を促進することがGCPの目的です。

GCPできること

GCP (Google Cloud Platform) でできることは、多岐にわたります。
主に以下のようなことが可能です。

これらのように、GCPは多くのクラウドサービスを構築することで、システムの要件に応じてスケーリングしやすい柔軟なクラウドインフラストラクチャを提供できます。

GCPメリット・デメリット

この章ではGCPの主なメリット・デメリットを紹介します。

メリット

GCPの様々なサービスの効果により、メリットが多数あります。
主なメリット以下のようになっています。

デメリット

GCPは多くのメリットを提供する一方で、いくつかのデメリットもあります。
主なデメリットは以下のようになっています。

これらの問題は、適切な計画や設計・管理をすることで最低限の軽減をすることができます。

GCPの主なサービス

Google Cloud Platform（GCP）は、Googleが提供するクラウドコンピューティングサービスの統合プラットフォームであり、多数のサービスを提供しています。
GCPの主なサービスには以下のようなものがあります。

これらの他にもGCPには多数の便利なサービスがあります。
それぞれのサービスは異なる機能を提供しており、構築したいシステムに応じて柔軟に選択することができます。

GCPの始め方

この章ではGCPの始め方を簡単に紹介します。
GCPを始めるためには、以下の手順に従うことができます。

これらが、GCPを始めるための基本的な手順となります。
初心者の場合は、公式のチュートリアルやクイックスタートガイドなどを活用することをおすすめします。

GCPの使い方

この章ではGCPの主な使い方を紹介します。
以下にGCPの基本的な使い方を三つあげました。

これらが、GCPの基本的な使い方になります。
初心者の方で初めてGCPを利用する場合は、まずは初回無料枠を利用して軽く触っていきましょう。

まとめ

今回はGCPについてまとめました。
GCPを利用することでスケーラブルなインフラ構築ができるようになります。
Googleサービスとも連携しているため、GoogleのAPIを利用したい人は積極的に使っていきましょう。

ペン子

インフラの勉強し始めたらインフラストラクチャって用語が出てきた。

AWSやGCPの勉強進めたいからどんなものか教えてほしいな。

こんな悩みをもっている初心者の方が多いかと思います。
今回はそんな悩みを解消するためにインフラストラクチャについてまとめました。
インフラストラクチャとは何かを知り、システムの基盤を構築していきましょう！

インフラストラクチャとは

インフラストラクチャ（Infrastructure）とはインフラの正式名称です。
インフラだけよく聞く人もいるかもしれませんが、安心してくさい。正確な文字列になっただけです。

ITの分野でのインフラストラクチャは、システムの根幹を支えるために必要な基盤となる設備やシステムのことを指します。
具体的には、サービスを稼働させる際に必要なサーバやインターネットなどに通信するための回線などのことを言います。

下記にITインフラストラクチャとして例として上げられるものを書きに記します。

企業や組織は情報システムを運用するためにインフラストラクチャを必ず構築しています。
これをすることにより、業務の効率化やコスト削減を可能にしてくれるため、インフラストラクチャを構築するインフラエンジニアの需要は年々上昇しています。
2023年現在はインターネットやクラウドコンピューティングなどの技術革新が急速に進んでおり、セキュリティの保護やビジネスの拡大などのために重要な役割ももった基盤技術となっています。

各インフラストラクチャの解説

ここでは前章のリストに上げた各インフラストラクチャの解説をします。

サーバ

サーバとは、ネットワーク上でクライアントからの要求に応じたサービスを提供するコンピューターのことです。
サーバはハードウェアやソフトウェアの両方から構成されます。
ハードウェア側はCPUやメモリなどの処理やデータを保存するための物理機器です。
一方、ソフトウェア側はオペレーティングシステムやアプリケーションソフトウェアを提供するプログラムのことを指します。

オペレーティングシステム（OS）

オペレーティングシステム（OS）とは、コンピューターシステムの基盤となるソフトウェアのシステムのことです。
OSは、ハードウェアやアプリケーションソフトウェアなど、コンピューターシステムの構成要素を管理するためのプログラムであり、コンピューターシステムを操作するためのインタフェースを提供します。
OSには、Windows、macOS、Linuxなど様々な種類があります。

ミドルウェア

ミドルウェアとは、コンピューターシステムにおいて、アプリケーションソフトウェアとオペレーティングシステムの間で動作するソフトウェアのことです。
ミドルウェアはオペレーティングシステムとアプリケーションソフトウェアの橋渡しをする役割をもっています。

ミドルウェアの例としてあげられるのがデータベース、Webサーバー、アプリケーションサーバー、メッセージングシステム、コンテンツ管理システムなどです。
これらのソフトウェアは、オペレーティングシステム（OS）とアプリケーションソフトウェアの間で、データや処理の中継、共有、制御を行います。

ネットワーク機器

ネットワーク機器とは、コンピューターネットワークを構成するための機器のことです。
代表的なネットワーク機器は以下のようなものがあります。

ネットワークの構築や運用に必要不可欠な役割をもっています。

データベース

データベースとは、複数のユーザーが共有するデータの集合を蓄積して効率的に管理するための仕組みです。
代表的なデータベース製品には以下のようなものがあります。

データベースはインフラストラクチャの一つとしてなくてはならないものとなっています。

インフラストラクチャをを使用した代表的なサービス

インフラストラクチャを使用したサービスには以下のようなものがあります。

IaaS（Infrastructure as a Service）

IaaSとは、「Infrastructure as a Service」の略称です。
クラウドコンピューティングにおけるサービスモデルの一つとなっていて、インフラ機能だけを利用できるサービスのことをいいます。
IaaSは、「仮想マシン・ストレージ・ネットワーク」などのインフラストラクチャを提供するためのプラットフォームをクラウド上で提供しています。
こうすることによって、ユーザーは自分たちでサーバーやハードウェアを所有しなくても必要なリソースを必要になったときにクラウド上から利用することができます。
IaaSを利用することで、企業はITインフラストラクチャのコストを削減し、スケーラビリティと柔軟性を向上させることができます。

代表的なIaaSには以下のようなものがあります。

Amazon Web Services（AWS）

Amazon Web Services（AWS）は、Amazon.comが提供するクラウドコンピューティングプラットフォームです。

Microsoft Azure（Azure）

Microsoft Azure（Azure）は、マイクロソフトが提供するクラウドコンピューティングプラットフォームです。

Google Cloud Platform（GCP)

Google Cloud Platform（GCP）は、Googleが提供するクラウドコンピューティングプラットフォームです。
GCPは、Googleのエコシステムに統合されており、Google WorkspaceやGoogle Cloud AI Platformなどの製品との連携も行えます。

これらを利用することで、企業や個人が必要なコンピューティングリソースをオンデマンドで利用することができます。
現在は、AWSがNo.1のシェアを保有しています。

PaaS（Platform as a Service）

PaaSとは、「Platform as a Service」の略称です。
クラウドコンピューティングにおけるサービスモデルの一つとなっおり、「データベース・ミドルウェア・アプリケーションの実行環境」などを提供するためのプラットフォームをクラウド上で提供します。
こうすることによって、ユーザーは自分たちでインフラストラクチャやプラットフォームを構築する必要がなくなります。
アプリケーション開発に必要なリソースを必要となったときにクラウド上から利用することができます。

代表的なPaaSには以下のようなものがあります。

Heroku

Heroku（ヘロク）は、クラウド上でWebアプリケーションを開発・デプロイするためのPaaSです。
スケールアップ・スケールダウン・スケールアウト・スケールインを容易に行うことができます。

Google App Engine

Google App Engine（GAE）は、Googleが提供するPaaSです。
開発者がWebアプリケーションを簡単に構築、デプロイ、スケールアップできるようにするためのプラットフォームになります。
GAEは、Python、Java、Go、PHPなどのプログラミング言語に対応しているため、汎用性があります。
Google Cloud Platform（GCP）の一部であるため、GCPの他のサービスと連携することができます。

Microsoft Azure App Service

Microsoft Azure App Serviceは、Azure上で動作するPaaS（Platform as a Service）です。
開発者が簡単にWebアプリケーションやモバイルアプリケーションを構築、デプロイ、スケールアップすることができるようにするためのプラットフォームになります。
Azureの一部であるため、他のAzureのサービスと連携するができます。

SaaS（Software as a Service）

SaaSとは、「Software as a Service」の略称です。
クラウドコンピューティングにおけるサービスモデルの一つで、ソフトウェアアプリケーションをクラウド上から提供するためのプラットフォームを提供します。
こうすることによって、ユーザーは自分たちでソフトウェアを購入またはインストールする必要がなくなります。
機能にアクセスするために必要なリソースを必要なときにクラウド上からいつでも利用することが可能になっています。

SaaSを利用することで、ユーザーはソフトウェアの購入やインストール、保守などにかかるコストを削減することができます。
また、自動更新やバックアップなどの機能も提供していることが多いため、自分でこれらのめんどくさい作業を行う必要がありません。

代表的なSaaSサービスには以下のようなものがあります。

Salesforce

Salesforceは、企業が顧客との関係を管理するために必要な機能を提供し、営業、カスタマーサポート、マーケティング、eコマースなどの業務プロセスをサポートします。
主な製品として、Sales Cloud、Service Cloud、Marketing Cloud、Commerce Cloud、Analytics Cloudなどの製品を提供しておりがあります。

Microsoft 365

Microsoft 365（旧称Office 365）は、Microsoftが提供するクラウドベースのビジネス向けプロダクティビティスイートです。
従来のMicrosoft Officeアプリケーション（Word、Excel、PowerPoint、Outlook、Accessなど）に加え、クラウドベースのアプリケーションやサービスを提供しています。

Zoom

Zoomは、ビデオ会議やウェビナーなどのオンラインコミュニケーションを提供するクラウドベースのプラットフォームです。
ユーザーは、Zoomを使用して、ビデオ会議、音声通話、チャット、画面共有、ファイル共有などを行うことができます。

Slack

Slackは、ビジネスでのコミュニケーションを効率化するために設計されたチャットツールです。
Slackを使用すると、チームメンバーがリアルタイムでチャットやファイル共有を行うことができ、コミュニケーションの効率化に役立ちます。

コンテンツ配信サービス（CDN）

CDN（Content Delivery Network）を利用して、ユーザーにコンテンツを高速かつ安定的に配信するサービスです。
代表的なコンテンツ配信サービスには以下のようなものがあります。

Akamai

Akamaiは、世界中の企業がインターネット上で高速で安全なウェブ体験を提供するために利用することができる、クラウドベースのサービスを提供しています。
2023年現在では、世界中のトップ企業がAkamaiのサービスを利用して、オンラインビジネスを行っています。
AkamaiのCDNは、世界中のサーバーに配信されたコンテンツを最適なルートで配信し、高速なユーザーエクスペリエンスを提供します。

Cloudflare

Cloudflareは、グローバルCDN（コンテンツデリバリーネットワーク）を提供している企業です。
ウェブサイトの読み込み速度を向上させ、トラフィックの負荷を分散することができます。

Fastly

Fastlyは、クラウドベースのCDN（コンテンツデリバリーネットワーク）を提供している企業です。
FastlyのCDNは、スケーラブルで高速なストリーミングメディア配信、安全で高度なDNSサービス、API管理、ロードバランサー、エッジコンピューティングなどの機能を提供しています。

まとめ

今回はインフラストラクチャについてまとめました。
インフラストラクチャを学ぶことでシステムの根幹となる基盤を構築することができるので、積極的にサービスなどを触ってみてください。

ペン子

iframe要素の属性が多すぎて覚えられない。

まとまった情報がほしいな。

こんな悩みをもっている初心者の方が多いかと思います。
今回はそんな悩みを解消するためにiframe要素属性の一覧をまとめました。
HTML5で非推奨が解除されたiframe要素について理解して、HTMLで使えるようになりましょう！

iframe要素とは

iframe要素は、HTML文書内に外部のHTMLページを埋め込むための要素です。
主に以下のような用途に使用されます。

詳細はこちらから

2022年4月4日 iframeとは？HTMLでの使い方・仕組みを解説【2023年最新版】

iframe要素の属性一覧

ここではiframe要素の属性一覧を紹介いたします。

必須属性

上記の属性は、iframe要素を使用する際に必ず使用される属性です。

推奨属性

上記の属性は、iframe要素を使用する際に推奨されている属性です。
必須ではありませんが、追加することでiframe要素を効果的に使用することができます。

非推奨属性

上記の属性は、現在では使用されるべきではないとされています。
iframe要素に関する標準や推奨事項が変化したことにより、これらの属性は非推奨となりました。
一般的にはCSSを使用することが推奨されます。
セキュリティに関する問題があるname属性も非推奨とされました。代わりにid属性を使用することが推奨されます。

src属性

<iframe src="https://example.com"></iframe>

埋め込むコンテンツのURLを指定するための属性です。

上記の例では、src属性に指定したURLのコンテンツを埋め込んでいます。
YoutubeやGoogle Mapなどを埋め込むことができるため、ユーザーに優しいWebページを作ることができます。
また、src属性にはHTTPまたはHTTPSで始まるURLを指定する必要があります。セキュリティ上の理由から、src属性で指定されたコンテンツは、同じドメインからのものである必要があります。
このため、iframe要素を使用して外部のWebページを埋め込む場合は、外部Webページが許可している場合にのものだけ可能です。
外部Webページが許可している場合でも、iframeの使用には十分に検討する時間が必要になります。

allow属性

埋め込まれたコンテンツの機能を制御する属性です。
allow属性は下記のような値をとります。

fullscreen

<iframe src="https://example.com" allow="fullscreen"></iframe>

他のウェブページとのフルスクリーン表示を許可する

autoplay

自動再生を許可する

camaera

ユーザーのカメラへのアクセスを許可する

encrypted-media

暗号化されたメディアの再生を許可する

geolocation

ユーザーの位置情報へのアクセスを許可する

microphone

<iframe src="https://example.com" allow="microphone"></iframe>

ユーザーのマイクへのアクセスを許可する

midi

MIDIデバイスへのアクセスを許可する

payment

オンライン支払い関連の機能を使用するための許可

picture-in-picture

ピクチャーインピクチャーの再生を許可する

allow属性は外部コンテンツのセキュリティに関わるため指定には注意が必要です。

csp属性

埋め込まれたコンテンツがどのようなリソースにアクセスできるかを制御します。
allow属性は下記のような値をとります。

default-src

<iframe src="https://example.com" csp="default-src 'self'"></iframe>

リソースにデフォルトでアクセスできるソースを指定します

上記の例ではウェブサイト自身から提供されるリソースにデフォルトでアクセスできます。

script-src

JavaScriptファイルにアクセスできるソースを指定します。

style-src

スタイルシートファイルにアクセスできるソースを指定します。

img-src

<iframe src="https://example.com" csp="img-src https://example.com"></iframe>

画像ファイルにアクセスできるソースを指定します。

上記の例では画像リソースには「https://example.com」からしかアクセスできないように指定されています。

connect-src

XMLHttpRequestなどのコネクションを開くことができるソースを指定します。

font-src

フォントファイルにアクセスできるソースを指定します。

object-src

object, embed, appletなどのオブジェクトにアクセスできるソースを指定します。

media-src

メディアリソースにアクセスできるソースを指定します。

frame-src

frame要素およびiframe要素にアクセスできるソースを指定します。

child-src

frame-src の後継で、子要素のフレームにアクセスできるソースを指定します。

form-action

フォームの送信先を指定します。

sandbox

サンドボックス内でコンテンツを実行します。

height属性

<iframe src="https://example.com" height="300"></iframe>

height属性は、埋め込まれたコンテンツの高さを指定します。
ピクセル（px）単位で高さを表現することができます。

上記の例では、埋め込まれたコンテンツの高さが300pxに設定されます。
コンテンツの高さがこの値よりも大きい場合は、スクロールバーが表示されることになります。
また、高さが指定した値よりも小さい場合は、埋め込まれたコンテンツの高さに合わせて自動的に要素が縮小されます。

height属性を指定しなかった場合は、埋め込まれたコンテンツの高さに合わせてiframe要素が自動的にサイズを変更します。しかし、埋め込まれたコンテンツが読み込まれる前にiframe要素が表示される場合があり、表示が崩れる可能性があります。 heigt属性を指定したほうが無難に改善できるでしょう。

loading属性

ブラウザがページの読み込みにどのように対応するかを制御します。
loading属性は下記のような値をとります。

eager

ページの読み込み中に、iframe要素内のコンテンツを優先的にダウンロードします。

lazy

<iframe src="https://example.com" loading="lazy"></iframe>

iframe要素内のコンテンツを遅延ダウンロードします。
ページ全体が読み込まれた後に、ブラウザがiframe要素内のコンテンツをダウンロードするため、ページの読み込み時間を短縮することができます。

auto

ブラウザが自動的に最適な方法を選択します。

loading属性を指定しなかった場合は、ブラウザは自動的に最適な方法を選択します。
しかし、すべてのブラウザがloading属性をサポートしているわけではないため、ブラウザのサポート状況に注意する必要があります。

title属性

<iframe src="https://www.example.com" title="example"></iframe>

title属性は、埋め込まれたコンテンツの説明を提供する属性です。
マウスカーソルを要素の上に移動したときに表示されるツールチップに表示されるテキストを指定することができます。
ユーザーがコンテンツを視覚的に把握することができるため、内容を理解するのに役立ちます。

上記の例では、iframe要素が「https://www.example.com」からのコンテンツを埋め込むことを示しています。
title属性には、「example」というテキストが指定されているため、ユーザーがマウスカーソルを要素の上に移動すると、「example」というテキストがブラウザに表示されます。

title属性はiframe要素だけのものではなく、ほとんどのHTML要素で幅広く使用できますが、SEO上の理由で重要なキーワードを含むことが推奨されていません。

width属性

<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" width="400"></iframe>

width属性は、埋め込まれたコンテンツの幅を指定するための属性です。
ピクセル（px）単位で幅を表現することができます。

上記の例では、埋め込まれたコンテンツの幅が560pxに設定されています。
width属性は、ピクセル単位で値を指定する必要があります。
幅が指定した値よりも小さい場合は、埋め込まれたコンテンツの幅に合わせて自動的に要素が縮小されます。

width属性を指定しなかった場合は、埋め込まれたコンテンツの幅に合わせてiframe要素が自動的にサイズを変更します。
しかし、埋め込まれたコンテンツが読み込まれる前にiframe要素が表示される場合があり、表示が崩れる可能性があります。 width属性を指定したほうが無難に改善できるでしょう。

まとめ

今回はiframe要素属性の一覧をまとめました。
iframe要素の属性をしていすることで柔軟に埋め込みコンテンツの機能を使用することができます。
必要に応じて属性を設定していきましょう。