<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>ネットワーク | ビズドットオンライン</title>
	<atom:link href="https://it-biz.online/tag/%E3%83%8D%E3%83%83%E3%83%88%E3%83%AF%E3%83%BC%E3%82%AF/feed/" rel="self" type="application/rss+xml" />
	<link>https://it-biz.online</link>
	<description></description>
	<lastBuildDate>Tue, 26 May 2026 03:09:08 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=7.0</generator>

<image>
	<url>https://it-biz.online/wp-content/uploads/2019/10/cropped-4a332f05ade4ac7bb3c46c472cb5eac8-32x32.png</url>
	<title>ネットワーク | ビズドットオンライン</title>
	<link>https://it-biz.online</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>【IT用語解説】URLとは？ドメインやパスとの違いを初心者向けに解説</title>
		<link>https://it-biz.online/it-skills/url/</link>
		
		<dc:creator><![CDATA[bizonline_admin]]></dc:creator>
		<pubDate>Tue, 26 May 2026 03:09:06 +0000</pubDate>
				<category><![CDATA[IT-Skills]]></category>
		<category><![CDATA[Network]]></category>
		<category><![CDATA[Web開発]]></category>
		<category><![CDATA[ネットワーク]]></category>
		<category><![CDATA[用語解説]]></category>
		<guid isPermaLink="false">https://it-biz.online/?p=11118</guid>

					<description><![CDATA[URLとは何か、ドメイン・パス・クエリとの違い、ブラウザでページが開く流れ、URLを見るときの注意点を初心者向けに解説します。]]></description>
										<content:encoded><![CDATA[
<p class="wp-block-paragraph">URLとは、<strong><span class="marker-under">Webページや画像などが、インターネット上のどこにあるかを示す文字列</span></strong>です。</p>



<p class="wp-block-paragraph">ブラウザの上にあるアドレスバーに表示されている、<code>https://it-biz.online/...</code> のような文字列がURLです。Webページを見る、画像を開く、APIへアクセスするなど、多くのWeb操作はこのURLを手がかりに始まります。</p>



<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-1 sbs-stn sbp-l sbis-cb cf block-box not-nested-style cocoon-block-balloon">
  <div class="speech-person">
    <figure class="speech-icon"><img wpfc-lazyload-disable="true" decoding="async" src="https://it-biz.online/wp-content/uploads/2023/06/man.png" alt="" class="speech-icon-image"/></figure>
    <div class="speech-name"></div>
  </div>
  <div class="speech-balloon">
    <p>URLは「Web上の住所」です。住所を見ると建物の場所が分かるように、URLを見るとWeb上の目的地が分かります。</p>
  </div>
</div>



<p class="wp-block-paragraph">この記事では、URLの意味、ドメインやパスとの違い、URLを開くと何が起きるのか、安全に見るポイントを初心者向けに整理します。</p>




  <div id="toc" class="toc tnt-number toc-center tnt-number border-element"><input type="checkbox" class="toc-checkbox" id="toc-checkbox-1" checked><label class="toc-title" for="toc-checkbox-1">目次</label>
    <div class="toc-content">
    <ol class="toc-list open"><li><a href="#toc1" tabindex="0">まず結論：URLはWeb上の住所</a></li><li><a href="#toc2" tabindex="0">URLの基本形</a></li><li><a href="#toc3" tabindex="0">実例でURLを読んでみる</a></li><li><a href="#toc4" tabindex="0">URL・ドメイン・IPアドレスの違い</a></li><li><a href="#toc5" tabindex="0">URLを開くと何が起きるか</a></li><li><a href="#toc6" tabindex="0">httpとhttpsの違い</a></li><li><a href="#toc7" tabindex="0">URLを見るときの安全チェック</a></li><li><a href="#toc8" tabindex="0">URLとURIの違いは最初から必要？</a></li><li><a href="#toc9" tabindex="0">既存記事とあわせて読む順番</a></li><li><a href="#toc10" tabindex="0">公式情報と関連リンク</a></li><li><a href="#toc11" tabindex="0">まとめ</a></li></ol>
    </div>
  </div>

<h2 class="wp-block-heading"><span id="toc1">まず結論：URLはWeb上の住所</span></h2>



<p class="wp-block-paragraph">URLは、<strong>Uniform Resource Locator</strong>の略です。日本語では「統一資源位置指定子」と訳されることがありますが、最初からこの訳語を覚える必要はありません。まずは「Web上の住所」と考えると十分です。</p>



<p class="wp-block-paragraph">MDNでは、URLはWebページ、画像、動画などのリソースがインターネット上のどこにあるかを示す文字列として説明されています。ここでいうリソースとは、Web上で取得できる情報やファイルのことです。</p>



<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-1 sbs-stn sbp-l sbis-cb cf block-box not-nested-style cocoon-block-balloon"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://it-biz.online/wp-content/uploads/2023/06/man.png" alt="" class="speech-icon-image"/></figure><div class="speech-name"></div></div><div class="speech-balloon">
<p class="wp-block-paragraph">次の図は、URLを入力したブラウザが、目的のWebページへ向かうイメージです。</p>
</div></div>



<figure class="wp-block-image aligncenter size-large"><img decoding="async" src="https://it-biz.online/wp-content/uploads/2026/05/url-concept.png" alt="URLをWeb上の住所として、ブラウザが目的のページへ向かうイメージ"/><figcaption class="wp-element-caption">URLは、ブラウザにWeb上の目的地を伝える住所のような文字列です。</figcaption></figure>



<h2 class="wp-block-heading"><span id="toc2">URLの基本形</span></h2>



<p class="wp-block-paragraph">URLは、いくつかの部品に分けて読めます。たとえば、次のURLを見てみます。</p>



<p class="wp-block-paragraph"><code>https://www.example.com/articles/url?id=10#summary</code></p>



<p class="wp-block-paragraph">長く見えますが、最初に見るべきなのは、通信の種類、サイト名、ページの場所です。慣れてきたら、条件やページ内の位置も読めるようになります。次の図では、URLを部品ごとに分けて見てください。全部を暗記する必要はありませんが、ドメインとパスの違いは早めに押さえると役に立ちます。</p>



<figure class="wp-block-image aligncenter size-large"><img decoding="async" src="https://it-biz.online/wp-content/uploads/2026/05/url-anatomy.png" alt="URLをスキーム、ドメイン、パス、クエリ、フラグメントに分けて説明する図"/><figcaption class="wp-element-caption">URLは、通信の種類、ドメイン、パス、クエリ、フラグメントなどに分けて読めます。</figcaption></figure>



<figure class="wp-block-table"><div class="scrollable-table stfc-sticky"><table><thead><tr><th>部品</th><th>例</th><th>意味</th></tr></thead><tbody><tr><td>スキーム</td><td><code>https://</code></td><td>通信の種類。Webではhttpやhttpsがよく出る</td></tr><tr><td>ドメイン</td><td><code>www.example.com</code></td><td>サイトやサーバーを表す名前</td></tr><tr><td>パス</td><td><code>/articles/url</code></td><td>サイト内のページや場所</td></tr><tr><td>クエリ</td><td><code>?id=10</code></td><td>検索条件やIDなどの追加情報</td></tr><tr><td>フラグメント</td><td><code>#summary</code></td><td>ページ内の特定位置</td></tr></tbody></table></div></figure>



<h2 class="wp-block-heading"><span id="toc3">実例でURLを読んでみる</span></h2>



<p class="wp-block-paragraph">実際のURLを読むときは、左から順番にすべてを完璧に理解しようとしなくて構いません。まずは、<strong>どのサイトの、どのページを開こうとしているのか</strong>を見ます。</p>



<p class="wp-block-paragraph">たとえば、<code>https://it-biz.online/it-skills/http/</code> というURLなら、<code>https://</code> は安全なWeb通信、<code>it-biz.online</code> はサイト名、<code>/it-skills/http/</code> はサイト内の記事の場所だと読めます。</p>



<p class="wp-block-paragraph">検索結果やECサイトでは、URLの後ろに<code>?keyword=...</code>や<code>?id=...</code>のようなクエリが付くことがあります。これは、検索キーワード、商品ID、並び順、流入元などの追加情報を渡すために使われます。</p>



<p class="wp-block-paragraph">また、<code>#summary</code>のようなフラグメントは、同じページ内の特定位置へ移動するために使われます。ページの中にある「まとめ」や「見出し」へ直接飛ぶリンクでよく見かけます。</p>



<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-1 sbs-stn sbp-l sbis-cb cf block-box not-nested-style cocoon-block-balloon"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://it-biz.online/wp-content/uploads/2023/06/man.png" alt="" class="speech-icon-image"/></figure><div class="speech-name"></div></div><div class="speech-balloon">
<p class="wp-block-paragraph">初心者のうちは、URL全体を暗記するよりも、長いURLを見たときに『ドメインはどこか』『パスはどこからか』『クエリは付いているか』を分ける練習をする方が実務で役立ちます。</p>
</div></div>



<h2 class="wp-block-heading"><span id="toc4">URL・ドメイン・IPアドレスの違い</span></h2>



<p class="wp-block-paragraph">URLを学ぶと、ドメインやIPアドレスという言葉も出てきます。これらは似ていますが、同じものではありません。</p>



<p class="wp-block-paragraph">ドメインは、<code>it-biz.online</code> のようなサイトの名前です。IPアドレスは、ネットワーク上の機器を識別する番号です。URLは、それらに加えて、ページの場所や条件まで含められます。</p>



<p class="wp-block-paragraph">次の図では、URL、ドメイン、IPアドレス、ページタイトルを分けて見てください。混同しやすい言葉を先に整理しておくと、HTTPやDNSの記事が読みやすくなります。</p>



<figure class="wp-block-image aligncenter size-large"><img decoding="async" src="https://it-biz.online/wp-content/uploads/2026/05/url-comparison.png" alt="URL、ドメイン、IPアドレス、ページタイトルの違いを比較する図"/><figcaption class="wp-element-caption">URLはページまで含む住所、ドメインはサイト名、IPアドレスはネットワーク上の番号として分けて考えます。</figcaption></figure>



<h2 class="wp-block-heading"><span id="toc5">URLを開くと何が起きるか</span></h2>



<p class="wp-block-paragraph">ブラウザでURLを開くと、ただ文字列を表示しているだけではありません。ブラウザはURLからドメインを読み取り、そのドメインがどのサーバーを指すのかを調べ、目的のページを取りに行きます。</p>



<p class="wp-block-paragraph">この流れでは、DNSやHTTPが関係します。DNSはドメインからIPアドレスを調べる仕組みで、HTTPはブラウザとサーバーがWebページをやり取りするための通信の基本です。</p>



<p class="wp-block-paragraph">次の図では、URLを開いてからページが表示されるまでの流れを確認してください。細かい通信手順をすべて覚えるより、URLがDNSやHTTPにつながっていることを押さえるのが先です。</p>



<figure class="wp-block-image aligncenter size-large"><img decoding="async" src="https://it-biz.online/wp-content/uploads/2026/05/url-journey.png" alt="ブラウザがURLからドメインを使ってDNSに問い合わせ、サーバーからページを受け取る流れ"/><figcaption class="wp-element-caption">URLを開くと、ブラウザはドメインを手がかりにサーバーへ行き、パスで指定されたページを受け取ります。</figcaption></figure>



<h2 class="wp-block-heading"><span id="toc6">httpとhttpsの違い</span></h2>



<p class="wp-block-paragraph">URLの先頭にある<code>http://</code>や<code>https://</code>は、スキームと呼ばれます。Webページを見るときによく使われるのはHTTPとHTTPSです。</p>



<p class="wp-block-paragraph">初心者の段階では、<code>https://</code>は通信が暗号化されるWeb通信、<code>http://</code>は暗号化されないWeb通信、と押さえれば十分です。ログイン、決済、個人情報入力では、基本的に<code>https://</code>になっているかを確認しましょう。</p>



<p class="wp-block-paragraph">HTTPとHTTPSの詳しい仕組みは、<a href="https://it-biz.online/it-skills/http/">HTTPとは？HTTPSとは？</a>の記事で解説しています。</p>



<h2 class="wp-block-heading"><span id="toc7">URLを見るときの安全チェック</span></h2>



<p class="wp-block-paragraph">URLは便利ですが、フィッシングサイトや怪しいリンクを見分けるときにも重要です。リンクの文字だけで判断せず、実際に開こうとしているURL、とくにドメインを確認します。</p>



<p class="wp-block-paragraph">次の図では、URLを見るときの最低限のチェックポイントを整理しています。特に、<code>https://</code>かどうか、本当のドメインが何か、長いクエリに不要な情報が含まれていないかを見ます。</p>



<figure class="wp-block-image aligncenter size-large"><img decoding="async" src="https://it-biz.online/wp-content/uploads/2026/05/url-safety.png" alt="URLをクリックする前にHTTPSとドメイン、長いクエリを確認する図"/><figcaption class="wp-element-caption">URLを見るときは、httpsかどうか、本当のドメインが何か、長いクエリを共有してよいかを確認します。</figcaption></figure>



<ul class="wp-block-list is-style-icon-list-check has-list-style">
<li>ログイン前に<code>https://</code>か確認する</li>



<li>見た目のリンク文字ではなく、実際のドメインを見る</li>



<li>似た文字を使った偽ドメインに注意する</li>



<li>長いURLをそのまま共有すると、検索条件やIDが含まれることがある</li>



<li>不審な短縮URLは、信頼できる相手からのものか確認する</li>
</ul>



<h2 class="wp-block-heading"><span id="toc8">URLとURIの違いは最初から必要？</span></h2>



<p class="wp-block-paragraph">URLを調べると、URIという言葉も出てきます。URIは、より広くリソースを識別するための名前です。URLは、そのリソースの場所を示すものとして説明されます。</p>



<p class="wp-block-paragraph">ただし、IT初心者が最初にWebページを見る範囲では、URLを理解できれば十分なことが多いです。URIとの細かい違いは、API設計や仕様書を読む段階で必要になったら深掘りすれば問題ありません。</p>



<h2 class="wp-block-heading"><span id="toc9">既存記事とあわせて読む順番</span></h2>



<p class="wp-block-paragraph">URLを理解したら、ドメイン、DNS、HTTP、クライアントサーバーの順に読むと、Webページが表示される流れがつながりやすくなります。</p>



<ul class="wp-block-list">
<li><a href="https://it-biz.online/it-skills/dns/">DNSとは何か？</a></li>



<li><a href="https://it-biz.online/it-skills/http/">HTTPとは？HTTPSとは？</a></li>



<li><a href="https://it-biz.online/it-skills/client-server/">クライアントサーバシステムとは？</a></li>



<li><a href="https://it-biz.online/it-skills/web_api/">APIとは？APIとWeb APIの違い</a></li>



<li><a href="https://it-biz.online/it-skills/network-abc/">ゼロから学ぶネットワーク入門</a></li>
</ul>



<h2 class="wp-block-heading"><span id="toc10">公式情報と関連リンク</span></h2>



<p class="wp-block-paragraph">仕様として確認する場合は、WHATWG URL StandardとMDNのURL用語集を参照します。WHATWG URL Standardは、ブラウザなどがURLをどのように扱うかを定義する標準です。</p>



<ul class="wp-block-list">
<li><a href="https://url.spec.whatwg.org/">WHATWG URL Standard</a></li>



<li><a href="https://developer.mozilla.org/ja/docs/Glossary/URL">MDN URL 用語集</a></li>



<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/URL">MDN URL API</a></li>
</ul>



<h2 class="wp-block-heading"><span id="toc11">まとめ</span></h2>



<p class="wp-block-paragraph">URLは、Webページや画像などがインターネット上のどこにあるかを示す文字列です。</p>



<ul class="wp-block-list is-style-icon-list-check has-list-style">
<li>URLはWeb上の住所として理解できる</li>



<li>ドメインはサイト名、パスはサイト内の場所を表す</li>



<li>URLを開くとDNSやHTTPの仕組みにつながる</li>



<li><code>https://</code>かどうか、本当のドメインは何かを確認する</li>



<li>URIとの細かい違いは、最初は深追いしなくてよい</li>
</ul>



<p class="wp-block-paragraph">URLを読めるようになると、Webページの仕組み、HTTP、DNS、APIの理解が一気につながりやすくなります。まずは、URLを「通信の種類」「ドメイン」「ページの場所」に分けて見るところから始めましょう。</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>【IT用語解説】Server-Sent Events（SSE）とは？WebSocketとの違いを初心者向けに解説</title>
		<link>https://it-biz.online/it-skills/server-sent-events/</link>
		
		<dc:creator><![CDATA[bizonline_admin]]></dc:creator>
		<pubDate>Mon, 25 May 2026 09:12:21 +0000</pubDate>
				<category><![CDATA[IT-Skills]]></category>
		<category><![CDATA[Network]]></category>
		<category><![CDATA[Web開発]]></category>
		<category><![CDATA[ネットワーク]]></category>
		<category><![CDATA[用語解説]]></category>
		<category><![CDATA[通信プロトコル]]></category>
		<guid isPermaLink="false">https://it-biz.online/?p=11109</guid>

					<description><![CDATA[Server-Sent Events（SSE）とは何か、WebSocketやポーリングとの違い、EventSourceの使い方、注意点を初心者向けに解説します。]]></description>
										<content:encoded><![CDATA[
<p class="wp-block-paragraph">Server-Sent Events（SSE）とは、<strong><span class="marker-under">サーバーからブラウザへ、更新情報を一方向に流し続けるためのWeb標準の仕組み</span></strong>です。</p>



<p class="wp-block-paragraph">チャットのように双方が頻繁に送信するならWebSocketが候補になります。一方で、ニュース、通知、処理状況、ログのように「サーバー側で起きた変化を画面へ届けたい」だけなら、SSEの方がシンプルに書けることがあります。</p>



<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-1 sbs-stn sbp-l sbis-cb cf block-box not-nested-style cocoon-block-balloon">
  <div class="speech-person">
    <figure class="speech-icon"><img wpfc-lazyload-disable="true" decoding="async" src="https://it-biz.online/wp-content/uploads/2023/06/man.png" alt="" class="speech-icon-image"/></figure>
    <div class="speech-name"></div>
  </div>
  <div class="speech-balloon">
    <p>SSEは「ブラウザからも自由に送る通信」ではありません。サーバーからブラウザへ流れる通知レーンとして見ると理解しやすくなります。</p>
  </div>
</div>



<p class="wp-block-paragraph">この記事では、SSEの意味、EventSourceの使い方、WebSocketやポーリングとの違い、再接続、運用上の注意点を初心者向けに整理します。</p>




  <div id="toc" class="toc tnt-number toc-center tnt-number border-element"><input type="checkbox" class="toc-checkbox" id="toc-checkbox-2" checked><label class="toc-title" for="toc-checkbox-2">目次</label>
    <div class="toc-content">
    <ol class="toc-list open"><li><a href="#toc1" tabindex="0">まず結論：SSEはサーバーからブラウザへの一方向通知</a></li><li><a href="#toc2" tabindex="0">SSEが必要になる場面</a></li><li><a href="#toc3" tabindex="0">REST API・ポーリング・WebSocketとの違い</a></li><li><a href="#toc4" tabindex="0">EventSourceで受け取る最小コード</a></li><li><a href="#toc5" tabindex="0">サーバーが返すtext/event-streamの形</a></li><li><a href="#toc6" tabindex="0">再接続とLast-Event-IDの考え方</a></li><li><a href="#toc7" tabindex="0">SSEを使うときの注意点</a></li><li><a href="#toc8" tabindex="0">SSEを選ぶ判断基準</a></li><li><a href="#toc9" tabindex="0">既存記事とあわせて読む順番</a></li><li><a href="#toc10" tabindex="0">公式情報と関連リンク</a></li><li><a href="#toc11" tabindex="0">まとめ</a></li></ol>
    </div>
  </div>

<h2 class="wp-block-heading"><span id="toc1">まず結論：SSEはサーバーからブラウザへの一方向通知</span></h2>



<p class="wp-block-paragraph">SSEの中心は、<strong><span class="marker-under">サーバーからクライアントへイベントを送ること</span></strong>です。クライアントとは、ここでは主にブラウザを指します。</p>



<p class="wp-block-paragraph">ブラウザは最初にSSE用のURLへ接続します。その後、サーバーは接続を閉じずに、新しい通知があるたびにデータを少しずつ送ります。ブラウザ側では、そのデータをイベントとして受け取って画面へ反映します。</p>



<p class="wp-block-paragraph">次の図では、SSEを「サーバーからブラウザへ流れる通知レーン」として見てください。WebSocketのような双方向の会話ではなく、サーバー発の更新を受け取る流れです。</p>



<figure class="wp-block-image aligncenter size-large"><img decoding="async" src="https://it-biz.online/wp-content/uploads/2026/05/sse-concept.png" alt="Server-Sent Eventsがサーバーからブラウザへ一方向に通知を流す様子"/><figcaption class="wp-element-caption">SSEは、サーバー側で起きた変化をブラウザへ一方向に流す通知レーンとして理解できます。</figcaption></figure>



<h2 class="wp-block-heading"><span id="toc2">SSEが必要になる場面</span></h2>



<p class="wp-block-paragraph">SSEが役立つのは、ユーザーが何度も更新ボタンを押さなくても、サーバー側の新しい情報を画面へ届けたい場面です。</p>



<ul class="wp-block-list is-style-icon-list-check has-list-style">
<li>処理の進捗を画面に表示したい</li>



<li>管理画面に新着通知を出したい</li>



<li>サーバーログや監視結果を流したい</li>



<li>ニュースフィードやタイムラインを更新したい</li>



<li>在庫、注文、ジョブ状態などの変化を反映したい</li>
</ul>



<p class="wp-block-paragraph">反対に、ユーザーがメッセージを頻繁に送り、相手からも返ってくるような双方向のやり取りでは、WebSocketの方が自然なことがあります。</p>



<h2 class="wp-block-heading"><span id="toc3">REST API・ポーリング・WebSocketとの違い</span></h2>



<p class="wp-block-paragraph">SSEを理解するときに一番つまずきやすいのは、似た通信方式との違いです。ここでは、REST API、ポーリング、SSE、WebSocketを「何をしたいか」で分けます。</p>



<p class="wp-block-paragraph">次の図では、実装名ではなく、読者が実現したい動きから選ぶように見てください。サーバーから一方的に知らせたいならSSE、双方が送るならWebSocketが候補です。</p>



<figure class="wp-block-image aligncenter size-large"><img decoding="async" src="https://it-biz.online/wp-content/uploads/2026/05/sse-decision.png" alt="REST API、ポーリング、SSE、WebSocketの選び方を用途別に示す判断図"/><figcaption class="wp-element-caption">SSEは、サーバーからブラウザへ更新を押し出したい場面で候補になります。</figcaption></figure>



<figure class="wp-block-table"><div class="scrollable-table stfc-sticky"><table><thead><tr><th>方式</th><th>通信の見方</th><th>向いている場面</th></tr></thead><tbody><tr><td>REST API</td><td>必要なときに問い合わせる</td><td>検索、登録、詳細取得、通常の更新</td></tr><tr><td>ポーリング</td><td>一定間隔で聞きに行く</td><td>簡単な定期更新、精度がそこまで重要でない通知</td></tr><tr><td>SSE</td><td>サーバーから一方向に流す</td><td>通知、進捗、ログ、ニュースフィード</td></tr><tr><td>WebSocket</td><td>双方から送る</td><td>チャット、共同編集、ゲーム、双方向操作</td></tr></tbody></table></div></figure>



<p class="has-text-align-center wp-block-paragraph"><span class="badge">参考</span>　<a href="https://it-biz.online/it-skills/rest-api/">REST APIとは何か？</a> / <a href="https://it-biz.online/it-skills/http/">HTTPとは？HTTPSとは？</a></p>



<h2 class="wp-block-heading"><span id="toc4">EventSourceで受け取る最小コード</span></h2>



<p class="wp-block-paragraph">ブラウザ側では、<code>EventSource</code>を使ってSSEの接続を開きます。MDNでも、SSEを扱うAPIは<code>EventSource</code>インターフェースに含まれると説明されています。</p>



<pre class="wp-block-code"><code>const source = new EventSource("/events");

source.onopen = () =&gt; {
  console.log("SSEに接続しました");
};

source.onmessage = (event) =&gt; {
  console.log("受信:", event.data);
};

source.onerror = () =&gt; {
  console.log("接続エラーまたは再接続中です");
};

// 画面を閉じる、購読をやめるなどのタイミングで呼ぶ
// source.close();</code></pre>



<p class="wp-block-paragraph">このコードでは、<code>new EventSource("/events")</code>でサーバーのイベント配信URLへ接続します。<code>onmessage</code>は、サーバーから通常のメッセージが届いたときに実行されます。</p>



<p class="wp-block-paragraph">ただし、このコードだけをブラウザに貼っても動きません。サーバー側がSSE用のレスポンスを返す必要があります。SSEは、ブラウザ側の<code>EventSource</code>と、サーバー側の<code>text/event-stream</code>形式のレスポンスがセットです。</p>



<p class="wp-block-paragraph">次の図では、コードの左側とサーバーから流れてくる文字列の右側を対応させて見てください。<code>EventSource</code>は受け口、<code>text/event-stream</code>は流れてくる形式です。</p>



<figure class="wp-block-image aligncenter size-large"><img decoding="async" src="https://it-biz.online/wp-content/uploads/2026/05/sse-code-bridge.png" alt="EventSourceのコードとイベントストリーム形式の対応関係を示す図"/><figcaption class="wp-element-caption">EventSourceはブラウザ側の受け口で、サーバーはtext/event-stream形式でイベントを流します。</figcaption></figure>



<h2 class="wp-block-heading"><span id="toc5">サーバーが返すtext/event-streamの形</span></h2>



<p class="wp-block-paragraph">SSEでは、サーバーが<code>Content-Type: text/event-stream</code>のレスポンスを返します。MDNの例でも、サーバー側は<code>text/event-stream</code>で応答し、各通知をテキストのブロックとして送ると説明されています。</p>



<pre class="wp-block-code"><code>event: progress
data: {"percent": 80}
id: 42

</code></pre>



<p class="wp-block-paragraph">この例では、<code>event</code>がイベント名、<code>data</code>が実際に渡したいデータ、<code>id</code>がイベントの識別子です。最後の空行で、1件のイベントが終わります。</p>



<p class="wp-block-paragraph">イベント名を付けない場合は、ブラウザ側では通常の<code>message</code>イベントとして受け取れます。イベント名を付けた場合は、<code>addEventListener("progress", ...)</code>のように名前で分けて処理できます。</p>



<h2 class="wp-block-heading"><span id="toc6">再接続とLast-Event-IDの考え方</span></h2>



<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-1 sbs-stn sbp-l sbis-cb cf block-box not-nested-style cocoon-block-balloon"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://it-biz.online/wp-content/uploads/2023/06/man.png" alt="" class="speech-icon-image"/></figure><div class="speech-name"></div></div><div class="speech-balloon">
<p class="wp-block-paragraph">SSEの便利な点の1つは、接続が切れたときにブラウザが再接続を試みることです。MDNでも、クライアントとサーバーの接続が閉じた場合、デフォルトでは接続が再開されると説明されています。</p>
</div></div>



<p class="wp-block-paragraph">ただし、自動再接続があるから何も考えなくてよい、という意味ではありません。途中で切れた場合に、同じ通知を二重に処理しないか、逆に通知が抜けないかを考える必要があります。</p>



<p class="wp-block-paragraph">次の図では、<code>id</code>を手がかりに、どこまで読んだかを復旧するイメージを見てください。実務では、イベントIDや状態管理を使って、再接続後の抜けや重複を減らします。</p>



<figure class="wp-block-image aligncenter size-large"><img decoding="async" src="https://it-biz.online/wp-content/uploads/2026/05/sse-reconnect.png" alt="SSE接続が切断され、最後に受け取ったイベントIDから再接続する流れ"/><figcaption class="wp-element-caption">SSEは再接続しやすい仕組みですが、実務ではイベントIDで抜けや重複を扱う設計が必要です。</figcaption></figure>



<h2 class="wp-block-heading"><span id="toc7">SSEを使うときの注意点</span></h2>



<p class="wp-block-paragraph">SSEはWebSocketよりシンプルに見えますが、運用では長く開いたHTTP接続として扱う必要があります。特に、接続数、中継サーバー、切断復旧は先に見ておきたいポイントです。</p>



<p class="wp-block-paragraph">次の図では、実装後に詰まりやすい場所を3つに分けています。SSEは一方向の通信としては分かりやすい一方で、開いた接続を維持するための設計が必要です。</p>



<figure class="wp-block-image aligncenter size-large"><img decoding="async" src="https://it-biz.online/wp-content/uploads/2026/05/sse-operations.png" alt="SSE運用時に注意する接続数、プロキシのバッファリング、切断復旧を示す図"/><figcaption class="wp-element-caption">SSEはシンプルですが、接続数、中継、切断復旧を運用設計に含める必要があります。</figcaption></figure>



<ul class="wp-block-list is-style-icon-list-check has-list-style">
<li>HTTP/1.1では同一ブラウザ・同一ドメインの接続数制限に注意する</li>



<li>HTTP/2を使える環境では、同時ストリーム数の扱いも確認する</li>



<li>プロキシやロードバランサーがレスポンスをバッファしないか確認する</li>



<li>切断時に再接続できるだけでなく、抜けや重複も考える</li>



<li>長時間接続を前提に、認証切れや権限変更時の扱いを決める</li>
</ul>



<p class="wp-block-paragraph">MDNでは、HTTP/2ではない場合、SSEのオープン接続数に制限があり、複数タブで痛みやすい点も注意されています。小さなデモでは問題にならなくても、実務ではユーザー数、タブ数、接続先ドメインを含めて考えましょう。</p>



<h2 class="wp-block-heading"><span id="toc8">SSEを選ぶ判断基準</span></h2>



<p class="wp-block-paragraph">SSEを選ぶかどうかは、通信の派手さではなく、必要な方向で決めます。サーバーからブラウザへ知らせるだけならSSEは有力です。ブラウザからも細かく送るならWebSocket、単発の取得や登録ならREST APIが自然です。</p>



<figure class="wp-block-table"><div class="scrollable-table stfc-sticky"><table><thead><tr><th>確認すること</th><th>SSEが向きやすい条件</th></tr></thead><tbody><tr><td>通信方向</td><td>サーバーからブラウザへ送れればよい</td></tr><tr><td>更新頻度</td><td>変化が起きたときにだけ届けたい</td></tr><tr><td>実装規模</td><td>WebSocketほど複雑にしたくない</td></tr><tr><td>復旧</td><td>切断後の再接続を前提にしたい</td></tr><tr><td>注意点</td><td>接続数、バッファリング、認証を運用で見られる</td></tr></tbody></table></div></figure>



<p class="wp-block-paragraph">初心者の段階では、SSEを「WebSocketの簡易版」と覚えるより、「サーバーから一方向に流す標準機能」と覚える方が正確です。役割が違うため、どちらが上位という関係ではありません。</p>



<h2 class="wp-block-heading"><span id="toc9">既存記事とあわせて読む順番</span></h2>



<p class="wp-block-paragraph">SSEを理解するには、HTTP、クライアントサーバー、API、REST APIの順で土台を確認すると読みやすくなります。</p>



<ul class="wp-block-list">
<li><a href="https://it-biz.online/it-skills/client-server/">クライアントサーバシステムとは？</a></li>



<li><a href="https://it-biz.online/it-skills/http/">HTTPとは？HTTPSとは？</a></li>



<li><a href="https://it-biz.online/it-skills/web_api/">APIとは？APIとWeb APIの違い</a></li>



<li><a href="https://it-biz.online/it-skills/rest-api/">REST APIとは何か？</a></li>



<li><a href="https://it-biz.online/it-skills/network-abc/">ゼロから学ぶネットワーク入門</a></li>
</ul>



<h2 class="wp-block-heading"><span id="toc10">公式情報と関連リンク</span></h2>



<p class="wp-block-paragraph">仕様やAPIを確認する場合は、WHATWG HTML StandardのServer-sent events、MDNのServer-sent events、EventSourceのページを参照します。</p>



<ul class="wp-block-list">
<li><a href="https://html.spec.whatwg.org/multipage/server-sent-events.html">WHATWG HTML Standard: Server-sent events</a></li>



<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events">MDN Server-sent events</a></li>



<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events">MDN Using server-sent events</a></li>



<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/EventSource">MDN EventSource</a></li>
</ul>



<h2 class="wp-block-heading"><span id="toc11">まとめ</span></h2>



<p class="wp-block-paragraph">Server-Sent Events（SSE）は、サーバーからブラウザへ更新情報を一方向に流すためのWeb標準の仕組みです。</p>



<ul class="wp-block-list is-style-icon-list-check has-list-style">
<li>SSEはサーバーからブラウザへの一方向通知に向いている</li>



<li>ブラウザ側ではEventSourceを使って受け取る</li>



<li>サーバー側はtext/event-stream形式でイベントを流す</li>



<li>WebSocketは双方向、SSEは一方向と分けて考える</li>



<li>実務では接続数、再接続、バッファリング、認証を確認する</li>
</ul>



<p class="wp-block-paragraph">SSEを理解すると、リアルタイム更新をすべてWebSocketで考えずに済みます。サーバーから知らせるだけでよい場面では、SSEという選択肢を持っておくと設計がシンプルになります。</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>【IT用語解説】WebSocketとは？HTTPとの違いと使いどころを初心者向けに解説</title>
		<link>https://it-biz.online/it-skills/websocket/</link>
		
		<dc:creator><![CDATA[bizonline_admin]]></dc:creator>
		<pubDate>Mon, 25 May 2026 07:14:10 +0000</pubDate>
				<category><![CDATA[IT-Skills]]></category>
		<category><![CDATA[Network]]></category>
		<category><![CDATA[Web開発]]></category>
		<category><![CDATA[ネットワーク]]></category>
		<category><![CDATA[用語解説]]></category>
		<category><![CDATA[通信プロトコル]]></category>
		<guid isPermaLink="false">https://it-biz.online/?p=11100</guid>

					<description><![CDATA[WebSocketとは何か、HTTPやREST APIとの違い、使いどころ、JavaScriptでの最小コード、注意点を初心者向けに解説します。]]></description>
										<content:encoded><![CDATA[
<p class="wp-block-paragraph">WebSocketとは、<strong><span class="marker-under">ブラウザとサーバーが1本の接続を開いたまま、双方向にメッセージを送り合うための通信技術</span></strong>です。</p>



<p class="wp-block-paragraph">通常のHTTP通信では、ブラウザがリクエストを送り、サーバーがレスポンスを返す、という往復が基本です。一方でWebSocketでは、接続を開いた後、ブラウザからサーバーへも、サーバーからブラウザへも、必要なタイミングでデータを送ることが可能。</p>



<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-1 sbs-stn sbp-l sbis-cb cf block-box not-nested-style cocoon-block-balloon">
  <div class="speech-person">
    <figure class="speech-icon"><img wpfc-lazyload-disable="true" decoding="async" src="https://it-biz.online/wp-content/uploads/2023/06/man.png" alt="" class="speech-icon-image"/></figure>
    <div class="speech-name"></div>
  </div>
  <div class="speech-balloon">
    <p>WebSocketは「ページを表示するための仕組み」ではなく、「開いた接続で会話を続ける仕組み」と考えると理解しやすくなります。</p>
  </div>
</div>



<p class="wp-block-paragraph">この記事では、WebSocketの意味、HTTPやREST APIとの違い、接続開始の流れ、JavaScriptでの最小コード、使いどころと注意点を初心者向けに整理します。</p>




  <div id="toc" class="toc tnt-number toc-center tnt-number border-element"><input type="checkbox" class="toc-checkbox" id="toc-checkbox-3" checked><label class="toc-title" for="toc-checkbox-3">目次</label>
    <div class="toc-content">
    <ol class="toc-list open"><li><a href="#toc1" tabindex="0">まず結論：WebSocketは双方向のリアルタイム通信</a></li><li><a href="#toc2" tabindex="0">HTTPとの違い</a></li><li><a href="#toc3" tabindex="0">WebSocketの接続はどう始まるか</a></li><li><a href="#toc4" tabindex="0">JavaScriptで見るWebSocketの最小コード</a></li><li><a href="#toc5" tabindex="0">WebSocketを使う場面</a></li><li><a href="#toc6" tabindex="0">REST APIやポーリングとの使い分け</a></li><li><a href="#toc7" tabindex="0">Socket.IOとは何が違う？</a></li><li><a href="#toc8" tabindex="0">初心者が誤解しやすいポイント</a></li><li><a href="#toc9" tabindex="0">セキュリティと運用で見るポイント</a></li><li><a href="#toc10" tabindex="0">既存記事とあわせて読む順番</a></li><li><a href="#toc11" tabindex="0">公式情報と関連リンク</a></li><li><a href="#toc12" tabindex="0">まとめ</a></li></ol>
    </div>
  </div>

<h2 class="wp-block-heading"><span id="toc1">まず結論：WebSocketは双方向のリアルタイム通信</span></h2>



<p class="wp-block-paragraph">WebSocketの一番大事な特徴は、双方向通信です。双方向通信とは、クライアント側から送るだけでなく、サーバー側からもクライアントへデータを送れる通信のことです。</p>



<p class="wp-block-paragraph">ここでいうリアルタイム通信は、厳密に遅延がゼロという意味ではありません。ユーザーが待って更新ボタンを押さなくても、サーバー側の変化を短い遅延で画面へ届けられる、という意味で使われます。</p>



<p class="wp-block-paragraph">チャットで相手の発言がすぐ表示される、管理画面に新しい通知がすぐ出る、共同編集で他の人の変更が反映される。こうした「サーバー側で起きた変化を画面へすぐ届けたい」場面でWebSocketが候補になります。</p>



<p class="wp-block-paragraph">次の図で、WebSocketを「ブラウザとサーバーが1本の接続で会話を続ける仕組み」として見てください。</p>



<figure class="wp-block-image aligncenter size-large"><img decoding="async" src="https://it-biz.online/wp-content/uploads/2026/05/websocket-concept.png" alt="ブラウザとサーバーが1本のWebSocket接続で双方向にメッセージを送受信する図"/><figcaption class="wp-element-caption">WebSocketは、ブラウザとサーバーが接続を開いたまま、双方からメッセージを送れる通信です。</figcaption></figure>



<h2 class="wp-block-heading"><span id="toc2">HTTPとの違い</span></h2>



<p class="wp-block-paragraph">HTTPは、Webページの表示やAPI呼び出しで広く使われる通信の基本です。ブラウザが「このページをください」「このデータをください」と依頼し、サーバーが返事をする形で進みます。</p>



<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-1 sbs-stn sbp-l sbis-cb cf block-box not-nested-style cocoon-block-balloon"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://it-biz.online/wp-content/uploads/2023/06/man.png" alt="" class="speech-icon-image"/></figure><div class="speech-name"></div></div><div class="speech-balloon">
<p class="wp-block-paragraph">HTTPの基本は<a href="https://it-biz.online/it-skills/http/">HTTPとは？HTTPSとは？</a>の記事で要チェック！</p>
</div></div>



<p class="wp-block-paragraph">WebSocketも最初の接続開始ではHTTPの仕組みを利用します。しかし、接続が確立した後は、毎回HTTPリクエストを作るのではなく、開いた接続の上で小さなメッセージをやり取りします。</p>



<p class="wp-block-paragraph">次の比較図では、HTTPは「依頼して返事をもらう」、WebSocketは「開いた接続で会話を続ける」と読み分けてください。</p>



<figure class="wp-block-image aligncenter size-large"><img decoding="async" src="https://it-biz.online/wp-content/uploads/2026/05/websocket-comparison.png" alt="HTTPのリクエストレスポンス型通信とWebSocketの双方向通信を比較する図"/><figcaption class="wp-element-caption">HTTPは用事ごとに依頼して返事を受け取り、WebSocketは接続を保ったまま双方から送信できます。</figcaption></figure>



<figure class="wp-block-table"><div class="scrollable-table stfc-sticky"><table><thead><tr><th>観点</th><th>HTTP</th><th>WebSocket</th></tr></thead><tbody><tr><td>通信の基本</td><td>リクエストとレスポンス</td><td>接続を開いたまま双方向通信</td></tr><tr><td>サーバーからの通知</td><td>基本はクライアントの依頼後に返す</td><td>サーバー側から送れる</td></tr><tr><td>向いている場面</td><td>ページ表示、通常のAPI、検索、登録</td><td>チャット、ライブ通知、共同編集</td></tr><tr><td>初心者向けの見方</td><td>用事ごとの問い合わせ</td><td>開いた回線で会話を続ける</td></tr></tbody></table></div></figure>



<h2 class="wp-block-heading"><span id="toc3">WebSocketの接続はどう始まるか</span></h2>



<p class="wp-block-paragraph">WebSocketは、いきなり独自の通信だけで始まるわけではありません。一般的なWebの文脈では、最初にHTTPのリクエストとして接続を始め、サーバーがWebSocketへ切り替える流れを受け入れると、その後WebSocketの通信へ進みます。</p>



<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-1 sbs-stn sbp-l sbis-cb cf block-box not-nested-style cocoon-block-balloon"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://it-biz.online/wp-content/uploads/2023/06/man.png" alt="" class="speech-icon-image"/></figure><div class="speech-name"></div></div><div class="speech-balloon">
<p class="wp-block-paragraph">RFC 6455では、WebSocketプロトコルは接続開始のハンドシェイクと、その後のメッセージフレーミングから成り、TCP上で動くものとして説明されています。初心者の段階では、まず「最初に握手して、接続ができたらメッセージを送り合う」と押さえれば十分です。</p>
</div></div>



<p class="wp-block-paragraph">次の図では、WebSocket接続が始まる順番を確認してください。HTTPのUpgrade、切り替え成功、その後のメッセージ交換という3段階で見ます。</p>



<figure class="wp-block-image aligncenter size-large"><img decoding="async" src="https://it-biz.online/wp-content/uploads/2026/05/websocket-handshake.png" alt="WebSocket接続がHTTP Upgradeの流れで始まり、その後メッセージフレームをやり取りする図"/><figcaption class="wp-element-caption">WebSocketは、接続開始の手続きが通った後、双方向のメッセージ通信へ進みます。</figcaption></figure>



<h2 class="wp-block-heading"><span id="toc4">JavaScriptで見るWebSocketの最小コード</span></h2>



<p class="wp-block-paragraph">ブラウザのJavaScriptでは、<code>WebSocket</code>オブジェクトを作ってサーバーへ接続します。URLは、暗号化なしなら<code>ws://</code>、TLSで保護するなら<code>wss://</code>を使います。実務のWebサイトでは、基本的に<code>wss://</code>を選ぶと考えてください。</p>



<pre class="wp-block-code"><code>const socket = new WebSocket("wss://example.com/chat");

socket.addEventListener("open", () =&gt; {
  socket.send("こんにちは");
});

socket.addEventListener("message", (event) =&gt; {
  console.log("受信:", event.data);
});

socket.addEventListener("close", () =&gt; {
  console.log("接続が閉じました");
});

socket.addEventListener("error", (event) =&gt; {
  console.error("通信エラー", event);
});</code></pre>



<p class="wp-block-paragraph">このコードでは、<code>open</code>で接続開始、<code>send</code>で送信、<code>message</code>で受信、<code>close</code>で切断、<code>error</code>でエラーを扱っています。</p>



<p class="wp-block-paragraph">ただし、このコードだけをブラウザに貼っても、接続先のWebSocketサーバーがなければ動きません。WebSocketは、ブラウザ側のコードとサーバー側の受け口がセットで必要になる通信です。</p>



<p class="wp-block-paragraph">ここで重要なのは、<code>message</code>イベントです。WebSocketでは、サーバー側からメッセージが届いたタイミングで処理を実行できます。通常のREST APIのように、毎回こちらから取得しに行く発想とは少し違います。</p>



<h2 class="wp-block-heading"><span id="toc5">WebSocketを使う場面</span></h2>



<p class="wp-block-paragraph">WebSocketは、どんなWeb開発でも必ず使うものではありません。強みが出るのは、サーバー側で起きた変化を、クライアント側へすぐ届けたい場面です。</p>



<p class="wp-block-paragraph">次の図では、WebSocketが向いている代表的な場面を確認してください。見るポイントは「サーバー側の変化を待たずに画面へ届けたいか」です。</p>



<figure class="wp-block-image aligncenter size-large"><img decoding="async" src="https://it-biz.online/wp-content/uploads/2026/05/websocket-usecase.png" alt="チャット、ライブ通知、共同編集などWebSocketが向く場面を示す図"/><figcaption class="wp-element-caption">WebSocketは、チャットやライブ通知のように、サーバーからの即時更新が重要な場面で使われます。</figcaption></figure>



<ul class="wp-block-list is-style-icon-list-check has-list-style">
<li>チャットや問い合わせ画面で、新しいメッセージをすぐ表示したい</li>



<li>注文、障害、監視、株価などのライブ通知を表示したい</li>



<li>共同編集ツールで、他の人の変更をリアルタイムに反映したい</li>



<li>ゲームやダッシュボードで、状態変化を継続的に受け取りたい</li>
</ul>



<p class="wp-block-paragraph">反対に、普通の記事ページを表示する、検索結果を返す、フォームの登録結果を返す、といった処理ではHTTPやREST APIで十分なことが多いです。</p>



<h2 class="wp-block-heading"><span id="toc6">REST APIやポーリングとの使い分け</span></h2>



<p class="wp-block-paragraph">REST APIは、クライアントが必要なタイミングでサーバーへ問い合わせ、結果を受け取る設計でよく使われます</p>



<p class="has-text-align-center wp-block-paragraph"><span class="badge">参考</span>　<a href="https://it-biz.online/it-skills/rest-api/">REST APIとは何か？</a></p>



<p class="wp-block-paragraph">ポーリングは、一定間隔でサーバーへ問い合わせる方法です。たとえば5秒ごとに「新着はありますか？」と聞き続けます。実装は分かりやすい一方で、何も変化がないときも通信が発生します。</p>



<figure class="wp-block-table"><div class="scrollable-table stfc-sticky"><table><thead><tr><th>方式</th><th>向いている場面</th><th>注意点</th></tr></thead><tbody><tr><td>REST API</td><td>通常の取得、登録、更新、削除</td><td>サーバーから自発的には送れない</td></tr><tr><td>ポーリング</td><td>簡単な定期更新</td><td>無駄な問い合わせが増えやすい</td></tr><tr><td>WebSocket</td><td>リアルタイムな双方向通信</td><td>接続管理と再接続を考える必要がある</td></tr></tbody></table></div></figure>



<p class="wp-block-paragraph">判断に迷ったら、まず「サーバー側の変化をすぐ画面に届ける必要があるか」を見ます。必要がなければREST APIで十分なことが多く、必要があるならWebSocketを検討します。</p>



<p class="has-text-align-center wp-block-paragraph"><span class="badge">参考</span>　<a href="https://it-biz.online/it-skills/web_api/">APIとは？APIとWeb APIの違い</a></p>



<h2 class="wp-block-heading"><span id="toc7">Socket.IOとは何が違う？</span></h2>



<p class="wp-block-paragraph">WebSocketを調べていると、Socket.IOという名前もよく出てきます。ここで混同しやすいのは、WebSocketが通信プロトコルであるのに対し、<strong><span class="marker-under">Socket.IOはリアルタイム通信を扱いやすくするためのライブラリ</span></strong>だという点です。</p>



<p class="wp-block-paragraph">Socket.IOは、再接続、イベント名付きの送受信、環境に応じた通信方式の切り替えなどを助けます。一方で、ブラウザ標準の<code>WebSocket</code> APIとはそのまま互換ではありません。Socket.IOを使う場合は、サーバー側もSocket.IOに対応している必要があります。</p>



<p class="wp-block-paragraph">初心者の段階では、まずWebSocketを通信の考え方として理解し、その後で「実装を楽にする選択肢としてSocket.IOがある」と分けておくと混乱しにくくなります。</p>



<h2 class="wp-block-heading"><span id="toc8">初心者が誤解しやすいポイント</span></h2>



<figure class="wp-block-table"><div class="scrollable-table stfc-sticky"><table><thead><tr><th>誤解</th><th>正しい見方</th></tr></thead><tbody><tr><td>WebSocketはHTTPの上位版</td><td>役割が違う。HTTPは通常の取得や更新、WebSocketは継続的な双方向通信に向く</td></tr><tr><td>WebSocketなら必ず速い</td><td>用途次第。接続管理のコストもある</td></tr><tr><td>REST APIは不要になる</td><td>通常のCRUDや検索ではREST APIの方が自然なことが多い</td></tr><tr><td>接続したらずっと安心</td><td>切断、再接続、認証、権限、エラー処理が必要</td></tr></tbody></table></div></figure>



<p class="wp-block-paragraph">WebSocketは便利ですが、アプリケーション設計のすべてを置き換えるものではありません。画面表示、通常のデータ取得、ログイン、履歴取得などはHTTPやREST APIで行い、リアルタイム更新部分だけWebSocketにする構成もよくあります。</p>



<h2 class="wp-block-heading"><span id="toc9">セキュリティと運用で見るポイント</span></h2>



<p class="wp-block-paragraph">WebSocketを実務で使うときは、接続できることだけでなく、誰が接続しているのか、どのメッセージを許可するのか、切断時にどう復旧するのかを考える必要があります。</p>



<ul class="wp-block-list is-style-icon-list-check has-list-style">
<li><code>wss://</code>を使い、通信をTLSで保護する</li>



<li>接続時やメッセージ処理時に認証・認可を確認する</li>



<li>予期しない切断に備えて再接続の設計をする</li>



<li>サーバー側で接続数、送信頻度、メッセージサイズを制御する</li>



<li>ブラウザやネットワーク環境による切断を前提にログを残す</li>
</ul>



<p class="wp-block-paragraph">特に重要なのは、WebSocket接続が長く続くことです。通常のHTTPリクエストよりも、接続数や切断時の処理が運用に影響しやすくなります。</p>



<h2 class="wp-block-heading"><span id="toc10">既存記事とあわせて読む順番</span></h2>



<p class="wp-block-paragraph">WebSocketを理解するには、HTTP、クライアントサーバー、APIの順に土台を確認してから読むとつながりやすくなります。</p>



<ul class="wp-block-list">
<li><a href="https://it-biz.online/it-skills/client-server/">クライアントサーバシステムとは？</a></li>



<li><a href="https://it-biz.online/it-skills/http/">HTTPとは？HTTPSとは？</a></li>



<li><a href="https://it-biz.online/it-skills/web_api/">APIとは？APIとWeb APIの違い</a></li>



<li><a href="https://it-biz.online/it-skills/rest-api/">REST APIとは何か？</a></li>



<li><a href="https://it-biz.online/it-skills/network-abc/">ゼロから学ぶネットワーク入門</a></li>
</ul>



<h2 class="wp-block-heading"><span id="toc11">公式情報と関連リンク</span></h2>



<p class="wp-block-paragraph">仕様を深く確認する場合は、IETFのRFC 6455とMDNのWebSocket APIリファレンスを参照します。初心者の段階では、RFCを最初からすべて読む必要はありません。この記事で全体像を押さえた後、実装時に必要なイベント、メソッド、接続開始の仕様を確認すると効率的です。</p>



<ul class="wp-block-list">
<li><a href="https://datatracker.ietf.org/doc/html/rfc6455">RFC 6455: The WebSocket Protocol</a></li>



<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/WebSocket">MDN WebSocket API</a></li>



<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API">MDN WebSocket API overview</a></li>
</ul>



<h2 class="wp-block-heading"><span id="toc12">まとめ</span></h2>



<p class="wp-block-paragraph">WebSocketは、ブラウザとサーバーが1本の接続を開いたまま、双方向にメッセージを送り合うための通信技術です。</p>



<ul class="wp-block-list is-style-icon-list-check has-list-style">
<li>WebSocketはリアルタイムな双方向通信に向いている</li>



<li>HTTPは用事ごとのリクエストとレスポンス、WebSocketは接続を保った会話として見る</li>



<li>チャット、ライブ通知、共同編集などで使われる</li>



<li>REST APIを置き換えるものではなく、用途で使い分ける</li>



<li>実務では認証、切断、再接続、接続数の管理も重要</li>
</ul>



<p class="wp-block-paragraph">最初は「WebSocketは、サーバーからもブラウザへすぐ送れる通信」と覚えるだけで十分です。そのうえで、HTTPやREST APIと役割を分けて考えると、どの場面で使うべきか判断しやすくなります。</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>【パケトレ】Cisco Packet Tracer の使い方を３分で解説</title>
		<link>https://it-biz.online/it-skills/packet-tracer/</link>
		
		<dc:creator><![CDATA[ビズドットオンライン]]></dc:creator>
		<pubDate>Thu, 03 Nov 2022 00:00:00 +0000</pubDate>
				<category><![CDATA[IT-Skills]]></category>
		<category><![CDATA[Network]]></category>
		<category><![CDATA[ネットワーク]]></category>
		<guid isPermaLink="false">https://it-biz.online/?p=6771</guid>

					<description><![CDATA[Cisco Packet Tracer とは、Cisco社のネットワーク機器の利用方法・ネットワークの構築をソフトウェア上でシミュレーションすることができるツールです。 実際にサーバやルーターなどを購入し自宅内でネットワ [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p class="wp-block-paragraph">Cisco Packet Tracer とは、<strong><span class="marker-under">Cisco社のネットワーク機器の利用方法・ネットワークの構築をソフトウェア上でシミュレーションすることができるツール</span></strong>です。</p>



<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-1 sbs-stn sbp-l sbis-cb cf block-box"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://it-biz.online/wp-content/uploads/2023/06/man.png" alt="" class="speech-icon-image"/></figure><div class="speech-name"></div></div><div class="speech-balloon">
<p class="wp-block-paragraph">ネットワークの勉強を進める際、参考書などの内容を理解するだけでなく、実際にネットワークを構築してみる（いじってみる）のが重要です。</p>
</div></div>



<p class="wp-block-paragraph">実際にサーバやルーターなどを購入し自宅内でネットワークを構築するのが一番勉強になるのですが、現実問題費用面での問題があり、特に「これからネットワークを勉強しよう！」と思っている方にとっては大きなハードル。</p>



<p class="wp-block-paragraph">Cisco Packet Tracer を利用することで、PC１台があれば模擬的にネットワークの構築を手軽にシミュレーションすることができます。</p>



<div class="wp-block-cocoon-blocks-icon-box common-icon-box block-box information-box">
<p class="wp-block-paragraph">Cisco Packet Tracer は略して「パケトレ」と呼ばれます！</p>
</div>



<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-1 sbs-stn sbp-l sbis-cb cf block-box"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://it-biz.online/wp-content/uploads/2023/06/man.png" alt="" class="speech-icon-image"/></figure><div class="speech-name"></div></div><div class="speech-balloon">
<p class="wp-block-paragraph">このページではネットワークの勉強を始めたい！と考えている初心者向けに、Cisco Packet Tracer のダウンロード方法～使い方までを３分で解説します。</p>
</div></div>



<div class="wp-block-cocoon-blocks-tab-caption-box-1 tab-caption-box block-box"><div class="tab-caption-box-label block-box-label box-label fab-edit"><span class="tab-caption-box-label-text block-box-label-text box-label-text">このページで学べる内容</span></div><div class="tab-caption-box-content block-box-content box-content">
<div class="wp-block-cocoon-blocks-iconlist-box iconlist-box blank-box list-hand-o-right block-box"><div class="iconlist-title"></div>
<ul class="wp-block-list"><li><strong>Cisco Packet Tracer のダウンロード/インストール方法</strong><ul><li>Cisco Networking Academy のアカウント作成</li><li>Cisco Packet Tracer のダウンロード</li><li>Cisco Packet Tracer のインストール～起動</li></ul></li><li><strong>Cisco Packet Tracer の使い方</strong></li></ul>
</div>
</div></div>



<p class="wp-block-paragraph">ネットワークを学習する方にとっては<strong><span class="marker-under">知っておくと非常に便利なツールの１つ</span></strong>。是非最後までご覧ください。</p>




  <div id="toc" class="toc tnt-number toc-center tnt-number border-element"><input type="checkbox" class="toc-checkbox" id="toc-checkbox-5" checked><label class="toc-title" for="toc-checkbox-5">目次</label>
    <div class="toc-content">
    <ol class="toc-list open"><li><a href="#toc1" tabindex="0">Cisco Packet Tracer のダウンロード方法</a><ol><li><a href="#toc2" tabindex="0">Cisco Networking Academy のアカウント作成</a></li><li><a href="#toc3" tabindex="0">Cisco Packet Tracer のダウンロード</a></li></ol></li><li><a href="#toc4" tabindex="0">補足：Packet Tracerの前に押さえたいネットワーク基礎</a></li></ol>
    </div>
  </div>

<h2 class="wp-block-heading"><span id="toc1">Cisco Packet Tracer のダウンロード方法</span></h2>



<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-1 sbs-stn sbp-l sbis-cb cf block-box"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://it-biz.online/wp-content/uploads/2023/06/man.png" alt="" class="speech-icon-image"/></figure><div class="speech-name"></div></div><div class="speech-balloon">
<p class="wp-block-paragraph">Cisco Packet Tracer のダウンロードは以下の3ステップだけ。</p>
</div></div>



<div class="wp-block-cocoon-blocks-iconlist-box iconlist-box blank-box list-caret-right block-box"><div class="iconlist-title">Cisco Packet Tracer のダウンロード方法</div>
<ul class="wp-block-list"><li>Step①：Cisco Networking Academy のアカウント作成</li><li>Step②：Cisco Packet Tracer のダウンロード</li><li>Step③：Cisco Packet Tracer のインストール～起動</li></ul>
</div>



<h3 class="wp-block-heading"><span id="toc2">Cisco Networking Academy のアカウント作成</span></h3>



<div class="wp-block-cocoon-blocks-icon-box common-icon-box block-box alert-box">
<p class="wp-block-paragraph">Cisco Networking Academy のアカウントを既に保持している方はこの章は読み飛ばしてください。</p>
</div>



<p class="wp-block-paragraph">Cisco Packet Tracer をインストールするためにCisco Networking Academy のアカウントが必須になります。</p>



<p class="wp-block-paragraph">Cisco Networking Academy のリンク（<a rel="noopener" href="https://www.netacad.com/" target="_blank">https://www.netacad.com</a>）へ飛んで、下記赤枠内「Packet Tracer」をクリックします。</p>



<figure class="wp-block-image aligncenter size-large"><img fetchpriority="high" decoding="async" width="1024" height="645" src="https://it-biz.online/wp-content/uploads/2022/10/image-22-1024x645.png" alt="パケットトレーサー　ダウンロード" class="wp-image-6775" srcset="https://it-biz.online/wp-content/uploads/2022/10/image-22-1024x645.png 1024w, https://it-biz.online/wp-content/uploads/2022/10/image-22-300x189.png 300w, https://it-biz.online/wp-content/uploads/2022/10/image-22-500x315.png 500w, https://it-biz.online/wp-content/uploads/2022/10/image-22-768x484.png 768w, https://it-biz.online/wp-content/uploads/2022/10/image-22-800x504.png 800w, https://it-biz.online/wp-content/uploads/2022/10/image-22.png 1089w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p class="wp-block-paragraph">続いて「Getting Started with Cisco Packet Tracer」の「View course」をクリック。</p>



<figure class="wp-block-image aligncenter size-large"><img decoding="async" width="1024" height="586" src="https://it-biz.online/wp-content/uploads/2022/10/image-23-1024x586.png" alt="パケットトレーサー　ダウンロード" class="wp-image-6776" srcset="https://it-biz.online/wp-content/uploads/2022/10/image-23-1024x586.png 1024w, https://it-biz.online/wp-content/uploads/2022/10/image-23-300x172.png 300w, https://it-biz.online/wp-content/uploads/2022/10/image-23-500x286.png 500w, https://it-biz.online/wp-content/uploads/2022/10/image-23-768x440.png 768w, https://it-biz.online/wp-content/uploads/2022/10/image-23-800x458.png 800w, https://it-biz.online/wp-content/uploads/2022/10/image-23.png 1099w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p class="wp-block-paragraph">続いて「Get Started」をクリック。</p>



<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-1 sbs-stn sbp-l sbis-cb cf block-box"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://it-biz.online/wp-content/uploads/2023/06/man.png" alt="" class="speech-icon-image"/></figure><div class="speech-name"></div></div><div class="speech-balloon">
<p class="wp-block-paragraph">言語はここでは「English」を選択しておきます。</p>
</div></div>



<figure class="wp-block-image aligncenter size-large"><img decoding="async" width="1024" height="516" src="https://it-biz.online/wp-content/uploads/2022/10/image-24-1024x516.png" alt="パケットトレーサー　ダウンロード" class="wp-image-6777" srcset="https://it-biz.online/wp-content/uploads/2022/10/image-24-1024x516.png 1024w, https://it-biz.online/wp-content/uploads/2022/10/image-24-300x151.png 300w, https://it-biz.online/wp-content/uploads/2022/10/image-24-500x252.png 500w, https://it-biz.online/wp-content/uploads/2022/10/image-24-768x387.png 768w, https://it-biz.online/wp-content/uploads/2022/10/image-24-800x403.png 800w, https://it-biz.online/wp-content/uploads/2022/10/image-24.png 1227w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p class="wp-block-paragraph">次に遷移した画面内の「Sign up」をクリック。</p>



<figure class="wp-block-image aligncenter size-large"><img loading="lazy" decoding="async" width="1024" height="498" src="https://it-biz.online/wp-content/uploads/2022/10/image-25-1024x498.png" alt="パケットトレーサー　ダウンロード" class="wp-image-6778" srcset="https://it-biz.online/wp-content/uploads/2022/10/image-25-1024x498.png 1024w, https://it-biz.online/wp-content/uploads/2022/10/image-25-300x146.png 300w, https://it-biz.online/wp-content/uploads/2022/10/image-25-500x243.png 500w, https://it-biz.online/wp-content/uploads/2022/10/image-25-768x374.png 768w, https://it-biz.online/wp-content/uploads/2022/10/image-25-800x389.png 800w, https://it-biz.online/wp-content/uploads/2022/10/image-25.png 1211w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p class="wp-block-paragraph">国・生年月日（年）・生年月日（月）を入力して、「Continue」をクリック。</p>



<figure class="wp-block-image aligncenter size-large"><img loading="lazy" decoding="async" width="1024" height="481" src="https://it-biz.online/wp-content/uploads/2022/10/image-26-1024x481.png" alt="パケットトレーサー　ダウンロード" class="wp-image-6780" srcset="https://it-biz.online/wp-content/uploads/2022/10/image-26-1024x481.png 1024w, https://it-biz.online/wp-content/uploads/2022/10/image-26-300x141.png 300w, https://it-biz.online/wp-content/uploads/2022/10/image-26-500x235.png 500w, https://it-biz.online/wp-content/uploads/2022/10/image-26-768x361.png 768w, https://it-biz.online/wp-content/uploads/2022/10/image-26-800x376.png 800w, https://it-biz.online/wp-content/uploads/2022/10/image-26.png 1257w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p class="wp-block-paragraph">氏名などの基本情報を入力して「Create account」をクリック。</p>



<figure class="wp-block-image aligncenter size-large"><img loading="lazy" decoding="async" width="1024" height="516" src="https://it-biz.online/wp-content/uploads/2022/10/image-27-1024x516.png" alt="パケットトレーサー　ダウンロード" class="wp-image-6781" srcset="https://it-biz.online/wp-content/uploads/2022/10/image-27-1024x516.png 1024w, https://it-biz.online/wp-content/uploads/2022/10/image-27-300x151.png 300w, https://it-biz.online/wp-content/uploads/2022/10/image-27-500x252.png 500w, https://it-biz.online/wp-content/uploads/2022/10/image-27-768x387.png 768w, https://it-biz.online/wp-content/uploads/2022/10/image-27-800x403.png 800w, https://it-biz.online/wp-content/uploads/2022/10/image-27.png 1235w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-1 sbs-stn sbp-l sbis-cb cf block-box"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://it-biz.online/wp-content/uploads/2023/06/man.png" alt="" class="speech-icon-image"/></figure><div class="speech-name"></div></div><div class="speech-balloon">
<p class="wp-block-paragraph">ここまでの手順を実施すると、Cisco Networking Academy のアカウント登録が完了するとともに、以下のようにCisco公式マニュアルが開き、Cisco Packet Tracer のダウンロード、インストール方法を確認することができます。</p>
</div></div>



<figure class="wp-block-image aligncenter size-large"><img loading="lazy" decoding="async" width="1024" height="591" src="https://it-biz.online/wp-content/uploads/2022/10/image-28-1024x591.png" alt="パケットトレーサー　ダウンロード" class="wp-image-6782" srcset="https://it-biz.online/wp-content/uploads/2022/10/image-28-1024x591.png 1024w, https://it-biz.online/wp-content/uploads/2022/10/image-28-300x173.png 300w, https://it-biz.online/wp-content/uploads/2022/10/image-28-500x289.png 500w, https://it-biz.online/wp-content/uploads/2022/10/image-28-768x443.png 768w, https://it-biz.online/wp-content/uploads/2022/10/image-28-800x462.png 800w, https://it-biz.online/wp-content/uploads/2022/10/image-28.png 1116w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p class="wp-block-paragraph">この先は実際のインストール手順に移ります。基本的には、上記のCisco「Getting Started with Cisco Packet Tracer」コースのスライドを追っていけばインストールまで行うことはできるのですが、ここでは時間がない人向けに要点に絞って解説します。</p>



<h3 class="wp-block-heading"><span id="toc3">Cisco Packet Tracer のダウンロード</span></h3>



<p class="wp-block-paragraph">Packet Tracer は「<strong>Download and Use Cisco Packet Tracer</strong>」＞「<strong>1.0.3 Download Cisco Packet Tracer</strong>」に表示されるリンクからインストールファイルをダウンロードすることができます。</p>



<figure class="wp-block-image aligncenter size-large"><img loading="lazy" decoding="async" width="1024" height="529" src="https://it-biz.online/wp-content/uploads/2022/10/image-30-1024x529.png" alt="" class="wp-image-6784" srcset="https://it-biz.online/wp-content/uploads/2022/10/image-30-1024x529.png 1024w, https://it-biz.online/wp-content/uploads/2022/10/image-30-300x155.png 300w, https://it-biz.online/wp-content/uploads/2022/10/image-30-500x258.png 500w, https://it-biz.online/wp-content/uploads/2022/10/image-30-768x396.png 768w, https://it-biz.online/wp-content/uploads/2022/10/image-30-800x413.png 800w, https://it-biz.online/wp-content/uploads/2022/10/image-30.png 1141w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p class="wp-block-paragraph">リンクをクリックするとインストールファイルがダウンロードされますので、インストールファイルを実行し「Next」ボタンをクリック。</p>



<figure class="wp-block-image aligncenter size-full"><img loading="lazy" decoding="async" width="526" height="400" src="https://it-biz.online/wp-content/uploads/2022/10/image-32.png" alt="" class="wp-image-6786" srcset="https://it-biz.online/wp-content/uploads/2022/10/image-32.png 526w, https://it-biz.online/wp-content/uploads/2022/10/image-32-300x228.png 300w, https://it-biz.online/wp-content/uploads/2022/10/image-32-500x380.png 500w" sizes="(max-width: 526px) 100vw, 526px" /></figure>



<p class="wp-block-paragraph">インストール先のフォルダを指定します。特に指定する必要がない場合はデフォルト値のままで構いません。</p>



<p class="wp-block-paragraph">「Next」ボタンをクリック。</p>



<figure class="wp-block-image aligncenter size-full"><img loading="lazy" decoding="async" width="517" height="389" src="https://it-biz.online/wp-content/uploads/2022/10/image-33.png" alt="" class="wp-image-6787" srcset="https://it-biz.online/wp-content/uploads/2022/10/image-33.png 517w, https://it-biz.online/wp-content/uploads/2022/10/image-33-300x226.png 300w, https://it-biz.online/wp-content/uploads/2022/10/image-33-500x376.png 500w" sizes="(max-width: 517px) 100vw, 517px" /></figure>



<p class="wp-block-paragraph">同様に「Next」ボタンをクリック。</p>



<figure class="wp-block-image aligncenter size-full"><img loading="lazy" decoding="async" width="512" height="387" src="https://it-biz.online/wp-content/uploads/2022/10/image-34.png" alt="" class="wp-image-6788" srcset="https://it-biz.online/wp-content/uploads/2022/10/image-34.png 512w, https://it-biz.online/wp-content/uploads/2022/10/image-34-300x227.png 300w, https://it-biz.online/wp-content/uploads/2022/10/image-34-500x378.png 500w" sizes="(max-width: 512px) 100vw, 512px" /></figure>



<p class="wp-block-paragraph">その次の画面も同様に「Next」ボタンをクリック。</p>



<figure class="wp-block-image aligncenter size-full"><img loading="lazy" decoding="async" width="515" height="389" src="https://it-biz.online/wp-content/uploads/2022/10/image-35.png" alt="" class="wp-image-6789" srcset="https://it-biz.online/wp-content/uploads/2022/10/image-35.png 515w, https://it-biz.online/wp-content/uploads/2022/10/image-35-300x227.png 300w, https://it-biz.online/wp-content/uploads/2022/10/image-35-500x378.png 500w" sizes="(max-width: 515px) 100vw, 515px" /></figure>



<p class="wp-block-paragraph">インストールを開始します。</p>



<figure class="wp-block-image aligncenter size-full"><img loading="lazy" decoding="async" width="513" height="386" src="https://it-biz.online/wp-content/uploads/2022/10/image-36.png" alt="" class="wp-image-6790" srcset="https://it-biz.online/wp-content/uploads/2022/10/image-36.png 513w, https://it-biz.online/wp-content/uploads/2022/10/image-36-300x226.png 300w, https://it-biz.online/wp-content/uploads/2022/10/image-36-500x376.png 500w" sizes="(max-width: 513px) 100vw, 513px" /></figure>



<figure class="wp-block-image aligncenter size-full"><img loading="lazy" decoding="async" width="527" height="401" src="https://it-biz.online/wp-content/uploads/2022/10/image-37.png" alt="" class="wp-image-6791" srcset="https://it-biz.online/wp-content/uploads/2022/10/image-37.png 527w, https://it-biz.online/wp-content/uploads/2022/10/image-37-300x228.png 300w, https://it-biz.online/wp-content/uploads/2022/10/image-37-500x380.png 500w" sizes="(max-width: 527px) 100vw, 527px" /></figure>



<figure class="wp-block-image aligncenter size-full"><img loading="lazy" decoding="async" width="513" height="387" src="https://it-biz.online/wp-content/uploads/2022/10/image-38.png" alt="" class="wp-image-6792" srcset="https://it-biz.online/wp-content/uploads/2022/10/image-38.png 513w, https://it-biz.online/wp-content/uploads/2022/10/image-38-300x226.png 300w, https://it-biz.online/wp-content/uploads/2022/10/image-38-500x377.png 500w" sizes="(max-width: 513px) 100vw, 513px" /></figure>



<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-1 sbs-stn sbp-l sbis-cb cf block-box"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://it-biz.online/wp-content/uploads/2023/06/man.png" alt="" class="speech-icon-image"/></figure><div class="speech-name"></div></div><div class="speech-balloon">
<p class="wp-block-paragraph">Finishボタンでインストールを終了します。「Launch Cisco Packet tracer」にチェックを入れておくと、その後自動的にPacket Tracer が起動されます。</p>
</div></div>



<figure class="wp-block-image aligncenter size-large"><img loading="lazy" decoding="async" width="1024" height="513" src="https://it-biz.online/wp-content/uploads/2022/10/image-40-1024x513.png" alt="" class="wp-image-6794" srcset="https://it-biz.online/wp-content/uploads/2022/10/image-40-1024x513.png 1024w, https://it-biz.online/wp-content/uploads/2022/10/image-40-300x150.png 300w, https://it-biz.online/wp-content/uploads/2022/10/image-40-500x250.png 500w, https://it-biz.online/wp-content/uploads/2022/10/image-40-768x385.png 768w, https://it-biz.online/wp-content/uploads/2022/10/image-40-800x401.png 800w, https://it-biz.online/wp-content/uploads/2022/10/image-40.png 1184w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p class="wp-block-paragraph">Cisco Skills For All をクリックすることでPacket Tracerへのログインが完了します。</p>



<figure class="wp-block-image aligncenter size-large"><img loading="lazy" decoding="async" width="1024" height="535" src="https://it-biz.online/wp-content/uploads/2022/10/image-41-1024x535.png" alt="" class="wp-image-6795" srcset="https://it-biz.online/wp-content/uploads/2022/10/image-41-1024x535.png 1024w, https://it-biz.online/wp-content/uploads/2022/10/image-41-300x157.png 300w, https://it-biz.online/wp-content/uploads/2022/10/image-41-500x261.png 500w, https://it-biz.online/wp-content/uploads/2022/10/image-41-768x401.png 768w, https://it-biz.online/wp-content/uploads/2022/10/image-41-800x418.png 800w, https://it-biz.online/wp-content/uploads/2022/10/image-41-1536x803.png 1536w, https://it-biz.online/wp-content/uploads/2022/10/image-41.png 2000w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<h2 class="wp-block-heading"><span id="toc4">補足：Packet Tracerの前に押さえたいネットワーク基礎</span></h2>



<p class="wp-block-paragraph">Packet Tracerはネットワーク機器を仮想的に動かせる便利な学習ツールです。操作手順とあわせて、IPやTCPなどの基本用語を理解しておくと、画面上で何を確認しているのかが分かりやすくなります。</p>



<ul class="wp-block-list">

<li><a href="https://it-biz.online/it-skills/what-is-network/">ネットワークとは何か</a>を先に整理すると、機器同士がつながるイメージを持ちやすくなります。</li>


<li><a href="https://it-biz.online/it-skills/ip/">IPとは何か</a>を読むと、PCやルーターに設定するアドレスの意味が理解しやすくなります。</li>


<li><a href="https://it-biz.online/it-skills/tcp/">TCPとは何か</a>も押さえると、通信が届く仕組みまで一歩深く理解できます。</li>

</ul>

]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>NFSプロトコルとは何か？初心者向けに1からわかりやすく解説</title>
		<link>https://it-biz.online/it-skills/nfs/</link>
		
		<dc:creator><![CDATA[ビズドットオンライン]]></dc:creator>
		<pubDate>Tue, 03 Feb 2026 02:40:15 +0000</pubDate>
				<category><![CDATA[IT-Skills]]></category>
		<category><![CDATA[Network]]></category>
		<category><![CDATA[ネットワーク]]></category>
		<category><![CDATA[通信プロトコル]]></category>
		<guid isPermaLink="false">https://it-biz.online/?p=10384</guid>

					<description><![CDATA[目次 結論：NFSとは「別のコンピュータのフォルダを、自分のPCのフォルダのように使える」仕組みそもそも「ファイル共有」が必要になる理由NFSの基本的な仕組み登場人物はたった2つNFSを使うと何が嬉しいのか？1. アプリ [&#8230;]]]></description>
										<content:encoded><![CDATA[

  <div id="toc" class="toc tnt-number toc-center tnt-number border-element"><input type="checkbox" class="toc-checkbox" id="toc-checkbox-7" checked><label class="toc-title" for="toc-checkbox-7">目次</label>
    <div class="toc-content">
    <ol class="toc-list open"><li><a href="#toc1" tabindex="0">結論：NFSとは「別のコンピュータのフォルダを、自分のPCのフォルダのように使える」仕組み</a></li><li><a href="#toc2" tabindex="0">そもそも「ファイル共有」が必要になる理由</a></li><li><a href="#toc3" tabindex="0">NFSの基本的な仕組み</a><ol><li><a href="#toc4" tabindex="0">登場人物はたった2つ</a></li></ol></li><li><a href="#toc5" tabindex="0">NFSを使うと何が嬉しいのか？</a><ol><li><a href="#toc6" tabindex="0">1. アプリケーションを変更しなくてよい</a></li><li><a href="#toc7" tabindex="0">2. 複数サーバで同じデータを共有できる</a></li><li><a href="#toc8" tabindex="0">3. 構成がシンプル</a></li></ol></li><li><a href="#toc9" tabindex="0">ローカルディスクとNFSの違い</a></li><li><a href="#toc10" tabindex="0">超かんたん：NFSの利用イメージ（概念）</a><ol><li><a href="#toc11" tabindex="0">サーバ側（共有する）</a></li><li><a href="#toc12" tabindex="0">クライアント側（使う）</a></li></ol></li><li><a href="#toc13" tabindex="0">実務で必ず意識すべき注意点</a><ol><li><a href="#toc14" tabindex="0">● ネットワーク＝性能</a></li><li><a href="#toc15" tabindex="0">● NFSサーバは単一障害点になりやすい</a></li><li><a href="#toc16" tabindex="0">● 同時書き込み</a></li></ol></li><li><a href="#toc17" tabindex="0">補足：NFSはネットワークの基礎と一緒に見る</a></li><li><a href="#toc18" tabindex="0">まとめ</a></li></ol>
    </div>
  </div>

<h2 class="wp-block-heading"><span id="toc1">結論：NFSとは「別のコンピュータのフォルダを、自分のPCのフォルダのように使える」仕組み</span></h2>



<p class="wp-block-paragraph">NFS（Network File System）とは、<strong>ネットワーク越しに他のコンピュータのディスク（フォルダ）を、自分のローカルディスクのように扱えるようにする通信プロトコル</strong>です。</p>



<p class="wp-block-paragraph">一言でいうと、</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p class="wp-block-paragraph"><strong>「遠くにあるフォルダを、手元にあるかのように使える技術」</strong></p>
</blockquote>



<p class="wp-block-paragraph">これがNFSの本質です。</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="800" height="533" src="https://it-biz.online/wp-content/uploads/2026/02/image-2-800x533.png" alt="" class="wp-image-10388" srcset="https://it-biz.online/wp-content/uploads/2026/02/image-2-800x533.png 800w, https://it-biz.online/wp-content/uploads/2026/02/image-2-500x333.png 500w, https://it-biz.online/wp-content/uploads/2026/02/image-2-300x200.png 300w, https://it-biz.online/wp-content/uploads/2026/02/image-2-768x512.png 768w, https://it-biz.online/wp-content/uploads/2026/02/image-2.png 1536w" sizes="(max-width: 800px) 100vw, 800px" /></figure>



<p class="wp-block-paragraph">NFSはもともと Sun Microsystems によって開発され、現在ではLinux/Unix系システムを中心に、サーバ環境で広く使われています。</p>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<h2 class="wp-block-heading"><span id="toc2">そもそも「ファイル共有」が必要になる理由</span></h2>



<p class="wp-block-paragraph">まず前提として、現代のシステムでは次のような状況がよくあります。</p>



<ul class="wp-block-list">
<li>サーバが複数台ある</li>



<li>それらが<strong>同じデータ</strong>を参照する必要がある</li>



<li>画像・帳票・ログ・アップロードファイルなどを<strong>一元管理したい</strong></li>
</ul>



<p class="wp-block-paragraph">例：</p>



<ul class="wp-block-list">
<li>Webサーバが3台ある</li>



<li>どのサーバからアクセスしても同じ画像フォルダを使いたい</li>
</ul>



<p class="wp-block-paragraph">このとき各サーバに同じファイルをコピーして回るのは現実的ではありません。</p>



<p class="wp-block-paragraph">そこで登場するのが <strong>NFS</strong> です。</p>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<h2 class="wp-block-heading"><span id="toc3">NFSの基本的な仕組み</span></h2>



<h3 class="wp-block-heading"><span id="toc4">登場人物はたった2つ</span></h3>



<p class="wp-block-paragraph">NFSは、とてもシンプルな構成です。</p>



<figure class="wp-block-table"><div class="scrollable-table stfc-sticky"><table class="has-fixed-layout"><thead><tr><th>役割</th><th>説明</th></tr></thead><tbody><tr><td>NFSサーバ</td><td>フォルダを「公開」する側</td></tr><tr><td>NFSクライアント</td><td>そのフォルダを「使う」側</td></tr></tbody></table></div></figure>



<p class="wp-block-paragraph">サーバ側で共有設定したディレクトリを、クライアント側で <code>mount</code>（マウント）すると、クライアントからは普通のフォルダとして見えるようになります。</p>



<p class="wp-block-paragraph">構造を簡略化すると、次のようになります。</p>



<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">[NFSクライアント] ─── ネットワーク ─── [NFSサーバ]
        |
     /mnt/share   ← 実体はサーバ側ディスク
</pre>



<p class="wp-block-paragraph">ポイントはここです。</p>



<ul class="wp-block-list">
<li>クライアントから見ると <code>/mnt/share</code> は普通のフォルダ</li>



<li>しかし実体はNFSサーバ上に存在</li>
</ul>



<p class="wp-block-paragraph">アプリケーションは「ローカルファイル」だと思って読み書きしますが、裏ではNFSがネットワーク越しに通信しています。</p>



<h2 class="wp-block-heading"><span id="toc5">NFSを使うと何が嬉しいのか？</span></h2>



<p class="wp-block-paragraph">代表的なメリットは次の3つです。</p>



<h3 class="wp-block-heading"><span id="toc6">1. アプリケーションを変更しなくてよい</span></h3>



<p class="wp-block-paragraph">NFSは「ファイルシステム」として見えるため、</p>



<ul class="wp-block-list">
<li>特別なAPI</li>



<li>専用ライブラリ</li>
</ul>



<p class="wp-block-paragraph">が不要です。</p>



<p class="wp-block-paragraph">既存アプリはそのままで、</p>



<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">/data/file.txt
</pre>



<p class="wp-block-paragraph">を読むだけ。<br>それがたまたまNFSなだけ、という状態になります。</p>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<h3 class="wp-block-heading"><span id="toc7">2. 複数サーバで同じデータを共有できる</span></h3>



<p class="wp-block-paragraph">典型構成：</p>



<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">WebサーバA ─┐
WebサーバB ─┼─ NFSサーバ
WebサーバC ─┘
</pre>



<p class="wp-block-paragraph">これにより、</p>



<ul class="wp-block-list">
<li>アップロードファイル</li>



<li>画像</li>



<li>帳票</li>
</ul>



<p class="wp-block-paragraph">などを<strong>1か所に集約</strong>できます。</p>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<h3 class="wp-block-heading"><span id="toc8">3. 構成がシンプル</span></h3>



<p class="wp-block-paragraph">最低限必要なのは：</p>



<ul class="wp-block-list">
<li>NFSサーバ</li>



<li>NFSクライアント</li>
</ul>



<p class="wp-block-paragraph">だけ。</p>



<p class="wp-block-paragraph">大規模な分散ストレージと比べると、導入・理解・運用のハードルが低いのも特徴です。</p>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<h2 class="wp-block-heading"><span id="toc9">ローカルディスクとNFSの違い</span></h2>



<p class="wp-block-paragraph">感覚的な違いを表にまとめます。</p>



<figure class="wp-block-table"><div class="scrollable-table stfc-sticky"><table class="has-fixed-layout"><thead><tr><th>項目</th><th>ローカルディスク</th><th>NFS</th></tr></thead><tbody><tr><td>実体の場所</td><td>自分のマシン</td><td>別のマシン</td></tr><tr><td>見え方</td><td>フォルダ</td><td>フォルダ</td></tr><tr><td>アクセス方法</td><td>直接</td><td>ネットワーク経由</td></tr><tr><td>速度</td><td>速い</td><td>ネットワーク依存</td></tr><tr><td>障害時</td><td>自分だけ影響</td><td>全クライアント影響</td></tr></tbody></table></div></figure>



<p class="wp-block-paragraph"><strong>見た目は同じ、裏側が違う</strong>。<br>これが最大のポイントです。</p>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<h2 class="wp-block-heading"><span id="toc10">超かんたん：NFSの利用イメージ（概念）</span></h2>



<h3 class="wp-block-heading"><span id="toc11">サーバ側（共有する）</span></h3>



<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">/share
</pre>



<p class="wp-block-paragraph">というフォルダを公開。</p>



<h3 class="wp-block-heading"><span id="toc12">クライアント側（使う）</span></h3>



<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">mount サーバ:/share /mnt/share
</pre>



<p class="wp-block-paragraph">すると、</p>



<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">/mnt/share
</pre>



<p class="wp-block-paragraph">が現れ、普通のフォルダとして操作可能になります。</p>



<p class="wp-block-paragraph">以降は：</p>



<ul class="wp-block-list">
<li>ls</li>



<li>cp</li>



<li>vi</li>
</ul>



<p class="wp-block-paragraph">すべて通常通り。</p>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<h2 class="wp-block-heading"><span id="toc13">実務で必ず意識すべき注意点</span></h2>



<p class="wp-block-paragraph">便利なNFSですが、設計時には以下が重要です。</p>



<h3 class="wp-block-heading"><span id="toc14">● ネットワーク＝性能</span></h3>



<p class="wp-block-paragraph">ファイルI/Oはすべてネットワーク越し。<br>大量アクセス時はボトルネックになります。</p>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<h3 class="wp-block-heading"><span id="toc15">● NFSサーバは単一障害点になりやすい</span></h3>



<p class="wp-block-paragraph">NFSサーバが落ちると、</p>



<p class="wp-block-paragraph">→ 接続している全クライアントが影響を受けます。</p>



<p class="wp-block-paragraph">冗長化設計が重要になります。</p>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<h3 class="wp-block-heading"><span id="toc16">● 同時書き込み</span></h3>



<p class="wp-block-paragraph">複数マシンから同じファイルを書く場合、</p>



<ul class="wp-block-list">
<li>ロック</li>



<li>整合性</li>
</ul>



<p class="wp-block-paragraph">を意識しないと事故が起きます。</p>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<h2 class="wp-block-heading"><span id="toc17">補足：NFSはネットワークの基礎と一緒に見る</span></h2>



<p class="wp-block-paragraph">NFSはファイル共有の仕組みですが、実際にはネットワーク越しに通信して動きます。そのため、プロトコルやTCP/IPの基本を押さえておくと、性能や障害の注意点も理解しやすくなります。</p>



<ul class="wp-block-list">

<li><a href="https://it-biz.online/it-skills/protocol/">プロトコルとは何か</a>を読むと、NFSが通信ルールの一種であることを整理できます。</li>


<li><a href="https://it-biz.online/it-skills/tcp-ip/">TCP/IPとは何か</a>を押さえると、NFS通信がネットワーク上で成り立つ前提を理解しやすくなります。</li>


<li><a href="https://it-biz.online/it-skills/what-is-network/">ネットワークとは何か</a>もあわせて読むと、サーバとクライアントの関係が見えやすくなります。</li>

</ul>



<h2 class="wp-block-heading"><span id="toc18">まとめ</span></h2>



<p class="wp-block-paragraph">最後に要点を整理します。</p>



<ul class="wp-block-list">
<li>NFSとは「遠隔フォルダをローカルのように使える」プロトコル</li>



<li>サーバが公開、クライアントがマウントするだけ</li>



<li>アプリは通常のファイル操作のまま利用可能</li>



<li>複数サーバでのデータ共有が簡単</li>



<li>一方で、性能・単一障害点・同時更新には注意が必要</li>
</ul>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>スタンドアロンとは？ IT初心者でもわかるその概念と用途</title>
		<link>https://it-biz.online/it-skills/stand-alone/</link>
		
		<dc:creator><![CDATA[ビズドットオンライン]]></dc:creator>
		<pubDate>Mon, 30 Oct 2023 06:16:20 +0000</pubDate>
				<category><![CDATA[IT-Skills]]></category>
		<category><![CDATA[Network]]></category>
		<category><![CDATA[ネットワーク]]></category>
		<guid isPermaLink="false">https://it-biz.online/?p=8504</guid>

					<description><![CDATA[スタンドアロンとは１台のコンピュータやソフトウェアが独立して機能する形態を指します。 この記事では「スタンドアロン」の基本的な概念から具体的な用途、メリット・デメリットまでをIT初心者向けにわかりやすく網羅的に解説します [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p class="wp-block-paragraph">スタンドアロンとは<strong><span class="marker-under">１台のコンピュータやソフトウェアが独立して機能する形態</span></strong>を指します。</p>



<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-1 sbs-stn sbp-l sbis-cb cf block-box cocoon-block-balloon"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://it-biz.online/wp-content/uploads/2023/06/man.png" alt="" class="speech-icon-image"/></figure><div class="speech-name"></div></div><div class="speech-balloon">
<p class="wp-block-paragraph">スタンドアロンという単語を聞く機会が増えつつある昨今、その形態にはメリットもデメリットもあり、用途に応じて最適な選択が必要です。</p>
</div></div>



<p class="wp-block-paragraph">この記事では「スタンドアロン」の基本的な概念から具体的な用途、メリット・デメリットまでをIT初心者向けにわかりやすく網羅的に解説します。</p>



<div class="wp-block-cocoon-blocks-tab-caption-box-1 tab-caption-box block-box cocoon-block-tab-caption-box"><div class="tab-caption-box-label block-box-label box-label fab-edit"><span class="tab-caption-box-label-text block-box-label-text box-label-text">このページで学べる内容</span></div><div class="tab-caption-box-content block-box-content box-content">
<div class="wp-block-cocoon-blocks-iconlist-box iconlist-box blank-box list-caret-right block-box"><div class="iconlist-title"></div>
<ul class="wp-block-list">
<li>スタンドアロンの基本的な定義</li>



<li>スタンドアロンの具体例</li>



<li>スタンドアロンのメリットとデメリット</li>



<li>スタンドアロンが適用される場面</li>
</ul>
</div>
</div></div>



<p class="wp-block-paragraph">プログラマーやシステムエンジニアを目指す方であれば<strong><span class="marker-under">知らないと恥ずかしい超・基本知識の１つ</span></strong>。是非最後までご覧ください。</p>




  <div id="toc" class="toc tnt-number toc-center tnt-number border-element"><input type="checkbox" class="toc-checkbox" id="toc-checkbox-9" checked><label class="toc-title" for="toc-checkbox-9">目次</label>
    <div class="toc-content">
    <ol class="toc-list open"><li><a href="#toc1" tabindex="0">スタンドアロンとは</a><ol><li><a href="#toc2" tabindex="0">スタンドアロンの具体例</a></li></ol></li><li><a href="#toc3" tabindex="0">スタンドアロンのメリットとデメリット</a><ol><li><a href="#toc4" tabindex="0">メリット</a></li><li><a href="#toc5" tabindex="0">デメリット</a></li></ol></li><li><a href="#toc6" tabindex="0">スタンドアロンを選ぶべき状況</a><ol><li><a href="#toc7" tabindex="0">パターン１：高いセキュリティが求められる場合</a></li><li><a href="#toc8" tabindex="0">パターン２：ネットワークに依存しない業務を行う場合</a></li><li><a href="#toc9" tabindex="0">パターン３：独立したシステムで完結するサービスを提供する場合</a></li><li><a href="#toc10" tabindex="0">パターン４：運用がシンプルであるべき状況</a></li></ol></li></ol>
    </div>
  </div>

<h2 class="wp-block-heading"><span id="toc1">スタンドアロンとは</span></h2>



<p class="wp-block-paragraph">スタンドアロンとは、<strong><span class="marker-under">１台のコンピュータやソフトウェアが他のシステムやデバイスと独立して、自己完結型で機能する形態</span></strong>を指します。つまり、自分以外のコンピューターやソフトウェアなしでその機能を十分に発揮できる状態です。</p>



<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-1 sbs-stn sbp-l sbis-cb cf block-box cocoon-block-balloon"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://it-biz.online/wp-content/uploads/2023/06/man.png" alt="" class="speech-icon-image"/></figure><div class="speech-name"></div></div><div class="speech-balloon">
<p class="wp-block-paragraph">スタンドアロンという言葉は、英語で「stand alone」から来ています。この「stand alone」は直訳すると「単独で立つ」という意味になります。</p>
</div></div>



<p class="wp-block-paragraph">分かりやすく言えば「電卓」がスタンドアロンで利用される仕組みの一例。「電卓」はそれ自体で計算するという機能を完全に果たし、他のコンピュータや他の電卓と接続したりする必要はありません。</p>



<p class="wp-block-paragraph">このスタンドアロンと対照的な概念の１つが「ネットワークシステム」です。ネットワークシステムは複数のデバイスやソフトウェアが連携して機能するため、単一の部分が独立して完全に機能するわけではありません。</p>



<p class="has-text-align-center wp-block-paragraph"><span class="badge">参考</span>　<a href="https://it-biz.online/it-skills/what-is-network/">ネットワークとは？</a></p>



<p class="wp-block-paragraph">つまり、例えばコンピュータから写真を印刷したい！という場合には、有線か無線かを問わずプリンターに接続する場合があります。これはスタンドアロンではありません。</p>



<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-1 sbs-stn sbp-l sbis-cb cf block-box cocoon-block-balloon"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://it-biz.online/wp-content/uploads/2023/06/man.png" alt="" class="speech-icon-image"/></figure><div class="speech-name"></div></div><div class="speech-balloon">
<p class="wp-block-paragraph">インターネットも、ネットワークを介してサーバと接続する必要があるため、これもスタンドアロンではありません。</p>
</div></div>



<h3 class="wp-block-heading"><span id="toc2">スタンドアロンの具体例</span></h3>



<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-1 sbs-stn sbp-l sbis-cb cf block-box cocoon-block-balloon"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://it-biz.online/wp-content/uploads/2023/06/man.png" alt="" class="speech-icon-image"/></figure><div class="speech-name"></div></div><div class="speech-balloon">
<p class="wp-block-paragraph">ここでは、スタンドアロンが具体的にどのような形で存在するのか、いくつかの代表的な例をご紹介します。</p>
</div></div>



<h4 class="wp-block-heading">パーソナルコンピュータ</h4>



<p class="wp-block-paragraph">パーソナルコンピュータ（PC）はスタンドアロンで動作します。インターネットに接続していなくても、ローカルに保存されたソフトウェアを使って作業ができるのが一例です。</p>



<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-1 sbs-stn sbp-l sbis-cb cf block-box cocoon-block-balloon"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://it-biz.online/wp-content/uploads/2023/06/man.png" alt="" class="speech-icon-image"/></figure><div class="speech-name"></div></div><div class="speech-balloon">
<p class="wp-block-paragraph">ネットに接続していなくてもwordで文章を作成したり、動画を編集したりすることが可能。ネットやプリンターなど、<strong>他のコンピュータやサーバを接続しないで利用する状態がスタンドアロン</strong>です。</p>
</div></div>



<h4 class="wp-block-heading">サーバー</h4>



<p class="wp-block-paragraph">一部のサーバーもスタンドアロンで動作する場合があります。特に小規模なビジネスや研究施設で使われるサーバーは、ネットワークに接続されていなくても特定の処理を行うことができます。</p>



<p class="has-text-align-center wp-block-paragraph"><span class="badge">参考</span>　<a href="https://it-biz.online/it-skills/server-abc/">サーバとは？</a></p>



<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-1 sbs-stn sbp-l sbis-cb cf block-box cocoon-block-balloon"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://it-biz.online/wp-content/uploads/2023/06/man.png" alt="" class="speech-icon-image"/></figure><div class="speech-name"></div></div><div class="speech-balloon">
<p class="wp-block-paragraph">一例が工場や発電所などの制御システムで用いられるサーバーです。このサーバはセキュリティ上の理由からインターネットから隔離された環境で動作することが多く、これらのサーバーは特定の制御タスクを独立して行い、外部との通信は最小限に抑えられます。</p>
</div></div>



<h4 class="wp-block-heading">ソフトウェア</h4>



<p class="wp-block-paragraph">多くのソフトウェアにはスタンドアロン版が存在します。これはインターネット接続なしで完全に動作するソフトウェアで、例えばAdobe Photoshopのスタンドアロン版がそれに該当します。</p>



<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-1 sbs-stn sbp-l sbis-cb cf block-box cocoon-block-balloon"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://it-biz.online/wp-content/uploads/2023/06/man.png" alt="" class="speech-icon-image"/></figure><div class="speech-name"></div></div><div class="speech-balloon">
<p class="wp-block-paragraph">ザックりいえば、インターネット接続無しで自由にその機能を操作できれば、そのソフトウェアはスタンドアロンで利用される（利用できる）と言えます。</p>
</div></div>



<h4 class="wp-block-heading">IoTデバイス</h4>



<p class="wp-block-paragraph">一部のIoT（Internet of Things）デバイスもスタンドアロンで動作することがあります。例えば、スマート電球はスマートフォンと直接Bluetooth接続でき、中央のハブなしで操作が可能です。</p>



<h2 class="wp-block-heading"><span id="toc3">スタンドアロンのメリットとデメリット</span></h2>



<p class="wp-block-paragraph">スタンドアロンは特定の状況下で多くの利点を提供しますが、それには一定の制限や短所もあります。このセクションでは、そのメリットとデメリットを詳細に解説します。</p>



<h3 class="wp-block-heading"><span id="toc4">メリット</span></h3>



<ol class="wp-block-list">
<li><strong>セキュリティ</strong>
<ul class="wp-block-list">
<li>インターネットに接続されていないスタンドアロンシステムは、外部からの攻撃に対して比較的安全であると言えます。例えば、外部からの攻撃に晒されたくないような機密システムの場合は、あえてインターネット接続せず、ネットワークから隔離して運用する場合があります。</li>
</ul>
</li>



<li><strong>独立性</strong>
<ul class="wp-block-list">
<li>ネットワーク障害が発生しても、スタンドアロンシステムは影響を受けません。ポイントオブセール（POS）システムなど、ビジネスにおいて継続的な動作が必要な場合に有用です。</li>
</ul>
</li>



<li><strong>シンプルな設定</strong>
<ul class="wp-block-list">
<li>スタンドアロンシステムは基本的にネットワーク設定や複雑な依存関係を必要としません。このため、導入と運用が比較的簡単です。</li>
</ul>
</li>
</ol>



<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-1 sbs-stn sbp-l sbis-cb cf block-box cocoon-block-balloon"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://it-biz.online/wp-content/uploads/2023/06/man.png" alt="" class="speech-icon-image"/></figure><div class="speech-name"></div></div><div class="speech-balloon">
<p class="wp-block-paragraph">まとめると、外部からの独立性が担保されるので、セキュリティ的に安心、かつ外部への接続設定などが不要なので、ネットワークの知識が無くても比較的容易に開発・運用が可能である！ということです。</p>
</div></div>



<h3 class="wp-block-heading"><span id="toc5">デメリット</span></h3>



<ol class="wp-block-list">
<li><strong>機能制限</strong>
<ul class="wp-block-list">
<li>スタンドアロンシステムは、ネットワークリソースや外部データにアクセスできないため、その機能が限られる場合があります。例えば、最新の天気予報などを必要とするシステムなどはスタンドアロンでは運用できません。</li>
</ul>
</li>



<li><strong>データ同期の問題</strong>
<ul class="wp-block-list">
<li>他のシステムやデバイスとのデータ同期が困難です。医療機関で患者データを共有する必要がある場合などに問題となる可能性があります。</li>
</ul>
</li>



<li><strong>高い運用コスト</strong>
<ul class="wp-block-list">
<li>インターネットを活用しないため、ソフトウェアのアップデートやメンテナンスが手動で行わなければならない場合があり、これが逆に時間とコストを必要とする場合があります。</li>
</ul>
</li>
</ol>



<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-1 sbs-stn sbp-l sbis-cb cf block-box cocoon-block-balloon"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://it-biz.online/wp-content/uploads/2023/06/man.png" alt="" class="speech-icon-image"/></figure><div class="speech-name"></div></div><div class="speech-balloon">
<p class="wp-block-paragraph">他のコンピュータやサーバと機能を共有できないので、その分のメリットを享受できません、ということです。</p>
</div></div>



<h2 class="wp-block-heading"><span id="toc6">スタンドアロンを選ぶべき状況</span></h2>



<p class="wp-block-paragraph">スタンドアロンはその特性上、特定のケースで非常に有用だということが分かります。しかし、そのようなケースはどのようなものなのでしょうか？</p>



<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-1 sbs-stn sbp-l sbis-cb cf block-box cocoon-block-balloon"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://it-biz.online/wp-content/uploads/2023/06/man.png" alt="" class="speech-icon-image"/></figure><div class="speech-name"></div></div><div class="speech-balloon">
<p class="wp-block-paragraph">ここでは、スタンドアロンシステムが特に力を発揮するシナリオを例示したいと思います。</p>
</div></div>



<h3 class="wp-block-heading"><span id="toc7">パターン１：高いセキュリティが求められる場合</span></h3>



<p class="wp-block-paragraph">セキュリティが極めて重要な場合、スタンドアロンシステムは大きな価値を持ちます。例えば、政府機関や研究施設で扱う機密情報が該当します。こうした環境では、外部との接触点を極力減らし、セキュリティリスクを低減することが求められます。</p>



<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-1 sbs-stn sbp-l sbis-cb cf block-box cocoon-block-balloon"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://it-biz.online/wp-content/uploads/2023/06/man.png" alt="" class="speech-icon-image"/></figure><div class="speech-name"></div></div><div class="speech-balloon">
<p class="wp-block-paragraph">特に、特許取得を目指すような専門的な研究機関のシステムや、決して外部へのデータ流出が許されない重要な個人情報を扱うシステムなどが↑に該当します。</p>
</div></div>



<h3 class="wp-block-heading"><span id="toc8">パターン２：ネットワークに依存しない業務を行う場合</span></h3>



<p class="wp-block-paragraph">もし業務がインターネット接続に依存していないのであれば、スタンドアロンのシステムが有用です。例を挙げるならば、古い書籍や資料をデジタル化する図書館のスキャンシステムなどがあります。</p>



<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-1 sbs-stn sbp-l sbis-cb cf block-box cocoon-block-balloon"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://it-biz.online/wp-content/uploads/2023/06/man.png" alt="" class="speech-icon-image"/></figure><div class="speech-name"></div></div><div class="speech-balloon">
<p class="wp-block-paragraph">こうした作業は基本的にはネットワークに依存しないため、スタンドアロンのシステムで効率的に行えます。</p>
</div></div>



<h3 class="wp-block-heading"><span id="toc9">パターン３：独立したシステムで完結するサービスを提供する場合</span></h3>



<p class="wp-block-paragraph">例えば、博物館や展示会で使われるインタラクティブなディスプレイは、その場で完結する情報提供を行います。ネットワークに繋がっている必要がないため、スタンドアロンのシステムとして設計されることが多いです。</p>



<h3 class="wp-block-heading"><span id="toc10">パターン４：運用がシンプルであるべき状況</span></h3>



<p class="wp-block-paragraph">あまりにも複雑なシステムは、故障のリスクを高め、運用に専門的な知識が必要となります。スタンドアロンシステムは通常、運用がシンプルで、問題が起きた場合の対処も容易です。これは、中小企業や非専門家が操作する状況で非常に有用です。</p>



<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-1 sbs-stn sbp-l sbis-cb cf block-box cocoon-block-balloon"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://it-biz.online/wp-content/uploads/2023/06/man.png" alt="" class="speech-icon-image"/></figure><div class="speech-name"></div></div><div class="speech-balloon">
<p class="wp-block-paragraph">まとめると、キーワードは「<strong>セキュリティ</strong>」です。セキュリティ対策にはコストがかかります。そのコストを省けるなら省く、コストがネットワーク接続のメリットを上回るならつながない。これが原則です。</p>
</div></div>



<div class="wp-block-cocoon-blocks-icon-box common-icon-box block-box memo-box">
<p class="has-text-align-center wp-block-paragraph"><span class="badge-green">まとめ</span>　<strong>スタンドアロンとは</strong></p>



<ul class="wp-block-list">
<li>「スタンドアロン」は、独立して機能する一つのハードウェアまたはソフトウェアシステム、およびその形態。</li>



<li>高いセキュリティが必要な環境で有用。</li>



<li>ネットワークに依存しない業務で効果を発揮。</li>
</ul>
</div>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>【完全ガイド】JWTとは？初心者でもわかる仕組みと使い方を徹底解説</title>
		<link>https://it-biz.online/it-skills/jwt/</link>
		
		<dc:creator><![CDATA[ビズドットオンライン]]></dc:creator>
		<pubDate>Wed, 13 Nov 2024 05:02:53 +0000</pubDate>
				<category><![CDATA[IT-Skills]]></category>
		<category><![CDATA[Web開発]]></category>
		<category><![CDATA[ネットワーク]]></category>
		<category><![CDATA[プログラミング]]></category>
		<guid isPermaLink="false">https://it-biz.online/?p=9478</guid>

					<description><![CDATA[Webサービスを利用する際、ログインやデータのやり取りなどで認証を必要とするシーンが存在します。 この記事では認証の方法として広く一般的に利用されているJWT（JSON Web Token）について解説します。 目次 J [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p class="wp-block-paragraph">Webサービスを利用する際、ログインやデータのやり取りなどで<strong>認証</strong>を必要とするシーンが存在します。</p>



<p class="wp-block-paragraph">この記事では認証の方法として広く一般的に利用されている<strong>JWT（JSON Web Token）</strong>について解説します。</p>




  <div id="toc" class="toc tnt-number toc-center tnt-number border-element"><input type="checkbox" class="toc-checkbox" id="toc-checkbox-11" checked><label class="toc-title" for="toc-checkbox-11">目次</label>
    <div class="toc-content">
    <ol class="toc-list open"><li><a href="#toc1" tabindex="0">JWTとは？</a></li><li><a href="#toc2" tabindex="0">JWTを使うメリット</a></li><li><a href="#toc3" tabindex="0">セッション認証との違い</a></li><li><a href="#toc4" tabindex="0">JWTの仕組み</a><ol><li><a href="#toc5" tabindex="0">1. ヘッダー（Header）</a></li><li><a href="#toc6" tabindex="0">2. ペイロード（Payload）</a></li><li><a href="#toc7" tabindex="0">3. 署名（Signature）</a></li><li><a href="#toc8" tabindex="0">JWTの生成と検証の流れ</a></li></ol></li><li><a href="#toc9" tabindex="0">JWTの実装方法</a><ol><li><a href="#toc10" tabindex="0">ステップ1：ライブラリの導入</a></li><li><a href="#toc11" tabindex="0">ステップ2：トークンの生成</a></li><li><a href="#toc12" tabindex="0">ステップ3：トークンの送信</a></li><li><a href="#toc13" tabindex="0">ステップ4：トークンの検証</a></li></ol></li><li><a href="#toc14" tabindex="0">セキュリティ上の注意点</a><ol><li><a href="#toc15" tabindex="0">秘密鍵の管理</a></li><li><a href="#toc16" tabindex="0">有効期限の設定</a></li><li><a href="#toc17" tabindex="0">HTTPSの利用</a></li><li><a href="#toc18" tabindex="0">不要な情報を含めない</a></li></ol></li><li><a href="#toc19" tabindex="0">よくある間違いと対策</a><ol><li><a href="#toc20" tabindex="0">署名なしのトークンを受け入れてしまう</a></li><li><a href="#toc21" tabindex="0">秘密鍵をコード内にベタ書きする</a></li><li><a href="#toc22" tabindex="0">トークンの無効化ができない</a></li></ol></li><li><a href="#toc23" tabindex="0">JWTの活用事例</a></li><li><a href="#toc24" tabindex="0">まとめ</a></li></ol>
    </div>
  </div>

<h2 class="wp-block-heading" id="what-is-jwt"><span id="toc1">JWTとは？</span></h2>



<p class="wp-block-paragraph"><strong>JWT（JSON Web Token）</strong>は、ユーザーの認証情報やその他のデータを安全にやり取りするためのトークン形式の標準規格です。JSON形式でデータを保持し、署名を付けることでデータの改ざんを防止します。</p>



<div class="wp-block-cocoon-blocks-faq faq-wrap blank-box block-box not-nested-style cocoon-block-faq"><dl class="faq"><dt class="faq-question faq-item"><div class="faq-question-label faq-item-label">Q</div><div class="faq-question-content faq-item-content">トークンとは？</div></dt><dd class="faq-answer faq-item"><div class="faq-answer-label faq-item-label">A</div><div class="faq-answer-content faq-item-content">
<p class="wp-block-paragraph">ユーザーやアプリケーションを識別し、認証・認可を実現するための「デジタルな証明書」のようなもの。アクセス権限や有効期限などの情報が含まれます。</p>
</div></dd></dl></div>



<div class="wp-block-cocoon-blocks-faq faq-wrap blank-box block-box not-nested-style cocoon-block-faq"><dl class="faq"><dt class="faq-question faq-item"><div class="faq-question-label faq-item-label">Q</div><div class="faq-question-content faq-item-content">JSONとは？</div></dt><dd class="faq-answer faq-item"><div class="faq-answer-label faq-item-label">A</div><div class="faq-answer-content faq-item-content">
<p class="wp-block-paragraph">JSON（JavaScript Object Notation）は、データを「キーと値のペア」で表現するシンプルなフォーマット。軽量で人間にも読みやすく、プログラム間でのデータ交換に広く使われています。</p>
</div></dd></dl></div>



<p class="wp-block-paragraph">簡単に言うと、JWTは「<strong>安全な情報のやり取りを実現するためのデジタルなパスポート</strong>」のようなものです。</p>



<h2 class="wp-block-heading" id="why-use-jwt"><span id="toc2">JWTを使うメリット</span></h2>



<p class="wp-block-paragraph">JWTを使うことで、以下のようなメリットがあります。</p>



<div class="wp-block-cocoon-blocks-iconlist-box iconlist-box blank-box list-hand-o-right block-box"><div class="iconlist-title"></div>
<ul class="wp-block-list">
<li><strong>サーバーレスな認証管理：</strong><a href="https://it-biz.online/it-skills/server-abc/">サーバー</a>側でセッション情報を保持する必要がないため、スケーラビリティが向上します。</li>



<li><strong>クロスドメインでの利用が容易：</strong>異なるドメイン間でもトークンを共有しやすいです。</li>



<li><strong>通信量の削減：</strong>必要な情報をトークンに含めることで、追加のデータベースアクセスを減らせます。</li>



<li><strong>柔軟性：</strong>カスタムクレーム（属性）を追加することで、さまざまな情報を含められます。</li>
</ul>
</div>



<h2 class="wp-block-heading" id="jwt-vs-session"><span id="toc3">セッション認証との違い</span></h2>



<p class="wp-block-paragraph">従来の<strong>セッション認証</strong>では、ユーザーがログインするとサーバー側でセッション情報を保持し、ユーザーにはセッションIDが付与されます。しかし、この方法ではサーバー側に状態を持つため、サーバーの負荷が増えたり、負荷分散が難しくなったりします。</p>



<p class="wp-block-paragraph">一方、JWTではサーバーが状態を持たない<strong>ステートレス</strong>な認証が可能です。これにより、サーバーの負荷を軽減し、複数のサーバー間での負荷分散が容易になります。</p>



<h2 class="wp-block-heading" id="how-jwt-works"><span id="toc4">JWTの仕組み</span></h2>



<p class="wp-block-paragraph">JWTは以下の3つの部分から構成されています：</p>



<ol class="wp-block-list">
<li><strong>ヘッダー（Header）</strong></li>



<li><strong>ペイロード（Payload）</strong></li>



<li><strong>署名（Signature）</strong></li>
</ol>



<p class="wp-block-paragraph">これらはそれぞれBase64URLエンコードされ、ピリオド（.）で区切られて結合されます。</p>



<div class="wp-block-cocoon-blocks-faq faq-wrap blank-box block-box not-nested-style cocoon-block-faq"><dl class="faq"><dt class="faq-question faq-item"><div class="faq-question-label faq-item-label">Q</div><div class="faq-question-content faq-item-content">Base64URLエンコードとは？</div></dt><dd class="faq-answer faq-item"><div class="faq-answer-label faq-item-label">A</div><div class="faq-answer-content faq-item-content">
<p class="wp-block-paragraph"><strong>Base64エンコード</strong>の一種。URLやファイル名で安全に使用できる形式に変換する方法です。<br>通常のBase64エンコードで使われる文字列の一部を、URLで問題なく扱える文字に置き換えています。</p>
</div></dd></dl></div>



<h3 class="wp-block-heading"><span id="toc5">1. ヘッダー（Header）</span></h3>



<p class="wp-block-paragraph">トークンのタイプ（JWT）と署名アルゴリズムの情報が含まれます。例：</p>



<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">{
  "alg": "HS256",
  "typ": "JWT"
}
</pre>



<h3 class="wp-block-heading"><span id="toc6">2. ペイロード（Payload）</span></h3>



<p class="wp-block-paragraph">ユーザー情報や有効期限などのクレーム（属性）が含まれます。標準クレームの例：</p>



<ul class="wp-block-list">
<li><code>iss</code>：発行者（Issuer）</li>



<li><code>sub</code>：主体（Subject）</li>



<li><code>exp</code>：有効期限（Expiration Time）</li>
</ul>



<p class="wp-block-paragraph">例：</p>



<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">{
  "sub": "1234567890",
  "name": "山田太郎",
  "admin": true,
  "iat": 1516239022
}
</pre>



<h3 class="wp-block-heading"><span id="toc7">3. 署名（Signature）</span></h3>



<p class="wp-block-paragraph">ヘッダーとペイロードを結合し、秘密鍵でハッシュ化したものです。これにより、データの改ざんを検出できます。</p>



<p class="has-text-align-center wp-block-paragraph"><span class="badge">参考</span>　<a href="https://it-biz.online/it-skills/encrypt/">共通鍵暗号方式/公開鍵暗号方式とは？初心者向けに３分でわかりやすく解説</a></p>



<h3 class="wp-block-heading"><span id="toc8">JWTの生成と検証の流れ</span></h3>



<ol class="wp-block-list">
<li><strong>ユーザー認証：</strong>ユーザーがログイン情報を送信します。</li>



<li><strong>トークン生成：</strong>サーバーがユーザー情報を元にJWTを生成します。</li>



<li><strong>トークン送信：</strong>生成したJWTをユーザーに返します。</li>



<li><strong>リクエスト時のトークン送付：</strong>ユーザーは以降のリクエストにJWTを含めます。</li>



<li><strong>トークン検証：</strong>サーバーは受け取ったJWTを検証し、リクエストを処理します。</li>
</ol>



<h2 class="wp-block-heading" id="implementing-jwt"><span id="toc9">JWTの実装方法</span></h2>



<p class="wp-block-paragraph">JWTを実装するには、以下の手順を踏みます。</p>



<h3 class="wp-block-heading"><span id="toc10">ステップ1：ライブラリの導入</span></h3>



<p class="wp-block-paragraph">各プログラミング言語には、JWTを扱うためのライブラリがあります。例えば：</p>



<ul class="wp-block-list">
<li><strong>Node.js：</strong><code>jsonwebtoken</code></li>



<li><strong>Python：</strong><code>PyJWT</code></li>



<li><strong>Java：</strong><code>jjwt</code></li>



<li><strong>PHP：</strong><code>firebase/php-jwt</code></li>
</ul>



<h3 class="wp-block-heading"><span id="toc11">ステップ2：トークンの生成</span></h3>



<p class="wp-block-paragraph">ユーザーが認証されたら、サーバー側でトークンを生成します。例（Node.js）：</p>



<pre class="EnlighterJSRAW" data-enlighter-language="typescript" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">const jwt = require('jsonwebtoken');
const payload = {
  userId: user.id,
  name: user.name
};
const token = jwt.sign(payload, '秘密鍵', { expiresIn: '1h' });
</pre>



<h3 class="wp-block-heading"><span id="toc12">ステップ3：トークンの送信</span></h3>



<p class="wp-block-paragraph">生成したトークンをユーザーに返します。HTTPヘッダーの<strong>Authorization</strong>に含めるのが一般的です。</p>



<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">res.header('Authorization', 'Bearer ' + token);
</pre>



<h3 class="wp-block-heading"><span id="toc13">ステップ4：トークンの検証</span></h3>



<p class="wp-block-paragraph">ユーザーからのリクエストを受け取ったら、トークンを検証します。例（Node.js）：</p>



<pre class="EnlighterJSRAW" data-enlighter-language="typescript" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">const token = req.headers['authorization'].split(' ')[1];
jwt.verify(token, '秘密鍵', (err, decoded) => {
  if (err) {
    return res.status(401).send('トークンが無効です');
  }
  req.user = decoded;
  next();
});
</pre>



<h2 class="wp-block-heading" id="security-considerations"><span id="toc14">セキュリティ上の注意点</span></h2>



<p class="wp-block-paragraph">JWTを安全に使用するためには、以下のポイントに注意が必要です。</p>



<h3 class="wp-block-heading"><span id="toc15">秘密鍵の管理</span></h3>



<p class="wp-block-paragraph">署名に使用する秘密鍵は、厳重に管理しましょう。漏洩すると、トークンが偽造されるリスクがあります。</p>



<h3 class="wp-block-heading"><span id="toc16">有効期限の設定</span></h3>



<p class="wp-block-paragraph">トークンの有効期限を適切に設定し、長期間有効なトークンを避けます。短い有効期限にすることで、万が一トークンが盗まれても被害を最小限に抑えられます。</p>



<h3 class="wp-block-heading"><span id="toc17">HTTPSの利用</span></h3>



<p class="wp-block-paragraph">通信を暗号化するために、HTTPSを使用しましょう。これにより、中間者攻撃によるトークンの盗聴を防げます。</p>



<h3 class="wp-block-heading"><span id="toc18">不要な情報を含めない</span></h3>



<p class="wp-block-paragraph">トークンには必要最低限の情報だけを含めましょう。機密性の高い情報を含めると、セキュリティリスクが高まります。</p>



<h2 class="wp-block-heading" id="common-mistakes"><span id="toc19">よくある間違いと対策</span></h2>



<p class="wp-block-paragraph">JWTの実装で陥りやすいミスと、その対策を紹介します。</p>



<h3 class="wp-block-heading"><span id="toc20">署名なしのトークンを受け入れてしまう</span></h3>



<p class="wp-block-paragraph">署名がない、または無効なトークンを受け入れてしまうと、セキュリティが崩壊します。必ず<strong>署名の検証</strong>を行いましょう。</p>



<h3 class="wp-block-heading"><span id="toc21">秘密鍵をコード内にベタ書きする</span></h3>



<p class="wp-block-paragraph">秘密鍵をコード内に直接記述すると、ソースコード管理システムから漏洩する可能性があります。環境変数や安全な設定ファイルを使用しましょう。</p>



<h3 class="wp-block-heading"><span id="toc22">トークンの無効化ができない</span></h3>



<p class="wp-block-paragraph">JWTは一度発行すると、その有効期限内は有効です。ユーザーがログアウトした場合や、権限が変更された場合でもトークンが使えると問題です。対策として、ブラックリスト方式やトークンの短期化を検討しましょう。</p>



<h2 class="wp-block-heading" id="use-cases"><span id="toc23">JWTの活用事例</span></h2>



<p class="wp-block-paragraph">JWTはさまざまな場面で活用されています。</p>



<ul class="wp-block-list">
<li><strong>WebAPIの認証：</strong>RESTful APIでのユーザー認証に利用。</li>



<li><strong>シングルサインオン（SSO）：</strong>一度のログインで複数のサービスにアクセス可能に。</li>



<li><strong>モバイルアプリとの連携：</strong>サーバーとアプリ間の安全な通信に利用。</li>
</ul>



<h2 class="wp-block-heading" id="conclusion"><span id="toc24">まとめ</span></h2>



<p class="wp-block-paragraph">JWTとは、ユーザー認証と情報の安全なやり取りを可能にするトークン形式の技術です。サーバーが状態を持たないため、スケーラビリティが高く、現代のウェブ開発において重要な役割を果たしています。正しい実装とセキュリティ対策を行うことで、安全で効率的なシステムを構築できます。</p>



<p class="wp-block-paragraph">この記事を通じて、JWTの基本から実装方法、注意点まで理解していただけたでしょうか。ぜひ実際のプロジェクトでJWTを活用してみてください。</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>REST APIとは何か？初心者向けにわかりやすく１分で解説</title>
		<link>https://it-biz.online/it-skills/rest-api/</link>
		
		<dc:creator><![CDATA[ビズドットオンライン]]></dc:creator>
		<pubDate>Thu, 13 Jun 2024 04:53:18 +0000</pubDate>
				<category><![CDATA[IT-Skills]]></category>
		<category><![CDATA[Web開発]]></category>
		<category><![CDATA[ネットワーク]]></category>
		<category><![CDATA[プログラミング]]></category>
		<guid isPermaLink="false">https://it-biz.online/?p=9314</guid>

					<description><![CDATA[REST API（れすとえーぴーあい）はWebAPIの１つの形態です。WebAPIというのは、インターネットを通じてアクセス可能なAPI全般を指す用語ですが、その中でも特にREST（Representational St [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p class="wp-block-paragraph"><strong>REST API</strong>（れすとえーぴーあい）はWebAPIの１つの形態です。WebAPIというのは、インターネットを通じてアクセス可能なAPI全般を指す用語ですが、その中でも特に<strong>REST（Representational State Transfer）</strong>というアーキテクチャスタイルに従ったAPIをREST APIと呼びます。</p>



<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">WebAPI
├── RestAPI ←今回解説する対象
├── SOAP
├── GraphQL
└── gRPC</pre>



<p class="has-text-align-center wp-block-paragraph"><span class="badge">参考</span>　<a href="https://it-biz.online/it-skills/web_api/">WebAPIとは？（APIとは？）</a></p>



<p class="wp-block-paragraph">結論を超ザックリいえば、REST APIは「リソース」に対して「HTTPプロトコル」を使って「操作」する方法で、各リクエストが独立して処理されるAPIと言えます。</p>



<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-1 sbs-stn sbp-l sbis-cb cf block-box not-nested-style cocoon-block-balloon"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://it-biz.online/wp-content/uploads/2023/06/man.png" alt="" class="speech-icon-image"/></figure><div class="speech-name"></div></div><div class="speech-balloon">
<p class="wp-block-paragraph">このページではそもそもWebAPIって何？というところをおさらいしつつ、REST APIの概念を１からわかりやすくご説明します。</p>
</div></div>




  <div id="toc" class="toc tnt-number toc-center tnt-number border-element"><input type="checkbox" class="toc-checkbox" id="toc-checkbox-13" checked><label class="toc-title" for="toc-checkbox-13">目次</label>
    <div class="toc-content">
    <ol class="toc-list open"><li><a href="#toc1" tabindex="0">前提：APIとは何か？</a></li><li><a href="#toc2" tabindex="0">REST APIとは</a><ol><li><a href="#toc3" tabindex="0">REST APIの特徴１：リソース指向</a></li><li><a href="#toc4" tabindex="0">REST APIの特徴２：HTTPプロトコルを使用</a></li><li><a href="#toc5" tabindex="0">REST APIの特徴３：HTTPメソッドでリソースに対する処理を表す</a></li><li><a href="#toc6" tabindex="0">REST APIの特徴４：ステートレス</a></li></ol></li></ol>
    </div>
  </div>

<h2 class="wp-block-heading"><span id="toc1">前提：APIとは何か？</span></h2>



<p class="wp-block-paragraph">API（エーピーアイ）は「Application Programming Interface」の略で、<strong>異なるソフトウェア同士が情報をやり取りするためのルールや仕組み</strong>を提供するものです。APIはその名の通りアプリケーションが他のアプリケーションの機能を使えるようにする「<strong><span class="marker-under">窓口</span></strong>」のような役割を果たします。</p>



<p class="wp-block-paragraph">例えばスマートフォンの天気アプリは、気象データを提供するサービス（例えば、気象庁や気象会社）のAPIを使って最新の天気情報を取得します。（<strong>APIという「窓口」に知りたい気象情報を問い合わせ→回答を受け取ってくる。</strong>）このように、APIはアプリやサービスが他のアプリやサービスからデータを取得したり、機能を利用したりするために使われます。</p>



<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-1 sbs-stn sbp-l sbis-cb cf block-box not-nested-style cocoon-block-balloon"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://it-biz.online/wp-content/uploads/2023/06/man.png" alt="" class="speech-icon-image"/></figure><div class="speech-name"></div></div><div class="speech-balloon">
<p class="wp-block-paragraph">また、その中でも特にインターネットを介して情報の交換が行われるものをWebAPIと呼びます。</p>
</div></div>



<figure class="wp-block-image aligncenter size-full"><img loading="lazy" decoding="async" width="650" height="467" src="https://it-biz.online/wp-content/uploads/2021/08/image-18.png" alt="API WebAPI 違い" class="wp-image-5319" srcset="https://it-biz.online/wp-content/uploads/2021/08/image-18.png 650w, https://it-biz.online/wp-content/uploads/2021/08/image-18-500x359.png 500w, https://it-biz.online/wp-content/uploads/2021/08/image-18-300x216.png 300w" sizes="(max-width: 650px) 100vw, 650px" /><figcaption class="wp-element-caption">図1：APIとWebAPIの違い</figcaption></figure>



<h2 class="wp-block-heading"><span id="toc2">REST APIとは</span></h2>



<p class="wp-block-paragraph"><strong>REST API</strong>はWebAPIの１種。その中でも特に「<strong>REST</strong>」という設計原則に従ったAPIです。</p>



<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">WebAPI
├── RestAPI ←今回解説する対象
├── SOAP
├── GraphQL
└── gRPC</pre>



<p class="wp-block-paragraph">RESTは「Representational State Transfer」の略で、以下の４点が大きなポイントです。ザックリいえば、モノを「リソース」として扱い、そのリソースに対する操作を「HTTP」でリクエスト。これらのリクエストは単発で行われるということ。</p>



<figure class="wp-block-table"><div class="scrollable-table stfc-sticky"><table><thead><tr><th>ポイント</th><th>説明</th></tr></thead><tbody><tr><td><strong>リソース指向</strong></td><td>データや機能をリソースとして扱い、それぞれに固有のURLが割り当てられる。</td></tr><tr><td><strong>HTTPプロトコル</strong></td><td>インターネット通信で使われる標準的なプロトコルを使用。</td></tr><tr><td><strong>HTTPメソッド</strong></td><td>データの操作をGET、POST、PUT、DELETEなどの標準的なHTTPメソッドで行う。</td></tr><tr><td><strong>ステートレス</strong></td><td>各リクエストは独立して処理され、サーバーはクライアントの状態を保持しない。</td></tr></tbody></table></div></figure>



<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-1 sbs-stn sbp-l sbis-cb cf block-box not-nested-style cocoon-block-balloon"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://it-biz.online/wp-content/uploads/2023/06/man.png" alt="" class="speech-icon-image"/></figure><div class="speech-name"></div></div><div class="speech-balloon">
<p class="wp-block-paragraph">それぞれのポイントの意味を１つずつ詳しく説明していきます。</p>
</div></div>



<h3 class="wp-block-heading"><span id="toc3">REST APIの特徴１：リソース指向</span></h3>



<p class="wp-block-paragraph">リソース指向とは、APIが<strong>データや機能を具体的な「モノ」として扱う方法</strong>です。</p>



<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-1 sbs-stn sbp-l sbis-cb cf block-box not-nested-style cocoon-block-balloon"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://it-biz.online/wp-content/uploads/2023/06/man.png" alt="" class="speech-icon-image"/></figure><div class="speech-name"></div></div><div class="speech-balloon">
<p class="wp-block-paragraph">リソース指向を日常生活で例えると、「図書館で本を管理する方法」と考えるとわかりやすいです。</p>
</div></div>



<p class="wp-block-paragraph">図書館の本、これがリソースです。それぞれの本には固有の識別番号（例えばバーコード）があり、この番号を使って本を特定することができます。このときのバーコードがURLに当たります。このURLと後述する「HTTPメソッド」を組み合わせて、「村上春樹の本」を「Get（HTTPメソッド）」して！というような形でリクエストするイメージがリソース指向。</p>



<p class="wp-block-paragraph">対してリソース指向<strong>ではない</strong>のは、図書館の利用者が特定の目的や手続きを実行するためにリクエストを行うようなイメージになります。この方式では本自体をリソースとして扱うのではなく、利用者の目的や手続きに基づいて操作が行われます。つまり「村上春樹の本を取得して！」というように、<strong>モノとそれに対する操作をひとくくりにしたもの</strong>（＝手続き・アクション）がリソース指向ではない例。</p>



<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-1 sbs-stn sbp-l sbis-cb cf block-box not-nested-style cocoon-block-balloon"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://it-biz.online/wp-content/uploads/2023/06/man.png" alt="" class="speech-icon-image"/></figure><div class="speech-name"></div></div><div class="speech-balloon">
<p class="wp-block-paragraph"><strong>REST API</strong>はリソース（例えば、ユーザーや商品）を操作するためのものですが、リソース指向ではないAPIは「特定の手続きを実行するためのもの」と分けて考えると理解しやすいでしょう。</p>
</div></div>



<h3 class="wp-block-heading"><span id="toc4">REST APIの特徴２：HTTPプロトコルを使用</span></h3>



<p class="wp-block-paragraph">REST APIは、<strong>HTTPプロトコル</strong>を使用します。</p>



<p class="has-text-align-center wp-block-paragraph"><span class="badge">参考</span>　<a href="https://it-biz.online/it-skills/http/">HTTPとは？</a></p>



<p class="wp-block-paragraph">HTTPプロトコルとは、簡単に説明すると「インターネットで情報をやり取りするためのルール」です。例えば私たちがWebサイトを見るとき、ブラウザはこのルールを使ってサーバーからページを取得し画面上にページ情報を表示します。REST APIも同じルールを使って、アプリやサービスがデータをやり取りするということです。</p>



<h3 class="wp-block-heading"><span id="toc5">REST APIの特徴３：HTTPメソッドでリソースに対する処理を表す</span></h3>



<p class="wp-block-paragraph">HTTPメソッドは、インターネットでデータをやり取りする際に使用する特定の操作方法を指します。REST APIでは、主に4つのHTTPメソッド（GET、POST、PUT、DELETE）が使用され、これらを使って「<strong>リソース</strong>」の作成・取得・更新・削除を行います。</p>



<h3 class="wp-block-heading"><span id="toc6">REST APIの特徴４：ステートレス</span></h3>



<p class="wp-block-paragraph">ステートレスとは、各リクエストが独立して処理され、サーバーがクライアントの状態を記憶しないことを指します。つまり、１つのリクエストが他のリクエストに依存しないということです。</p>



<p class="has-text-align-center wp-block-paragraph"><span class="badge">参考</span>　<a href="https://it-biz.online/it-skills/client-server/">クライアントサーバシステムとは？</a></p>



<p class="wp-block-paragraph">ファストフード店で食べ物を注文するとき、店員はあなたの過去の注文を覚えていません。あなたが来るたびに、注文を初めからやり直します。例えば、今日ハンバーガーを注文しても、明日また来たときに店員はそれを覚えていません。これは、各注文（リクエスト）が独立しているためです。</p>



<p class="wp-block-paragraph">一方ステート<strong>フル</strong>の場合、昨日「ハンバーガーを1つください」と注文していたとしたら、今日来たときに「昨日と同じものをください」と言うだけで、店員は同じハンバーガーを出してくれます。また、今日は「追加でフライドポテトもください」と言えば、店員は昨日の注文にフライドポテトを追加します。</p>



<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-1 sbs-stn sbp-l sbis-cb cf block-box not-nested-style cocoon-block-balloon"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://it-biz.online/wp-content/uploads/2023/06/man.png" alt="" class="speech-icon-image"/></figure><div class="speech-name"></div></div><div class="speech-balloon">
<p class="wp-block-paragraph">ザックリいえば、リクエストを投げる側と受ける側に、どれぐらい密接な関係があるか？というのが違い。</p>



<div class="wp-block-cocoon-blocks-iconlist-box iconlist-box blank-box list-caret-right block-box"><div class="iconlist-title"></div>
<ol class="wp-block-list">
<li>ステートレス
<ul class="wp-block-list">
<li>関連無し。毎回初対面の関係性。</li>
</ul>
</li>



<li>ステートフル
<ul class="wp-block-list">
<li>密接に関連する。両者が手を握っているイメージ。</li>
</ul>
</li>
</ol>
</div>
</div></div>



<div class="wp-block-cocoon-blocks-icon-box common-icon-box block-box memo-box">
<p class="has-text-align-center wp-block-paragraph"><span class="badge-green">まとめ</span>　<strong>REST APIとは？</strong></p>



<p class="wp-block-paragraph">REST APIは、インターネット上の図書館のようなもの。</p>



<ul class="wp-block-list">
<li><strong>リソース</strong>：本や雑誌のように、データがリソースとして扱われます。例えば、ユーザー情報や商品情報。</li>



<li><strong>URL</strong>：リソースにはそれぞれの「住所（URL）」があり、これを使ってアクセス。</li>



<li><strong>操作</strong>：GETで本を借りる（取得）、POSTで新しい本を追加する（作成）、PUTで本の情報を更新する（更新）、DELETEで本を削除する（削除）。</li>



<li><strong>ステートレス</strong>：各リクエスト（本の操作）は独立して行われ、図書館（サーバー）は前回の操作を覚えていません。</li>
</ul>
</div>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>タイムアウト設定を行う5つの理由と基本ノウハウを3分で</title>
		<link>https://it-biz.online/it-skills/timeout/</link>
		
		<dc:creator><![CDATA[ビズドットオンライン]]></dc:creator>
		<pubDate>Tue, 28 May 2024 02:52:40 +0000</pubDate>
				<category><![CDATA[IT-Skills]]></category>
		<category><![CDATA[ネットワーク]]></category>
		<category><![CDATA[プログラミング]]></category>
		<category><![CDATA[通信プロトコル]]></category>
		<guid isPermaLink="false">https://it-biz.online/?p=9250</guid>

					<description><![CDATA[システムやプログラムが特定の作業を一定時間以内に終わらせることができない場合に、その作業を自動的に止める仕組み　→これがタイムアウト設定です。サーバー間やプログラムのモジュール間など、システムとシステムを「接続」するとこ [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p class="wp-block-paragraph">システムやプログラムが特定の作業を一定時間以内に終わらせることができない場合に、その作業を自動的に止める仕組み　→これが<strong>タイムアウト設定</strong>です。<a href="https://it-biz.online/it-skills/server-abc/">サーバー</a>間やプログラムのモジュール間など、システムとシステムを「接続」するところ、必ずタイムアウトの設定がある、と言っても過言ではありません。</p>



<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-1 sbs-stn sbp-l sbis-cb cf block-box not-nested-style cocoon-block-balloon"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://it-biz.online/wp-content/uploads/2023/06/man.png" alt="" class="speech-icon-image"/></figure><div class="speech-name"></div></div><div class="speech-balloon">
<p class="wp-block-paragraph">リクエストを受け取ってから30秒以内に終わらない場合はタイムアウトエラーにする、というような設定をすることで、長期間プロセスがリソースを占有することを防ぎます。</p>
</div></div>



<p class="wp-block-paragraph">がしかし、<strong>そもそもなぜタイムアウトの設定を入れる必要があるの？</strong>といった疑問や、<strong>どのようにタイムアウト設計を行えばよいか？</strong>という点については、案外考える機会が少ないものかもしれません。このページでは、タイムアウト設定の理由、タイムアウト設定の基本ノウハウを初心者向けにわかりやすく説明していきたいと思います。</p>




  <div id="toc" class="toc tnt-number toc-center tnt-number border-element"><input type="checkbox" class="toc-checkbox" id="toc-checkbox-15" checked><label class="toc-title" for="toc-checkbox-15">目次</label>
    <div class="toc-content">
    <ol class="toc-list open"><li><a href="#toc1" tabindex="0">タイムアウト設定の必要性</a><ol><li><a href="#toc2" tabindex="0">理由１：システムの安定性向上</a></li><li><a href="#toc3" tabindex="0">理由２：リソースの効率的な利用</a></li><li><a href="#toc4" tabindex="0">理由３：ユーザーエクスペリエンスの向上</a></li><li><a href="#toc5" tabindex="0">理由４：エラーの対処</a></li><li><a href="#toc6" tabindex="0">理由５：サービスレベルアグリーメント (SLA) の遵守</a></li></ol></li><li><a href="#toc7" tabindex="0">タイムアウト設計の基本</a><ol><li><a href="#toc8" tabindex="0">1. 適切なタイムアウト時間の設定</a></li><li><a href="#toc9" tabindex="0">2. 動的なタイムアウト調整</a></li><li><a href="#toc10" tabindex="0">3. 詳細なログ記録</a></li><li><a href="#toc11" tabindex="0">4. ユーザー通知</a></li><li><a href="#toc12" tabindex="0">5. フェイルセーフメカニズム</a></li></ol></li></ol>
    </div>
  </div>

<h2 class="wp-block-heading"><span id="toc1">タイムアウト設定の必要性</span></h2>



<p class="wp-block-paragraph">まずは前段として、タイムアウト設定がなぜ重要かを理解するために、その理由と具体的な例を交えて説明します。</p>



<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-1 sbs-stn sbp-l sbis-cb cf block-box not-nested-style cocoon-block-balloon"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://it-biz.online/wp-content/uploads/2023/06/man.png" alt="" class="speech-icon-image"/></figure><div class="speech-name"></div></div><div class="speech-balloon">
<p class="wp-block-paragraph">大きく分けて以下５点が主な理由。</p>
</div></div>



<figure class="wp-block-table"><div class="scrollable-table stfc-sticky"><table><thead><tr><th>理由</th><th>説明</th><th>具体例</th></tr></thead><tbody><tr><td>システムの安定性向上</td><td>無限待機を防ぎシステム全体が停止してしまうのを防ぐ</td><td>Webサーバで応答がない場合の待機時間を制限し、次の操作に進む。</td></tr><tr><td>リソースの効率的な利用</td><td>メモリやCPUの過剰使用を防ぐ</td><td>データベース処理が終わらない場合、リソースを他の処理に割り当てる。</td></tr><tr><td>ユーザーエクスペリエンス向上</td><td>ユーザーが長時間待たされるのを防ぐ</td><td>オンラインショッピングサイトで検索結果が出ない場合にエラーメッセージを表示し、再試行を促す。</td></tr><tr><td>エラーの対処</td><td>タイムアウト後の処理を設定することで、システムがエラーに対して柔軟に対応できる。</td><td>外部APIの応答がない場合にエラーメッセージを出し、次のステップに進む。</td></tr><tr><td>SLAの遵守</td><td>一定の応答時間を守ることで、サービスの品質を維持し、顧客満足度を高める。</td><td>クラウドサービスでの99.9%のアップタイムを保証するために、応答がない場合に処理を打ち切る。</td></tr></tbody></table></div></figure>



<h3 class="wp-block-heading"><span id="toc2">理由１：システムの安定性向上</span></h3>



<p class="wp-block-paragraph">タイムアウト設定は、システムが無限に待機する状態を防ぐために必要不可欠な設定です。</p>



<p class="wp-block-paragraph">例えば、Webアプリケーション経由で<a href="https://it-biz.online/it-skills/database/">データベース</a>から情報を取得する際にデータベースがなかなか応答しない場合。もし、このときタイムアウトを設定していなければ、<strong>システムは応答が返ってくるまで無限に待ち続ける</strong>ことになります。その結果、メモリやCPUなどのリソースを常に消費し続けることになり、最悪の場合システム全体に悪影響を与えることに。</p>



<p class="wp-block-paragraph">タイムアウト設定により、一定時間が経過した後に自動的にリクエストをキャンセルし、エラーメッセージを返すことで、他のリクエスト処理に移ることができます。</p>



<p class="has-text-align-center wp-block-paragraph"><span class="badge">参考</span>　<a href="https://it-biz.online/it-skills/web-server/">Webサーバーとは？</a></p>



<h3 class="wp-block-heading"><span id="toc3">理由２：リソースの効率的な利用</span></h3>



<p class="wp-block-paragraph">理由１と多少被りますが、システムのリソース（メモリやCPUなど）を効率的に利用するためにタイムアウト設定が役立ちます。例えば、データベースに大量のデータを保存する処理がなかなか終わらない場合、システムはメモリを使い続け、他の重要な処理ができなくなってしまいます。</p>



<p class="wp-block-paragraph">ここで適切なタイムアウトを設定することで、一定時間で処理を打ち切り、リソースを他の処理に割り当てることができるようになります。</p>



<h3 class="wp-block-heading"><span id="toc4">理由３：ユーザーエクスペリエンスの向上</span></h3>



<p class="wp-block-paragraph">理由の３つ目はUXの向上です。画面で何かしらのボタンを押しても、何の反応も帰ってこない画面・・・これ結構不満溜まりますよね。一定期間反応がない場合に、タイムアウトエラーを起こすことでUXの向上につなげることができます。</p>



<p class="wp-block-paragraph">例えば、オンラインショッピングサイトで商品を検索する際、検索結果が表示されるまでに時間がかかりすぎると、ユーザーはそのサイトを使いたくなくなってしまうでしょう。タイムアウト設定を行うことで、一定時間内に結果が返ってこない場合はエラーメッセージを表示したりすることでユーザーに再度試してもらうよう促すことができます。</p>



<h3 class="wp-block-heading"><span id="toc5">理由４：エラーの対処</span></h3>



<p class="wp-block-paragraph">タイムアウト設定をすることで、処理が終わらない場合のエラーハンドリングがしやすくなります。</p>



<p class="wp-block-paragraph">例えば、外部のAPIを呼び出す際になかなか応答が返ってこない場合があります。この時、タイムアウトを設定しておくと、一定時間でエラーメッセージを出して次のステップに進むことができます。これにより、<strong>システムがエラーで停止するのを防ぎ</strong>、他の処理が継続できるようになります。</p>



<p class="has-text-align-center wp-block-paragraph"><span class="badge">参考</span>　<a href="https://it-biz.online/it-skills/web_api/">APIとは？</a></p>



<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-1 sbs-stn sbp-l sbis-cb cf block-box not-nested-style cocoon-block-balloon"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://it-biz.online/wp-content/uploads/2023/06/man.png" alt="" class="speech-icon-image"/></figure><div class="speech-name"></div></div><div class="speech-balloon">
<p class="wp-block-paragraph">３秒反応がなかったら、ログの書き込み処理に移る・・・というような感じですね。</p>
</div></div>



<h3 class="wp-block-heading"><span id="toc6">理由５：サービスレベルアグリーメント (SLA) の遵守</span></h3>



<p class="wp-block-paragraph">サービスを提供する際に、一定の応答時間を顧客・クライアントとルールを合意する場合があります。これをサービスレベルアグリーメント（SLA）と言います。</p>



<p class="wp-block-paragraph">例えば、クラウドサービスでは99.9%のアップタイムを保証することがよくあります。（=24時間365日のうち、0.01%時間以下の障害までは許容。それ以上は許容しない。）このSLAを守るためには、タイムアウト設定が必要です。タイムアウトを設定することで、一定時間内に応答がない場合に処理を打ち切り、システムの他の部分が影響を受けないようにしたりすることができます。</p>



<p class="has-text-align-center wp-block-paragraph"><span class="badge-green">まとめ</span>　<strong>タイムアウト設定が重要な理由</strong></p>



<figure class="wp-block-table"><div class="scrollable-table stfc-sticky"><table><thead><tr><th>理由</th><th>説明</th><th>具体例</th></tr></thead><tbody><tr><td>システムの安定性向上</td><td>無限待機を防ぎシステム全体が停止してしまうのを防ぐ</td><td>Webサーバで応答がない場合の待機時間を制限し、次の操作に進む。</td></tr><tr><td>リソースの効率的な利用</td><td>メモリやCPUの過剰使用を防ぐ</td><td>データベース処理が終わらない場合、リソースを他の処理に割り当てる。</td></tr><tr><td>ユーザーエクスペリエンス向上</td><td>ユーザーが長時間待たされるのを防ぐ</td><td>オンラインショッピングサイトで検索結果が出ない場合にエラーメッセージを表示し、再試行を促す。</td></tr><tr><td>エラーの対処</td><td>タイムアウト後の処理を設定することで、システムがエラーに対して柔軟に対応できる。</td><td>外部APIの応答がない場合にエラーメッセージを出し、次のステップに進む。</td></tr><tr><td>SLAの遵守</td><td>一定の応答時間を守ることで、サービスの品質を維持し、顧客満足度を高める。</td><td>クラウドサービスでの99.9%のアップタイムを保証するために、応答がない場合に処理を打ち切る。</td></tr></tbody></table></div></figure>



<h2 class="wp-block-heading"><span id="toc7">タイムアウト設計の基本</span></h2>



<p class="wp-block-paragraph">タイムアウト設定は、システムの安定性やパフォーマンスを確保するための重要な要素。ここでは、タイムアウト設計の基本の概要をご説明します。</p>



<h3 class="wp-block-heading"><span id="toc8">1. 適切なタイムアウト時間の設定</span></h3>



<p class="wp-block-paragraph">タイムアウトの<strong>時間</strong>を設定する際には、システム要件やユーザーの期待に基づいて慎重に決定する必要があります。短すぎるタイムアウト時間は、頻繁にタイムアウトが発生しユーザー体験を損なう一方、長すぎるタイムアウト時間は、システムリソースの無駄遣いにつながります。</p>



<p class="wp-block-paragraph">例えば、Webアプリケーションでデータベースにクエリを送信する際には、通常のクエリ処理時間に少し余裕を持たせたタイムアウト時間を設定します。例えば、通常のクエリ処理時間が1秒であれば、タイムアウト時間は3秒程度に設定します。</p>



<h3 class="wp-block-heading"><span id="toc9">2. 動的なタイムアウト調整</span></h3>



<p class="wp-block-paragraph">システムの状態や負荷に応じて、タイムアウト時間を<strong>動的に調整</strong>する仕組みを導入すると効果的です。</p>



<p class="wp-block-paragraph">例えば、トラフィックが急増した場合や、特定の時間帯にシステムの負荷が高まる場合には、タイムアウト時間を延長してリクエストの処理をスムーズに行えるようにします。逆に、負荷が低いときには、タイムアウト時間を短縮してリソースの無駄を減らします。</p>



<h3 class="wp-block-heading"><span id="toc10">3. 詳細なログ記録</span></h3>



<p class="wp-block-paragraph">タイムアウトが発生した際に、その情報・経緯を詳細に記録することが重要。ログにはタイムアウトが発生した時間 / リクエストの内容 / 発生したコンポーネントなどの情報を含めることで、後で問題を分析し根本原因を特定して改善策を講じることができるようになります。</p>



<p class="wp-block-paragraph">例えば、Webサーバーのログに「タイムアウトが発生したURL、クライアントの<a href="https://it-biz.online/it-skills/ip-address/">IPアドレス</a>、リクエストの種類、タイムアウト発生時のシステム状態」などを記録するようなイメージ。</p>



<h3 class="wp-block-heading"><span id="toc11">4. ユーザー通知</span></h3>



<p class="wp-block-paragraph">タイムアウトが発生した場合に、ユーザーに適切な通知を行うことも重要。ユーザーがタイムアウトの原因を理解し、次にどうすれば良いかを案内することでユーザエクスペリエンスの向上が期待できます。</p>



<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-1 sbs-stn sbp-l sbis-cb cf block-box not-nested-style cocoon-block-balloon"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://it-biz.online/wp-content/uploads/2023/06/man.png" alt="" class="speech-icon-image"/></figure><div class="speech-name"></div></div><div class="speech-balloon">
<p class="wp-block-paragraph">タイムアウトが発生した場合に「現在サーバーが混雑しています。しばらくしてから再度お試しください。」といったメッセージを表示されるシステムもよく見かけますが、まさにあれが一例です。</p>
</div></div>



<h3 class="wp-block-heading"><span id="toc12">5. フェイルセーフメカニズム</span></h3>



<p class="wp-block-paragraph">タイムアウト<strong>後</strong>の処理も考慮する必要（システムが自動的に復旧する仕組みを作る）もあります。この後処理を適切に設計することでシステムがタイムアウトによる影響を受けずに安定して動作し続けることができます。</p>



<p class="wp-block-paragraph">例えば、外部APIへのリクエストがタイムアウトした場合には、内部のキャッシュから代替データを提供するか、別のAPIを呼び出すようにしたりするなど。これにより、ユーザーに対するサービスを途切れさせることなく提供できます。</p>



<figure class="wp-block-table aligncenter"><div class="scrollable-table stfc-sticky"><table><thead><tr><th>基本要素</th><th>説明</th><th>具体例</th></tr></thead><tbody><tr><td>適切なタイムアウト時間の設定</td><td>システムの要件に応じた時間を設定する。</td><td>通常のクエリ処理時間が1秒であれば、タイムアウト時間を3秒に設定する。</td></tr><tr><td>動的なタイムアウト調整</td><td>システムの負荷に応じてタイムアウト時間を変更する。</td><td>トラフィックが増加した際にタイムアウト時間を延長する。</td></tr><tr><td>詳細なログ記録</td><td>タイムアウト発生時の詳細情報を記録する。</td><td>タイムアウトが発生したURL、クライアントIP、リクエストの種類をログに記録する。</td></tr><tr><td>ユーザー通知</td><td>ユーザーにタイムアウトの理由と次のステップを案内する。</td><td>「現在サーバーが混雑しています。しばらくしてから再度お試しください。」と表示する。</td></tr><tr><td>フェイルセーフメカニズム</td><td>タイムアウト後の自動復旧を設計する。</td><td>外部APIのリクエストがタイムアウトした場合にキャッシュデータを提供する。</td></tr></tbody></table></div></figure>



<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-1 sbs-stn sbp-l sbis-cb cf block-box not-nested-style cocoon-block-balloon"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://it-biz.online/wp-content/uploads/2023/06/man.png" alt="" class="speech-icon-image"/></figure><div class="speech-name"></div></div><div class="speech-balloon">
<p class="wp-block-paragraph">タイムアウト設定を適切に設計することで、システムの安定性とパフォーマンスを保ちながら、ユーザーに対して高品質なサービスを提供することができます。</p>
</div></div>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>RAMLとは？基本的な書き方と役割・使い方のコツを３分で解説</title>
		<link>https://it-biz.online/it-skills/raml/</link>
		
		<dc:creator><![CDATA[ビズドットオンライン]]></dc:creator>
		<pubDate>Mon, 29 Apr 2024 06:46:24 +0000</pubDate>
				<category><![CDATA[IT-Skills]]></category>
		<category><![CDATA[ネットワーク]]></category>
		<category><![CDATA[プログラミング]]></category>
		<guid isPermaLink="false">https://it-biz.online/?p=9136</guid>

					<description><![CDATA[RAML（RESTful API Modeling Language）とはAPIの設計を助けるツールのようなもので、その名の通りRESTful APIを設計するための言語です。 参考　APIとは？ RAMLには、APIが [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p class="wp-block-paragraph"><strong>RAML</strong>（RESTful API Modeling Language）とはAPIの設計を助けるツールのようなもので、その名の通りRESTful APIを設計するための言語です。</p>



<p class="has-text-align-center wp-block-paragraph"><span class="badge">参考</span>　<a href="https://it-biz.online/it-skills/web_api/">APIとは？</a></p>



<p class="wp-block-paragraph">RAMLには、APIがどのように動作するか？といった詳細なルールや構造・APIを通じて送受信されるデータの型や形式・APIのエンドポイント（接続点）・そしてそれらが受け取る入力（インプット）と返す出力（アウトプット）の具体的な規格などが含まれます。以下が簡単なサンプルです。</p>



<pre class="EnlighterJSRAW" data-enlighter-language="yaml" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">#%RAML 1.0
title: Users API
version: v1
baseUri: http://example.com/api/{version}

/users:
  get:
    description: Get a list of users
    responses:
      200:
        body:
          application/json:
            example: |
              {
                "users": [
                  {"id": 1, "name": "Alice"},
                  {"id": 2, "name": "Bob"}
                ]
              }</pre>



<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-1 sbs-stn sbp-l sbis-cb cf block-box not-nested-style cocoon-block-balloon"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://it-biz.online/wp-content/uploads/2023/06/man.png" alt="" class="speech-icon-image"/></figure><div class="speech-name"></div></div><div class="speech-balloon">
<p class="wp-block-paragraph">このページではRAMLの役割や、基本的な使い方・書き方を１からわかりやすく解説します。</p>
</div></div>




  <div id="toc" class="toc tnt-number toc-center tnt-number border-element"><input type="checkbox" class="toc-checkbox" id="toc-checkbox-17" checked><label class="toc-title" for="toc-checkbox-17">目次</label>
    <div class="toc-content">
    <ol class="toc-list open"><li><a href="#toc1" tabindex="0">RAMLとは？簡単に</a></li><li><a href="#toc2" tabindex="0">RAMLの書き方</a><ol><li><a href="#toc3" tabindex="0">1. RAMLバージョンの指定</a></li><li><a href="#toc4" tabindex="0">2. APIの基本情報</a></li><li><a href="#toc5" tabindex="0">3. リソースとメソッド</a></li><li><a href="#toc6" tabindex="0">4. レスポンスとステータスコード</a></li><li><a href="#toc7" tabindex="0">より実践的なRAMLの書き方</a></li></ol></li></ol>
    </div>
  </div>

<h2 class="wp-block-heading"><span id="toc1">RAMLとは？簡単に</span></h2>



<p class="wp-block-paragraph">RAMLはAPIの「設計図」を作成する手助けをするツールだと言えます。</p>



<p class="wp-block-paragraph">例えば建築家は、家を建てる前にどのように家が見えるか、どの部屋がどこにあるか、どんな機能を持つかを紙の上で詳細に描きますよね。この設計図があることで、建築現場の人々は正確に家を建てるためのガイドラインを持つことができ誤解や間違いを減らすことができます。RAMLもこれと同じで、<strong><span class="marker-under">APIを開発するための設計図としての役割</span></strong>を担います。</p>



<div class="wp-block-cocoon-blocks-icon-box common-icon-box block-box information-box">
<p class="wp-block-paragraph"><strong>APIは家そのもの</strong>　→RAMLが家の設計図だとすると、APIは設計図に基づいて実際に建てられた家そのものに該当します。</p>
</div>



<p class="wp-block-paragraph">ひとまずここでは、<strong>RAMLはAPIの設計図を作成するための言語</strong>であり、APIがどのように振る舞うべきか、どのようなデータを送受信するか、どのようにエラーを扱うかなど、具体的なAPIの骨格を表すものである！と覚えておきましょう。</p>



<h2 class="wp-block-heading"><span id="toc2">RAMLの書き方</span></h2>



<p class="wp-block-paragraph">以下が冒頭にもお見せした簡単なRAMLのサンプルコードです。</p>



<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-1 sbs-stn sbp-l sbis-cb cf block-box not-nested-style cocoon-block-balloon"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://it-biz.online/wp-content/uploads/2023/06/man.png" alt="" class="speech-icon-image"/></figure><div class="speech-name"></div></div><div class="speech-balloon">
<p class="wp-block-paragraph">このRAMLには何が書かれていて、どんな内容を定義しているのかを簡単に確認していきます。</p>
</div></div>



<pre class="EnlighterJSRAW" data-enlighter-language="yaml" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">#%RAML 1.0
title: Users API
version: v1
baseUri: http://example.com/api/{version}

/users:
  get:
    description: Get a list of users
    responses:
      200:
        body:
          application/json:
            example: |
              {
                "users": [
                  {"id": 1, "name": "Alice"},
                  {"id": 2, "name": "Bob"}
                ]
              }</pre>



<h3 class="wp-block-heading"><span id="toc3">1. RAMLバージョンの指定</span></h3>



<p class="wp-block-paragraph"><strong><code><span class="bold-blue">#%RAML 1.0</span></code></strong>：文書の先頭にこの行を書くことで使用しているRAMLのバージョンを宣言します。この宣言を行っておくことでパーサー（解析器）が適切に文書を読み込めるようになります。</p>



<pre class="EnlighterJSRAW" data-enlighter-language="yaml" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">#%RAML 1.0</pre>



<h3 class="wp-block-heading"><span id="toc4">2. APIの基本情報</span></h3>



<ul class="wp-block-list">
<li><strong><code><span class="bold-blue">title</span></code></strong>：<strong>APIの名前</strong>。</li>



<li><strong><code><span class="bold-blue">version</span></code></strong>：APIのバージョン。</li>



<li><strong><code><span class="bold-blue">baseUri</span></code></strong>：APIのベースとなるURL。URL中にはバージョン番号などの変数を埋め込むこともできます。</li>
</ul>



<pre class="EnlighterJSRAW" data-enlighter-language="yaml" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">title: Users API
version: v1
baseUri: http://example.com/api/{version}</pre>



<h3 class="wp-block-heading"><span id="toc5">3. リソースとメソッド</span></h3>



<ul class="wp-block-list">
<li><strong>リソース</strong>：APIで扱うデータの「種類」や「項目」を示します。通常、URLのパス（例：<code>/users</code>）で表されます。</li>



<li><strong>メソッド</strong>：リソースに対する操作（<a href="https://it-biz.online/it-skills/http/">HTTPメソッド</a>）。<code>get</code>、<code>post</code>、<code>put</code>、<code>delete</code>などを定義します。</li>
</ul>



<pre class="EnlighterJSRAW" data-enlighter-language="yaml" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">/users:
  get:</pre>



<h3 class="wp-block-heading"><span id="toc6">4. レスポンスとステータスコード</span></h3>



<ul class="wp-block-list">
<li><strong>レスポンス</strong>：APIがどのようなデータを返すか、またはどのようなエラーが返るかを定義。</li>



<li><strong>ステータスコード</strong>：レスポンスの種類を示すHTTPステータスコード（例：<code>200</code>、<code>404</code>、<code>500</code>）を指定。</li>
</ul>



<pre class="EnlighterJSRAW" data-enlighter-language="yaml" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">/users:
  get:
    description: Get a list of users
    responses:
      200:
        body:
          application/json:
            example: |
              {
                "users": [
                  {"id": 1, "name": "Alice"},
                  {"id": 2, "name": "Bob"}
                ]
              }</pre>



<p class="wp-block-paragraph">ザックリいえば、どんなURLにどんなリクエストを送ればどんなレスポンスが返ってくるか？を定義しているものがRAMLだと理解できればOK。他のプログラミング言語のように複雑な構文や条件分岐等も基本的にはなく、あくまでもドキュメンテーションとしての役割を果たしているものだと言えます。</p>



<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-1 sbs-stn sbp-l sbis-cb cf block-box not-nested-style cocoon-block-balloon"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://it-biz.online/wp-content/uploads/2023/06/man.png" alt="" class="speech-icon-image"/></figure><div class="speech-name"></div></div><div class="speech-balloon">
<p class="wp-block-paragraph">上記の基本的な構造を理解しておくことで、あとは必要に応じて少しずつ拡張していけばOKです。</p>
</div></div>



<h3 class="wp-block-heading"><span id="toc7">より実践的なRAMLの書き方</span></h3>



<p class="wp-block-paragraph">ここからはより実践的に、APIの機能を拡張しより詳細なAPI仕様を作成する方法をご説明していきます。</p>



<h4 class="wp-block-heading">1. クエリパラメータの定義</h4>



<p class="wp-block-paragraph">APIエンドポイントに<strong>クエリパラメータ</strong>を追加してユーザーが様々な形のリクエストを送れるようにすることもできます。例えば、ユーザーリストを取得する際に、年齢や職業でフィルタリングできるようにできたら便利です。</p>



<pre class="EnlighterJSRAW" data-enlighter-language="yaml" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">/users:
  get:
    description: Returns a list of users filtered by age and job
    queryParameters:
      age:
        description: Filter by age
        type: integer
        required: false
      job:
        description: Filter by job
        type: string
        required: false
    responses:
      200:
        body:
          application/json:
            example: |
              {
                "users": [
                  {"id": 1, "name": "Alice", "age": 30, "job": "Engineer"},
                  {"id": 2, "name": "Bob", "age": 25, "job": "Designer"}
                ]
              }</pre>



<p class="wp-block-paragraph">クエリパラメータは、<strong>URLの一部としてデータを送る方法</strong>で<a href="https://it-biz.online/it-skills/web-server/">Webサーバー</a>に特定の情報を求める際に使われるのが一般的。クエリパラメータはURLの末尾に「？」記号の後に続けて記入され、キー（名前）と値の組み合わせで指定されます。複数のパラメータを送る場合は、「&amp;」記号で区切ります。</p>



<p class="wp-block-paragraph">例えば、年齢と職業でユーザー情報を絞り込む場合は以下のようなURLになります。</p>




<a rel="noopener" href="http://example.com/users?age=25&#038;job=developer" title="Example Domain" class="blogcard-wrap external-blogcard-wrap a-wrap cf" target="_blank"><div class="blogcard external-blogcard eb-left cf"><div class="blogcard-label external-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail external-blogcard-thumbnail"><img loading="lazy" decoding="async" src="https://s.wordpress.com/mshots/v1/http%3A%2F%2Fexample.com%2Fusers%3Fage%3D25%26job%3Ddeveloper?w=320&#038;h=180" alt="" class="blogcard-thumb-image external-blogcard-thumb-image" width="320" height="180" /></figure><div class="blogcard-content external-blogcard-content"><div class="blogcard-title external-blogcard-title">Example Domain</div><div class="blogcard-snippet external-blogcard-snippet"></div></div><div class="blogcard-footer external-blogcard-footer cf"><div class="blogcard-site external-blogcard-site"><div class="blogcard-favicon external-blogcard-favicon"><img loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=http://example.com/users?age=25&#038;job=developer" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain external-blogcard-domain">example.com</div></div></div></div></a></pre>



<p class="wp-block-paragraph">この例では、<code><span class="bold-blue">age=25</span></code> と <code><span class="bold-blue">job=developer</span></code> がクエリパラメータ。こうすることで年齢が25歳で職業が開発者（developer）のユーザー情報をWebサーバーにリクエストすることができるようになります。</p>



<h4 class="wp-block-heading">2. ヘッダーとURIパラメータの追加</h4>



<p class="wp-block-paragraph">ヘッダーを使ってリクエストやレスポンスに追加の情報を含めることもできます。また、URIパラメータを利用して特定のリソースにアクセスする際の動的なパスを指定するようなことも可能です。</p>



<pre class="EnlighterJSRAW" data-enlighter-language="yaml" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">/users/{userId}:
  get:
    description: Returns a specific user by their ID
    uriParameters:
      userId:
        description: The user's ID
        type: integer
    headers:
      X-Request-ID:
        description: A unique identifier for the request
        type: string
    responses:
      200:
        body:
          application/json:
            example: |
              {
                "id": 1,
                "name": "Alice",
                "age": 30,
                "job": "Engineer"
              }</pre>



<div class="wp-block-cocoon-blocks-faq faq-wrap blank-box block-box not-nested-style cocoon-block-faq"><dl class="faq"><dt class="faq-question faq-item"><div class="faq-question-label faq-item-label">Q</div><div class="faq-question-content faq-item-content">ヘッダーとは？</div></dt><dd class="faq-answer faq-item"><div class="faq-answer-label faq-item-label">A</div><div class="faq-answer-content faq-item-content">
<p class="wp-block-paragraph">リクエストやレスポンスに付加情報を提供するための部分。データの種類、認証情報、リクエストの送信日時など、<a href="https://it-biz.online/it-skills/payload/">ペイロード</a>には含まれないがその情報のメタ情報となるような種類の情報を保持。</p>
</div></dd></dl></div>



<div class="wp-block-cocoon-blocks-faq faq-wrap blank-box block-box not-nested-style cocoon-block-faq"><dl class="faq"><dt class="faq-question faq-item"><div class="faq-question-label faq-item-label">Q</div><div class="faq-question-content faq-item-content">URIパラメータとは？</div></dt><dd class="faq-answer faq-item"><div class="faq-answer-label faq-item-label">A</div><div class="faq-answer-content faq-item-content">
<p class="wp-block-paragraph">URL内で特定のリソースを指定するために使われるもの。例えば、特定のユーザーの詳細情報を取得したい場合、そのユーザーのIDをURIパラメータとしてURLに含めることができます。上記のサンプルコードで言うと<span class="bold-blue">{userId}</span>が該当。</p>
</div></dd></dl></div>



<h4 class="wp-block-heading">3. レスポンスとエラーハンドリングの定義</h4>



<p class="wp-block-paragraph">APIのレスポンスを詳細に定義することでエラー発生時のハンドリングを行うことも可能です。</p>



<pre class="EnlighterJSRAW" data-enlighter-language="yaml" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">/users/{userId}:
  get:
    responses:
      200:
        body:
          application/json:
            example: |
              {"id": 1, "name": "Alice", "age": 30, "job": "Engineer"}
      404:
        body:
          application/json:
            example: |
              {"error": "User not found"}</pre>



<p class="wp-block-paragraph">↑の例では、<code><span class="bold-blue">/users/{userId}</span></code> エンドポイントに対するGETリクエストで、ユーザーIDに基づいてユーザー情報を取得する操作を定義。レスポンスとして成功時（200）はユーザーの情報を、失敗時（404）はエラーメッセージを返すことが示されています。</p>



<p class="wp-block-paragraph">このようにレスポンスとエラーハンドリングを明確にすることで、APIの使用者はどんな結果を期待できるか、そして何か問題が発生したときにはどのように対応すればよいかを正確に理解することができるようになります。</p>
]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
