<?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/author/shibuya0404/feed/" rel="self" type="application/rss+xml" />
	<link>https://it-biz.online</link>
	<description></description>
	<lastBuildDate>Tue, 26 May 2026 09:27:28 +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>【HTML】tableタグ：テーブル（表）の作成方法を３分でわかりやすく</title>
		<link>https://it-biz.online/web-design/table/</link>
		
		<dc:creator><![CDATA[ビズドットオンライン]]></dc:creator>
		<pubDate>Thu, 03 Jan 2019 00:00:00 +0000</pubDate>
				<category><![CDATA[HTML]]></category>
		<category><![CDATA[WEBデザイン]]></category>
		<category><![CDATA[Web開発]]></category>
		<category><![CDATA[プログラミング]]></category>
		<guid isPermaLink="false">https://it-biz.online/?p=2825</guid>

					<description><![CDATA[HTMLでテーブル（表）を作成するtableタグ（&#60;table&#62;タグ・&#60;tr&#62;タグ・&#60;th&#62;タグ・&#60;td&#62;タグ）の基本・意味・使い方を初心者向けにわかりやすく解説します。  [&#8230;]]]></description>
										<content:encoded><![CDATA[
<figure class="wp-block-image size-large"><img fetchpriority="high" decoding="async" width="800" height="1131" src="https://it-biz.online/wp-content/uploads/2019/01/image-800x1131.png" alt="" class="wp-image-11137" srcset="https://it-biz.online/wp-content/uploads/2019/01/image-800x1131.png 800w, https://it-biz.online/wp-content/uploads/2019/01/image-500x707.png 500w, https://it-biz.online/wp-content/uploads/2019/01/image-300x424.png 300w, https://it-biz.online/wp-content/uploads/2019/01/image-768x1085.png 768w, https://it-biz.online/wp-content/uploads/2019/01/image.png 1055w" sizes="(max-width: 800px) 100vw, 800px" /></figure>



<p class="wp-block-paragraph">HTMLでテーブル（表）を作成するtableタグ（<strong>&lt;table&gt;タグ・&lt;tr&gt;タグ・&lt;th&gt;タグ・&lt;td&gt;タグ</strong>）の基本・意味・使い方を初心者向けにわかりやすく解説します。</p>



<pre class="EnlighterJSRAW" data-enlighter-language="html" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">&lt;table>
  &lt;tr>
    &lt;th>見出し1&lt;/th>
    &lt;th>見出し2&lt;/th>
  &lt;/tr>
  &lt;tr>
    &lt;td>データ1&lt;/td>
    &lt;td>データ2&lt;/td>
  &lt;/tr>
  &lt;tr>
    &lt;td>データ3&lt;/td>
    &lt;td>データ4&lt;/td>
  &lt;/tr>
&lt;/table></pre>



<figure class="wp-block-image aligncenter size-full"><img decoding="async" width="604" height="225" src="https://it-biz.online/wp-content/uploads/2023/12/image-19.png" alt="HTML tableタグ" class="wp-image-8683" srcset="https://it-biz.online/wp-content/uploads/2023/12/image-19.png 604w, https://it-biz.online/wp-content/uploads/2023/12/image-19-500x186.png 500w, https://it-biz.online/wp-content/uploads/2023/12/image-19-300x112.png 300w" sizes="(max-width: 604px) 100vw, 604px" /><figcaption class="wp-element-caption">図1:HTML tableタグ</figcaption></figure>



<p class="wp-block-paragraph">tableタグはデータを行と列の形式で整理し、表示するために使用されるHTML要素。テーブルは、情報を視覚的に整理して比較しやすくすることができ、一般的には数値データや、関連する項目のリストなどを表示するのに適しています。</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-hand-o-right block-box"><div class="iconlist-title"></div>
<ul class="wp-block-list">
<li>HTMLのtableタグの使い方（テーブル・表の作成方法）
<ul class="wp-block-list">
<li><strong>&lt;table&gt;タグ・&lt;tr&gt;タグ・&lt;th&gt;タグ・&lt;td&gt;タグ</strong></li>
</ul>
</li>



<li>テーブル・表のデザイン方法</li>
</ul>
</div>
</div></div>



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



<p class="has-text-align-center wp-block-paragraph"><span class="badge">参考</span>　<a href="https://it-biz.online/web-design/html-rule/">HTMLの基本構文ルール</a></p>



<h2 class="wp-block-heading">HTML：テーブル（表）の定義方法</h2>



<p class="wp-block-paragraph">tableタグを使ってテーブルを作成する際には、次のようなタグを組み合わせて使用します。</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">テーブルを作るには、tableタグだけではなく、その要素を表す <strong>&lt;tr&gt;タグ・&lt;th&gt;タグ・&lt;td&gt;タグ</strong>が必要になります。</p>
</div></div>



<p class="wp-block-paragraph">全てを暗記する必要はありませんが、それぞれのタグがどのように利用され、どのような意味を持つのか？をまずは頭に入れておきましょう。</p>



<figure class="wp-block-image aligncenter size-large"><img decoding="async" width="859" height="399" src="https://it-biz.online/wp-content/uploads/2019/12/image-52.png" alt="html table" class="wp-image-2834" srcset="https://it-biz.online/wp-content/uploads/2019/12/image-52.png 859w, https://it-biz.online/wp-content/uploads/2019/12/image-52-300x139.png 300w, https://it-biz.online/wp-content/uploads/2019/12/image-52-500x232.png 500w, https://it-biz.online/wp-content/uploads/2019/12/image-52-768x357.png 768w, https://it-biz.online/wp-content/uploads/2019/12/image-52-800x372.png 800w, https://it-biz.online/wp-content/uploads/2019/12/image-52-304x141.png 304w" sizes="(max-width: 859px) 100vw, 859px" /><figcaption class="wp-element-caption">図2：tableタグ</figcaption></figure>



<ul class="wp-block-list is-style-icon-list-circle has-list-style">
<li><code><span class="bold-blue">&lt;table&gt;</span></code>
<ul class="wp-block-list">
<li><strong>テーブル<span class="bold-blue">全体</span>を定義</strong>します。テーブルはこのタグで始まり、<code>&lt;/table&gt;</code>で終わります。</li>
</ul>
</li>



<li><code><span class="bold-blue">&lt;tr&gt;</span></code>
<ul class="wp-block-list">
<li class="is-style-bottom-margin-2em has-bottom-margin"><strong>テーブルの<span class="bold-blue">行</span>を定義</strong>するために使用されるタグです。<br>→<strong>Table Row</strong> (テーブルの行) の略です。「ここから新しい行が始まりますよ」という意味。</li>
</ul>
</li>



<li><code><span class="bold-blue">&lt;th&gt;</span></code>
<ul class="wp-block-list">
<li class="is-style-bottom-margin-2em has-bottom-margin"><strong>テーブルの<span class="bold-blue">見出しセル</span>を定義</strong>するために使用されるタグで、通常は行や列のラベルに使用されます。<br>→<strong>Table Header</strong> (テーブルの見出し) の略です。行の中でも「見出し」となるセルに使います。</li>
</ul>
</li>



<li><code><span class="bold-blue">&lt;td&gt;</span></code>
<ul class="wp-block-list">
<li class="is-style-bottom-margin-2em has-bottom-margin"><strong>テーブルの<span class="bold-blue">データセル</span>を定義</strong>するために使用されるタグで、実際のデータを表します。<br>→<strong>Table Data</strong> (テーブルのデータ) の略です。行の中でも「データ」となるセルに使います。<br></li>
</ul>
</li>
</ul>



<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">HTML：&lt;table&gt;タグの使い方</h3>



<figure class="wp-block-image aligncenter size-large"><img loading="lazy" decoding="async" width="848" height="388" src="https://it-biz.online/wp-content/uploads/2019/12/image-53.png" alt="html table" class="wp-image-2835" srcset="https://it-biz.online/wp-content/uploads/2019/12/image-53.png 848w, https://it-biz.online/wp-content/uploads/2019/12/image-53-300x137.png 300w, https://it-biz.online/wp-content/uploads/2019/12/image-53-500x229.png 500w, https://it-biz.online/wp-content/uploads/2019/12/image-53-768x351.png 768w, https://it-biz.online/wp-content/uploads/2019/12/image-53-800x366.png 800w, https://it-biz.online/wp-content/uploads/2019/12/image-53-304x139.png 304w" sizes="(max-width: 848px) 100vw, 848px" /><figcaption class="wp-element-caption">図3:HTML tableタグ</figcaption></figure>



<p class="wp-block-paragraph">&lt;table&gt;タグは、テーブル（表）を作成するタグです。</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>をするだけの役割を担っていると考えてOK。</p>
</div></div>



<pre class="EnlighterJSRAW" data-enlighter-language="html" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">&lt;table>
&lt;!-- ここに行数や見出しなどを定義していく -->
&lt;/table></pre>



<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-lightbulb"><span class="tab-caption-box-label-text block-box-label-text box-label-text">tableタグの基本</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><span class="bold-blue">tableタグの基本構造</span>
<ul class="wp-block-list">
<li class="is-style-bottom-margin-1em has-bottom-margin">HTMLテーブルは、&lt;table&gt;タグで始まり、&lt;/table&gt;タグで終わります。テーブル内には、行と列を定義するためのタグが必要。</li>
</ul>
</li>



<li><span class="bold-blue">行と列の定義</span>
<ul class="wp-block-list">
<li>行: &lt;tr&gt;タグ (table row) を使って、テーブルの行を定義します。</li>



<li>列: &lt;td&gt;タグ (table data) または &lt;th&gt;タグ (table header) を使って、テーブルの列を定義します。通常、&lt;td&gt;タグはデータセルを、&lt;th&gt;タグは見出しセルを表します。</li>
</ul>
</li>
</ul>
</div>
</div></div>



<h3 class="wp-block-heading">HTML：&lt;tr&gt;タグの使い方</h3>



<figure class="wp-block-image aligncenter size-large is-resized"><img loading="lazy" decoding="async" width="850" height="367" src="https://it-biz.online/wp-content/uploads/2019/12/image-55.png" alt="html tr" class="wp-image-2837" style="width:840px;height:auto" srcset="https://it-biz.online/wp-content/uploads/2019/12/image-55.png 850w, https://it-biz.online/wp-content/uploads/2019/12/image-55-300x130.png 300w, https://it-biz.online/wp-content/uploads/2019/12/image-55-500x216.png 500w, https://it-biz.online/wp-content/uploads/2019/12/image-55-768x332.png 768w, https://it-biz.online/wp-content/uploads/2019/12/image-55-800x345.png 800w, https://it-biz.online/wp-content/uploads/2019/12/image-55-304x131.png 304w" sizes="(max-width: 850px) 100vw, 850px" /><figcaption class="wp-element-caption">図4：HTML tr</figcaption></figure>



<p class="wp-block-paragraph">&lt;tr&gt;タグは<strong><span class="marker-under">テーブルの行数を指定するタグ</span></strong>です。&lt;tr&gt;タグを設置した分だけ、行数が増えていくことになります。</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>&lt;tr&gt;タグは4つ</strong>（＝４行あるので）設置していることになります。必要に応じて、何個でも設置することが可能です。</p>
</div></div>



<p class="wp-block-paragraph">trとは「<big><span style="color:#cf2e2e" class="color">T</span></big>able <big><span style="color:#cf2e2e" class="color">R</span></big>ow」の略です。Rowとは、行という意味を持つため迷ったときは略す前の名称を思い出すと良いでしょう。&lt;tr&gt;タグは、&lt;table&gt;タグの中にネストして利用します。</p>



<pre class="EnlighterJSRAW" data-enlighter-language="html" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">&lt;table>
  &lt;tr>
&lt;!-- ここに表の値などを定義していく -->
  &lt;/tr>
  &lt;tr>
&lt;!-- ここに表の値などを定義していく -->
  &lt;/tr>
&lt;/table></pre>



<h3 class="wp-block-heading">HTML：&lt;th&gt;タグの使い方</h3>



<figure class="wp-block-image aligncenter size-large"><img loading="lazy" decoding="async" width="844" height="370" src="https://it-biz.online/wp-content/uploads/2019/12/image-56.png" alt="html th" class="wp-image-2838" srcset="https://it-biz.online/wp-content/uploads/2019/12/image-56.png 844w, https://it-biz.online/wp-content/uploads/2019/12/image-56-300x132.png 300w, https://it-biz.online/wp-content/uploads/2019/12/image-56-500x219.png 500w, https://it-biz.online/wp-content/uploads/2019/12/image-56-768x337.png 768w, https://it-biz.online/wp-content/uploads/2019/12/image-56-800x351.png 800w, https://it-biz.online/wp-content/uploads/2019/12/image-56-304x133.png 304w" sizes="(max-width: 844px) 100vw, 844px" /><figcaption class="wp-element-caption">図5：HTML th</figcaption></figure>



<p class="wp-block-paragraph">&lt;th&gt;タグは、テーブルの見出しやタイトルを定義します。</p>



<p class="wp-block-paragraph">&lt;th&gt;タグは「<big><strong>T</strong></big>able <strong><big>H</big></strong>eader」の略であり、&lt;tr&gt;タグの中にネストして利用します。なお、&lt;th&gt;タグは見出し・タイトルを定義するタグであるため、テキストは<strong>太字</strong>かつ<strong>中央寄せ</strong>で表示されます。</p>



<pre class="EnlighterJSRAW" data-enlighter-language="html" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">&lt;table>
  &lt;tr>
    &lt;th>国&lt;/th>
    &lt;th>通貨&lt;/th>
    &lt;th>言語&lt;/th>
  &lt;/tr>
  &lt;tr>
&lt;!-- ここに表の値を定義していく -->
  &lt;/tr>
&lt;/table></pre>



<h3 class="wp-block-heading">HTML：&lt;td&gt;タグの使い方</h3>



<figure class="wp-block-image aligncenter size-large"><img loading="lazy" decoding="async" width="852" height="377" src="https://it-biz.online/wp-content/uploads/2019/12/image-57.png" alt="HTML td" class="wp-image-2840" srcset="https://it-biz.online/wp-content/uploads/2019/12/image-57.png 852w, https://it-biz.online/wp-content/uploads/2019/12/image-57-300x133.png 300w, https://it-biz.online/wp-content/uploads/2019/12/image-57-500x221.png 500w, https://it-biz.online/wp-content/uploads/2019/12/image-57-768x340.png 768w, https://it-biz.online/wp-content/uploads/2019/12/image-57-800x354.png 800w, https://it-biz.online/wp-content/uploads/2019/12/image-57-304x135.png 304w" sizes="(max-width: 852px) 100vw, 852px" /><figcaption class="wp-element-caption">図6：HTML td</figcaption></figure>



<p class="wp-block-paragraph"><strong>&lt;td&gt;タグ</strong>は「Table Data」の略で、テーブルセルの内容を定義します。&lt;tr&gt;タグの中にネストして利用します。</p>



<pre class="EnlighterJSRAW" data-enlighter-language="html" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">&lt;table>
  &lt;tr>
    &lt;th>国&lt;/th>
    &lt;th>通貨&lt;/th>
    &lt;th>言語&lt;/th>
  &lt;/tr>
  &lt;tr>
    &lt;td>日本&lt;/td>
    &lt;td>円&lt;/td>
    &lt;td>言語&lt;/td>
  &lt;/tr>
  &lt;tr>
    &lt;td>アメリカ&lt;/td>
    &lt;td>＄&lt;/td>
    &lt;td>英語&lt;/td>
  &lt;/tr>
  &lt;tr>
    &lt;td>イギリス&lt;/td>
    &lt;td>￡&lt;/td>
    &lt;td>英語&lt;/td>
  &lt;/tr>
&lt;/table></pre>



<p class="wp-block-paragraph">こちらのコードを実行した結果がこちら。</p>



<figure class="wp-block-image aligncenter size-large"><img loading="lazy" decoding="async" width="244" height="180" src="https://it-biz.online/wp-content/uploads/2019/12/image-58.png" alt="" class="wp-image-2842" srcset="https://it-biz.online/wp-content/uploads/2019/12/image-58.png 244w, https://it-biz.online/wp-content/uploads/2019/12/image-58-214x158.png 214w" sizes="(max-width: 244px) 100vw, 244px" /><figcaption class="wp-element-caption">図7：テーブル（表）の表示結果</figcaption></figure>



<p class="wp-block-paragraph">このように、<strong>&lt;table&gt;タグ・&lt;tr&gt;タグ・&lt;th&gt;タグ・&lt;td&gt;タグ</strong>の４つを利用することでHTMLでテーブル（表）を定義することが可能になります。</p>



<div class="wp-block-cocoon-blocks-icon-box common-icon-box block-box memo-box">
<div class="wp-block-cocoon-blocks-iconlist-box iconlist-box blank-box list-caret-right block-box"><div class="iconlist-title">HTML：テーブル（表）の基本</div>
<ul class="wp-block-list">
<li class="is-style-bottom-margin-2em has-bottom-margin">HTMLのtableタグは、データを行と列の形式で整理し、表示するために使用されるHTML要素。</li>



<li class="is-style-bottom-margin-2em has-bottom-margin">テーブルは、情報を視覚的に整理して比較しやすくすることができ、一般的には数値データや、関連する項目のリストなどを表示するのに適している。</li>



<li>tableタグを使ってテーブルを作成する際には、以下のタグを組み合わせて使用します。</li>
</ul>
</div>



<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 class="is-style-bottom-margin-1em has-bottom-margin"><code><span class="bold-blue">&lt;table&gt;</span></code><br>テーブル全体を定義します。テーブルはこのタグで始まり、<code>&lt;/table&gt;</code>で終わります。</li>



<li class="is-style-bottom-margin-1em has-bottom-margin"><code><span class="bold-blue">&lt;tr&gt;</span></code><br>テーブルの行を定義するために使用されるタグです。</li>



<li class="is-style-bottom-margin-1em has-bottom-margin"><code><span class="bold-blue">&lt;th&gt;</span></code><br>テーブルの見出しセルを定義するために使用されるタグで、通常は行や列のラベルに使用されます。</li>



<li><code><span class="bold-blue">&lt;td&gt;</span></code><br>テーブルのデータセルを定義するために使用されるタグで、実際のデータを表します。</li>
</ul>
</div>



<pre class="EnlighterJSRAW" data-enlighter-language="html" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">&lt;table>
  &lt;tr>
    &lt;th>見出し1&lt;/th>
    &lt;th>見出し2&lt;/th>
  &lt;/tr>
  &lt;tr>
    &lt;td>データ1&lt;/td>
    &lt;td>データ2&lt;/td>
  &lt;/tr>
  &lt;tr>
    &lt;td>データ3&lt;/td>
    &lt;td>データ4&lt;/td>
  &lt;/tr>
&lt;/table></pre>
</div>



<h2 class="wp-block-heading">現代のWeb環境におけるテーブル（表）の重要性</h2>



<p class="wp-block-paragraph">たまに、現代のWeb環境においてはテーブル（tableタグ）はもはや不要である？という意見を見かけますが、以下のような観点を踏まえると依然として重要なタグの１つであると言えます。</p>



<ol class="wp-block-list is-style-numeric-list-enclosed has-list-style">
<li><strong>データの整理と表示</strong>
<ul class="wp-block-list">
<li class="is-style-bottom-margin-2em has-bottom-margin">HTMLの表はデータを整理し、読みやすい形式で表示するのに適しています。例えば、統計データ、スケジュール、比較リストなどが挙げられます。</li>
</ul>
</li>



<li><strong>アクセシビリティ</strong>
<ul class="wp-block-list">
<li class="is-style-bottom-margin-2em has-bottom-margin">正しくマークアップされた表は、スクリーンリーダーを使用する視覚障害者に対して、情報の構造を明確に伝えることができます。</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">ちょっと寄り道的に解説すると、昔は<strong>テーブル要素をページのレイアウトを整えるために利用する</strong>手法が流行った時期があるのですが、もうその目的では利用しませんよ・・・！ということを勘違いしてしまうと不要論につながってしまいます。</p>
</div></div>



<h3 class="wp-block-heading">限定的な使用</h3>



<ul class="wp-block-list">
<li><strong>レイアウトツールとしての使用の減少</strong>
<ul class="wp-block-list">
<li>過去にはWebページのレイアウト作成に広く使われていましたが、現在ではCSSフレックスボックスやグリッドレイアウトなどの技術が推奨されています。これらはレスポンシブデザインに適しており、より柔軟なレイアウトを可能にします。</li>
</ul>
</li>
</ul>



<h3 class="wp-block-heading">最適な使用</h3>



<ul class="wp-block-list">
<li><strong>意図した目的での使用</strong>
<ul class="wp-block-list">
<li>テーブルは主にタブラー形式のデータ表示のために使用するべきです。レイアウト目的での使用は、セマンティック（意味論的）なWebデザインの原則に反しています。<br><span class="badge">参考</span>　<a href="https://it-biz.online/web-design/semantic-html/">セマンティックHTMLとは？</a></li>
</ul>
</li>
</ul>



<p class="wp-block-paragraph">HTMLの表は現代のWeb環境において、特定の用途、特にデータの整理とアクセス可能な表示において重要ですが、ページレイアウトのツールとしては他のより適した技術に取って代わられています。適切なコンテキストで使用される場合、表は効果的なツールであり続けます。</p>



<h2 class="wp-block-heading">HTML：テーブルのデザイン</h2>



<p class="wp-block-paragraph">ここからは、HTMLでテーブルのデザイン変更を行う方法を解説していきます。CSSを使用してスタイルを指定する方が現代的で柔軟ですが、知識の１つとして知っておいて損はありません。</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 class="wp-block-cocoon-blocks-iconlist-box iconlist-box blank-box list-caret-right block-box"><div class="iconlist-title">tableタグで利用できる主な属性</div>
<ul class="wp-block-list">
<li>border属性</li>



<li>bordercolor属性</li>



<li>bgcolor属性</li>



<li>cellspacing属性</li>



<li>cellpadding属性</li>
</ul>
</div>
</div></div>



<h3 class="wp-block-heading">テーブルに罫線をつける方法（border属性）</h3>



<p class="wp-block-paragraph">border属性（<span class="badge">参考</span> <a href="https://it-biz.online/web-design/attribute/">属性とは？</a>）は、HTMLのtableタグにおいて、<strong>テーブルやセルの境界線（ボーダー）の幅を指定</strong>するために使用される属性です。この属性に数値を指定することで、ボーダーの幅をピクセル単位で設定できます。</p>



<p class="wp-block-paragraph">例えば、次のようにtableタグにborder属性を指定することで、テーブル全体に1ピクセル幅のボーダーを適用できます。</p>



<pre class="EnlighterJSRAW" data-enlighter-language="html" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">&lt;table border="1">
  ...
&lt;/table></pre>



<div class="wp-block-cocoon-blocks-icon-box common-icon-box block-box information-box">
<p class="wp-block-paragraph">しかし、border属性はHTML4.01で非推奨となり、HTML5では完全に廃止されました。現代のWeb開発では、代わりにCSSを使用してテーブルやセルのボーダーをスタイルすることが一般的です。</p>



<p class="wp-block-paragraph">例えば、次のようにCSSのborderプロパティを使用して、同様のボーダースタイルを適用できます。</p>
</div>



<pre class="EnlighterJSRAW" data-enlighter-language="html" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">&lt;style>
  table {
    border-collapse: collapse;
  }
  th, td {
    border: 1px solid black;
  }
&lt;/style>
&lt;table>
  &lt;tr>
    &lt;th>見出し1&lt;/th>
    &lt;th>見出し2&lt;/th>
  &lt;/tr>
  &lt;tr>
    &lt;td>データ1&lt;/td>
    &lt;td>データ2&lt;/td>
  &lt;/tr>
  &lt;tr>
    &lt;td>データ3&lt;/td>
    &lt;td>データ4&lt;/td>
  &lt;/tr>
&lt;/table></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 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>



<figure class="wp-block-image aligncenter size-full"><img loading="lazy" decoding="async" width="478" height="142" src="https://it-biz.online/wp-content/uploads/2023/04/image-27.png" alt="" class="wp-image-7438" srcset="https://it-biz.online/wp-content/uploads/2023/04/image-27.png 478w, https://it-biz.online/wp-content/uploads/2023/04/image-27-300x89.png 300w" sizes="(max-width: 478px) 100vw, 478px" /><figcaption class="wp-element-caption">例：CSSで罫線を定義</figcaption></figure>
</div></div>



<h3 class="wp-block-heading">枠線の色を変える（bordercolor）</h3>



<p class="wp-block-paragraph"><code>bordercolor</code>属性は、HTMLのテーブルやセルの境界線（ボーダー）の色を指定するためにかつて使用されていた属性です。この属性に色名や16進カラーコードを指定することで、ボーダーの色を設定できました。</p>



<p class="wp-block-paragraph">例えば、以下のようにtableタグに<code>bordercolor</code>属性を指定することで、ボーダーの色を赤に設定できました。</p>



<pre class="EnlighterJSRAW" data-enlighter-language="html" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">&lt;table border="1" bordercolor="red">
  ...
&lt;/table></pre>



<p class="wp-block-paragraph"><strong><span class="marker-under">しかし、<code>bordercolor</code>属性も非標準の属性であり、HTML標準仕様には含まれていません。そのため、現代のWeb開発では使用を避け</span></strong>、代わりにCSSを利用してボーダーの色をスタイルすることが推奨されています。</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">例えば、以下のようにCSSの<code>border</code>プロパティを使用して、同様のボーダーの色を適用できます。</p>
</div></div>



<pre class="EnlighterJSRAW" data-enlighter-language="html" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">&lt;style>
  table {
    border-collapse: collapse;
  }
  th, td {
    border: 1px solid red;
  }
&lt;/style>

&lt;table>
  &lt;tr>
    &lt;th>見出し1&lt;/th>
    &lt;th>見出し2&lt;/th>
  &lt;/tr>
  &lt;tr>
    &lt;td>データ1&lt;/td>
    &lt;td>データ2&lt;/td>
  &lt;/tr>
  &lt;tr>
    &lt;td>データ3&lt;/td>
    &lt;td>データ4&lt;/td>
  &lt;/tr>
&lt;/table></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 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">この例では、<code>border-collapse: collapse;</code>を使ってテーブルのボーダーがつながるようにしています。また、<code>th</code>および<code>td</code>要素に対して、<code>border: 1px solid red;</code>を使って1ピクセル幅の赤いボーダーを適用しています。</p>



<p class="wp-block-paragraph">CSSを使用することで、より柔軟で綺麗なデザインを実現できますし、標準仕様に準拠したコードを書くことができます。</p>



<figure class="wp-block-image aligncenter size-full"><img loading="lazy" decoding="async" width="502" height="147" src="https://it-biz.online/wp-content/uploads/2023/04/image-28.png" alt="" class="wp-image-7439" srcset="https://it-biz.online/wp-content/uploads/2023/04/image-28.png 502w, https://it-biz.online/wp-content/uploads/2023/04/image-28-300x88.png 300w, https://it-biz.online/wp-content/uploads/2023/04/image-28-500x146.png 500w" sizes="(max-width: 502px) 100vw, 502px" /><figcaption class="wp-element-caption">例：CSSで罫線の色を定義</figcaption></figure>
</div></div>



<h3 class="wp-block-heading">背景色を変更する方法（bgcolor属性）</h3>



<p class="wp-block-paragraph"><code>bgcolor</code>属性は、HTMLの過去のバージョンで使用されていた属性で、テーブルやセルの背景色を指定するために使われていました。この属性に色名や16進カラーコードを指定することで、背景色を設定できました。</p>



<p class="wp-block-paragraph">例えば、次のように<code>table</code>タグや<code>td</code>タグに<code>bgcolor</code>属性を指定することで、背景色を設定できました。</p>



<pre class="EnlighterJSRAW" data-enlighter-language="html" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">&lt;table bgcolor="#f2f2f2">
  &lt;tr>
    &lt;th>見出し1&lt;/th>
    &lt;th>見出し2&lt;/th>
  &lt;/tr>
  &lt;tr>
    &lt;td bgcolor="lightblue">データ1&lt;/td>
    &lt;td bgcolor="lightblue">データ2&lt;/td>
  &lt;/tr>
  &lt;tr>
    &lt;td>データ3&lt;/td>
    &lt;td>データ4&lt;/td>
  &lt;/tr>
&lt;/table></pre>



<p class="has-text-align-left wp-block-paragraph">しかし、<code>bgcolor</code>属性は<strong>HTML4.01で非推奨</strong>となり、<strong><span class="marker-under">HTML5では完全に廃止</span></strong>されました。現代のWeb開発では、代わりにCSSを使用してテーブルやセルの背景色をスタイルすることが一般的です。</p>



<figure class="wp-block-image aligncenter size-full"><img loading="lazy" decoding="async" width="494" height="158" src="https://it-biz.online/wp-content/uploads/2023/04/image-29.png" alt="" class="wp-image-7440" srcset="https://it-biz.online/wp-content/uploads/2023/04/image-29.png 494w, https://it-biz.online/wp-content/uploads/2023/04/image-29-300x96.png 300w" sizes="(max-width: 494px) 100vw, 494px" /><figcaption class="wp-element-caption">例：bgcolor属性</figcaption></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 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">例えば、次のようにCSSの<code>background-color</code>プロパティを使用して、同様の背景色を適用できます。</p>



<pre class="EnlighterJSRAW" data-enlighter-language="html" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">&lt;style>
  table {
    background-color: #f2f2f2;
  }
  td:first-child {
    background-color: lightblue;
  }
&lt;/style>

&lt;table>
  &lt;tr>
    &lt;th>見出し1&lt;/th>
    &lt;th>見出し2&lt;/th>
  &lt;/tr>
  &lt;tr>
    &lt;td>データ1&lt;/td>
    &lt;td>データ2&lt;/td>
  &lt;/tr>
  &lt;tr>
    &lt;td>データ3&lt;/td>
    &lt;td>データ4&lt;/td>
  &lt;/tr>
&lt;/table></pre>



<figure class="wp-block-image aligncenter size-full"><img loading="lazy" decoding="async" width="538" height="152" src="https://it-biz.online/wp-content/uploads/2023/04/image-30.png" alt="" class="wp-image-7441" srcset="https://it-biz.online/wp-content/uploads/2023/04/image-30.png 538w, https://it-biz.online/wp-content/uploads/2023/04/image-30-300x85.png 300w, https://it-biz.online/wp-content/uploads/2023/04/image-30-500x141.png 500w" sizes="(max-width: 538px) 100vw, 538px" /><figcaption class="wp-element-caption">例：CSSでセルの色を変更する</figcaption></figure>
</div></div>



<h3 class="wp-block-heading">セル間のスペースを指定（cellspacing属性）</h3>



<p class="wp-block-paragraph"><code>cellspacing</code>属性は、HTMLのtableタグにおいて、<strong>テーブル内のセル間のスペース</strong>（セルスペーシング）を指定するために使用される属性です。この属性に数値を指定することで、セル間のスペースをピクセル単位で設定できます。</p>



<p class="wp-block-paragraph">例えば、次のようにtableタグに<code>cellspacing</code>属性を指定することで、セル間に5ピクセルのスペースを設けることができます。</p>



<pre class="EnlighterJSRAW" data-enlighter-language="html" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">&lt;table cellspacing="5">
  ...
&lt;/table></pre>



<p class="wp-block-paragraph">しかし、<code>cellspacing</code>属性も他の属性と同様に<strong><span class="marker-under">HTML5で非推奨</span></strong>となりました。代わりにCSSを使用してテーブルのセル間のスペースをスタイルすることが一般的です。</p>



<p class="wp-block-paragraph">例えば、次のようにCSSの<code>border-spacing</code>プロパティを使用して、同様のセル間のスペースを設定できます。</p>



<pre class="EnlighterJSRAW" data-enlighter-language="html" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">&lt;style>
  table {
    border-collapse: separate;
    border-spacing: 20px;
  }
&lt;/style>

&lt;table>
  &lt;tr>
    &lt;th>見出し1&lt;/th>
    &lt;th>見出し2&lt;/th>
  &lt;/tr>
  &lt;tr>
    &lt;td>データ1&lt;/td>
    &lt;td>データ2&lt;/td>
  &lt;/tr>
  &lt;tr>
    &lt;td>データ3&lt;/td>
    &lt;td>データ4&lt;/td>
  &lt;/tr>
&lt;/table></pre>



<figure class="wp-block-image aligncenter size-full"><img loading="lazy" decoding="async" width="587" height="256" src="https://it-biz.online/wp-content/uploads/2023/04/image-31.png" alt="" class="wp-image-7442" srcset="https://it-biz.online/wp-content/uploads/2023/04/image-31.png 587w, https://it-biz.online/wp-content/uploads/2023/04/image-31-300x131.png 300w, https://it-biz.online/wp-content/uploads/2023/04/image-31-500x218.png 500w" sizes="(max-width: 587px) 100vw, 587px" /><figcaption class="wp-element-caption">例：CSSでセル間のスペースを指定</figcaption></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 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">この例では、<code>border-collapse: separate;</code>を使ってテーブルのボーダーが分離されるようにしています。また、<code>border-spacing: </code>20<code>px;</code>を使ってセル間のスペースを20ピクセルに設定しています</p>
</div></div>



<h3 class="wp-block-heading">セル内のスペースを指定（cellpadding属性）</h3>



<p class="wp-block-paragraph"><code>cellpadding</code>属性は、HTMLのtableタグにおいて、テーブルのセル内の余白（セルパディング）を指定するために使用される属性です。この属性に数値を指定することで、セル内の余白をピクセル単位で設定できます。</p>



<p class="wp-block-paragraph">例えば、次のようにtableタグに<code>cellpadding</code>属性を指定することで、セル内の余白を10ピクセルに設定することができます。</p>



<pre class="EnlighterJSRAW" data-enlighter-language="html" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">&lt;table cellpadding="10">
  ...
&lt;/table></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 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">しかし、<code>cellpadding</code>属性についても<strong><span class="marker-under">HTML5で非推奨</span></strong>となりました。</p>
</div></div>



<p class="wp-block-paragraph">代わりにCSSを使用してテーブルのセル内の余白をスタイルすることが一般的です。例えば、次のようにCSSの<code>padding</code>プロパティを使用して、同様のセル内の余白を設定できます。</p>



<pre class="EnlighterJSRAW" data-enlighter-language="html" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">&lt;style>
  th, td {
    padding: 10px;
  }
&lt;/style>
&lt;table>
  &lt;tr>
    &lt;th>見出し1&lt;/th>
    &lt;th>見出し2&lt;/th>
  &lt;/tr>
  &lt;tr>
    &lt;td>データ1&lt;/td>
    &lt;td>データ2&lt;/td>
  &lt;/tr>
  &lt;tr>
    &lt;td>データ3&lt;/td>
    &lt;td>データ4&lt;/td>
  &lt;/tr>
&lt;/table></pre>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>１分で理解できる！コンパイラとインタプリタの違い【初心者向け】</title>
		<link>https://it-biz.online/it-skills/interpreter-compiler/</link>
		
		<dc:creator><![CDATA[ビズドットオンライン]]></dc:creator>
		<pubDate>Wed, 03 Jun 2020 08:31:11 +0000</pubDate>
				<category><![CDATA[IT-Skills]]></category>
		<guid isPermaLink="false">https://it-biz.online/?p=4412</guid>

					<description><![CDATA[この記事ではコンパイラとインタプリタの違いを端的に解説します。 コンパイラ言語とインタプリタ言語の違いは実は1つだけ。それは、プログラムの実行方式です。 分類 プログラム実行方式 コンパイラ ソースコードを一括で機械語に […]]]></description>
										<content:encoded><![CDATA[
<p class="wp-block-paragraph">この記事では<strong>コンパイラ</strong>と<strong>インタプリタ</strong>の違いを端的に解説します。</p>



<p class="wp-block-paragraph">コンパイラ言語とインタプリタ言語の違いは実は1つだけ。それは、<strong><span class="marker-under">プログラムの実行方式</span></strong>です。</p>



<figure class="wp-block-table aligncenter"><div class="scrollable-table stfc-sticky"><table><thead><tr><th>分類</th><th>プログラム実行方式</th></tr></thead><tbody><tr><td><strong>コンパイラ</strong></td><td>ソースコードを<strong>一括で機械語に変換</strong>する仕組み</td></tr><tr><td><strong>インタプリタ</strong></td><td>ソースコードを<strong>１行１行機械語に変換</strong>しつつ<strong>同時に実行まで制御する</strong>仕組み</td></tr></tbody></table></div></figure>



<p class="wp-block-paragraph">このページでは、<strong>そもそも機械語って何？コンパイラ・インタプリタって何？</strong>という前提から、コンパイラ言語とインタプリタ言語の違い・両者の使い分け、メリット/デメリットまで網羅的に解説していきます。</p>



<div class="wp-block-cocoon-blocks-label-box-1 label-box block-box cocoon-block-label-box"><div class="label-box-label block-box-label box-label fab-check"><span class="label-box-label-text block-box-label-text box-label-text">このページで学べる内容</span></div><div class="label-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>
</ul>
</div>
</div></div>



<p class="wp-block-paragraph">プログラマーを目指す方であれば<strong><span class="marker-under">基本として知っておきたい内容ばかり</span></strong>です。（そして、最後まで読んでいただければ、<strong><span style="color:#e60033" class="color">コンパイラ言語・インタプリタ言語という分類が誤解である</span></strong>ということを理解することができます。）</p>



<p class="wp-block-paragraph">是非最後までご覧ください。</p>



<h2 class="wp-block-heading">前提：機械語とは？</h2>



<figure class="wp-block-image aligncenter"><img decoding="async" src="https://cdn.pixabay.com/photo/2014/10/05/19/02/binary-code-475664_960_720.jpg" alt="コンパイラ言語,インタプリタ言語"/></figure>



<p class="wp-block-paragraph">コンパイラ言語とインタプリタ言語の違いを解説する前に、まずは前提となる「機械語」について。</p>



<p class="wp-block-paragraph">我々が普段書いているソースコードは、<strong>実は書いている人間しか理解することができません。</strong>言い換えると、<strong><span class="marker-under">コンピューターはソースコードの命令の意味や文字の内容を直接認識しているわけではない</span></strong>のです。</p>



<pre class="EnlighterJSRAW" data-enlighter-language="python" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">def add_func(a, b):
    return a + b
answer = add_func(b=9, a=2,)
print(answer)</pre>



<p class="has-text-align-center wp-block-paragraph"><span class="badge">参考</span>　<a href="https://it-biz.online/python/print/">print関数</a></p>



<p class="wp-block-paragraph">このソースコードはPythonで書かれていますが、コンピューターはそのままの形では何も理解することができないのです。では、どのようにしてコンピューターはプログラムを実行しているか？</p>



<p class="wp-block-paragraph">その答えが<strong>機械語</strong>です。</p>



<p class="wp-block-paragraph">そもそもプログラムを実行するCPU（コンピューターの頭脳）自体は単なる計算機でしかありません。また「計算」とは言っても、電流のON/OFFを数値化した「０」か「１」の計算しかできない代物です。つまり、コンピュータでプログラムを実行するためには、全ての命令は「０」と「１」だけで構成する必要があるのです。</p>



<p class="wp-block-paragraph">コンピュータが実際に命令を理解できるように、<strong>様々な言語で書かれたソースコードを「０」と「１」だけで構成されるように翻訳したものが<span class="marker-under">機械語</span>です</strong>。</p>



<p class="wp-block-paragraph">最終的にプログラムを実行する際には、どのような言語であってもコンピュータが最終的に読んでいるのは機械語に翻訳されたコードなのです。</p>



<h2 class="wp-block-heading">コンパイラ・インタプリタとは？</h2>



<p class="wp-block-paragraph">結論から言うと、<strong>コンパイラ</strong>と<strong>インタプリタ</strong>は<strong><span class="marker-under">ソースコードを機械語に翻訳するためのツール（仕組み）</span></strong>です。</p>



<p class="wp-block-paragraph">先ほど説明した通り、コンピュータは「０」か「１」しか理解できないので、プログラムを実行する際にはソースコードを機械語に翻訳する必要があります。この際に利用するのが<strong>コンパイラ</strong>or<strong>インタプリタ</strong>です。</p>



<figure class="wp-block-image aligncenter size-large"><img loading="lazy" decoding="async" width="1024" height="394" src="https://it-biz.online/wp-content/uploads/2020/06/image-15-1024x394.png" alt="機械語への翻訳をコンパイラで行う言語を「コンパイラ言語」、インタプリタで行う言語を「インタプリタ言語」と呼びます" class="wp-image-4420" srcset="https://it-biz.online/wp-content/uploads/2020/06/image-15-1024x394.png 1024w, https://it-biz.online/wp-content/uploads/2020/06/image-15-300x115.png 300w, https://it-biz.online/wp-content/uploads/2020/06/image-15-500x192.png 500w, https://it-biz.online/wp-content/uploads/2020/06/image-15-768x295.png 768w, https://it-biz.online/wp-content/uploads/2020/06/image-15-800x308.png 800w, https://it-biz.online/wp-content/uploads/2020/06/image-15.png 1069w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p class="wp-block-paragraph">機械語への翻訳をコンパイラで行う言語を「<strong>コンパイラ言語</strong>」、インタプリタで行う言語を「<strong>インタプリタ言語</strong>」と呼びます。</p>



<h2 class="wp-block-heading">コンパイラとインタプリタの違い</h2>



<p class="wp-block-paragraph">さて、この２つの翻訳ツール「コンパイラ」と「インタプリタ」は何が違うのか？</p>



<p class="wp-block-paragraph">それをまとめたのが以下の表です。</p>



<figure class="wp-block-table aligncenter"><div class="scrollable-table stfc-sticky"><table><thead><tr><th>分類</th><th>プログラム実行方式</th></tr></thead><tbody><tr><td><strong>コンパイラ</strong></td><td>ソースコードを<strong>一括で機械語に変換</strong>する仕組み</td></tr><tr><td><strong>インタプリタ</strong></td><td>ソースコードを<strong>１行１行機械語に変換</strong>しつつ<strong>同時に実行まで制御する</strong>仕組み</td></tr></tbody></table></div></figure>



<p class="wp-block-paragraph">コンパイラとインタプリタの違いを一つずつ詳しく解説します。</p>



<h3 class="wp-block-heading">コンパイラの仕組み</h3>



<p class="wp-block-paragraph"><strong>コンパイラ</strong>は、ソースコードを<strong><span class="marker-under">一括で機械語に変換</span></strong>する仕組みのこと。プログラムは、この一括変換後に生成されたexeファイルを読み込んで実行されます。</p>



<figure class="wp-block-image aligncenter size-large"><img loading="lazy" decoding="async" width="1024" height="353" src="https://it-biz.online/wp-content/uploads/2020/06/image-16-1024x353.png" alt="" class="wp-image-4423" srcset="https://it-biz.online/wp-content/uploads/2020/06/image-16-1024x353.png 1024w, https://it-biz.online/wp-content/uploads/2020/06/image-16-300x103.png 300w, https://it-biz.online/wp-content/uploads/2020/06/image-16-500x172.png 500w, https://it-biz.online/wp-content/uploads/2020/06/image-16-768x265.png 768w, https://it-biz.online/wp-content/uploads/2020/06/image-16-800x276.png 800w, https://it-biz.online/wp-content/uploads/2020/06/image-16.png 1048w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p class="wp-block-paragraph">ポイントはプログラム実行前に一括変換するということ。つまり、プログラムを実行する前にすべてのソースコードが機械語に翻訳されている状態のため、<strong>プログラムの実行速度がその分早くなります。</strong></p>



<p class="wp-block-paragraph">一方で、プログラムを編集するたびに、毎回コンパイルをし都度実行ファイルの生成が必要となるため改修のしやすさという面ではマイナスです。</p>



<div class="wp-block-cocoon-blocks-label-box-1 label-box block-box cocoon-block-label-box"><div class="label-box-label block-box-label box-label fab-edit"><span class="label-box-label-text block-box-label-text box-label-text">コンパイル</span></div><div class="label-box-content block-box-content box-content">
<p class="wp-block-paragraph">ソースコードから機械語に翻訳することを<strong>コンパイル</strong>と言います。翻訳する仕組み自体のことをコンパイラと呼び区別します。</p>
</div></div>



<h4 class="wp-block-heading">コンパイラはあくまでも機械語への翻訳のみを行う</h4>



<p class="wp-block-paragraph">もう少し詳細に説明すると、コンパイラはあくまでもソースコードを機械語に翻訳する役割のみを担います。</p>



<figure class="wp-block-image aligncenter size-large"><img loading="lazy" decoding="async" width="1024" height="565" src="https://it-biz.online/wp-content/uploads/2020/06/image-17-1024x565.png" alt="" class="wp-image-4424" srcset="https://it-biz.online/wp-content/uploads/2020/06/image-17-1024x565.png 1024w, https://it-biz.online/wp-content/uploads/2020/06/image-17-300x165.png 300w, https://it-biz.online/wp-content/uploads/2020/06/image-17-500x276.png 500w, https://it-biz.online/wp-content/uploads/2020/06/image-17-768x424.png 768w, https://it-biz.online/wp-content/uploads/2020/06/image-17-800x441.png 800w, https://it-biz.online/wp-content/uploads/2020/06/image-17.png 1142w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p class="wp-block-paragraph">つまり、一度コンパイルしてしまえば、プログラムを実行する際にコンパイラは不要であるばかりでなく、<strong>おおもとのソースコードがなくても動く</strong>ということです。</p>



<p class="wp-block-paragraph"><strong>コンパイラはあくまでもソースコード⇒機械語への変換機能のみを担う</strong>という理解が重要です。</p>



<h3 class="wp-block-heading">インタプリタの仕組み</h3>



<p class="wp-block-paragraph">それでは、インタプリタはどのような仕組みでしょう。</p>



<p class="wp-block-paragraph">インタプリタはコンパイラと異なり、<strong>プログラム実行時にソースコードを１行ずつ翻訳しながらコンピュータへ命令を渡していく仕組み</strong>です。</p>



<p class="wp-block-paragraph">大事なポイントは、機械語への翻訳とプログラムの実行が同時に行われるということ。</p>



<figure class="wp-block-image aligncenter size-large"><img loading="lazy" decoding="async" width="1024" height="306" src="https://it-biz.online/wp-content/uploads/2020/06/image-18-1024x306.png" alt="" class="wp-image-4425" srcset="https://it-biz.online/wp-content/uploads/2020/06/image-18-1024x306.png 1024w, https://it-biz.online/wp-content/uploads/2020/06/image-18-300x90.png 300w, https://it-biz.online/wp-content/uploads/2020/06/image-18-500x149.png 500w, https://it-biz.online/wp-content/uploads/2020/06/image-18-768x229.png 768w, https://it-biz.online/wp-content/uploads/2020/06/image-18-800x239.png 800w, https://it-biz.online/wp-content/uploads/2020/06/image-18.png 1186w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p class="wp-block-paragraph">コンパイラがプログラム実行前にすべてのソースコードを一括で機械語に変換するのに対して、<strong><span class="marker-under">インタプリタは「機械語への変換」と「プログラムの実行・制御」を同時に行います。</span></strong>（同時通訳をしているようなイメージを持てればOK。）</p>



<p class="wp-block-paragraph">コンパイラの場合、一度ソースコードを機械語に翻訳してしまえばあとはプログラムの実行に関しては全く関係のない存在となります。しかし、インタプリタは機械語への翻訳をしつつ、プログラムの制御も同時に行っているため、インタプリタがなければインタプリタ言語は実行することができません。</p>



<div class="wp-block-cocoon-blocks-label-box-1 label-box block-box cocoon-block-label-box"><div class="label-box-label block-box-label box-label fab-lightbulb"><span class="label-box-label-text block-box-label-text box-label-text">コンパイラとインタプリタを分かりやすく説明すると・・・</span></div><div class="label-box-content block-box-content box-content">
<p class="wp-block-paragraph">コンパイラは<strong>１冊の本を翻訳</strong>すること。インタプリタは<strong>同時通訳</strong>をすることに例えられます。</p>



<p class="wp-block-paragraph">コンパイラはあくまでも本を翻訳（<small>機械語への変換</small>）する役割なので、誰かが本を読む（<small>プログラムを実行する</small>）際には必要がない存在です。一方で、インタプリタは同時通訳―。つまり、<strong>本を翻訳しながら読み上げることが役割</strong>であるため、本を読む（<small>プログラムを実行する</small>）際には必ず必要となる存在なのです。</p>
</div></div>



<h4 class="wp-block-heading">「コンパイラ言語」「インタプリタ言語」という誤解</h4>



<figure class="wp-block-image aligncenter"><img decoding="async" src="https://cdn.pixabay.com/photo/2020/05/07/03/19/delete-5139994_960_720.jpg" alt="削除, 友人, 間違った, キャンセル, ブロック, クリア, 閉じる, 終了, 拒否, 反対します, 関係"/></figure>



<p class="wp-block-paragraph">ここまで読んでいただいた方の中にはお気づきになった方も多いかもしれませんが、インタプリタによってプログラムの実行が行われる言語を「<strong>インタプリタ言語</strong>」、事前にソースコードが一括でコンパイルされる言語を「<strong>コンパイラ言語</strong>」と分類してしまうのは<strong>実はナンセンス</strong>です。</p>



<p class="wp-block-paragraph">一般的にPythonやRubyはインタプリタ言語である！と説明されますが、<strong>実は、インタプリタ言語のソースコードも<span class="marker-under">コンパイルすることは可能</span></strong>です。つまり、いつもはインタプリタを通してプログラムを同時翻訳的に実行するような言語でも、事前に一括翻訳（<strong>コンパイル</strong>）し、CPUが直接実行することも技術的に可能なのです。</p>



<p class="wp-block-paragraph">「Pythonは勉強しやすいけど実行速度が遅いからなあ」というのは半分正解で半分間違い。実際に、Pythonで書かれたプログラムの高速化するために、インタプリタによって実行するのではなく、事前にコンパイルしておく例も豊富に存在しているということに注意しましょう。</p>



<h2 class="wp-block-heading">プログラミングを１から学んでみたい方は</h2>



<p class="wp-block-paragraph"><strong><span class="marker-under">プログラミングをより実践的に学びたい―。実際にコーディングをしながら学びたい―。独学に限界を感じている―。</span></strong></p>



<p class="wp-block-paragraph">そんな方には、無料体験/オンライン完結もあるプログラミングスクールで学ぶのがおすすめです。都度検索しながら知識を補完していくのではなく、１から体系立てて学ぶことで短時間・かつ効率的にスキルハックすることが可能です。</p>



<p class="wp-block-paragraph">各プログラミングスクールの特徴をまとめた記事をこちらに記載しておきますので、是非ご覧ください。</p>


<a href="https://it-biz.online/lifehack/programming/" title="おすすめプログラミングスクールTOP５【現役エンジニア推薦】" class="blogcard-wrap internal-blogcard-wrap a-wrap cf" target="_blank"><div class="blogcard internal-blogcard ib-left cf"><div class="blogcard-label internal-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail internal-blogcard-thumbnail"><img loading="lazy" decoding="async" width="320" height="180" src="https://it-biz.online/wp-content/uploads/2021/01/programming-320x180.png" class="blogcard-thumb-image internal-blogcard-thumb-image wp-post-image" alt="" srcset="https://it-biz.online/wp-content/uploads/2021/01/programming-320x180.png 320w, https://it-biz.online/wp-content/uploads/2021/01/programming-300x168.png 300w, https://it-biz.online/wp-content/uploads/2021/01/programming-500x280.png 500w, https://it-biz.online/wp-content/uploads/2021/01/programming-768x429.png 768w, https://it-biz.online/wp-content/uploads/2021/01/programming-800x447.png 800w, https://it-biz.online/wp-content/uploads/2021/01/programming-240x135.png 240w, https://it-biz.online/wp-content/uploads/2021/01/programming-640x360.png 640w, https://it-biz.online/wp-content/uploads/2021/01/programming-1024x573.png 1024w, https://it-biz.online/wp-content/uploads/2021/01/programming.png 1354w" sizes="(max-width: 320px) 100vw, 320px" /></figure><div class="blogcard-content internal-blogcard-content"><div class="blogcard-title internal-blogcard-title">おすすめプログラミングスクールTOP５【現役エンジニア推薦】</div><div class="blogcard-snippet internal-blogcard-snippet">プログラミングスキルを習得したい社会人・学生の方へおすすめしたいプログラミングスクールをニーズ別に３つに絞ってご紹介します。本当に未経験からでも実務レベルのスキルはみにつくか？現役エンジニアが口コミや実体験をもとに解説します。</div></div><div class="blogcard-footer internal-blogcard-footer cf"><div class="blogcard-site internal-blogcard-site"><div class="blogcard-favicon internal-blogcard-favicon"><img loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://it-biz.online" alt="" class="blogcard-favicon-image internal-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain internal-blogcard-domain">it-biz.online</div></div><div class="blogcard-date internal-blogcard-date"><div class="blogcard-post-date internal-blogcard-post-date">2023.05.30</div></div></div></div></a>


<h2 class="wp-block-heading">関連して読みたい記事</h2>



<p class="wp-block-paragraph">コンパイラとインタプリタの違いをさらに具体化するには、変換後の形式や実行中の最適化も合わせて確認すると理解しやすくなります。</p>



<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>　迷ったら、いま見ているエラーや作業工程に一番近い記事から読む</p>
</div>



<h2 class="wp-block-heading">どの順番で読むと理解しやすいか</h2>



<p class="wp-block-paragraph">まずは<a href="https://it-biz.online/it-skills/compile/">コンパイルとは？初心者向けに1から解説</a>で現在の記事と近い工程を確認し、その後にエラー、変換結果、実行時の仕組みなど、自分がつまずいている箇所に近い記事へ進むのがおすすめです。</p>



<p class="wp-block-paragraph">コンパイル周辺の用語は、単独で覚えるよりも「コードを書く」「変換する」「部品を結びつける」「実行する」「エラーを読む」という流れで見ると整理しやすくなります。ログを見ている場合は、どの段階で止まっているのかを先に切り分けると、読むべき記事も選びやすくなります。</p>



<ul class="wp-block-list is-style-icon-list-check has-list-style">
<li><strong><a href="https://it-biz.online/it-skills/compile/">コンパイルとは？初心者向けに1から解説</a></strong>：コンパイル全体の親記事です。</li>
<li><strong><a href="https://it-biz.online/it-skills/bytecode/">バイトコードとは？機械語との違い</a></strong>：Javaの.classファイルとJVMの関係を理解できます。</li>
<li><strong><a href="https://it-biz.online/it-skills/transpile/">トランスパイルとは？コンパイルとの違い</a></strong>：TypeScriptからJavaScriptへの変換を整理できます。</li>
<li><strong><a href="https://it-biz.online/it-skills/jit-compile/">JITコンパイルとは？実行時に速くする仕組み</a></strong>：実行中に最適化する仕組みを確認できます。</li>
</ul>



<figure class="wp-block-table"><div class="scrollable-table stfc-sticky"><table><thead><tr><th>知りたいこと</th><th>読む観点</th></tr></thead><tbody><tr><td>変換工程の全体像</td><td>コンパイル、ビルド、リンクの関係を確認する</td></tr><tr><td>エラー調査</td><td>実行前に止まったのか、実行中に落ちたのかを分ける</td></tr><tr><td>Javaの実行</td><td>.java、.class、JVM、JITの流れをつなげて見る</td></tr><tr><td>Web開発の変換</td><td>TypeScriptやBabelのようなトランスパイルを確認する</td></tr></tbody></table></div></figure>



<p class="wp-block-paragraph">まずは<a href="https://it-biz.online/it-skills/compile/">コンパイルとは？初心者向けに1から解説</a>から確認し、必要に応じてエラー、バイトコード、トランスパイル、JITなどの周辺用語へ広げると、コンパイル周辺の流れをつなげて理解できます。</p>



<p class="wp-block-paragraph">たとえば、コマンド実行で止まっているならエラーメッセージ、Javaの実行結果が分からないならバイトコード、Web開発の変換で迷っているならトランスパイルというように、いま困っている場面から読む記事を選ぶと理解しやすくなります。</p>



<p class="wp-block-paragraph">読み進めるときは、用語を暗記するよりも「どの工程で、何が入力され、何が出力されるのか」を確認してみてください。ビルドログやエラー文を読むときにも、同じ見方で原因を切り分けやすくなります。</p>



<p class="wp-block-paragraph">関連する用語を一つずつつなげておくと、別の記事で同じ言葉が出てきたときにも、前後の工程を思い出しながら読み進められます。復習にも使えます。</p>

]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Javaプログラムの作成から実行までを１分で</title>
		<link>https://it-biz.online/java/java-program-execute/</link>
		
		<dc:creator><![CDATA[ビズドットオンライン]]></dc:creator>
		<pubDate>Tue, 01 Jul 2025 12:00:00 +0000</pubDate>
				<category><![CDATA[Java]]></category>
		<category><![CDATA[プログラミング]]></category>
		<guid isPermaLink="false">https://it-biz.online/?p=9377</guid>

					<description><![CDATA[ステップ１：Javaファイルの作成 まず、ステップ１：Javaのプログラムを書いて保存します。基本的な構文ルールはこちら（関連　Javaの1stステップ：基本的な構文ルールを１分で復習！）を参考にしてみてください。 Ja […]]]></description>
										<content:encoded><![CDATA[
<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">Javaのプログラムを作成し、実際にあなたのPC上で実行するための手順をご説明します。</p>
</div></div>



<h2 class="wp-block-heading">ステップ１：Javaファイルの作成</h2>



<p class="wp-block-paragraph">まず、ステップ１：Javaのプログラムを書いて保存します。基本的な構文ルールはこちら（<span class="badge-green">関連</span>　<a href="https://it-biz.online/java/java-1ststep/">Javaの1stステップ：基本的な構文ルールを１分で復習！</a>）を参考にしてみてください。</p>



<h3 class="wp-block-heading">Javaファイル作成手順</h3>



<ol class="wp-block-list">
<li><strong>テキストエディタを開く</strong>
<ul class="wp-block-list">
<li>メモ帳、VS Code、Eclipseなどのテキストエディタを使用します。どのような手段を使ってもOKで、どの方法でも最終的な結果に影響することはありません。</li>
</ul>
</li>



<li><strong>コードを入力する</strong>
<ul class="wp-block-list">
<li>以下のコードを入力します。これは「Hello World」と表示するシンプルなプログラムです。</li>
</ul>
</li>
</ol>



<pre class="EnlighterJSRAW" data-enlighter-language="java" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">// HelloWorld.java

public class HelloWorld {
    public static void main(String[] args) {
        // "Hello, World!" をコンソールに出力します
        System.out.println("Hello, World!");
    }
}</pre>



<ol start="3" class="wp-block-list">
<li><strong>ファイルを保存する</strong>：
<ul class="wp-block-list">
<li><code><span class="bold-blue">HelloWorld.java</span></code> という名前で保存します。保存する場所はPCのデスクトップでもドキュメントフォルダでもどこでもOK。（Javaプログラムはこの保存したディレクトリ上でコンパイル～実行することになります。）</li>



<li>ファイル名とクラス名（この場合は <code><span class="bold-blue">HelloWorld</span></code>）は同じにする必要があります。</li>
</ul>
</li>
</ol>



<div class="wp-block-cocoon-blocks-tab-caption-box-1 tab-caption-box block-box not-nested-style cocoon-block-tab-caption-box"><div class="tab-caption-box-label block-box-label box-label fab-lightbulb"><span class="tab-caption-box-label-text block-box-label-text box-label-text">Javaプログラムは最初はただのテキストファイル</span></div><div class="tab-caption-box-content block-box-content box-content">
<p class="wp-block-paragraph">Javaプログラムは、テキストエディタ（例えばメモ帳やVS Code）で作成される普通のテキストファイルです。</p>



<p class="wp-block-paragraph">このファイルには拡張子 <span class="bold-blue"><code>.java</code> </span>が付けられているという点が異なるだけで、このテキストファイルをJavaコンパイラ（<code>javac</code>）でコンパイルすると、バイトコードに変換され拡張子が <code><span class="bold-blue">.class</span></code> のバイトコードファイルが生成されます。生成された <code><span class="bold-blue">.class</span></code> ファイルをJVMで実行することで、プログラムが動作する、というのがこのページの要点になります。</p>



<p class="has-text-align-center wp-block-paragraph"><span class="badge-green">関連</span>　<a href="https://it-biz.online/java/java-setup/">Javaの基本（JVMとは？）</a></p>
</div></div>



<h2 class="wp-block-heading">ステップ２：Javaファイルのコンパイル</h2>



<p class="wp-block-paragraph">次に、Javaファイルをコンパイルして、コンピュータが理解できる形（バイトコード）に変換します。</p>



<h3 class="wp-block-heading">コンパイル手順</h3>



<ol class="wp-block-list">
<li><strong>コマンドラインを開く</strong>
<ul class="wp-block-list">
<li>Windowsの場合は「<a href="https://it-biz.online/it-skills/command-abc/">コマンドプロンプト</a>」、MacやLinuxの場合は「ターミナル」を開きます。</li>
</ul>
</li>



<li><strong>保存したディレクトリに移動する</strong>
<ul class="wp-block-list">
<li><code>cd</code> コマンドを使って、<code><span class="bold-blue">HelloWorld.java</span></code> を保存したディレクトリに移動します。</li>



<li>例：ファイルがデスクトップに保存されている場合「<span class="bold-green">cd Desktop</span>」</li>
</ul>
</li>



<li><strong>コンパイルコマンドを入力する</strong>
<ul class="wp-block-list">
<li>以下のコマンドを入力してコンパイルします。<br><span class="bold-green">javac HelloWorld.java</span></li>
</ul>
</li>



<li><strong>バイトコードファイルが生成</strong>
<ul class="wp-block-list">
<li>コンパイルが成功すると、<code><span class="bold-blue">HelloWorld.class</span></code> というファイルが生成されます。</li>
</ul>
</li>
</ol>



<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"><span class="bold-green">javac HelloWorld.java</span>　を実行すると「エラー: この文字(0x80)は、エンコーディングwindows-31jにマップできません」と出力される。</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">このエラーは、ソースコードのエンコーディング（文字コード）とコンパイル時のエンコーディングが一致していない場合に発生します。具体的には、Javaファイルが特定のエンコーディング（例えばUTF-8）で保存されているのに対して、コンパイラが別のエンコーディング（windows-31j）を使用しようとしていることが原因です。以下のように文字コードを指定してコンパイルすることで事象は解決します。</p>
</div></dd></dl></div>



<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="">javac -encoding UTF-8 HelloWorld.java</pre>



<h2 class="wp-block-heading">ステップ３：プログラムの実行</h2>



<p class="wp-block-paragraph">最後に、生成されたバイトコードファイルを実行します。</p>



<h3 class="wp-block-heading">プログラム実行手順</h3>



<ol class="wp-block-list">
<li><strong>実行コマンドを入力する</strong>
<ul class="wp-block-list">
<li>以下のコマンドを入力してプログラムを実行します。<br><span class="bold-green">java HelloWorld</span><br></li>



<li>ここで指定している「HelloWorld」はJavaの「<strong><span class="marker-under">クラス名</span></strong>」です。クラスを指定してjavaコマンドを実行することで.classファイルが動きます。</li>
</ul>
</li>



<li><strong>プログラムの出力を確認</strong>
<ul class="wp-block-list">
<li>コンソールに <code><span class="bold-green">Hello, World!</span></code> と表示されます。</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 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">これで、Javaプログラムの作成～実行までが完了です。</p>
</div></div>



<div class="wp-block-cocoon-blocks-tab-caption-box-1 tab-caption-box block-box not-nested-style cocoon-block-tab-caption-box"><div class="tab-caption-box-label block-box-label box-label fab-lightbulb"><span class="tab-caption-box-label-text block-box-label-text box-label-text">Javaプログラムを動かす際にクラス名を指定するということの意味</span></div><div class="tab-caption-box-content block-box-content box-content">
<p class="wp-block-paragraph">Javaプログラムを実行するには、最初に動かすクラスを指定する必要があります。これは、プログラムのスタート地点を指定するようなもので、日常生活に例えると「家のブレーカーをあげる」ようなイメージ。家のブレーカーをあげると家全体に電気が供給し始められ、その後様々な家電が動き始めます。</p>



<p class="wp-block-paragraph">プログラムの中には、他にもたくさんのクラス（部品や機能）が存在します。指定したエントリーポイントのクラスから、他のクラスを使っていきながら１つの処理を完成させる―。これがJavaプログラムを実行する基本イメージになります。</p>



<ul class="wp-block-list">
<li><strong>エントリーポイント</strong>：プログラムのスタート地点となるクラス（家の電源スイッチ）。</li>



<li><strong>他のクラスの利用</strong>：エントリーポイントのクラスから、他のクラス（家電製品）を使う。</li>



<li><strong>実行の流れ</strong>：エントリーポイントのクラスからプログラムが始まり、他のクラスも使って機能を実行する。</li>
</ul>
</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>　Javaプログラムの作成～実行まで</p>



<ol class="wp-block-list">
<li><strong>Javaファイルの作成</strong>
<ul class="wp-block-list">
<li>テキストエディタでコードを書き保存（例：<code><span class="bold-blue">HelloWorld.java</span></code>）。</li>
</ul>
</li>



<li><strong>Javaファイルのコンパイル</strong>
<ul class="wp-block-list">
<li>コマンドラインで <code>javac ファイル名.java</code> を入力してコンパイルします（例：<code><span class="bold-green">javac HelloWorld.java</span></code>）。</li>
</ul>
</li>



<li><strong>プログラムの実行</strong>：
<ul class="wp-block-list">
<li>コマンドラインで <code>java クラス名</code> を入力して実行します（例：<code><span class="bold-green">java HelloWorld</span></code>）。</li>
</ul>
</li>
</ol>
</div>



<h2 class="wp-block-heading">関連して読みたい記事</h2>



<p class="wp-block-paragraph">Javaプログラムを作成して実行する流れでは、コンパイル結果やエラーの読み方もセットで確認するとつまずきにくくなります。</p>



<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>　迷ったら、いま見ているエラーや作業工程に一番近い記事から読む</p>
</div>



<h2 class="wp-block-heading">どの順番で読むと理解しやすいか</h2>



<p class="wp-block-paragraph">まずは<a href="https://it-biz.online/it-skills/compile/">コンパイルとは？初心者向けに1から解説</a>で現在の記事と近い工程を確認し、その後にエラー、変換結果、実行時の仕組みなど、自分がつまずいている箇所に近い記事へ進むのがおすすめです。</p>



<p class="wp-block-paragraph">コンパイル周辺の用語は、単独で覚えるよりも「コードを書く」「変換する」「部品を結びつける」「実行する」「エラーを読む」という流れで見ると整理しやすくなります。ログを見ている場合は、どの段階で止まっているのかを先に切り分けると、読むべき記事も選びやすくなります。</p>



<ul class="wp-block-list is-style-icon-list-check has-list-style">
<li><strong><a href="https://it-biz.online/it-skills/compile/">コンパイルとは？初心者向けに1から解説</a></strong>：コンパイル全体の親記事です。</li>
<li><strong><a href="https://it-biz.online/it-skills/compile-error/">コンパイルエラーとは？読み方と直し方</a></strong>：実行前に止まるエラーの読み方を整理できます。</li>
<li><strong><a href="https://it-biz.online/it-skills/bytecode/">バイトコードとは？機械語との違い</a></strong>：Javaの.classファイルとJVMの関係を理解できます。</li>
</ul>



<figure class="wp-block-table"><div class="scrollable-table stfc-sticky"><table><thead><tr><th>知りたいこと</th><th>読む観点</th></tr></thead><tbody><tr><td>変換工程の全体像</td><td>コンパイル、ビルド、リンクの関係を確認する</td></tr><tr><td>エラー調査</td><td>実行前に止まったのか、実行中に落ちたのかを分ける</td></tr><tr><td>Javaの実行</td><td>.java、.class、JVM、JITの流れをつなげて見る</td></tr><tr><td>Web開発の変換</td><td>TypeScriptやBabelのようなトランスパイルを確認する</td></tr></tbody></table></div></figure>



<p class="wp-block-paragraph">まずは<a href="https://it-biz.online/it-skills/compile/">コンパイルとは？初心者向けに1から解説</a>から確認し、必要に応じてエラー、バイトコード、トランスパイル、JITなどの周辺用語へ広げると、コンパイル周辺の流れをつなげて理解できます。</p>



<p class="wp-block-paragraph">たとえば、コマンド実行で止まっているならエラーメッセージ、Javaの実行結果が分からないならバイトコード、Web開発の変換で迷っているならトランスパイルというように、いま困っている場面から読む記事を選ぶと理解しやすくなります。</p>



<p class="wp-block-paragraph">読み進めるときは、用語を暗記するよりも「どの工程で、何が入力され、何が出力されるのか」を確認してみてください。ビルドログやエラー文を読むときにも、同じ見方で原因を切り分けやすくなります。</p>



<p class="wp-block-paragraph">関連する用語を一つずつつなげておくと、別の記事で同じ言葉が出てきたときにも、前後の工程を思い出しながら読み進められます。復習にも使えます。</p>

]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Javaコマンド（javacとは？）の基本を3分でわかりやすく</title>
		<link>https://it-biz.online/java/java-command/</link>
		
		<dc:creator><![CDATA[ビズドットオンライン]]></dc:creator>
		<pubDate>Thu, 08 May 2025 12:00:00 +0000</pubDate>
				<category><![CDATA[Java]]></category>
		<category><![CDATA[プログラミング]]></category>
		<guid isPermaLink="false">https://it-biz.online/?p=9841</guid>

					<description><![CDATA[Javaは「Write Once, Run Anywhere（1度書けばどこでも動く）」という思想のもと誕生したプログラミング言語です。その中核にはJava仮想マシン（JVM）が存在し、コンパイルされたバイトコードをどの […]]]></description>
										<content:encoded><![CDATA[
<p class="wp-block-paragraph">Javaは「Write Once, Run Anywhere（1度書けばどこでも動く）」という思想のもと誕生したプログラミング言語です。その中核にはJava仮想マシン（JVM）が存在し、コンパイルされたバイトコードをどのOS上でも同じように実行する仕組みが備わっています。（<span class="badge">参考</span> <a href="https://it-biz.online/java/java-setup/">JDK/JRE/JVMの仕組みを１から解説</a>）</p>



<p class="wp-block-paragraph">このページでは、Javaの基本コマンドである<code><span class="bold-blue">javac</span></code>・<code><span class="blue">java</span></code>・<code><span class="blue">jar</span></code>の使い方を１からわかりやすく解説しつつ、Java 9で導入されたモジュールシステムやJava 11の<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">さらに、クラスローダ・JITコンパイラ・GCなど、JVMの裏側にある奥深い仕組みにも言及しながら、読んでいて「Javaって実は面白い！」と思える記事にしていますので、是非最後までご覧ください。</p>
</div></div>



<h2 class="wp-block-heading">コンパイルと実行（javacとjava）</h2>



<p class="wp-block-paragraph">まずは基本となるコンパイルと、コンパイルしたバイトコード（classファイル）の実行コマンドから解説します。</p>



<h3 class="wp-block-heading">ソースコードの準備とコンパイル（javac）</h3>



<figure class="wp-block-image aligncenter size-full"><img loading="lazy" decoding="async" width="798" height="326" src="https://it-biz.online/wp-content/uploads/2024/05/image-1.png" alt="Javac,Javaコンパイラ" class="wp-image-9144" srcset="https://it-biz.online/wp-content/uploads/2024/05/image-1.png 798w, https://it-biz.online/wp-content/uploads/2024/05/image-1-500x204.png 500w, https://it-biz.online/wp-content/uploads/2024/05/image-1-300x123.png 300w, https://it-biz.online/wp-content/uploads/2024/05/image-1-768x314.png 768w" sizes="(max-width: 798px) 100vw, 798px" /><figcaption class="wp-element-caption">図1：Java/コンパイル</figcaption></figure>



<p class="wp-block-paragraph">Javaのプログラムはソースコード（.javaファイル）を<strong>コンパイル</strong>してバイトコード（.classファイル）に変換する作業が必要です。たとえば、<span class="blue">HelloWorld.java</span>に下記のようなクラスを定義したとします。</p>



<pre class="EnlighterJSRAW" data-enlighter-language="java" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">public class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
    }
}
</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="">javac HelloWorld.java
</pre>



<p class="wp-block-paragraph">同じフォルダ内に<code><span class="blue">HelloWorld.class</span></code>が生成されます。これが<strong>バイトコード</strong>です。</p>



<div class="wp-block-cocoon-blocks-tab-box-1 blank-box bb-tab bb-check block-box">
<p class="wp-block-paragraph"><strong>裏側の仕組み</strong></p>



<ul class="wp-block-list is-style-icon-list-check-valid has-list-style">
<li><code>javac</code>はJavaソースを内部的に“抽象構文木”へ変換し、そこからJVMが解釈できる命令セット（バイトコード）へ落とし込みます。</li>



<li><code>.class</code>ファイルには定数プールやメソッド情報などが含まれており、実行に必要な情報がコンパクトに格納されます。</li>
</ul>
</div>



<h3 class="wp-block-heading">実行（java）</h3>



<p class="wp-block-paragraph">生成されたバイトコードを実行する際には、<strong><span class="marker-under">拡張子を付けずにクラス名を指定</span></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="">java HelloWorld
</pre>



<p class="wp-block-paragraph">これで「Hello, World!」と表示されれば成功です。</p>



<div class="wp-block-cocoon-blocks-tab-box-1 blank-box bb-tab bb-check block-box">
<p class="wp-block-paragraph"><strong>裏側の仕組み</strong></p>



<ul class="wp-block-list is-style-icon-list-check-valid has-list-style">
<li><code>java</code>コマンドで指定されたクラスをJVMが読み込み、まずクラスローダによって<code>.class</code>ファイルをロードします。</li>



<li>その後、インタプリタがバイトコードを1命令ずつ解釈して実行しますが、高頻度で呼び出されるコードはJITコンパイラによってネイティブコードへ最適化され、高速化します。</li>



<li>こうした仕組みにより、「Write Once, Run Anywhere」が実現されています。</li>
</ul>
</div>



<h2 class="wp-block-heading">java/javacコマンドのオプション</h2>



<p class="wp-block-paragraph"><code>javac</code> は Java ソースコード（<code>.java</code>ファイル）をバイトコード（<code>.class</code>ファイル）にコンパイルするためのコマンドでした。最もシンプルな使い方は、<code>javac ファイル名.java</code> で、同じディレクトリに <code>.class</code> ファイルが生成するだけですが、以下のオプションを使うことで様々な対応が可能になります。</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="">javac [オプション] ソースファイル
java [オプション] クラスファイル
</pre>



<p class="has-text-align-center wp-block-paragraph"><strong><code>javac</code> の代表的なオプション一覧</strong></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><strong>-d</strong> <em>ディレクトリ</em></td><td>コンパイル結果（<code>.class</code>ファイル）の出力先ディレクトリを指定します。<br>指定しない場合は、現在のディレクトリに出力されます。</td><td><code>javac -d out Hello.java</code><br>→ <code>out/</code> に <code>.class</code> を出力</td></tr><tr><td><strong>-classpath</strong> (または <strong>-cp</strong>)</td><td>クラスパスを指定します。<br>他のクラスやJARファイルが配置されているディレクトリやライブラリを指定するときに使います。</td><td><code>javac -cp lib/mylib.jar Main.java</code></td></tr><tr><td><strong>-sourcepath</strong> <em>パス</em></td><td>ソースファイルを探すディレクトリを指定します。<br>複数ディレクトリを指定する場合はOSに合わせて区切ります (例：<code>;</code> や <code>:</code>)。</td><td><code>javac -sourcepath src src/Main.java</code></td></tr><tr><td><strong>-encoding</strong> <em>文字コード</em></td><td>ソースファイルのエンコーディングを指定します。<br>日本語コメントや文字列リテラルを含む場合に文字化けを防ぐのに便利です。</td><td><code>javac -encoding UTF-8 Hello.java</code></td></tr><tr><td><strong>-source</strong> <em>バージョン</em></td><td>ソースコードのバージョンを指定します。<br>例：<code>-source 11</code> → Java 11の言語仕様に準拠してコンパイル。</td><td><code>javac -source 11 Hello.java</code></td></tr><tr><td><strong>-target</strong> <em>バージョン</em></td><td>出力するバイトコードのバージョン（互換性）を指定します。<br>例：<code>-target 8</code> → Java 8 で動作する <code>.class</code> を生成。</td><td><code>javac -source 11 -target 8 Hello.java</code></td></tr><tr><td><strong>-Xlint</strong></td><td>コンパイラの警告（lint）を制御します。<br><code>-Xlint:unchecked</code> など。<br><code>-Xlint:all</code> で全警告を表示。</td><td><code>javac -Xlint:all Hello.java</code></td></tr><tr><td><strong>-parameters</strong></td><td>メソッドのパラメータ名をバイトコードに埋め込みます。（リフレクションで名前を取得できる）</td><td><code>javac -parameters Main.java</code></td></tr><tr><td><strong>-verbose</strong></td><td>コンパイル時に処理内容を詳細表示します。<br>どのファイルがコンパイルされるかなどを確認可能。</td><td><code>javac -verbose Hello.java</code></td></tr><tr><td><strong>-version</strong></td><td>javac のバージョン情報を表示します。（ソースのコンパイルは行いません）</td><td><code>javac -version</code></td></tr><tr><td><strong>-help</strong></td><td>javac のヘルプメッセージ（使用できる全オプション）を表示します。</td><td><code>javac -help</code></td></tr><tr><td><strong>-proc</strong> <em>ポリシー</em></td><td>アノテーション処理（アノテーション・プロセッサ）の動作を指定します。<br><code>-proc:only</code> でアノテーション処理のみ実行し、ソースはコンパイルしないなど。</td><td><code>javac -proc:only MyAnnotatedClass.java</code></td></tr></tbody></table></div></figure>



<ol class="wp-block-list">
<li class="is-style-bottom-margin-2em has-bottom-margin"><strong>出力先を指定してコンパイルする</strong> <br><code>javac <span class="blue">-d</span> out MyProgram.java</code></li>



<li class="is-style-bottom-margin-2em has-bottom-margin"><strong>複数のソースファイルを一括コンパイル</strong> <br><code>javac <span class="blue">-encoding UTF-8 -d</span> out src/<span class="bold-red">*</span>.java</code></li>



<li><strong>外部ライブラリを使う場合（クラスパス指定）</strong> <br><code>javac <span class="blue">-cp lib/some-library.jar -d out</span> src/MyApp.java</code>
<ul class="wp-block-list">
<li><code>some-library.jar</code> のクラスを参照しながらコンパイル</li>



<li><code>MyApp.class</code> は <code>out/</code> に出力される</li>
</ul>
</li>



<li><strong>Javaのバージョンを指定してコンパイルする</strong><br><code>javac -source 11 -target 8 MyLegacyApp.java</code>
<ul class="wp-block-list">
<li>ソースは Java 11 の構文チェック</li>



<li>バイトコードは Java 8 向けに出力</li>
</ul>
</li>
</ol>



<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">クラスパス（<strong>classpath</strong>）とは、<strong>Javaがクラス（.classファイル）を探す場所を指定する仕組み</strong>。</p>
</div></dd></dl></div>



<h2 class="wp-block-heading">Javaコマンドの3つの実行形態 + ソースファイルモード</h2>



<p class="wp-block-paragraph">Javaプログラムを<code>java</code>コマンドで実行する方法は、大きく<strong>3つ</strong>存在します。さらに、Java 11からは<strong>ソースファイルモード</strong>というシンプルな実行形態も加わりました。</p>



<ol class="wp-block-list is-style-numeric-list-enclosed has-list-style">
<li><strong>mainメソッドを持つクラスファイル</strong></li>



<li><strong>jarファイル内のメインクラス</strong></li>



<li><strong>モジュールに含まれるメインクラス</strong></li>



<li><span class="blue">（Java 11～）</span><strong>ソースファイルモード</strong></li>
</ol>



<p class="wp-block-paragraph">以下では、これらの違いや使い分けを確認していきます。</p>



<h3 class="wp-block-heading">mainメソッドを持つクラスファイル</h3>



<p class="wp-block-paragraph">もっともシンプルで伝統的な実行形態です。すでに紹介したHelloWorldのように、<code>main(String[] args)</code>を持つクラスを<code><span class="blue">javac</span></code>でコンパイル後、<code><span class="blue">java クラス名</span></code>で起動する方法です。</p>



<ul class="wp-block-list">
<li><strong>メリット</strong>: 設定が不要で手軽</li>



<li><strong>デメリット</strong>: 配布やライブラリ管理の段階になると、クラスファイルをまとめる必要が出てくる</li>
</ul>



<h3 class="wp-block-heading">jarファイル内のメインクラス</h3>



<p class="wp-block-paragraph">複数のクラスファイルやリソースをまとめたアーカイブファイル（<code>.jar</code>形式）を生成し、<code>Main-Class</code>を指定することで、<code>java -jar</code>コマンドで実行可能にできます。</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="">1 manifest.txtなどでメインクラスを指定
Main-Class: com.example.app.HelloWorld

2 jarコマンドでアーカイブを作成
jar cfm HelloWorld.jar manifest.txt com/example/app/*.class

3 実行
java -jar HelloWorld.jar
</pre>



<p class="wp-block-paragraph">これにより、配布やバージョン管理が容易になり、システム全体の保守性が向上します。</p>



<h3 class="wp-block-heading">モジュールに含まれるメインクラス（Java 9～）</h3>



<p class="wp-block-paragraph">Java 9で導入されたモジュールシステム（Project Jigsaw）は、大規模化したJavaアプリケーションにおけるパッケージ管理をより厳密に行う仕組みです。</p>



<ul class="wp-block-list">
<li><code>module-info.java</code>でモジュール名やエクスポートするパッケージ、依存モジュールなどを宣言します。</li>



<li>実行時はモジュールパスとメインモジュール・メインクラスを指定します。</li>
</ul>



<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="">java --module-path mods -m com.example.app/com.example.app.HelloWorld
</pre>



<ul class="wp-block-list">
<li><code>-module-path</code>でモジュールを配置したディレクトリを指定</li>



<li><code>-m</code>オプションで「モジュール名/メインクラス」を指定</li>
</ul>



<p class="wp-block-paragraph">モジュール同士の依存関係やアクセス制御を明確化し、ライブラリの衝突などを防ぎやすくなるのが大きな利点です。</p>



<h3 class="wp-block-heading">Java 11のソースファイルモード</h3>



<p class="wp-block-paragraph">Java 11からは、<strong>単一のソースファイル</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="">java HelloWorld.java
</pre>



<p class="wp-block-paragraph">これだけでコンパイルと実行を一括で行います。スクリプト感覚で試験的なコードを書くときや、学習用途にはとても便利です。</p>



<p class="wp-block-paragraph"><strong><span class="inline-button-red">注意</span></strong>: 大規模開発や複数クラスが絡む場合は、従来どおりコンパイル→実行またはIDEのプロジェクト構成が一般的です。あくまでも“単体ファイル”に限り便利な機能である、と理解しましょう。</p>



<h2 class="wp-block-heading">jarコマンドの応用：アプリケーションのパッケージング</h2>



<h3 class="wp-block-heading">jarファイルの基本</h3>



<p class="wp-block-paragraph"><code>jar</code>はZIP形式をベースにしたアーカイブで、クラスファイルやリソースをひとまとめにできます。</p>



<ul class="wp-block-list">
<li>配布が容易になり、classpathにjarファイルを追加するだけでアプリケーションが動作するようにできます。</li>



<li><code>META-INF/MANIFEST.MF</code>にメインクラスやクラスパス情報を記述することで、<code>java -jar</code>形式の実行ファイルを構築可能です。</li>
</ul>



<h3 class="wp-block-heading">実行可能jarとマニフェストファイル</h3>



<p class="wp-block-paragraph">たとえば以下のように、メインクラスを指定した<code>manifest.txt</code>を準備します。</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="">Main-Class: com.example.app.HelloWorld
</pre>



<p class="wp-block-paragraph">このファイルを用いてjarを作成すると、</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="">jar cfm HelloWorld.jar manifest.txt com/example/app/*.class
</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="">java -jar HelloWorld.jar
</pre>



<p class="wp-block-paragraph">でメインメソッドが呼び出され、アプリが起動します。</p>



<h2 class="wp-block-heading">応用設定：クラスパスとJVMオプション</h2>



<h3 class="wp-block-heading">クラスパス（classpath）の指定</h3>



<p class="wp-block-paragraph">外部ライブラリを使う場合など、Javaがクラスファイルやライブラリを探しに行くパスを指定する必要があります。</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="">javac -cp ./libs/*:. MyApp.java
java -cp ./libs/*:. MyApp
</pre>



<ul class="wp-block-list">
<li><code>.</code>は現在のディレクトリ</li>



<li><code>:</code>はパス区切り文字（Windowsでは<code>;</code>）</li>



<li><code>./libs/*</code> でlibsフォルダ内のJARすべてを指定</li>
</ul>



<h3 class="wp-block-heading">JVM起動オプション（メモリ・デバッグ）</h3>



<ul class="wp-block-list">
<li><code>-Xms</code> <code>-Xmx</code>: ヒープメモリの初期サイズ・最大サイズを指定（例：<code>-Xms512m -Xmx1024m</code>）</li>



<li>リモートデバッグ:</li>
</ul>



<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="">java -agentlib:jdwp=transport=dt_socket,server=y,suspend=n,address=5005 MyApp
</pre>



<p class="wp-block-paragraph">指定ポートにデバッガを接続すればブレークポイントを張ってステップ実行が可能です。</p>



<h2 class="wp-block-heading">Javaの裏側の仕組み</h2>



<h3 class="wp-block-heading">クラスローダ</h3>



<p class="wp-block-paragraph">Javaではクラスローダが複数階層になっており、標準ライブラリを読み込む<strong>ブートストラップクラスローダ</strong>、ユーザのクラスパスを参照する<strong>システムクラスローダ</strong>などが段階的にクラスを探します。</p>



<ul class="wp-block-list">
<li>パッケージ名に対応するディレクトリ構造を辿って<code>.class</code>ファイルをロード</li>



<li>モジュールシステム利用時はモジュールパスを優先的に参照</li>
</ul>



<h3 class="wp-block-heading">JITコンパイラ</h3>



<p class="wp-block-paragraph">JVMは実行時にバイトコードをインタプリタで実行するだけでなく、<strong>JITコンパイラ</strong>によって頻繁に呼ばれるメソッドをネイティブコードに変換します。</p>



<ul class="wp-block-list">
<li>これにより、Javaアプリは起動直後こそ遅めでも、使い込むうちに高速化が期待できます。</li>
</ul>



<h3 class="wp-block-heading">ガーベジコレクション（GC）</h3>



<p class="wp-block-paragraph">メモリ管理を自動化するJavaの大きな特徴です。</p>



<ul class="wp-block-list">
<li>ヒープ内の不要オブジェクトをGCが検知し、自動的にメモリを再利用</li>



<li>GCアルゴリズム（Serial GC, Parallel GC, G1 GC, ZGCなど）をアプリケーション特性に合わせて選択可能</li>



<li>メモリリークの心配は軽減される一方、開発者がGCタイミングを完全に制御することは難しい</li>
</ul>



<h2 class="wp-block-heading">関連して読みたい記事</h2>



<p class="wp-block-paragraph">Javaコマンドを理解するには、javacで何が作られ、javaコマンドが何を実行するのかを合わせて見ると整理できます。</p>



<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>　迷ったら、いま見ているエラーや作業工程に一番近い記事から読む</p>
</div>



<h2 class="wp-block-heading">どの順番で読むと理解しやすいか</h2>



<p class="wp-block-paragraph">まずは<a href="https://it-biz.online/it-skills/compile/">コンパイルとは？初心者向けに1から解説</a>で現在の記事と近い工程を確認し、その後にエラー、変換結果、実行時の仕組みなど、自分がつまずいている箇所に近い記事へ進むのがおすすめです。</p>



<p class="wp-block-paragraph">コンパイル周辺の用語は、単独で覚えるよりも「コードを書く」「変換する」「部品を結びつける」「実行する」「エラーを読む」という流れで見ると整理しやすくなります。ログを見ている場合は、どの段階で止まっているのかを先に切り分けると、読むべき記事も選びやすくなります。</p>



<ul class="wp-block-list is-style-icon-list-check has-list-style">
<li><strong><a href="https://it-biz.online/it-skills/compile/">コンパイルとは？初心者向けに1から解説</a></strong>：コンパイル全体の親記事です。</li>
<li><strong><a href="https://it-biz.online/it-skills/compile-error/">コンパイルエラーとは？読み方と直し方</a></strong>：実行前に止まるエラーの読み方を整理できます。</li>
<li><strong><a href="https://it-biz.online/it-skills/bytecode/">バイトコードとは？機械語との違い</a></strong>：Javaの.classファイルとJVMの関係を理解できます。</li>
<li><strong><a href="https://it-biz.online/it-skills/jit-compile/">JITコンパイルとは？実行時に速くする仕組み</a></strong>：実行中に最適化する仕組みを確認できます。</li>
</ul>



<figure class="wp-block-table"><div class="scrollable-table stfc-sticky"><table><thead><tr><th>知りたいこと</th><th>読む観点</th></tr></thead><tbody><tr><td>変換工程の全体像</td><td>コンパイル、ビルド、リンクの関係を確認する</td></tr><tr><td>エラー調査</td><td>実行前に止まったのか、実行中に落ちたのかを分ける</td></tr><tr><td>Javaの実行</td><td>.java、.class、JVM、JITの流れをつなげて見る</td></tr><tr><td>Web開発の変換</td><td>TypeScriptやBabelのようなトランスパイルを確認する</td></tr></tbody></table></div></figure>



<p class="wp-block-paragraph">まずは<a href="https://it-biz.online/it-skills/compile/">コンパイルとは？初心者向けに1から解説</a>から確認し、必要に応じてエラー、バイトコード、トランスパイル、JITなどの周辺用語へ広げると、コンパイル周辺の流れをつなげて理解できます。</p>



<p class="wp-block-paragraph">たとえば、コマンド実行で止まっているならエラーメッセージ、Javaの実行結果が分からないならバイトコード、Web開発の変換で迷っているならトランスパイルというように、いま困っている場面から読む記事を選ぶと理解しやすくなります。</p>



<p class="wp-block-paragraph">読み進めるときは、用語を暗記するよりも「どの工程で、何が入力され、何が出力されるのか」を確認してみてください。ビルドログやエラー文を読むときにも、同じ見方で原因を切り分けやすくなります。</p>



<p class="wp-block-paragraph">関連する用語を一つずつつなげておくと、別の記事で同じ言葉が出てきたときにも、前後の工程を思い出しながら読み進められます。復習にも使えます。</p>

]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>【IT用語解説】ビルドとは？プログラミングの基本用語を１分でわかりやすく</title>
		<link>https://it-biz.online/it-skills/build/</link>
		
		<dc:creator><![CDATA[ビズドットオンライン]]></dc:creator>
		<pubDate>Tue, 09 Apr 2024 08:53:42 +0000</pubDate>
				<category><![CDATA[IT-Skills]]></category>
		<category><![CDATA[プログラミング]]></category>
		<category><![CDATA[用語解説]]></category>
		<guid isPermaLink="false">https://it-biz.online/?p=9120</guid>

					<description><![CDATA[プログラミングにおける「ビルド」という言葉は、プログラムのコードをコンピュータが実行できる形式に変換する一連の過程を指します。日常生活に例えて説明すると、レシピに従って料理を作るようなもので、プログラマーが書いたコード（ […]]]></description>
										<content:encoded><![CDATA[
<p class="wp-block-paragraph"><a href="https://it-biz.online/lifehack/programming-abc/">プログラミング</a>における「ビルド」という言葉は、<strong><span class="marker-under">プログラムのコードをコンピュータが実行できる形式に変換する一連の過程</span></strong>を指します。日常生活に例えて説明すると、レシピに従って料理を作るようなもので、プログラマーが書いたコード（レシピ）を、コンピュータ（料理人）が理解しやすい形（料理）に変換するようなイメージ。</p>



<p class="wp-block-paragraph">多くの場合、プログラムのコードはそのままではコンピュータによって直接実行されることはありません。これは、コンピュータが理解できる言語とプログラマーが使用する言語が異なるためです。プログラマーが使用する言語は「高級言語」と呼ばれ、例えば<a href="https://it-biz.online/python/python-abc/">Python</a>やJava、C++などがありますが、これらの言語は人間が理解しやすいように設計されています。一方、コンピュータが直接理解できるのは「機械語（＝バイナリ）」という、0と1のみで構成される非常に基本的な言語です。</p>



<figure class="wp-block-image aligncenter size-large"><img loading="lazy" decoding="async" width="800" height="268" src="https://it-biz.online/wp-content/uploads/2024/04/image-9-800x268.png" alt="" class="wp-image-9123" srcset="https://it-biz.online/wp-content/uploads/2024/04/image-9-800x268.png 800w, https://it-biz.online/wp-content/uploads/2024/04/image-9-500x167.png 500w, https://it-biz.online/wp-content/uploads/2024/04/image-9-300x100.png 300w, https://it-biz.online/wp-content/uploads/2024/04/image-9-768x257.png 768w, https://it-biz.online/wp-content/uploads/2024/04/image-9.png 1127w" sizes="(max-width: 800px) 100vw, 800px" /><figcaption class="wp-element-caption">図1：高級言語と機械語</figcaption></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">この「人間が理解しやすいコードを、コンピュータ向けに翻訳し、プログラムを実行可能な状態にする」一連のステップをビルド（Build）と呼びます。</p>
</div></div>



<p class="wp-block-paragraph">このページではIT初心者向けにビルドとは何か？ビルドの重要性や陥りがちな罠を簡潔にご説明します。</p>



<h2 class="wp-block-heading">ビルド（Build）とは</h2>



<p class="wp-block-paragraph">ビルドというのは、<strong>プログラムを作るためのレシピを実際の料理に変えるプロセス</strong>です。プログラマーが書くコードは、まだコンピュータが直接理解できる形ではありません。このプロセスを、よりわかりやすく説明するために、順を追って見ていきましょう。</p>



<h3 class="wp-block-heading">ステップ1: コードを書く</h3>



<ul class="wp-block-list">
<li><strong>状況</strong>：プログラマーは、人間が理解しやすい「プログラミング言語」を使って、コンピュータに何をしてほしいかを書きます。これは、レシピを書くようなものです。</li>
</ul>



<h3 class="wp-block-heading">ステップ2: コンパイル（またはインタプリット）</h3>



<ul class="wp-block-list">
<li class="is-style-bottom-margin-1em has-bottom-margin"><strong>状況</strong>：プログラマーが書いたコードは、コンピュータが直接理解できる形ではないため、これをコンピュータが理解できる「機械語（バイナリ）」に変える必要があります。</li>



<li class="is-style-bottom-margin-1em has-bottom-margin"><strong>コンパイル</strong>：この作業をするソフトウェアをコンパイラといいます。コンパイラは、プログラマーが書いたコードを一度に全部機械語に変換します。ざっくり言えば、英語をフランス語に翻訳するような作業です。</li>



<li><strong>インタプリット</strong>：一部の言語では、コードを一度に全部変換するのではなく、実行するときに必要に応じて少しずつ変換します。この作業をするソフトウェアをインタプリタといいます。これは、英語を話しながらリアルタイムでフランス語に通訳する人がいるようなものです。</li>
</ul>



<p class="has-text-align-center wp-block-paragraph"><span class="badge">参考</span>　<a href="https://it-biz.online/it-skills/interpreter-compiler/">コンパイラーとインタープリターの違い</a></p>



<h3 class="wp-block-heading">ステップ3: リンク</h3>



<ul class="wp-block-list">
<li class="is-style-bottom-margin-1em has-bottom-margin"><strong>状況</strong>：プログラムは、多くの場合複数の部品（ファイルやライブラリ）から成り立っています。これらの部品をすべて正しく組み合わせて、１つの完成品にする必要があります。</li>



<li><strong>作業</strong>：これらの部品を正しい順序で組み合わせて、コンピュータが１つの完全なプログラムとして実行できるようにします。これは、レシピに従って様々な材料を組み合わせて料理を完成させるような作業になります。</li>
</ul>



<h3 class="wp-block-heading">ステップ4: テスト</h3>



<ul class="wp-block-list">
<li class="is-style-bottom-margin-1em has-bottom-margin"><strong>状況</strong>：ビルドしたプログラムが正しく動作するかを確認する必要があります。</li>



<li><strong>作業</strong>：プログラムを実際に実行してみて、想定通りの動作をするかテストします。これは、料理が完成した後に味見をするようなものです。</li>
</ul>



<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>プログラムを作るための「レシピ（ソースコード）」を「料理（実行可能なプログラム）」に変える一連の作業</strong>です。このプロセスを通じて、プログラマーが書いたコードが、コンピュータが理解し実行できる形になるということです。</p>
</div></div>



<h2 class="wp-block-heading">ビルドのあるあるエラーとその原因</h2>



<p class="wp-block-paragraph">ここまでご覧になった通りビルドは何個かのステップを踏んでいきます。ので、ちょっとした手違いで料理がうまくいかないのと同じでよくビルドはエラーが発生します（これが結構IT初心者のうちは大きな壁になりがちです）。</p>



<p class="wp-block-paragraph">ビルドのエラーは様々な原因で起こり得ますが、ここではその中でも特によくあるものと対処のヒントをご紹介します。</p>



<h3 class="wp-block-heading">あるあるエラーとその原因</h3>



<ol class="wp-block-list">
<li class="is-style-bottom-margin-1em has-bottom-margin"><strong>スペルミス</strong>：変数名や関数名を間違えたり、タイプミスをすると、コンパイラやインタプリタは「この言葉は知らない」とエラーを返します。</li>



<li class="is-style-bottom-margin-1em has-bottom-margin"><strong>文法エラー</strong>：プログラミング言語のルール（文法）に従わない書き方をするとエラーになります。例えば、セミコロンを忘れたり、括弧の開閉が合っていない場合などです。</li>



<li class="is-style-bottom-margin-1em has-bottom-margin"><strong>型の不一致</strong>：整数型の変数に文字列を代入しようとするなど、型が期待と異なるとエラーが発生します。</li>



<li><strong>依存関係の問題</strong>：外部ライブラリやモジュールを使っている場合、正しくインストールされていない、またはバージョンが合わないとエラーが起こります。</li>
</ol>



<p class="wp-block-paragraph">この他にも様々な原因が存在しますが、特に初心者が躓きがちなのが上記の４つ。プログラミングは１文字でも違うと正常に動作しませんので注意が必要です。</p>



<h3 class="wp-block-heading">対処のヒント</h3>



<ul class="wp-block-list">
<li class="is-style-bottom-margin-1em has-bottom-margin"><strong>エラーメッセージをよく読む</strong>：エラーメッセージには、何が問題でどこに問題があるのかが書かれています。英語のメッセージが難しい場合でも、キーワードや行番号を手掛かりにして問題を解決しましょう。</li>



<li class="is-style-bottom-margin-1em has-bottom-margin"><strong>小さく始めて徐々に機能を追加する</strong>：全部書き終えてからビルドすると、エラーの原因を特定しにくくなります。まずは基本的な部分だけでビルドを試み、徐々に機能を追加していくと、エラーが起きた時に対処しやすくなります。</li>



<li class="is-style-bottom-margin-1em has-bottom-margin"><strong>Google検索は強い味方</strong>：エラーメッセージをそのまま検索バーに入れてみましょう。同じ問題に直面したことがある人の解決策が見つかるかもしれません。</li>



<li><strong>バージョン管理ツールの利用</strong>：<a href="https://it-biz.online/it-skills/github/">Git</a>などのバージョン管理ツールを使うことで、以前の動作していた状態に簡単に戻すことができます。何か変更を加えてエラーが出たら、問題のある変更を特定しやすくなります。</li>
</ul>



<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>



<h2 class="wp-block-heading">関連して読みたい記事</h2>



<p class="wp-block-paragraph">ビルドの中でどの工程が失敗しているかを切り分けるには、コンパイルとリンクの違いも押さえておくと便利です。</p>



<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>　迷ったら、いま見ているエラーや作業工程に一番近い記事から読む</p>
</div>



<h2 class="wp-block-heading">どの順番で読むと理解しやすいか</h2>



<p class="wp-block-paragraph">まずは<a href="https://it-biz.online/it-skills/compile/">コンパイルとは？初心者向けに1から解説</a>で現在の記事と近い工程を確認し、その後にエラー、変換結果、実行時の仕組みなど、自分がつまずいている箇所に近い記事へ進むのがおすすめです。</p>



<p class="wp-block-paragraph">コンパイル周辺の用語は、単独で覚えるよりも「コードを書く」「変換する」「部品を結びつける」「実行する」「エラーを読む」という流れで見ると整理しやすくなります。ログを見ている場合は、どの段階で止まっているのかを先に切り分けると、読むべき記事も選びやすくなります。</p>



<ul class="wp-block-list is-style-icon-list-check has-list-style">
<li><strong><a href="https://it-biz.online/it-skills/compile/">コンパイルとは？初心者向けに1から解説</a></strong>：コンパイル全体の親記事です。</li>
<li><strong><a href="https://it-biz.online/it-skills/compile-error/">コンパイルエラーとは？読み方と直し方</a></strong>：実行前に止まるエラーの読み方を整理できます。</li>
<li><strong><a href="https://it-biz.online/it-skills/linking/">リンクとは？コンパイルとの違い</a></strong>：コンパイル後に部品を結合する工程を確認できます。</li>
</ul>



<figure class="wp-block-table"><div class="scrollable-table stfc-sticky"><table><thead><tr><th>知りたいこと</th><th>読む観点</th></tr></thead><tbody><tr><td>変換工程の全体像</td><td>コンパイル、ビルド、リンクの関係を確認する</td></tr><tr><td>エラー調査</td><td>実行前に止まったのか、実行中に落ちたのかを分ける</td></tr><tr><td>Javaの実行</td><td>.java、.class、JVM、JITの流れをつなげて見る</td></tr><tr><td>Web開発の変換</td><td>TypeScriptやBabelのようなトランスパイルを確認する</td></tr></tbody></table></div></figure>



<p class="wp-block-paragraph">まずは<a href="https://it-biz.online/it-skills/compile/">コンパイルとは？初心者向けに1から解説</a>から確認し、必要に応じてエラー、バイトコード、トランスパイル、JITなどの周辺用語へ広げると、コンパイル周辺の流れをつなげて理解できます。</p>



<p class="wp-block-paragraph">たとえば、コマンド実行で止まっているならエラーメッセージ、Javaの実行結果が分からないならバイトコード、Web開発の変換で迷っているならトランスパイルというように、いま困っている場面から読む記事を選ぶと理解しやすくなります。</p>



<p class="wp-block-paragraph">読み進めるときは、用語を暗記するよりも「どの工程で、何が入力され、何が出力されるのか」を確認してみてください。ビルドログやエラー文を読むときにも、同じ見方で原因を切り分けやすくなります。</p>



<p class="wp-block-paragraph">関連する用語を一つずつつなげておくと、別の記事で同じ言葉が出てきたときにも、前後の工程を思い出しながら読み進められます。復習にも使えます。</p>

]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>JSPファイル超入門 – 0 → 現場で“JSPの人”になるまで</title>
		<link>https://it-biz.online/web-design/html/java-server-pages/</link>
		
		<dc:creator><![CDATA[ビズドットオンライン]]></dc:creator>
		<pubDate>Tue, 06 May 2025 04:00:00 +0000</pubDate>
				<category><![CDATA[HTML]]></category>
		<category><![CDATA[Java]]></category>
		<category><![CDATA[Web開発]]></category>
		<category><![CDATA[プログラミング]]></category>
		<guid isPermaLink="false">https://it-biz.online/?p=10372</guid>

					<description><![CDATA[JSP（Java Server Pages）は HTMLにJavaコードを差し込み、動的ページを生成する仕組み です。 まず最初にお伝えしたいのは、JSPは決して難しいものではありません。むしろ、「ちょっと動きのあるWe [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p class="wp-block-paragraph">JSP（Java Server Pages）は <strong><a href="https://it-biz.online/web-design/html-basic/">HTML</a>にJavaコードを差し込み、動的ページを生成する仕組み</strong> です。</p>



<p class="wp-block-paragraph">まず最初にお伝えしたいのは、<strong>JSPは決して難しいものではありません。</strong>むしろ、「ちょっと動きのあるWebページを、できるだけ簡単に作りたい！」という人のために生まれたものなのです。近年では他の技術に取って代わられた印象が否めないJSPですが、昔からある巨大なレガシーシステムなどでは現役で、システムの更改案件などではよく目にすることがあります。</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">このページでは「JSPってそもそも何？」という一番大事な部分から、初心者向けに順を追って１からわかりやすく専門用語を避けて解説します。</p>
</div></div>



<h2 class="wp-block-heading">JSPとは何か？</h2>



<p class="wp-block-paragraph"><strong>JSP（Java Server Pages）</strong>は、Javaを使ってWebページを動的に生成するための技術で、通常のHTMLファイルにJavaのコードを埋め込むことで、アクセスするたびに内容が変化するページを作成することを可能にします。</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">そのため、JSPはJavaをベースとしていますが、HTMLの知識があれば、基本的な使い方は十分に理解することができます。</p>
</div></div>



<h3 class="wp-block-heading">【前提１】静的なページと動的なページ</h3>



<p class="wp-block-paragraph">Webページには、大きく分けて2種類あります。<br>1つは「<strong>静的なページ</strong>」、もう1つは「<strong>動的なページ</strong>」です。</p>


<a href="https://it-biz.online/it-skills/static-dynamic/" title="静的コンテンツ/動的コンテンツの違いを１分で解説【初心者向け】" class="blogcard-wrap internal-blogcard-wrap a-wrap cf" target="_blank"><div class="blogcard internal-blogcard ib-left cf"><div class="blogcard-label internal-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail internal-blogcard-thumbnail"><img loading="lazy" decoding="async" width="320" height="180" src="https://it-biz.online/wp-content/uploads/2026/04/featured-p1-2049-static-dynamic-320x180.png" class="blogcard-thumb-image internal-blogcard-thumb-image wp-post-image" alt="" srcset="https://it-biz.online/wp-content/uploads/2026/04/featured-p1-2049-static-dynamic-320x180.png 320w, https://it-biz.online/wp-content/uploads/2026/04/featured-p1-2049-static-dynamic-500x282.png 500w, https://it-biz.online/wp-content/uploads/2026/04/featured-p1-2049-static-dynamic-800x451.png 800w, https://it-biz.online/wp-content/uploads/2026/04/featured-p1-2049-static-dynamic-300x169.png 300w, https://it-biz.online/wp-content/uploads/2026/04/featured-p1-2049-static-dynamic-768x433.png 768w, https://it-biz.online/wp-content/uploads/2026/04/featured-p1-2049-static-dynamic-240x135.png 240w, https://it-biz.online/wp-content/uploads/2026/04/featured-p1-2049-static-dynamic-640x360.png 640w, https://it-biz.online/wp-content/uploads/2026/04/featured-p1-2049-static-dynamic.png 1480w" sizes="(max-width: 320px) 100vw, 320px" /></figure><div class="blogcard-content internal-blogcard-content"><div class="blogcard-title internal-blogcard-title">静的コンテンツ/動的コンテンツの違いを１分で解説【初心者向け】</div><div class="blogcard-snippet internal-blogcard-snippet">【初心者向け】「動的」「静的」という言葉の意味とその違いを端的に解説します。本で学習したがイマイチ理解できない、、、結局一言でいうと違いは何？という疑問をお持ちの方に具体例を用いながら分かりやすく解説します。</div></div><div class="blogcard-footer internal-blogcard-footer cf"><div class="blogcard-site internal-blogcard-site"><div class="blogcard-favicon internal-blogcard-favicon"><img loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://it-biz.online" alt="" class="blogcard-favicon-image internal-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain internal-blogcard-domain">it-biz.online</div></div><div class="blogcard-date internal-blogcard-date"><div class="blogcard-post-date internal-blogcard-post-date">2026.04.26</div></div></div></div></a>


<p class="wp-block-paragraph">静的なページとは、内容があらかじめ決まっていて、アクセスするたびに同じ内容が表示されるページです。たとえば、自己紹介だけが書かれた会社のホームページや、お知らせ一覧だけが載っているページなどが該当します。</p>



<p class="wp-block-paragraph">一方、動的なページは、アクセスした時点の情報や、閲覧しているユーザーの状態に応じて内容が変わります。たとえば、ショッピングサイトで商品が表示されたり、ログイン中のユーザー名が画面に表示されたりするページがそうです。</p>



<p class="wp-block-paragraph"><strong><span class="marker-under">静的なページはHTMLだけで作成できますが、動的なページを作るには、プログラムによってページの内容を生成する仕組みが必要</span></strong>です。JSPは、そのような仕組みの一つです。</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">もちろんJSP以外にも同じようなことを実現することが可能で、現代ではほとんどJSP以外が主役です。なのですが、レガシーシステムでは今でも現役で動いていることが多いので「まあ知っておいて損はないかな」というのがJSPの位置づけです。</p>
</div></div>



<h3 class="wp-block-heading">JSPとはどのような技術か</h3>



<p class="wp-block-paragraph">JSPは、<strong>JavaのコードをHTMLに埋め込むことで</strong>、Webサーバー上で動的にHTMLを生成する技術です。拡張子が <code><span class="blue">.jsp</span></code> であるファイルを使ってページを作成します。</p>



<p class="wp-block-paragraph">JSPファイルは、<a href="https://it-biz.online/it-skills/web-server/">Webサーバー</a>（通常は<strong>Tomcat</strong>）に配置され、ユーザーがアクセスすると、サーバー側でJavaのコードが実行されます。その結果として生成されたHTMLが、ブラウザに送信され、画面に表示されます。</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">つまり、JSPは「動的にHTMLを生成する仕組み」であり、「HTMLの中にJavaの処理を一部書き足せる形式のファイル」と言えます。</p>
</div></div>



<div class="wp-block-cocoon-blocks-icon-box common-icon-box block-box information-box">
<p class="wp-block-paragraph">JSPは、以下のような場面でよく利用されます。</p>



<ul class="wp-block-list">
<li>ユーザーの入力に応じて表示内容を変えたいとき</li>



<li>データベースから取得した情報を一覧表示したいとき</li>



<li>フォーム送信結果を別の画面に反映したいとき</li>



<li>ログインしたユーザーごとにページの表示内容を切り替えたいとき</li>
</ul>



<p class="wp-block-paragraph">このような場合、HTMLだけでは対応が難しくなりますが、JSPを使えば、これらの処理をサーバー側で実現できます。</p>
</div>



<h3 class="wp-block-heading">JSPの動作のしくみ</h3>



<p class="wp-block-paragraph">JSPファイルは、ユーザーがアクセスしたときに、サーバー側で一度「Javaのクラス（Servlet）」に変換されます。変換されたクラスはコンパイルされ、Javaプログラムとして実行されます。このとき、JSPファイルに書かれたHTMLの部分はそのままHTMLとして出力され、Javaのコード部分は処理されて結果が埋め込まれます。最終的に生成されたHTMLがブラウザに送信され、ユーザーに表示されます。</p>



<p class="wp-block-paragraph">このしくみによって、JSPは1枚のファイルで「HTMLの見た目」と「動的な処理」を両立させることができます。</p>



<p class="has-text-align-center wp-block-paragraph"><strong>JSPの動き方の流れ</strong></p>



<ol class="wp-block-list is-style-numeric-list-enclosed has-list-style">
<li class="is-style-bottom-margin-1em has-bottom-margin">ユーザーが <code>.jsp</code> ファイルをリクエストする（例：<code>hello.jsp</code>）</li>



<li class="is-style-bottom-margin-1em has-bottom-margin">Tomcat がその <code>.jsp</code> を読んで、中の Java を実行</li>



<li class="is-style-bottom-margin-1em has-bottom-margin">結果として HTML を作り出し、ブラウザに返す</li>



<li>ブラウザには、あたかも普通のHTMLのように見える</li>
</ol>



<p class="wp-block-paragraph">この一連の流れによって、「動きのあるページ」がリクエスト元に返却されることになります。</p>



<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>JSPファイルとは？</strong></p>



<ol class="wp-block-list is-style-numeric-list-enclosed has-list-style">
<li class="is-style-bottom-margin-2em has-bottom-margin">HTMLだけでは静的なページしか作れない。<br>→JSPを使うことで動的なページが作成できます。</li>



<li class="is-style-bottom-margin-2em has-bottom-margin">JSPは、JavaのコードをHTMLに埋め込むことで、アクセスごとに変化するページを生成。</li>



<li class="is-style-bottom-margin-2em has-bottom-margin">JSPは、Webサーバー上で実行され、結果がHTMLとしてブラウザに表示される。</li>
</ol>
</div>



<h2 class="wp-block-heading">JSPを動かすための準備</h2>



<p class="wp-block-paragraph">JSPファイルは、<strong>通常のHTMLファイルと違い、単独では動作しません。</strong>JSPはサーバー側でJavaのコードを実行する仕組みのため、その処理を受け持つ「Webサーバー」や「Javaの開発環境」が必要です。</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">この章では、JSPを動かすために必要なソフトウェアや環境を、1つずつ順を追って準備していきます。</p>
</div></div>



<h3 class="wp-block-heading">JSPの動作に必要なもの</h3>



<p class="wp-block-paragraph">JSPを動作させるには、次の3つが必要です。<strong>ここでは、それってそもそも何？みたいな説明＋実際にあなたのPCにインストールする手順をメモ程度に記載しておきますので、この辺の知識がすでにあるよ！という方は読み飛ばしてください。</strong></p>



<figure class="wp-block-table aligncenter"><div class="scrollable-table stfc-sticky"><table><thead><tr><th>項目</th><th>説明</th></tr></thead><tbody><tr><td>JDK（Java Development Kit）</td><td>Javaのプログラムを実行するために必要なソフトウェアです。JSPはJavaで動作するため、必ず必要になります。</td></tr><tr><td>Tomcat（トムキャット）</td><td>JSPファイルを処理し、Javaのコードを実行してHTMLに変換するWebサーバーです。</td></tr><tr><td>エディタ（テキスト編集ソフト）</td><td>JSPファイルを作成するための道具です。Visual Studio Code（VS Code）やIntelliJ IDEAなどが便利です。</td></tr></tbody></table></div></figure>



<h4 class="wp-block-heading">JDKのインストール</h4>



<p class="wp-block-paragraph">まず、Javaの開発環境であるJDKをインストールします。JDKがインストールされていないと、JSPも動作しません。</p>


<a href="https://it-biz.online/java/java-setup/" title="Javaの開発環境構築の３ステップ解説（JDK/JRE/JVMの仕組みを１から解説）" class="blogcard-wrap internal-blogcard-wrap a-wrap cf" target="_blank"><div class="blogcard internal-blogcard ib-left cf"><div class="blogcard-label internal-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail internal-blogcard-thumbnail"><img loading="lazy" decoding="async" width="320" height="180" src="https://it-biz.online/wp-content/uploads/2024/05/image-320x180.png" class="blogcard-thumb-image internal-blogcard-thumb-image wp-post-image" alt="" srcset="https://it-biz.online/wp-content/uploads/2024/05/image-320x180.png 320w, https://it-biz.online/wp-content/uploads/2024/05/image-240x135.png 240w, https://it-biz.online/wp-content/uploads/2024/05/image-640x360.png 640w" sizes="(max-width: 320px) 100vw, 320px" /></figure><div class="blogcard-content internal-blogcard-content"><div class="blogcard-title internal-blogcard-title">Javaの開発環境構築の３ステップ解説（JDK/JRE/JVMの仕組みを１から解説）</div><div class="blogcard-snippet internal-blogcard-snippet">【超・初心者向け】Javaの開発環境を初心者向けに簡単に設定する方法をわかりやすく解説します。JDKのインストール、IDEの選択、開発のスタートまで、スムーズにJavaプログラミングを始める方法をご説明します。</div></div><div class="blogcard-footer internal-blogcard-footer cf"><div class="blogcard-site internal-blogcard-site"><div class="blogcard-favicon internal-blogcard-favicon"><img loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://it-biz.online" alt="" class="blogcard-favicon-image internal-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain internal-blogcard-domain">it-biz.online</div></div><div class="blogcard-date internal-blogcard-date"><div class="blogcard-post-date internal-blogcard-post-date">2026.04.16</div></div></div></div></a>


<p class="has-text-align-center wp-block-paragraph"><span class="inline-button-green">手順</span></p>



<ol class="wp-block-list is-style-numeric-list-enclosed has-list-style">
<li class="is-style-bottom-margin-2em has-bottom-margin">Oracleの公式サイトまたはOpenJDKのサイトから、JDKをダウンロード。</li>



<li class="is-style-bottom-margin-2em has-bottom-margin">お使いのOSに合ったインストーラを選び、画面の指示に従ってインストール。</li>



<li>インストール後、コマンドプロンプト（またはターミナル）を開き、↓のコマンドを入力。</li>
</ol>



<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="">java -version
</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">バージョンが表示されれば、正常にインストールされています。</p>
</div></div>



<h4 class="wp-block-heading">Tomcatのインストール</h4>



<p class="wp-block-paragraph">JSPファイルを処理するために、Tomcatをインストールします。<strong><span class="marker-under">TomcatはJavaで動作するWebサーバー</span></strong>で、JSPの実行に適した軽量なサーバーです。</p>



<p class="has-text-align-center wp-block-paragraph"><span class="inline-button-green">手順</span></p>



<ol class="wp-block-list is-style-numeric-list-enclosed has-list-style">
<li class="is-style-bottom-margin-2em has-bottom-margin">Apache Tomcat の公式サイトにアクセス。</li>



<li class="is-style-bottom-margin-2em has-bottom-margin">zip ファイル（Windows の場合）または tar.gz ファイル（Mac/Linux の場合）をダウンロード。</li>



<li class="is-style-bottom-margin-2em has-bottom-margin">ダウンロードしたファイルを任意の場所に展開（解凍）。<br>→<code>C:\tomcat</code> や <code>~/tomcat</code> などが一般的ですが、どこでもOK。</li>



<li class="is-style-bottom-margin-2em has-bottom-margin"><code>bin</code>フォルダにある <code>startup.bat</code>（Windows）または <code>startup.sh</code>（Mac/Linux）を実行。</li>



<li>ブラウザを開き、次のURLにアクセスします：</li>
</ol>




<a rel="noopener" href="http://localhost:8080/" title="&#28961;&#21177;&#12394;URL&#12391;&#12377;" 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%2Flocalhost%3A8080%2F?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">&#28961;&#21177;&#12394;URL&#12391;&#12377;</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://localhost:8080/" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain external-blogcard-domain">localhost</div></div></div></div></a>
</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">Tomcatのトップページが表示されれば、インストールは成功です。</p>
</div></div>



<div class="wp-block-cocoon-blocks-icon-box common-icon-box block-box information-box">
<p class="wp-block-paragraph">注意：すでに他のアプリケーションがポート8080を使っている場合、Tomcatが起動できないことがあります。その場合は、設定ファイル（server.xml）でポート番号を変更してください。</p>
</div>



<h4 class="wp-block-heading">JSP用のフォルダを作る</h4>



<p class="wp-block-paragraph">Tomcatでは、<code><span class="bold-blue">webapps</span></code> フォルダの中にあるプロジェクトが自動的に読み込まれます。自分でJSPファイルを作って表示するには、ここに新しいフォルダを作成します。</p>



<p class="has-text-align-center wp-block-paragraph"><span class="inline-button-green">手順</span></p>



<ol class="wp-block-list is-style-numeric-list-enclosed has-list-style">
<li class="is-style-bottom-margin-2em has-bottom-margin">Tomcatフォルダ内の <code>webapps</code> に移動。</li>



<li class="is-style-bottom-margin-2em has-bottom-margin">新しくフォルダを作成し、たとえば <code>jsp-demo</code> という名前をつける。</li>



<li><code>jsp-demo</code> フォルダの中に、最初のJSPファイルを作成します。ファイル名は <code>hello.jsp</code> など。</li>
</ol>



<h4 class="wp-block-heading">エディタの準備</h4>



<p class="wp-block-paragraph">JSPファイルは、普通のテキストファイルとして作成できますが、プログラミングに適したエディタを使うと効率が上がります。以下のいずれかのエディタを使用するのが一般的です。</p>



<ul class="wp-block-list">
<li>Visual Studio Code（無料で軽量、拡張機能が豊富）</li>



<li>IntelliJ IDEA（Javaに特化した統合開発環境）</li>



<li>Eclipse（Java開発で定番のIDE）</li>
</ul>



<p class="wp-block-paragraph">初心者の方には、<strong>Visual Studio Codeが扱いやすくおすすめ</strong>です。必要に応じて「Java Extension Pack」などを追加すると、補完機能や構文チェックも利用できます。</p>



<h2 class="wp-block-heading">最初のJSPファイルを作ってみよう</h2>



<p class="wp-block-paragraph">前の章で、JSPを動かすための準備が整いました。この章では、実際にJSPファイルを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">ここでは、「JSPとはどういうものか」を実際に体験しながら、基本的な書き方や仕組みを理解していきます。</p>
</div></div>



<h3 class="wp-block-heading">JSPファイルとはどんなファイルか</h3>



<p class="wp-block-paragraph">JSPファイルは、基本的にはHTMLっぽく見えるコードで、この中の必要な部分にJavaのコードを差し込むことで、表示内容を動的に変えることができるようにしています。たとえば、「現在の日時を表示する」などの処理が可能になります。</p>



<p class="wp-block-paragraph">JSPファイルの拡張子は <code><span class="bold-blue">.jsp</span></code> です。ファイルの中には、通常のHTMLタグと、Javaのコードが組み合わさって記述されます。</p>



<pre class="EnlighterJSRAW" data-enlighter-language="html" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">&lt;%@ page contentType="text/html; charset=UTF-8" %>
&lt;!DOCTYPE html>
&lt;html>
&lt;head>
  &lt;meta charset="UTF-8">
  &lt;title>Hello JSP&lt;/title>
&lt;/head>
&lt;body>
  &lt;h1>こんにちは、JSPの世界へようこそ！&lt;/h1>
  &lt;p>現在の時刻は：&lt;%= java.time.LocalDateTime.now() %>&lt;/p>
&lt;/body>
&lt;/html>
</pre>



<p class="wp-block-paragraph">上記のJSPファイルの中では、JavaのコードとHTMLが組み合わさっています。それぞれの部分について説明します。</p>



<ul class="wp-block-list is-style-icon-list-circle has-list-style">
<li class="is-style-bottom-margin-2em has-bottom-margin"><code>&lt;%@ page contentType="text/html; charset=UTF-8" %&gt;</code><br>→ この行は「ページ全体の設定」です。文字コードをUTF-8にすることで、文字化けを防ぎます。</li>



<li><code>&lt;%= java.time.LocalDateTime.now() %&gt;</code><br>→ この部分がJSPの特徴です。「現在の時刻を表示する」Javaのコードが入っています。<br><code>&lt;%=</code> と <code>%&gt;</code> で囲まれた中はJavaの「式」として実行され、結果がそのままHTMLに差し込まれます。</li>
</ul>



<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>



<ol class="wp-block-list is-style-numeric-list-enclosed has-list-style">
<li class="is-style-bottom-margin-2em has-bottom-margin">Tomcatの <code>webapps</code> フォルダの中にある、前章で作成した <code>jsp-demo</code> フォルダに移動。</li>



<li class="is-style-bottom-margin-2em has-bottom-margin"><code>hello.jsp</code> という名前の新しいファイルを作成。</li>



<li>ファイルをエディタで開き、↑の内容を記述し保存！</li>
</ol>



<h3 class="wp-block-heading">ブラウザで表示してみる</h3>



<p class="wp-block-paragraph">ファイルを保存したら、Tomcatが起動していることを確認し、ブラウザで次のURLにアクセスしてみましょう。</p>




<a rel="noopener" href="http://localhost:8080/jsp-demo/hello.jsp" title="&#28961;&#21177;&#12394;URL&#12391;&#12377;" 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%2Flocalhost%3A8080%2Fjsp-demo%2Fhello.jsp?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">&#28961;&#21177;&#12394;URL&#12391;&#12377;</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://localhost:8080/jsp-demo/hello.jsp" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain external-blogcard-domain">localhost</div></div></div></div></a>
</pre>



<p class="wp-block-paragraph">画面に「こんにちは、JSPの世界へようこそ！」という見出しと、現在の時刻が表示されていれば成功です。</p>



<p class="wp-block-paragraph">ブラウザでページを更新するたびに、時刻が変化するはずです。これは、<strong>JSPがアクセスされるたびにJavaのコードを実行して、ページの中身を動的に作っている</strong>ということを意味します。</p>



<h2 class="wp-block-heading">JSPの基本構文</h2>



<p class="wp-block-paragraph">前の章では、JSPファイルを作成し、Javaのコードを埋め込むことで「現在の時刻を表示する」ページを作成しました。ここからは、JSPファイルで使われる代表的な構文について解説します。どのようにJavaのコードをHTMLに差し込むのか、そしてJSP特有の書き方にはどんな種類があるのかを、順を追って学習していきましょう。</p>



<h3 class="wp-block-heading">JSPの構成要素</h3>



<p class="wp-block-paragraph">JSPでは、<strong>以下の4種類の記述形式が用意されています</strong>。これらを使い分けることで、Javaの処理とHTMLの表示を同時に扱うことができます。</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><code>&lt;%<span class="bold-red">@</span> ... %&gt;</code></td><td>ページ全体の設定を行う（文字コードなど）</td></tr><tr><td>スクリプトレット</td><td><code>&lt;% ... %&gt;</code></td><td>Javaの処理（変数の定義や条件分岐など）を書く</td></tr><tr><td>式（Expression）</td><td><code>&lt;%<span class="bold-red">=</span> ... %&gt;</code></td><td>Javaの値をそのままHTMLに出力する</td></tr><tr><td>宣言</td><td><code>&lt;%<span class="bold-red">!</span> ... %&gt;</code></td><td>メソッドやフィールドを定義する（あまり使われない）</td></tr></tbody></table></div></figure>



<h3 class="wp-block-heading">ディレクティブ</h3>



<p class="wp-block-paragraph">ディレクティブは、JSPファイル全体に関する設定を行うものです。最もよく使われるのは <code>page</code> ディレクティブです。</p>



<pre class="EnlighterJSRAW" data-enlighter-language="html" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">&lt;%@ page contentType="text/html; charset=UTF-8" %>
</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">この記述によって、出力するHTMLの文字コードがUTF-8になります。日本語を正しく表示するために必須です。</p>
</div></div>



<h3 class="wp-block-heading">スクリプトレット</h3>



<p class="wp-block-paragraph">スクリプトレットは、JSPファイル内にJavaの処理を書くための領域です。</p>



<pre class="EnlighterJSRAW" data-enlighter-language="html" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">&lt;%
  int year = java.time.LocalDate.now().getYear();
  String message = "今年は " + year + " 年です。";
%>
&lt;p>&lt;%= message %>&lt;/p>
</pre>



<p class="wp-block-paragraph">この例では、Javaで現在の年を取得し、それを文字列として作成しています。そして <code>&lt;%= ... %&gt;</code> を使って、結果をHTMLに出力しています。</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p class="wp-block-paragraph">スクリプトレットの中ではJavaの文法がそのまま使えます。ただし、後述するように<strong>スクリプトレットは新しい開発ではなるべく使わない方向にあります</strong>。</p>
</blockquote>



<h3 class="wp-block-heading">式（Expression）</h3>



<p class="wp-block-paragraph">式は、値をそのままHTMLとして出力したいときに使います。</p>



<pre class="EnlighterJSRAW" data-enlighter-language="html" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">&lt;p>こんにちは、&lt;%= "JSPユーザー" %>さん！&lt;/p>
</pre>



<p class="wp-block-paragraph">上の例では、<code>"JSPユーザー"</code> という文字列がHTMLに挿入され、ブラウザには次のように表示されます。</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="">こんにちは、JSPユーザーさん！
</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">この書き方は非常にシンプルで、<strong>値を表示するだけ</strong>であれば便利ですが、複雑な処理は向きません。</p>
</div></div>



<h3 class="wp-block-heading">宣言</h3>



<p class="wp-block-paragraph">宣言は、JSPファイルの中で<strong>メソッドや変数を定義したい場合</strong>に使います。</p>



<pre class="EnlighterJSRAW" data-enlighter-language="html" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">&lt;%! 
  private String getGreeting(String name) {
    return "こんにちは、" + name + "さん！";
  }
%>
&lt;p>&lt;%= getGreeting("太郎") %>&lt;/p>
</pre>



<p class="wp-block-paragraph">このように、JSPファイルの中で小さな関数を定義して、それを式の中で呼び出すこともできます。<strong>ただし、JSPファイルに処理を詰め込みすぎると保守が難しくなるため、このような記述はできるだけ避け、外部のJavaクラスに処理を分けることが望まれます。</strong></p>



<h3 class="wp-block-heading">コメントの書き方</h3>



<p class="wp-block-paragraph">JSPには、HTMLのコメントと、JSP用のコメントの2種類があります。</p>



<pre class="EnlighterJSRAW" data-enlighter-language="html" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">&lt;!-- これはHTMLのコメントです（ブラウザの「ページのソース」に表示されます） -->

&lt;%-- これはJSPのコメントです（ブラウザには一切表示されません） --%>
</pre>



<p class="wp-block-paragraph">HTMLのコメントはWebページに送信されるため、内容を見られる可能性があります。<br>一方、JSPのコメントはサーバー側で処理が止まるため、セキュリティ的に重要なコメントや開発者向けのメモはJSPのコメントで書くのが安全です。</p>



<h3 class="wp-block-heading">スクリプトレットはなるべく使わない</h3>



<p class="wp-block-paragraph">JSPの構文として紹介しましたが、<strong>スクリプトレット（<code>&lt;% ... %&gt;</code>）の使用は、今では非推奨</strong>とされています。理由は以下の通り。</p>



<ul class="wp-block-list is-style-icon-list-cross has-list-style">
<li>HTMLとJavaのロジックが混ざることで、読みづらくなる</li>



<li>保守性が下がり、エラーが起きやすくなる</li>



<li>JSTL（JSP標準タグライブラリ）やEL（式言語）の方がシンプルで安全に書ける</li>
</ul>



<p class="wp-block-paragraph">そのため、今後はJSTLやELを使って、できるだけ「Javaコードを書かずに表示を制御する方法」を覚えていくことが大切です。</p>



<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>JSPの基本構文</strong></p>



<ul class="wp-block-list">
<li>JSPには、ディレクティブ・スクリプトレット・式・宣言という4種類の書き方がある。</li>



<li>スクリプトレットや宣言ではJavaの文法をそのまま使うことができるが、使いすぎは避けるべし。</li>



<li>式（<code>&lt;%= ... %&gt;</code>）は、値を簡単に出力するのに便利です。</li>



<li>コメントは、必要に応じてJSPコメント（<code>&lt;%-- --%&gt;</code>）を使いましょう。</li>
</ul>
</div>



<p class="wp-block-paragraph">次の章では、<strong>JSTLとEL（式言語）を使った“スクリプトレットを使わない”JSPの書き方</strong>を学びます。より読みやすく、安全なJSPの記述方法を習得していきましょう。</p>



<h2 class="wp-block-heading">ELとJSTLでスクリプトレットのないJSPへ</h2>



<p class="wp-block-paragraph">ここまでの解説では、JSPの基本構文としてスクリプトレット（<code>&lt;% ... %&gt;</code>）などを紹介しました。<br>しかし近年のJSP開発では、<strong>スクリプトレットを使わない記述スタイル</strong>が主流となっています。</p>



<p class="wp-block-paragraph">この章では、<strong>EL（Expression Language）とJSTL（JSP Standard Tag Library）</strong>という2つの仕組みを使って、<strong>JSPファイルの中にJavaコードを書かずに動的な表示を行う方法</strong>を学んでいきます。</p>



<h3 class="wp-block-heading">EL（式言語）とは</h3>



<p class="wp-block-paragraph">EL（Expression Language）は、JSPの中で<strong>Javaの値を簡潔に記述するための言語</strong>です。<br>スクリプトレットのように <code>&lt;%=</code> で囲む必要がなく、シンプルに <code>${変数名}</code> と書くだけで値を出力できます。</p>



<pre class="EnlighterJSRAW" data-enlighter-language="html" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">&lt;p>こんにちは、${userName} さん。&lt;/p>
</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">このコードでは、Javaのサーバー側で <code>userName</code> という名前のデータ（属性）が用意されていれば、自動的にその値が表示されます。</p>
</div></div>



<h3 class="wp-block-heading">JSTL（JSP標準タグライブラリ）とは</h3>



<p class="wp-block-paragraph">JSTLとは、JSP上で使える<strong>共通の処理をあらかじめタグ化したライブラリ</strong>です。<br>たとえば、以下のような処理が可能です。</p>



<ul class="wp-block-list">
<li>条件分岐（if）</li>



<li>繰り返し処理（forEach）</li>



<li>値のフォーマット（日付や数値）</li>



<li>URLの生成</li>
</ul>



<p class="wp-block-paragraph">JSTLを使うことで、<strong>複雑なJavaの処理をわかりやすいタグで書くことができる</strong>ようになります。</p>



<h4 class="wp-block-heading">JSTLを使う準備</h4>



<p class="wp-block-paragraph">JSTLを使うには、JSTLライブラリの <code>.jar</code> ファイルを JSPプロジェクトの中に追加する必要があります。</p>



<p class="has-text-align-center wp-block-paragraph"><span class="inline-button-green">手順</span></p>



<ol class="wp-block-list is-style-numeric-list-enclosed has-list-style">
<li class="is-style-bottom-margin-2em has-bottom-margin">JSTLの最新版（Jakarta標準）をダウンロード<br>→ <a>https://jakarta.ee/specifications/tags/</a></li>



<li class="is-style-bottom-margin-2em has-bottom-margin">ダウンロードした <code>jakarta.servlet.jsp.jstl-api-x.x.x.jar</code> などの <code>.jar</code> ファイルを、Tomcatの <code>lib</code> フォルダ、またはプロジェクトの <code>WEB-INF/lib</code> フォルダにコピーします。</li>



<li>JSPファイルの先頭に、以下のようにタグライブラリを読み込む宣言を記述します。</li>
</ol>



<pre class="EnlighterJSRAW" data-enlighter-language="html" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">&lt;%@ taglib prefix="c" uri="https://jakarta.ee/taglibs/core" %>
</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">この設定により、<code>&lt;c:if&gt;</code> や <code>&lt;c:forEach&gt;</code> などのJSTLタグが使えるようになります。</p>
</div></div>



<h4 class="wp-block-heading">JSTLで条件分岐をする</h4>



<p class="wp-block-paragraph">スクリプトレットで <code>if</code> 文を書かなくても、JSTLの <code>&lt;c:if&gt;</code> タグを使うことで簡単に条件分岐ができます。</p>



<pre class="EnlighterJSRAW" data-enlighter-language="html" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">&lt;%@ taglib prefix="c" uri="https://jakarta.ee/taglibs/core" %>
&lt;c:if test="${loginUser != null}">
  &lt;p>ようこそ、${loginUser.name} さん&lt;/p>
&lt;/c:if>
</pre>



<p class="wp-block-paragraph">このように、<code>loginUser</code> という属性が <code>null</code> でなければ、挨拶文が表示されます。</p>



<h4 class="wp-block-heading">JSTLで繰り返し表示をする</h4>



<p class="wp-block-paragraph">リストや配列の内容を繰り返し表示するには、<code>&lt;c:forEach&gt;</code> を使います。</p>



<p class="wp-block-paragraph">サーバー側で、次のようにリストをセットしておきます（Servletなどで）：</p>



<pre class="EnlighterJSRAW" data-enlighter-language="java" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">List&lt;String> names = List.of("太郎", "花子", "次郎");
request.setAttribute("nameList", names);
</pre>



<p class="wp-block-paragraph">JSPファイルでは、次のように記述します：</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="">&lt;%@ taglib prefix="c" uri="https://jakarta.ee/taglibs/core" %>
&lt;ul>
  &lt;c:forEach var="name" items="${nameList}">
    &lt;li>${name}&lt;/li>
  &lt;/c:forEach>
&lt;/ul>
</pre>



<p class="wp-block-paragraph">このコードにより、以下のようなHTMLが生成されます：</p>



<pre class="EnlighterJSRAW" data-enlighter-language="html" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">&lt;ul>
  &lt;li>太郎&lt;/li>
  &lt;li>花子&lt;/li>
  &lt;li>次郎&lt;/li>
&lt;/ul>
</pre>



<h3 class="wp-block-heading">JSPをすっきり保つために</h3>



<p class="wp-block-paragraph">ELとJSTLを使うことで、JSPファイル内にJavaのコードを書く必要がなくなり、<strong>HTMLに近い構造を保ちながら動的な処理を行うことができます。</strong><br>これは、JSPを読みやすく・保守しやすくする上でも非常に重要です。</p>



<p class="wp-block-paragraph">また、デザイナーと共同で作業するようなプロジェクトでも、HTMLに近い見た目を保つことで、分業がしやすくなります。</p>



<h2 class="wp-block-heading">フォームからデータを受け取る</h2>



<p class="wp-block-paragraph">JSPを使ってWebアプリケーションを作成する際、ユーザーの入力に応じて処理を行うことは非常に重要です。この章では、<strong>HTMLのフォームを使って入力されたデータを、JSPで受け取って表示する方法</strong>を学びます。</p>



<h3 class="wp-block-heading">フォーム送信の流れ</h3>



<p class="wp-block-paragraph">フォームを使った処理は、次のような流れで行われます。</p>



<ol class="wp-block-list is-style-numeric-list-enclosed has-list-style">
<li>入力フォームのあるページ（JSP）を表示する</li>



<li>ユーザーが名前などの情報を入力し、送信ボタンを押す</li>



<li>入力内容がサーバーに送られる</li>



<li>受け取ったJSPファイルがその情報を読み取り、画面に表示する</li>
</ol>



<p class="wp-block-paragraph">JSPではこの一連の流れを、HTMLとJavaの仕組みで簡単に実現できます。</p>



<h3 class="wp-block-heading">フォームを作るJSP（entry.jsp）</h3>



<p class="wp-block-paragraph">まずは、名前を入力するための簡単なフォームを作成します。</p>



<h4 class="wp-block-heading">entry.jsp</h4>



<pre class="EnlighterJSRAW" data-enlighter-language="html" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">&lt;!DOCTYPE html>
&lt;html>
&lt;head>
  &lt;meta charset="UTF-8">
  &lt;title>名前の入力&lt;/title>
&lt;/head>
&lt;body>
  &lt;h2>お名前を入力してください&lt;/h2>
  &lt;form action="result.jsp" method="post">
    &lt;label>名前：&lt;input type="text" name="username" />&lt;/label>
    &lt;input type="submit" value="送信" />
  &lt;/form>
&lt;/body>
&lt;/html>
</pre>



<p class="wp-block-paragraph">このページでは、名前を入力して「送信」ボタンを押すと、<code>result.jsp</code> にPOSTリクエストでデータが送信されます。</p>



<h3 class="wp-block-heading">データを受け取るJSP（result.jsp）</h3>



<p class="wp-block-paragraph">次に、送信されたデータを受け取って表示するためのJSPファイルを作成します。</p>



<h4 class="wp-block-heading">result.jsp</h4>



<pre class="EnlighterJSRAW" data-enlighter-language="html" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">&lt;%@ page contentType="text/html; charset=UTF-8" %>
&lt;!DOCTYPE html>
&lt;html>
&lt;head>
  &lt;meta charset="UTF-8">
  &lt;title>入力結果&lt;/title>
&lt;/head>
&lt;body>
  &lt;h2>ようこそ！&lt;/h2>
  &lt;p>あなたの名前は &lt;strong>&lt;%= request.getParameter("username") %>&lt;/strong> さんですね。&lt;/p>
&lt;/body>
&lt;/html>
</pre>



<p class="wp-block-paragraph">ここでは、<code>request.getParameter("username")</code> というコードで、フォームから送られたデータを取得しています。</p>



<ul class="wp-block-list">
<li><code>request</code> はJSPに自動で用意されているオブジェクト。</li>



<li><code>getParameter("username")</code> は、フォームの<code>name="username"</code> に対応した値を取得するメソッド。</li>
</ul>



<h3 class="wp-block-heading">ELを使って書き換える</h3>



<p class="wp-block-paragraph">JSTLやELを使えば、<code>result.jsp</code> をもっとすっきり書くこともできます。以下のようにリクエスト属性に値をセットしてから表示することで、式言語を活用できます。</p>



<h4 class="wp-block-heading">Servlet側（例）</h4>



<pre class="EnlighterJSRAW" data-enlighter-language="html" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">String name = request.getParameter("username");
request.setAttribute("username", name);
request.getRequestDispatcher("/result.jsp").forward(request, response);
</pre>



<h4 class="wp-block-heading">result.jsp：</h4>



<pre class="EnlighterJSRAW" data-enlighter-language="html" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">&lt;%@ taglib prefix="c" uri="https://jakarta.ee/taglibs/core" %>
&lt;p>こんにちは、${username} さん！&lt;/p>
</pre>



<p class="wp-block-paragraph">ただし、Servletを使う方法はこのガイドの後半で詳しく扱いますので、今はまず <code>request.getParameter()</code> による受け取りに慣れることをおすすめします。</p>



<h2 class="wp-block-heading">セッションとCookieでデータを保持する</h2>



<p class="wp-block-paragraph">JSPでは、ユーザーが入力した情報を「別のページでも使いたい」という場面がよくあります。<br>たとえば、ログイン状態を維持したり、前の画面で入力された名前を次の画面でも表示したりする場合です。</p>



<p class="wp-block-paragraph">そのようなときに役立つのが <strong>セッション（Session）</strong> と <strong>クッキー（Cookie）</strong> です。<br>この章では、それぞれの役割と使い方を学びます。</p>



<h3 class="wp-block-heading">セッションの基本操作</h3>



<h4 class="wp-block-heading">データの保存：</h4>



<pre class="EnlighterJSRAW" data-enlighter-language="html" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">&lt;%
  String name = request.getParameter("username");
  session.setAttribute("userName", name);
%>
</pre>



<p class="wp-block-paragraph">このコードは、<code>userName</code> という名前でセッションに値を保存します。</p>



<h4 class="wp-block-heading">データの取得：</h4>



<pre class="EnlighterJSRAW" data-enlighter-language="html" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">&lt;%
  String name = (String) session.getAttribute("userName");
%>
&lt;p>ようこそ、&lt;%= name %> さん&lt;/p>
</pre>



<p class="wp-block-paragraph">このようにすれば、<strong>前のページで保存した値を、別のページで取り出して使うことができます。</strong></p>



<h4 class="wp-block-heading">セッションの有効期間と注意点</h4>



<p class="wp-block-paragraph">セッションは、ユーザーがブラウザを閉じるか、一定時間操作をしないと自動的に無効になります。Tomcatの初期設定では、30分間操作がないとセッションが切れます。</p>



<p class="wp-block-paragraph">また、<strong>多くの情報をセッションに保存しすぎると、サーバーのメモリを圧迫する可能性がある</strong>ため、用途を絞って使うことが大切です。</p>



<h3 class="wp-block-heading">Cookieとは</h3>



<p class="wp-block-paragraph">Cookie（クッキー）は、<strong>情報をユーザーのブラウザに保存する仕組み</strong>です。<br>サーバー側から「この情報を保存しておいてください」と指示すると、ブラウザがその内容を保持し、次回以降のアクセス時にその情報を自動的に送信してきます。</p>



<h3 class="wp-block-heading">Cookieの基本操作</h3>



<h4 class="wp-block-heading">Cookieの作成と送信：</h4>



<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="">&lt;%
  String name = request.getParameter("username");
  Cookie cookie = new Cookie("userName", name);
  cookie.setMaxAge(60 * 60); // 1時間（秒単位）
  response.addCookie(cookie);
%>
</pre>



<h4 class="wp-block-heading">Cookieの取得：</h4>



<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="">&lt;%
  String name = "";
  Cookie[] cookies = request.getCookies();
  if (cookies != null) {
    for (Cookie c : cookies) {
      if ("userName".equals(c.getName())) {
        name = c.getValue();
      }
    }
  }
%>
&lt;p>こんにちは、&lt;%= name %> さん&lt;/p>
</pre>



<p class="wp-block-paragraph">このように、Cookieを使えば、ブラウザに保存された情報を次回のアクセス時にも利用できます。</p>



<h3 class="wp-block-heading">セッションとCookieの使い分け</h3>



<figure class="wp-block-table"><div class="scrollable-table stfc-sticky"><table class="has-fixed-layout"><thead><tr><th>比較項目</th><th>セッション</th><th>Cookie</th></tr></thead><tbody><tr><td>保存場所</td><td>サーバー側</td><td>ブラウザ側</td></tr><tr><td>有効期間</td><td>ログアウトや時間切れまで</td><td>明示的に期限を設定できる</td></tr><tr><td>データの大きさ</td><td>比較的大きなデータがOK</td><td>少量（4KBまで）</td></tr><tr><td>セキュリティ</td><td>比較的安全（外部に見えない）</td><td>攻撃に注意が必要（盗聴・改ざん）</td></tr></tbody></table></div></figure>



<p class="wp-block-paragraph"><strong>一時的な状態保持（ログイン情報など）にはセッション</strong>、<br><strong>ユーザーに関連する設定（言語選択やテーマなど）にはCookie</strong>がよく使われます。</p>



<h2 class="wp-block-heading">JSPで簡単なアンケートアプリを作ろう</h2>



<p class="wp-block-paragraph">JSPを使ってWebアプリケーションを作るには、「複数ページにまたがる処理」を整理することが大切です。<br>この章では、<strong>3画面構成のアンケートアプリ</strong>を作り、情報の受け渡し、表示の切り替え、セッションの活用を総合的に体験します。</p>



<h3 class="wp-block-heading">アプリの構成と目的</h3>



<p class="wp-block-paragraph">このアプリでは、以下のような流れでユーザーにアンケートに答えてもらい、最終画面でまとめて表示します。</p>



<ol class="wp-block-list">
<li><strong>入力画面</strong>：名前と好きな色を入力（form）</li>



<li><strong>確認画面</strong>：入力された内容を表示（セッションで一時保持）</li>



<li><strong>完了画面</strong>：ありがとうメッセージと入力内容の最終確認</li>
</ol>



<p class="has-text-align-center wp-block-paragraph"><strong>プロジェクト構造</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="">jsp-demo/
├─ input.jsp     （入力画面）
├─ confirm.jsp   （確認画面）
└─ thanks.jsp    （完了画面）
</pre>



<h4 class="wp-block-heading">入力画面：input.jsp</h4>



<pre class="EnlighterJSRAW" data-enlighter-language="html" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">&lt;%@ page contentType="text/html; charset=UTF-8" %>
&lt;!DOCTYPE html>
&lt;html>
&lt;head>&lt;meta charset="UTF-8">&lt;title>アンケート入力&lt;/title>&lt;/head>
&lt;body>
  &lt;h2>アンケートにご協力ください&lt;/h2>
  &lt;form action="confirm.jsp" method="post">
    &lt;p>お名前：&lt;input type="text" name="userName" />&lt;/p>
    &lt;p>好きな色：
      &lt;select name="favoriteColor">
        &lt;option value="赤">赤&lt;/option>
        &lt;option value="青">青&lt;/option>
        &lt;option value="緑">緑&lt;/option>
      &lt;/select>
    &lt;/p>
    &lt;input type="submit" value="確認画面へ" />
  &lt;/form>
&lt;/body>
&lt;/html>
</pre>



<h4 class="wp-block-heading">確認画面：confirm.jsp</h4>



<pre class="EnlighterJSRAW" data-enlighter-language="html" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">&lt;%@ page contentType="text/html; charset=UTF-8" %>
&lt;%
  String userName = request.getParameter("userName");
  String favoriteColor = request.getParameter("favoriteColor");

  session.setAttribute("userName", userName);
  session.setAttribute("favoriteColor", favoriteColor);
%>
&lt;!DOCTYPE html>
&lt;html>
&lt;head>&lt;meta charset="UTF-8">&lt;title>確認画面&lt;/title>&lt;/head>
&lt;body>
  &lt;h2>以下の内容でよろしいですか？&lt;/h2>
  &lt;p>お名前：&lt;%= userName %>&lt;/p>
  &lt;p>好きな色：&lt;%= favoriteColor %>&lt;/p>
  &lt;form action="thanks.jsp" method="post">
    &lt;input type="submit" value="送信する" />
  &lt;/form>
&lt;/body>
&lt;/html>
</pre>



<h4 class="wp-block-heading">完了画面：thanks.jsp</h4>



<pre class="EnlighterJSRAW" data-enlighter-language="html" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">&lt;%@ page contentType="text/html; charset=UTF-8" %>
&lt;%
  String name = (String) session.getAttribute("userName");
  String color = (String) session.getAttribute("favoriteColor");

  // 必要があればセッションのデータを破棄
  session.invalidate();
%>
&lt;!DOCTYPE html>
&lt;html>
&lt;head>&lt;meta charset="UTF-8">&lt;title>送信完了&lt;/title>&lt;/head>
&lt;body>
  &lt;h2>ご協力ありがとうございました！&lt;/h2>
  &lt;p>&lt;strong>&lt;%= name %>&lt;/strong> さんの好きな色は &lt;strong>&lt;%= color %>&lt;/strong> ですね。&lt;/p>
&lt;/body>
&lt;/html>
</pre>



<div class="wp-block-cocoon-blocks-icon-box common-icon-box block-box memo-box">
<p class="has-text-align-center wp-block-paragraph">&#x2705; まとめ</p>



<ul class="wp-block-list">
<li><strong>JSPとは何か</strong>
<ul class="wp-block-list">
<li>HTMLにJavaの処理を埋め込んで、動的なWebページを作成できる技術</li>



<li class="is-style-bottom-margin-2em has-bottom-margin">サーバー側で処理され、HTMLとしてブラウザに返される</li>
</ul>
</li>



<li><strong>JSPの実行に必要な環境</strong>
<ul class="wp-block-list">
<li>JDKとTomcatが必須（Java実行環境とWebサーバー）</li>



<li class="is-style-bottom-margin-2em has-bottom-margin">JSPファイルはTomcatの<code>webapps</code>内に配置することで動作する</li>
</ul>
</li>



<li><strong>JSPファイルの基本構文</strong>
<ul class="wp-block-list">
<li><code>&lt;%@ page %&gt;</code>：ページ全体の設定</li>



<li><code>&lt;%= ... %&gt;</code>：Javaの値をHTMLに出力</li>



<li><code>&lt;% ... %&gt;</code>：処理を書く（スクリプトレット）</li>



<li class="is-style-bottom-margin-2em has-bottom-margin"><code>&lt;%! ... %&gt;</code>：変数やメソッドの宣言</li>
</ul>
</li>



<li><strong>スクリプトレットの非推奨と代替方法</strong>
<ul class="wp-block-list">
<li>EL（式言語）で<code>${変数名}</code>と書くと簡単に出力可能</li>



<li class="is-style-bottom-margin-2em has-bottom-margin">JSTLで<code>&lt;c:if&gt;</code>や<code>&lt;c:forEach&gt;</code>などの制御構文を記述可能</li>
</ul>
</li>



<li><strong>フォームデータの送受信</strong>
<ul class="wp-block-list">
<li><code>&lt;form&gt;</code>タグでデータをPOST送信し、<code>request.getParameter()</code>で取得</li>



<li class="is-style-bottom-margin-2em has-bottom-margin">データをセッションに保存して複数ページで利用可能</li>
</ul>
</li>



<li><strong>セッションとCookieの使い分け</strong>
<ul class="wp-block-list">
<li>セッション：サーバー側に一時的に情報を保持（ログイン状態など）</li>



<li class="is-style-bottom-margin-2em has-bottom-margin">Cookie：ブラウザに保存し、次回アクセス時に自動送信（言語設定など）</li>
</ul>
</li>
</ul>
</div>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>【SAP】SHD0－画面バリアント/トランザクションバリアントとは？登録手順まで３分で解説</title>
		<link>https://it-biz.online/sap/shd0/</link>
		
		<dc:creator><![CDATA[ビズドットオンライン]]></dc:creator>
		<pubDate>Thu, 10 Sep 2020 07:48:03 +0000</pubDate>
				<category><![CDATA[SAP]]></category>
		<guid isPermaLink="false">https://it-biz.online/?p=4553</guid>

					<description><![CDATA[初心者向けに分かりやすく画面バリアントとは何か？について解説します。 画面バリアントとは、その名の通り１つ１つの画面に対して設定するバリアントのことで、画面の表示/非表示や初期値などの項目属性の集合体。画面バリアントの集 [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p class="wp-block-paragraph">初心者向けに分かりやすく画面バリアントとは何か？について解説します。</p>



<p class="wp-block-paragraph">画面バリアントとは、<strong><span class="marker-under">その名の通り１つ１つの画面に対して設定するバリアントのことで、画面の表示/非表示や初期値などの項目属性の集合体</span></strong>。画面バリアントの集合体が、トランザクションバリアントです。</p>



<p class="wp-block-paragraph">この記事では画面バリアントの登録方法までを３分で解説します。</p>



<div class="wp-block-cocoon-blocks-label-box-1 label-box block-box"><div class="label-box-label block-box-label box-label fab-check"><span class="label-box-label-text block-box-label-text box-label-text">このページで学べる内容</span></div><div class="label-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">SAPエンジニアであれば常識として知っておきたい超・基本知識</span></strong>です。是非最後までご覧ください。</p>



<h2 class="wp-block-heading">画面バリアントとは？</h2>



<p class="wp-block-paragraph">画面バリアントとは、画面１つ１つに対する表示・非表示などの項目属性のセットです。</p>



<p class="wp-block-paragraph">文字の説明だけではイメージを持ちづらいはずなので、早速画面バリアントの設定画面の一例をご覧ください。</p>



<figure class="wp-block-image aligncenter size-large"><img loading="lazy" decoding="async" width="844" height="470" src="https://it-biz.online/wp-content/uploads/2020/09/image.png" alt="【SAP】SHD0－画面バリアント/トランザクションバリアントとは？登録手順まで３分で解説" class="wp-image-4558" srcset="https://it-biz.online/wp-content/uploads/2020/09/image.png 844w, https://it-biz.online/wp-content/uploads/2020/09/image-300x167.png 300w, https://it-biz.online/wp-content/uploads/2020/09/image-500x278.png 500w, https://it-biz.online/wp-content/uploads/2020/09/image-768x428.png 768w, https://it-biz.online/wp-content/uploads/2020/09/image-800x445.png 800w, https://it-biz.online/wp-content/uploads/2020/09/image-240x135.png 240w" sizes="(max-width: 844px) 100vw, 844px" /></figure>



<p class="wp-block-paragraph">ご覧のように、各項目ごとに 値保持 / 出力専用 / 非表示 / 必要 の設定を行えるようになっています。</p>



<h3 class="wp-block-heading">画面バリアント設定：値保持（W.content）</h3>



<p class="wp-block-paragraph">値保持にチェックを入れることで、<strong>内容欄</strong>の値を初期値として表示させることができます。</p>



<p class="wp-block-paragraph">例えば、ビジネスパートナの住所タブの項目に値保持の設定を行っていた場合。以下のような画面が表示されることになります。</p>



<figure class="wp-block-image aligncenter size-large"><img loading="lazy" decoding="async" width="452" height="93" src="https://it-biz.online/wp-content/uploads/2020/09/image-1.png" alt="" class="wp-image-4559" srcset="https://it-biz.online/wp-content/uploads/2020/09/image-1.png 452w, https://it-biz.online/wp-content/uploads/2020/09/image-1-300x62.png 300w" sizes="(max-width: 452px) 100vw, 452px" /><figcaption class="wp-element-caption">タイトルと名の項目に初期値が設定</figcaption></figure>



<p class="wp-block-paragraph">あくまでも<strong>初期値</strong>なので変更は可能です。</p>



<h3 class="wp-block-heading">画面バリアント設定：出力専用（Output only）</h3>



<p class="wp-block-paragraph"><strong>出力専用</strong>にチェックすると、当該項目は<strong>変更</strong>することができなくなります。</p>



<figure class="wp-block-image aligncenter size-large"><img loading="lazy" decoding="async" width="324" height="104" src="https://it-biz.online/wp-content/uploads/2020/09/image-2.png" alt="" class="wp-image-4560" srcset="https://it-biz.online/wp-content/uploads/2020/09/image-2.png 324w, https://it-biz.online/wp-content/uploads/2020/09/image-2-300x96.png 300w, https://it-biz.online/wp-content/uploads/2020/09/image-2-320x104.png 320w" sizes="(max-width: 324px) 100vw, 324px" /><figcaption class="wp-element-caption">言語項目だけ出力専用にしている例</figcaption></figure>



<h3 class="wp-block-heading">画面バリアント設定：非表示（Invisible）</h3>



<p class="wp-block-paragraph">その名の通りです。非表示設定を行うと、<strong>当該項目は画面上から見えなくなります。</strong></p>



<p class="wp-block-paragraph">勘違いしてはいけないのが、あくまでも画面上から「見えなくなるだけ」であって存在自体がなくなるわけではありません。つまり、本来必須入力の項目に対して非表示設定をしてしまうと必ずエラーが出る画面を作成してしまうことにつながります。</p>



<h3 class="wp-block-heading">画面バリアント設定：必要（Required）</h3>



<p class="wp-block-paragraph">必須入力させたい場合にチェックします。</p>



<figure class="wp-block-image aligncenter size-large is-resized"><img loading="lazy" decoding="async" src="https://it-biz.online/wp-content/uploads/2020/09/image-3.png" alt="" class="wp-image-4561" width="447" height="63" srcset="https://it-biz.online/wp-content/uploads/2020/09/image-3.png 376w, https://it-biz.online/wp-content/uploads/2020/09/image-3-300x42.png 300w" sizes="(max-width: 447px) 100vw, 447px" /><figcaption class="wp-element-caption">支払日項目が必須入力</figcaption></figure>



<div class="wp-block-cocoon-blocks-label-box-1 label-box block-box"><div class="label-box-label block-box-label box-label fab-pencil"><span class="label-box-label-text block-box-label-text box-label-text">画面バリアントのテスト</span></div><div class="label-box-content block-box-content box-content">
<p class="wp-block-paragraph">例えば必須入力にチェックしている項目に対して、同時に非表示設定を行っている項目があったり、値保持している項目がSAP標準では許可できない文字だったりする場合。</p>



<p class="wp-block-paragraph">このような画面バリアントを作成してしまうとバグの原因となってしまいます。SAPの標準機能としてこのような不整合を未然に防ぐために画面バリアントのチェックが行えます。</p>



<div class="wp-block-cocoon-blocks-sticky-box blank-box block-box sticky">
<p class="wp-block-paragraph">メニュー＞バリアント＞チェック</p>
</div>
</div></div>



<h2 class="wp-block-heading">SHD0：画面バリアントの登録</h2>



<p class="wp-block-paragraph">さて、先に画面バリアントのイメージを掴んでもらうために設定内容の解説から進めてきましたがここからは実際に画面バリアントの登録方法を解説します。</p>



<p class="wp-block-paragraph">と言っても、実は非常に簡単。</p>



<div class="wp-block-cocoon-blocks-sticky-box blank-box block-box sticky">
<p class="has-text-align-center wp-block-paragraph">トランザクションコード：<strong>SHD0</strong></p>
</div>



<p class="wp-block-paragraph">画面バリアントを設定したい<a href="https://it-biz.online/sap/what-is-transaction/">トランザクションコード</a>を入力。<strong>画面バリアントタブ</strong>にて画面バリアント名を入力し登録ボタンを押すだけ。</p>



<p class="wp-block-paragraph">あとは、対象のトランザクションコードが起動され、いつもと同じように画面に値を入力していきます。画面の入力が完了すると、先ほど同様以下の設定画面が表示される仕組みです。</p>



<figure class="wp-block-image aligncenter size-large"><img loading="lazy" decoding="async" width="844" height="470" src="https://it-biz.online/wp-content/uploads/2020/09/image.png" alt="【SAP】SHD0－画面バリアント/トランザクションバリアントとは？登録手順まで３分で解説" class="wp-image-4558" srcset="https://it-biz.online/wp-content/uploads/2020/09/image.png 844w, https://it-biz.online/wp-content/uploads/2020/09/image-300x167.png 300w, https://it-biz.online/wp-content/uploads/2020/09/image-500x278.png 500w, https://it-biz.online/wp-content/uploads/2020/09/image-768x428.png 768w, https://it-biz.online/wp-content/uploads/2020/09/image-800x445.png 800w, https://it-biz.online/wp-content/uploads/2020/09/image-240x135.png 240w" sizes="(max-width: 844px) 100vw, 844px" /></figure>



<h2 class="wp-block-heading">トランザクションバリアントとは？</h2>



<p class="wp-block-paragraph">画面バリアントはあくまでも１つの画面に対する設定値をまとめたものでしかありません。そして、もう少し具体的に言えば画面バリアントは、<strong><span class="marker-under">トランザクションバリアントの１構成要素でしかありません。</span></strong></p>



<div class="wp-block-cocoon-blocks-label-box-1 label-box block-box"><div class="label-box-label block-box-label box-label fab-check"><span class="label-box-label-text block-box-label-text box-label-text">画面バリアントとトランザクションバリアントの違い</span></div><div class="label-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>画面バリアント<br><br>⇒１つの画面の項目属性値のセット<br><br></li>



<li><strong>トランザクションバリアント</strong><br><br>⇒複数の画面バリアントのセット</li>
</ul>
</div>
</div></div>



<p class="wp-block-paragraph">実際には、１つ以上の画面バリアントから構成されるトランザクションバリアントをトランザクションコードに割り当てることによって画面の表示制御を行うわけです。</p>



<p class="wp-block-paragraph">トランザクションコード：<strong>SHD0</strong>の画面に戻ります。</p>



<figure class="wp-block-image aligncenter size-large"><img loading="lazy" decoding="async" width="1024" height="662" src="https://it-biz.online/wp-content/uploads/2020/09/image-4-1024x662.png" alt="" class="wp-image-4562" srcset="https://it-biz.online/wp-content/uploads/2020/09/image-4-1024x662.png 1024w, https://it-biz.online/wp-content/uploads/2020/09/image-4-300x194.png 300w, https://it-biz.online/wp-content/uploads/2020/09/image-4-500x323.png 500w, https://it-biz.online/wp-content/uploads/2020/09/image-4-768x497.png 768w, https://it-biz.online/wp-content/uploads/2020/09/image-4-800x517.png 800w, https://it-biz.online/wp-content/uploads/2020/09/image-4.png 1036w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p class="wp-block-paragraph"><strong>Transaction Variantタブ</strong> でトランザクションバリアント名称を入力。そして、そのトランザクションバリアントを構成する画面バリアントを割り当てていきます。</p>



<p class="wp-block-paragraph">割り当てる画面バリアントの個数は１つ以上で何個あってもOKです。</p>



<h2 class="wp-block-heading">バリアントトランザクションの作成</h2>



<p class="wp-block-paragraph">最後に、バリアントトランザクションを作成します。</p>



<figure class="wp-block-image aligncenter size-large"><img loading="lazy" decoding="async" width="488" height="343" src="https://it-biz.online/wp-content/uploads/2020/09/image-5.png" alt="" class="wp-image-4565" srcset="https://it-biz.online/wp-content/uploads/2020/09/image-5.png 488w, https://it-biz.online/wp-content/uploads/2020/09/image-5-300x211.png 300w" sizes="(max-width: 488px) 100vw, 488px" /></figure>



<p class="wp-block-paragraph">ややこしいのですが、バリアントトランザクションとは<strong>トランザクションコードとトランザクションバリアントの組み合わせです。</strong></p>



<p class="wp-block-paragraph">つまり、どのトランザクションコードをどのバリアントトランザクションを用いて利用するか？を設定したトランザクションコードを新規に作成するイメージです。</p>



<p class="wp-block-paragraph">実際のSAPユーザにはバリアントトランザクションを解放することで、表示・非表示設定のされた画面を見せる仕組みとなっているのです。</p>



<p class="wp-block-paragraph">最後、この章だけ唐突に理解しがたい表現となっているため何度か読み返しをおすすめします。</p>



<div class="wp-block-cocoon-blocks-label-box-1 label-box block-box"><div class="label-box-label block-box-label box-label fab-exclamation-circle"><span class="label-box-label-text block-box-label-text box-label-text">バリアントトランザクションの作成方法</span></div><div class="label-box-content block-box-content box-content">
<p class="wp-block-paragraph">バリアントトランザクションの作成方法は、以下の記事で解説しております。</p>



<p class="wp-block-paragraph">トランザクションコードをアドオンで作成する方法も合わせて学べますので是非この機会に合わせてご覧ください。</p>



<figure class="wp-block-embed is-type-wp-embed is-provider-ビズドットオンライン wp-block-embed-ビズドットオンライン"><div class="wp-block-embed__wrapper">

<a href="https://it-biz.online/sap/se93/" title="【SAP】トランザクションコードの新規登録を３分で解説：SE93" class="blogcard-wrap internal-blogcard-wrap a-wrap cf" target="_blank"><div class="blogcard internal-blogcard ib-left cf"><div class="blogcard-label internal-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail internal-blogcard-thumbnail"><img loading="lazy" decoding="async" width="320" height="180" src="https://it-biz.online/wp-content/uploads/2026/04/featured-p1-4193-se93-320x180.png" class="blogcard-thumb-image internal-blogcard-thumb-image wp-post-image" alt="" srcset="https://it-biz.online/wp-content/uploads/2026/04/featured-p1-4193-se93-320x180.png 320w, https://it-biz.online/wp-content/uploads/2026/04/featured-p1-4193-se93-500x282.png 500w, https://it-biz.online/wp-content/uploads/2026/04/featured-p1-4193-se93-800x451.png 800w, https://it-biz.online/wp-content/uploads/2026/04/featured-p1-4193-se93-300x169.png 300w, https://it-biz.online/wp-content/uploads/2026/04/featured-p1-4193-se93-768x433.png 768w, https://it-biz.online/wp-content/uploads/2026/04/featured-p1-4193-se93-240x135.png 240w, https://it-biz.online/wp-content/uploads/2026/04/featured-p1-4193-se93-640x360.png 640w, https://it-biz.online/wp-content/uploads/2026/04/featured-p1-4193-se93.png 1480w" sizes="(max-width: 320px) 100vw, 320px" /></figure><div class="blogcard-content internal-blogcard-content"><div class="blogcard-title internal-blogcard-title">【SAP】トランザクションコードの新規登録を３分で解説：SE93</div><div class="blogcard-snippet internal-blogcard-snippet">【初心者向け】SAPでトランザクションコードを新規に１から登録する方法を画像付きで解説します。また、トランザクションコードにバリアントを紐づける「バリアントトランザクションコード」などの応用知識も合わせて解説します。</div></div><div class="blogcard-footer internal-blogcard-footer cf"><div class="blogcard-site internal-blogcard-site"><div class="blogcard-favicon internal-blogcard-favicon"><img loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://it-biz.online" alt="" class="blogcard-favicon-image internal-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain internal-blogcard-domain">it-biz.online</div></div><div class="blogcard-date internal-blogcard-date"><div class="blogcard-post-date internal-blogcard-post-date">2026.04.26</div></div></div></div></a>
</div></figure>
</div></div>



<h2 class="wp-block-heading">ABAPを１から勉強したい方は</h2>



<p class="wp-block-paragraph"><p><!-- wp:cocoon-blocks/balloon-ex-box-1 {"id":"1","icon":"https://it-biz.online/wp-content/uploads/2023/06/man.png"} --></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" class="speech-icon-image" src="https://it-biz.online/wp-content/uploads/2023/06/man.png" alt="" /></figure>
<div class="speech-name"></div>
</div>
<div class="speech-balloon">
<p><!-- wp:paragraph --></p>
<p>初めてABAPを勉強するのは結構難しいですよね。</p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph --></p>
<p>でもその悩みを抱えているのは一人じゃありません。全てのABAP使いが同じ道を進んできました。</p>
<p><!-- /wp:paragraph --></p>
</div>
</div>
<p><!-- /wp:cocoon-blocks/balloon-ex-box-1 --></p>
<p><!-- wp:paragraph --></p>
<p>ABAPをはじめとするプログラミングスキルを武器に、<strong><span class="marker-under">時間と場所に捉われない自由な生き方</span></strong>を目指してみませんか？</p>
<div class="good-box common-icon-box">
<div class="speech-wrap sb-id-1 sbs-stn sbp-l sbis-cb cf">
<div class="speech-person">
<figure class="speech-icon"><img loading="lazy" decoding="async" class="speech-icon-image" src="https://it-biz.online/wp-content/uploads/2023/06/man.png" alt="" width="385" height="424" /></figure>
</div>
<div class="speech-balloon">
<p><strong>あなたの技術、もっと価値ある場所で活かしませんか？<br />
<span style="font-size: 20px;"><span style="color: #ff6600;">SAPエンジニア</span>のキャリア支援はこちらから↓</span></strong></p>
</div>
</div>
<p><strong><span class="badge">No.1　&gt;</span>　<span style="font-size: 18px;"><a rel="nofollow" href="//af.moshimo.com/af/c/click?a_id=2296865&amp;p_id=2502&amp;pc_id=5511&amp;pl_id=32341">外資系・IT業界などハイクラスの転職なら【アクシスコンサルティング】</a></span></strong><span class="marker-under"><strong><span style="font-size: 18px;"><img loading="lazy" decoding="async" style="border: none;" src="//i.moshimo.com/af/i/impression?a_id=2296865&amp;p_id=2502&amp;pc_id=5511&amp;pl_id=32341" width="1" height="1" /></span><br />
</strong></span>4人に1人のコンサルタントが選ぶパートナー！<br />
ビッグ4やアクセンチュアへの転職を実現し<span class="marker-under"><strong>年収1000万</strong></span>へ。</p>
<p><span style="font-size: 18px;"><strong><span class="badge">No.2　&gt;</span>　<a rel="nofollow" href="//af.moshimo.com/af/c/click?a_id=1995891&amp;p_id=969&amp;pc_id=1263&amp;pl_id=13840">IT・Web転職特化エージェント【レバテックキャリア</a><a rel="nofollow" href="//af.moshimo.com/af/c/click?a_id=1995891&amp;p_id=969&amp;pc_id=1263&amp;pl_id=13840">】</a></strong></span><span style="font-size: 18px;"><strong><img loading="lazy" decoding="async" style="border: none;" src="//i.moshimo.com/af/i/impression?a_id=1995891&amp;p_id=969&amp;pc_id=1263&amp;pl_id=13840" width="1" height="1" /><br />
<img loading="lazy" decoding="async" style="border: none;" src="//i.moshimo.com/af/i/impression?a_id=3134186&amp;p_id=3878&amp;pc_id=9624&amp;pl_id=53722" width="1" height="1" /></strong><span style="font-size: 16px;">サービス利用者数<strong>20万人</strong>突破。</span></span><span style="font-size: 18px;"><span style="font-size: 16px;"><br />
平均<strong>年収アップ率77%</strong>であなたの転職成功を保証します。</span></span></p>
<p><span style="font-size: 18px;"><strong><span class="badge">No.3　&gt;</span>　</strong></span><span style="font-size: 18px;"><strong><img loading="lazy" decoding="async" style="border: none;" src="//i.moshimo.com/af/i/impression?a_id=1995891&amp;p_id=969&amp;pc_id=1263&amp;pl_id=13840" width="1" height="1" /><a rel="nofollow" href="//af.moshimo.com/af/c/click?a_id=3134203&amp;p_id=3802&amp;pc_id=9376&amp;pl_id=52943">リクルートエージェント</a><br />
<img loading="lazy" decoding="async" style="border: none;" src="//i.moshimo.com/af/i/impression?a_id=3134186&amp;p_id=3878&amp;pc_id=9624&amp;pl_id=53722" width="1" height="1" /></strong><span style="font-size: 16px;">＼転職支援実績NO.1／</span></span><span style="font-size: 18px;"><span style="font-size: 16px;"><br />
応募が殺到しすぎるが故に・・・非公開にせざるを得ない魅力的な求人が多数！<br />
</span></span></p>
</div>

<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph {"align":"center"} --></p>
<p class="has-text-align-center" style="text-align: center;"><span class="badge-green">読者料典</span>　<a href="https://it-biz.online/sap/abap-abc/">【完全無料】ABAP：学習カリキュラム</a>　←こちらから！</p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph --></p>
<p><!-- /wp:paragraph --></p>
</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>【SAP】SAP導入のメリット・デメリット</title>
		<link>https://it-biz.online/sap/sap-evaluation/</link>
		
		<dc:creator><![CDATA[ビズドットオンライン]]></dc:creator>
		<pubDate>Mon, 05 Aug 2019 05:06:59 +0000</pubDate>
				<category><![CDATA[SAP]]></category>
		<guid isPermaLink="false">https://it-biz.online/?p=1744</guid>

					<description><![CDATA[本ページではSAP導入のメリット・デメリットを解説していきます。 何故、世界中の大企業がこぞってSAPを使っているのか？ ここでは、一般的に言われているSAPを使うことのメリットとデメリットに加えて、SAP導入プロジェク [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p class="wp-block-paragraph">本ページではSAP導入のメリット・デメリットを解説していきます。</p>



<p class="wp-block-paragraph">何故、世界中の大企業がこぞってSAPを使っているのか？</p>



<p class="wp-block-paragraph">ここでは、一般的に言われているSAPを使うことのメリットとデメリットに加えて、SAP導入プロジェクトをいくつか経験してきた中で感じた個人的な意見も交えて解説しておきたいと思います。</p>



<p class="has-small-font-size wp-block-paragraph"><strong>※個人的な意見も交えているので、その点予めご了承ください。</strong></p>



<p class="wp-block-paragraph">SAPって何？　そんな疑問をお持ちの方はこちらのページで詳しく解説しておりますので、是非一度お読みになってみてください。</p>



<figure class="wp-block-embed-wordpress wp-block-embed is-type-wp-embed is-provider-ビズドットオンライン"><div class="wp-block-embed__wrapper">

<a href="https://it-biz.online/sap/overview/" title="SAPとは何か：IT初心者向けにわかりやすく【３分ぐらいで読めます】" class="blogcard-wrap internal-blogcard-wrap a-wrap cf" target="_blank"><div class="blogcard internal-blogcard ib-left cf"><div class="blogcard-label internal-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail internal-blogcard-thumbnail"><img loading="lazy" decoding="async" width="320" height="180" src="https://it-biz.online/wp-content/uploads/2019/07/What_is_SAP-320x180.png" class="blogcard-thumb-image internal-blogcard-thumb-image wp-post-image" alt="" srcset="https://it-biz.online/wp-content/uploads/2019/07/What_is_SAP-320x180.png 320w, https://it-biz.online/wp-content/uploads/2019/07/What_is_SAP-240x135.png 240w, https://it-biz.online/wp-content/uploads/2019/07/What_is_SAP-640x360.png 640w" sizes="(max-width: 320px) 100vw, 320px" /></figure><div class="blogcard-content internal-blogcard-content"><div class="blogcard-title internal-blogcard-title">SAPとは何か：IT初心者向けにわかりやすく【３分ぐらいで読めます】</div><div class="blogcard-snippet internal-blogcard-snippet">【図解】SAPとは何か？SAPはどんなシステムで何ができる？SAPという単語を初めて聞いたIT初心者向けにわかりやすく解説します。→SAPエンジニアを目指そうと考えている方は必見です！</div></div><div class="blogcard-footer internal-blogcard-footer cf"><div class="blogcard-site internal-blogcard-site"><div class="blogcard-favicon internal-blogcard-favicon"><img loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://it-biz.online" alt="" class="blogcard-favicon-image internal-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain internal-blogcard-domain">it-biz.online</div></div><div class="blogcard-date internal-blogcard-date"><div class="blogcard-post-date internal-blogcard-post-date">2024.01.29</div></div></div></div></a>
</div></figure>



<p class="wp-block-paragraph">それでは早速解説を始めていきます。</p>



<h2 class="wp-block-heading">SAP導入のメリット</h2>



<p class="wp-block-paragraph">SAP導入のメリットは、大きく分けて3つに分類できます。</p>



<p class="wp-block-paragraph">１つが、標準化―。</p>



<p class="wp-block-paragraph">業務プロセスやデータ体系を、世界の優良企業のスタンダードに合わせることが可能です。</p>



<p class="wp-block-paragraph">2つ目が、透明性の確保です。</p>



<p class="wp-block-paragraph">権限管理や、履歴管理が最強なので一般ユーザの不正を防ぐことができます。</p>



<p class="wp-block-paragraph">最後が、データの連続性です。</p>



<p class="wp-block-paragraph">ERPパッケージ全体に共通する話ですが、１ユーザが入力したデータは、すぐに全社で確認することができるため、迅速な意思決定に貢献します。</p>



<figure class="wp-block-embed-wordpress wp-block-embed is-type-wp-embed is-provider-ビズドットオンライン"><div class="wp-block-embed__wrapper">

<a href="https://it-biz.online/it-skills/erp/" title="ERPとは何か？ERPパッケージって何？IT初心者向けに３分で分かりやすく解説" class="blogcard-wrap internal-blogcard-wrap a-wrap cf" target="_blank"><div class="blogcard internal-blogcard ib-left cf"><div class="blogcard-label internal-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail internal-blogcard-thumbnail"><img loading="lazy" decoding="async" width="320" height="180" src="https://it-biz.online/wp-content/uploads/2019/07/what_is_ERP-320x180.png" class="blogcard-thumb-image internal-blogcard-thumb-image wp-post-image" alt="" srcset="https://it-biz.online/wp-content/uploads/2019/07/what_is_ERP-320x180.png 320w, https://it-biz.online/wp-content/uploads/2019/07/what_is_ERP-240x135.png 240w, https://it-biz.online/wp-content/uploads/2019/07/what_is_ERP-640x360.png 640w" sizes="(max-width: 320px) 100vw, 320px" /></figure><div class="blogcard-content internal-blogcard-content"><div class="blogcard-title internal-blogcard-title">ERPとは何か？ERPパッケージって何？IT初心者向けに３分で分かりやすく解説</div><div class="blogcard-snippet internal-blogcard-snippet">【IT初心者向け】ERPとは何か？ERPパッケージって何？という素朴な疑問をお持ちの方にできるだけ専門用語を利用せずに分かりやすく解説します。</div></div><div class="blogcard-footer internal-blogcard-footer cf"><div class="blogcard-site internal-blogcard-site"><div class="blogcard-favicon internal-blogcard-favicon"><img loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://it-biz.online" alt="" class="blogcard-favicon-image internal-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain internal-blogcard-domain">it-biz.online</div></div><div class="blogcard-date internal-blogcard-date"><div class="blogcard-post-date internal-blogcard-post-date">2021.03.27</div></div></div></div></a>
</div></figure>



<p class="wp-block-paragraph">上記３つのメリットについて具体例を交えながら一歩踏み込んで解説していきます。</p>



<p class="wp-block-paragraph">まずは、1つ目の<span class="yellowline">「標準化」</span>です。</p>



<h3 class="wp-block-heading">標準化</h3>



<p class="wp-block-paragraph">標準化の第1は、<strong>自社の業務プロセスを世界スタンダードに合致させること</strong>を言います。</p>



<p class="wp-block-paragraph">SAPは「世界の優良企業のベストプラクティス」業務を基に設計されているため、<span class="yellowline">世界基準の業務プロセスを採用すること</span>が必須となります。</p>



<p class="has-small-font-size wp-block-paragraph">※ベストプラクティスとは、簡単に言えば<strong><span style="text-decoration: underline;">「一番イケてる形」</span></strong>という意味です。SAPはこの「一番イケてる業務」を基に設計されています。</p>



<p class="wp-block-paragraph">各社独自の複雑な業務プロセスにより無理が生じている作業や、無駄なタスクにまみれ効率性が悪化しているのが日本の企業の特徴です。ありますよね、無駄な二重、三重の承認プロセスや、独自の帳票など。</p>



<p class="wp-block-paragraph">SAP導入するには、この独自の無駄な業務を改革しなければならないのです。</p>



<p class="wp-block-paragraph">いくらERPパッケージと言っても、ガラパゴス化した業務プロセスのままで適用できません。</p>



<p class="wp-block-paragraph">したがって、SAP導入の際には大規模なBPR※と必要最低限のアドオン開発が必要となります。</p>



<p class="has-small-font-size wp-block-paragraph">※BPR・・・業務プロセスを改善すること。 <strong>B</strong>usiness <strong>P</strong>rocess <strong>R</strong>e-engineering の略。</p>



<h4 class="wp-block-heading">アドオン開発の罠</h4>



<p class="wp-block-paragraph">SAPを新規導入する際に必要となるBPRとアドオン開発。</p>



<p class="wp-block-paragraph">BPRで変えきれない部分はとりあえずアドオン開発しよう、という流れになるのですがアドオン開発には罠があります。</p>



<p class="wp-block-paragraph">それは、この「標準化」という概念に反するということです。</p>



<p class="wp-block-paragraph">そもそもSAP導入することの１つのメリットが、<strong>グローバルスタンダードなベストプラクティス業務に合わせることができる</strong>、というものでした。</p>



<p class="wp-block-paragraph">したがって、業務に合わせることができない部分を<strong><span style="text-decoration: underline;">アドオンで開発しよう</span></strong>！というのは、標準化のメリットを放棄することと同意である、ということです。</p>



<p class="wp-block-paragraph">要件定義の際にSAPで実現できない業務であることが判明した際には</p>



<p class="has-medium-font-size wp-block-paragraph">SAPに合わせて業務を変えましょう！</p>



<p class="wp-block-paragraph">が正解であり</p>



<p class="has-medium-font-size wp-block-paragraph">業務に合わせてアドオン開発しましょう！</p>



<p class="wp-block-paragraph">は不正解なのです。</p>



<p class="wp-block-paragraph">SAPのベストプラクティスに合わせる観点から、アドオン開発は基本間違いである最終手段である、ということを理解すべきです。</p>



<p class="wp-block-paragraph">アドオン開発した場合、開発費用が上がるだけではなく、保守性も格段に落ちます。SAPを導入している企業で「バグ」と言ったら90％はアドオンのバグなのです。</p>



<p class="wp-block-paragraph">このバグを減らすには、プログラミングスキルとか、設計スキルではなく、第1に考えるべきは「アドオンの削減」です。</p>



<p class="wp-block-paragraph">SAP導入プロジェクトが、炎上しがちなのはここに大きな原因があると言えるでしょう。</p>



<h3 class="wp-block-heading">透明性の確保</h3>



<p class="wp-block-paragraph">少しわき道に逸れてしまいましたが、SAP導入の2つ目のメリット―。透明性確保の解説に戻ります。</p>



<p class="wp-block-paragraph">2つ目の「透明性確保」というのは、<span class="yellowline">誰がいつ何をしたのか、ということを把握できる</span>、ということです。</p>



<p class="wp-block-paragraph">SAPは、履歴管理に優れており、伝票入力など<strong>データの変更を伴う作業</strong>は全てユーザIDと紐づく形で履歴が残ります。プログラムの改訂履歴や変更箇所などを確認する機能も搭載されているのです。</p>



<p class="wp-block-paragraph">履歴管理が適切になされているため、不正なデータ入力や不正なデータ改ざんを見抜くことができます（＝システム監査をクリアできます）。SAP標準機能をそのまま利用する場合、いわゆる粉飾決算は不可能です。</p>



<p class="wp-block-paragraph">このことにより、企業が法的に説明責任を持つ「財務諸表」の正当性が保たれるため、透明性の確保はそのまま企業評価に直結します。</p>



<h3 class="wp-block-heading">データの連続性</h3>



<p class="wp-block-paragraph">これはSAPにとどまらず、そのほかのERP製品全般にも言えることです。</p>



<p class="wp-block-paragraph">データの連続性とは、1つのトランザクションデータを複数の業務で利用可能になるということです。</p>



<p class="wp-block-paragraph">従来の部分最適化された部門単位のシステムでは、調達した際に「調達しましたよ」というデータを入力し、同時に買掛金のデータを入力する必要がありました。</p>



<p class="wp-block-paragraph">SAPでは、この2段階のステップを踏む必要がありません。調達データを入力したら、そのデータがリアルタイムに「買掛金」データになります。データが調達側と会計側で重複するのではなく、1つのデータとしてSAP内で連携されます。</p>



<p class="wp-block-paragraph">データが連続することで、SAP内でのデータ不整合はありませんし、データの複数入力もなくなります。同時に、社内全体のデータ集計も迅速にできるようになります。</p>



<p class="wp-block-paragraph">SAPを導入することは、システム的な観点から大きなメリットがあるのです。</p>



<h2 class="wp-block-heading">「SAP」であること自体への評価</h2>



<p class="wp-block-paragraph">ここからは、あくまでも個人的な意見ですが、SAP導入の最大のメリットは「SAPを導入する」ということ自体への評価です。</p>



<p class="wp-block-paragraph">SAPは全世界の最優良企業が多く採用・導入しており、ERPベンダーの中でも最大の評価を得ています。</p>



<p class="wp-block-paragraph">そのため</p>



<p class="has-medium-font-size wp-block-paragraph">SAPを導入する　≒　<strong>優良企業である</strong></p>



<p class="wp-block-paragraph">であるという図式が現状一般の世間的な評価になりつつあるため、SAP導入による様々な実利的なメリットに加えて、評判なメリットも非常に大きいのです。</p>



<p class="wp-block-paragraph">例えば、過去に粉飾決算をした企業がSAPを新規導入する―。これは、会社自体が変わろうとしている、という姿勢を会社内外に示すことにつながります。</p>



<p class="wp-block-paragraph">砕けて言えば会社の「うさんくささ」を解消する力があるということです。</p>



<p class="wp-block-paragraph">特にIT関係に従事する人間からすると、SAP＝大企業・優良企業である、という実感は強いのではないでしょうか。</p>



<p class="wp-block-paragraph">SAPを導入することは、標準化・透明性確保・データの連続性、という実利的なメリットに加えて、SAPを導入できていることの評判的なメリットがあると言えます。</p>



<h2 class="wp-block-heading">SAP導入のデメリット</h2>



<p class="wp-block-paragraph">メリットだらけのSAPですが、デメリットがあるがゆえに採用しない会社があるわけです。</p>



<p class="wp-block-paragraph">SAPを採用しない会社のSAPを導入しない理由を見ていきましょう。</p>



<h3 class="wp-block-heading">ライセンス費用が高い</h3>



<p class="wp-block-paragraph">SAPは、ライセンス費用が高額です。このライセンスはユーザ数に応じた従量課金制であるため、ユーザ数が大きければ大きいほど、SAP社に払う金額は大きくなります。</p>



<p class="wp-block-paragraph">自前で１からシステムを作れば、ライセンス費用は０となるので、その分コスト削減につながるので、金額面でSAP導入を断念する会社は多いでしょう。</p>



<p class="wp-block-paragraph">システムの規模が大きくなりすぎて、ライセンス費用を払ったとしても全体としてコスト削減につながるような企業がSAP導入に踏み切ることが多いです。</p>



<h3 class="wp-block-heading">開発者が少ない</h3>



<p class="wp-block-paragraph">SAPを導入する際に、開発コストが高くなる原因―。これは開発者の不足です。</p>



<p class="wp-block-paragraph">企業システムの多くは「java」や「C」「C+」などで書かれることが多いのですが、SAPはSAPでしか使えない「<strong>ABAP</strong>」という言語を用います。</p>



<p class="has-small-font-size wp-block-paragraph">（一部javaで書くことが可能な機能もあります。）</p>



<p class="wp-block-paragraph">「ABAP」という言語は、通常のプログラミングスクールで教えている話を聞いたことはありませんし、資料も乏しいです。このため、ABAPを書くことができる「ABAPer」は非常に少ないのが現状です。</p>



<p class="wp-block-paragraph">「ABAP　転職」でググってみてください。需要過多により、給料がぐんぐん上がってしまっていることがわかるでしょう。ABAPer側からしたらうれしい限りなのですが、企業側からしたら年々徐々にハードルがあがっていると言えます。</p>



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



<p class="wp-block-paragraph">SAPは金額面にデメリットが見られます。</p>



<p class="wp-block-paragraph">一方で、金額面さえクリアすればメリットだらけのSAPでもあります。</p>



<p class="has-small-font-size wp-block-paragraph">※それだけSAPというパッケージが優れているということでもあります。</p>



<p class="wp-block-paragraph">SAP導入によるメリットと、金額面のデメリット。SAP導入の判断は、この費用対効果の分析次第と言えそうです。</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>【SAP】RICEF（ライセフ）とは？３分で解説します</title>
		<link>https://it-biz.online/sap/ricef/</link>
		
		<dc:creator><![CDATA[ビズドットオンライン]]></dc:creator>
		<pubDate>Thu, 07 Nov 2019 09:24:45 +0000</pubDate>
				<category><![CDATA[SAP]]></category>
		<guid isPermaLink="false">https://it-biz.online/?p=2420</guid>

					<description><![CDATA[SAP・ABAP開発における基礎知識「RICEF」について３分でサクッと解説します。「RICEF」とは、開発するオブジェクトをざっくり５つに分類して整理したものです。 上記５つの頭文字をとって「RICEF」です。このペー [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p class="wp-block-paragraph">SAP・ABAP開発における基礎知識「RICEF」について３分でサクッと解説します。<strong><span class="marker-under">「RICEF」とは、開発するオブジェクトをざっくり５つに分類して整理</span></strong>したものです。</p>



<figure class="wp-block-image aligncenter size-large"><img loading="lazy" decoding="async" width="457" height="245" src="https://it-biz.online/wp-content/uploads/2019/11/image-65.png" alt="RICEFとは" class="wp-image-2643" srcset="https://it-biz.online/wp-content/uploads/2019/11/image-65.png 457w, https://it-biz.online/wp-content/uploads/2019/11/image-65-300x161.png 300w, https://it-biz.online/wp-content/uploads/2019/11/image-65-304x163.png 304w, https://it-biz.online/wp-content/uploads/2019/11/image-65-295x158.png 295w" sizes="(max-width: 457px) 100vw, 457px" /></figure>



<p class="wp-block-paragraph">上記５つの頭文字をとって「<big>RICEF</big>」です。このページでは、「RICEF」を１つずつ順に解説し、それぞれの特徴を押さえつつ、RICEFという分類がなぜ必要なのか？（意外と必要性は低い？）整理しておきたいと思います。</p>



<p class="has-text-align-center wp-block-paragraph"><strong>このページで学べる内容</strong></p>



<ul class="wp-block-list">
<li>RICEFとは何か？</li>



<li>それぞれの機能の特徴</li>



<li>RICEFの分類方法</li>
</ul>



<p class="wp-block-paragraph">SAP開発に従事する人であれば、<strong><span style="color:#cf2e2e" class="color">絶対に知っておきたい基本知識</span></strong>ばかりですので是非最後までご覧ください。</p>



<p class="wp-block-paragraph">それでは早速解説を始めます。</p>



<h2 class="wp-block-heading">RICEF</h2>



<p class="wp-block-paragraph">RICEFは、<span class="yellowline">アドオン開発における「<strong>開発オブジェクト</strong>」をReports、Interfaces、Conversions、Extensions、Formsの５つに分類・整理したもの</span>です。</p>



<p class="wp-block-paragraph">ここで、SAPにおける「開発オブジェクト」という言葉についての定義を確認しておきます。</p>



<hr class="wp-block-separator has-css-opacity"/>



<p class="has-text-align-center has-medium-font-size wp-block-paragraph"><strong>開発オブジェクト・・・</strong><span class="yellowline">SAP標準ではない全ての機能のこと</span></p>



<hr class="wp-block-separator has-css-opacity"/>



<p class="wp-block-paragraph">例えば、SAP標準にない機能をABAPプログラムで追加したとします。すると、その追加したプログラムは「開発オブジェクト」に分類されることになります。</p>



<p class="wp-block-paragraph">また、SAPがあらかじめ用意しているBADIやUser Exitなどを用いて機能を追加（拡張）したものも「SAP標準にない機能」という定義に当てはまるため「開発オブジェクト」の分類に当てはまりまることになります。</p>



<p class="wp-block-paragraph"><span class="yellowline">RICEFとはこの開発オブジェクトをざっくり５つに分類したものである</span>、というをことを念頭に置いて、それぞれの内容を解説します。</p>



<p class="has-small-font-size wp-block-paragraph">※「開発オブジェクト」という言葉は、会社や職場によって異なる使われ方がされていたり、もしくはそもそもあまり使用しない単語である場合もあります。あらかじめご了承ください。</p>



<p class="wp-block-paragraph">それでは、具体的にRICEFそれぞれの特徴を解説していきます。</p>



<h3 class="wp-block-heading">Reports</h3>



<p class="has-text-align-center wp-block-paragraph"><strong>Reportsのポイント</strong></p>



<ul class="wp-block-list">
<li>データの集計・ダウンロードを行う機能グループ（SAPクエリを含める）</li>



<li><strong>データベースの更新は行わない</strong></li>
</ul>



<p class="wp-block-paragraph"><strong>Reports</strong>は日本語に訳せば「報告書」となるとおり、<span class="yellowline">データベースからデータを取得したり編集（データの並び替えや集計）したり、取得したデータを表示したりする機能群</span>です。</p>



<p class="wp-block-paragraph">押さえて起きたいのは、<strong>Reports</strong>はあくまでもデータの取得・編集・表示を行うものであり、<strong>データベースの更新は行わない</strong>という点です。データベースの更新が発生する機能は、後述する<strong>Extensions</strong>に該当します。</p>



<p class="wp-block-paragraph">Reportsは、データベースの更新を行わない（即ちデータを条件に沿って取得してくるだけ）なので、設計・プログラミングが比較的簡単な機能です。</p>



<p class="has-small-font-size wp-block-paragraph"><strong>※「SAPクエリ」を詳しく知りたい方は以下のページをご覧ください。</strong></p>



<figure class="wp-block-embed is-type-wp-embed is-provider-ビズドットオンライン wp-block-embed-ビズドットオンライン"><div class="wp-block-embed__wrapper">

<a href="https://it-biz.online/sap/sap-query/" title="【SAP】クエリ（SAP Query）の作成手順【３分で読めます】" class="blogcard-wrap internal-blogcard-wrap a-wrap cf" target="_blank"><div class="blogcard internal-blogcard ib-left cf"><div class="blogcard-label internal-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail internal-blogcard-thumbnail"><img loading="lazy" decoding="async" width="320" height="180" src="https://it-biz.online/wp-content/uploads/2026/04/featured-p1-1625-sap-query-320x180.png" class="blogcard-thumb-image internal-blogcard-thumb-image wp-post-image" alt="" srcset="https://it-biz.online/wp-content/uploads/2026/04/featured-p1-1625-sap-query-320x180.png 320w, https://it-biz.online/wp-content/uploads/2026/04/featured-p1-1625-sap-query-500x282.png 500w, https://it-biz.online/wp-content/uploads/2026/04/featured-p1-1625-sap-query-800x451.png 800w, https://it-biz.online/wp-content/uploads/2026/04/featured-p1-1625-sap-query-300x169.png 300w, https://it-biz.online/wp-content/uploads/2026/04/featured-p1-1625-sap-query-768x433.png 768w, https://it-biz.online/wp-content/uploads/2026/04/featured-p1-1625-sap-query-240x135.png 240w, https://it-biz.online/wp-content/uploads/2026/04/featured-p1-1625-sap-query-640x360.png 640w, https://it-biz.online/wp-content/uploads/2026/04/featured-p1-1625-sap-query.png 1480w" sizes="(max-width: 320px) 100vw, 320px" /></figure><div class="blogcard-content internal-blogcard-content"><div class="blogcard-title internal-blogcard-title">【SAP】クエリ（SAP Query）の作成手順【３分で読めます】</div><div class="blogcard-snippet internal-blogcard-snippet">SAP Queryとは何か？作成手順を「ユーザグループ」「インフォセット」「クエリ」の順番に画像付きで解説します。初心者でも理解できるよう、できるだけ専門用語を使わずに説明します。</div></div><div class="blogcard-footer internal-blogcard-footer cf"><div class="blogcard-site internal-blogcard-site"><div class="blogcard-favicon internal-blogcard-favicon"><img loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://it-biz.online" alt="" class="blogcard-favicon-image internal-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain internal-blogcard-domain">it-biz.online</div></div><div class="blogcard-date internal-blogcard-date"><div class="blogcard-post-date internal-blogcard-post-date">2026.04.26</div></div></div></div></a>
</div></figure>



<h3 class="wp-block-heading"><strong>Interfaces</strong></h3>



<p class="has-text-align-center wp-block-paragraph"> <strong>Interfacesのポイント</strong> </p>



<ul class="wp-block-list">
<li>外部システムとの連携を行う機能グループ</li>



<li>外部システムからのRFC呼び出し/外部システムのWebService呼び出し</li>
</ul>



<p class="wp-block-paragraph"><strong>Interfaces</strong>には、SAP以外のシステムとのデータ連携機能が含まれます。</p>



<p class="wp-block-paragraph">旅費精算システム（外部システム）から、金額データをSAPに取り込む機能などが該当するイメージです。SAPの対抗システムが増加すればするほど、このInterfacesの機能数が増加します。</p>



<p class="wp-block-paragraph">Interfacesに分類される機能については、異なるシステムとのデータ連携が発生するため、SAP以外のシステム知識がある程度求められるようになります。また、<span class="yellowline">比較的大きめのデータを取り扱うことになるためパフォーマンス観点での設計・プログラミングが必要になってくるため、Reports分類よりも開発難易度が上がります。</span></p>



<h3 class="wp-block-heading"><strong>Conversions</strong></h3>



<p class="has-text-align-center wp-block-paragraph"><strong>Conversionsのポイント</strong>  </p>



<ul class="wp-block-list">
<li>主にデータ移行用に用いられる機能グループ</li>



<li>Excel(VBA)などのツール群も該当する</li>
</ul>



<p class="wp-block-paragraph"><strong>Conversions</strong>には、既存システムから新規システムに移行する場合のデータ移行機能が含まれます。したがって基本的には、導入前に一番活躍するのがConversionsに分類される機能群です。</p>



<p class="wp-block-paragraph">Conversionは日本語で「変換」の意味となります。その名の通りデータ変換を行う機能が中心ですが、データを一括でアップロード（バッチインプット）する機能もこの分類に含まれます。</p>



<h3 class="wp-block-heading"><strong>Extensi</strong>ons(Enhancements)</h3>



<p class="has-text-align-center wp-block-paragraph"> <strong>Extensionsのポイント</strong></p>



<ul class="wp-block-list">
<li>データ更新を伴う処理を実行する機能グループ</li>



<li>SAP標準機能の拡張や、テーブルへの項目追加なども該当する</li>
</ul>



<p class="wp-block-paragraph"><strong>Extensions</strong>は、データベースの更新を行う機能と、ExitやBADIなどのSAP標準の拡張機能を利用してアドオンする機能全般が含まれます。</p>



<p class="wp-block-paragraph">単純なReportよりも圧倒的に開発の難易度が上がります。データベースの更新が含まれるため、<a href="https://it-biz.online/sap/sap-luw/">LUW</a>の観点が必要になること、ExitやBADIに代表されるABAPだけではなくSAP独自の仕組みに対する理解が必要となってくることが主な理由です。</p>



<p class="wp-block-paragraph">プロジェクトが炎上する場合、大体の原因がこのExtensions分類です。熟練の開発者/SAPエンジニアをこれらの機能開発に割り当てる必要があるといえます。</p>



<h3 class="wp-block-heading">Forms</h3>



<p class="has-text-align-center wp-block-paragraph"><strong>Formsのポイント</strong> </p>



<ul class="wp-block-list">
<li>帳票を作成する機能グループ</li>
</ul>



<p class="wp-block-paragraph">Formsは帳票系の機能を指します。SmartformsやSVF関連の機能がこれに該当します。</p>



<p class="wp-block-paragraph">特に日本では、帳票文化が未だ根強いためこの分類に該当する機能数が多くなる傾向にあります。</p>



<h2 class="wp-block-heading">RICEFを何に利用するか？</h2>



<figure class="wp-block-image aligncenter"><img loading="lazy" decoding="async" width="1024" height="682" src="https://it-biz.online/wp-content/uploads/2019/11/why-1024x682.jpg" alt="" class="wp-image-2435" srcset="https://it-biz.online/wp-content/uploads/2019/11/why-1024x682.jpg 1024w, https://it-biz.online/wp-content/uploads/2019/11/why-300x200.jpg 300w, https://it-biz.online/wp-content/uploads/2019/11/why-500x333.jpg 500w, https://it-biz.online/wp-content/uploads/2019/11/why-768x512.jpg 768w, https://it-biz.online/wp-content/uploads/2019/11/why-800x533.jpg 800w, https://it-biz.online/wp-content/uploads/2019/11/why-304x203.jpg 304w, https://it-biz.online/wp-content/uploads/2019/11/why-237x158.jpg 237w, https://it-biz.online/wp-content/uploads/2019/11/why.jpg 1280w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p class="wp-block-paragraph">この章では、RICEFのそもそも論―。「何のために分類しているか？」について整理しておきたいと思います。</p>



<h3 class="wp-block-heading">開発工数見積の精緻化</h3>



<p class="wp-block-paragraph">RICEFの分類を行うことで得られるメリットの第１は<span class="yellowline">開発工数の見積もり精緻化に役立つ</span>ということです。Report１本の開発工数と、Forms１本の開発工数は微妙に（時には非常に）異なるので、RICEF単位で見積もりをしたほうがより精度の高い予想開発工数が算出できるでしょう。</p>



<p class="wp-block-paragraph">プロジェクト開始時点である程度の開発工数を予測する際に、RICEFという視点が役に立ちます。</p>



<h3 class="wp-block-heading">開発体制の計画</h3>



<p class="wp-block-paragraph">メリットの２つ目は、チームメンバーの配置・役割分担の基準となる点です。ABAPerといえど、帳票系が得意なメンバーもいればExitやBADIに詳しいメンバーなど十人十色です。</p>



<p class="wp-block-paragraph">もし、あなたがプロジェクトリーダーだとすれば、アドオン機能ごとにチームを構成する際に、RICEFを基準にすることができるでしょう。</p>



<p class="has-text-align-center wp-block-paragraph">RICEFの分類を行うメリット</p>



<ul class="wp-block-list">
<li>開発工数の見積を精緻化することができる</li>



<li>開発チームの役割分担の指標となる</li>
</ul>



<h2 class="wp-block-heading">RICEFの分類方法</h2>



<p class="wp-block-paragraph">RICEFを分類・特定するには、以下の基準を用います。</p>



<figure class="wp-block-image aligncenter size-large"><img loading="lazy" decoding="async" width="839" height="409" src="https://it-biz.online/wp-content/uploads/2019/11/image-66.png" alt="RICEFの分類方法" class="wp-image-2644" srcset="https://it-biz.online/wp-content/uploads/2019/11/image-66.png 839w, https://it-biz.online/wp-content/uploads/2019/11/image-66-300x146.png 300w, https://it-biz.online/wp-content/uploads/2019/11/image-66-500x244.png 500w, https://it-biz.online/wp-content/uploads/2019/11/image-66-768x374.png 768w, https://it-biz.online/wp-content/uploads/2019/11/image-66-800x390.png 800w, https://it-biz.online/wp-content/uploads/2019/11/image-66-304x148.png 304w" sizes="(max-width: 839px) 100vw, 839px" /><figcaption class="wp-element-caption">RICEF分類方法</figcaption></figure>



<p class="wp-block-paragraph">困ったら、是非このページを活用していただければと思います。これでRICEFの解説は終了です。</p>



<p class="wp-block-paragraph"><p><!-- wp:cocoon-blocks/balloon-ex-box-1 {"id":"1","icon":"https://it-biz.online/wp-content/uploads/2023/06/man.png"} --></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" class="speech-icon-image" src="https://it-biz.online/wp-content/uploads/2023/06/man.png" alt="" /></figure>
<div class="speech-name"></div>
</div>
<div class="speech-balloon">
<p><!-- wp:paragraph --></p>
<p>初めてABAPを勉強するのは結構難しいですよね。</p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph --></p>
<p>でもその悩みを抱えているのは一人じゃありません。全てのABAP使いが同じ道を進んできました。</p>
<p><!-- /wp:paragraph --></p>
</div>
</div>
<p><!-- /wp:cocoon-blocks/balloon-ex-box-1 --></p>
<p><!-- wp:paragraph --></p>
<p>ABAPをはじめとするプログラミングスキルを武器に、<strong><span class="marker-under">時間と場所に捉われない自由な生き方</span></strong>を目指してみませんか？</p>
<div class="good-box common-icon-box">
<div class="speech-wrap sb-id-1 sbs-stn sbp-l sbis-cb cf">
<div class="speech-person">
<figure class="speech-icon"><img loading="lazy" decoding="async" class="speech-icon-image" src="https://it-biz.online/wp-content/uploads/2023/06/man.png" alt="" width="385" height="424" /></figure>
</div>
<div class="speech-balloon">
<p><strong>あなたの技術、もっと価値ある場所で活かしませんか？<br />
<span style="font-size: 20px;"><span style="color: #ff6600;">SAPエンジニア</span>のキャリア支援はこちらから↓</span></strong></p>
</div>
</div>
<p><strong><span class="badge">No.1　&gt;</span>　<span style="font-size: 18px;"><a rel="nofollow" href="//af.moshimo.com/af/c/click?a_id=2296865&amp;p_id=2502&amp;pc_id=5511&amp;pl_id=32341">外資系・IT業界などハイクラスの転職なら【アクシスコンサルティング】</a></span></strong><span class="marker-under"><strong><span style="font-size: 18px;"><img loading="lazy" decoding="async" style="border: none;" src="//i.moshimo.com/af/i/impression?a_id=2296865&amp;p_id=2502&amp;pc_id=5511&amp;pl_id=32341" width="1" height="1" /></span><br />
</strong></span>4人に1人のコンサルタントが選ぶパートナー！<br />
ビッグ4やアクセンチュアへの転職を実現し<span class="marker-under"><strong>年収1000万</strong></span>へ。</p>
<p><span style="font-size: 18px;"><strong><span class="badge">No.2　&gt;</span>　<a rel="nofollow" href="//af.moshimo.com/af/c/click?a_id=1995891&amp;p_id=969&amp;pc_id=1263&amp;pl_id=13840">IT・Web転職特化エージェント【レバテックキャリア</a><a rel="nofollow" href="//af.moshimo.com/af/c/click?a_id=1995891&amp;p_id=969&amp;pc_id=1263&amp;pl_id=13840">】</a></strong></span><span style="font-size: 18px;"><strong><img loading="lazy" decoding="async" style="border: none;" src="//i.moshimo.com/af/i/impression?a_id=1995891&amp;p_id=969&amp;pc_id=1263&amp;pl_id=13840" width="1" height="1" /><br />
<img loading="lazy" decoding="async" style="border: none;" src="//i.moshimo.com/af/i/impression?a_id=3134186&amp;p_id=3878&amp;pc_id=9624&amp;pl_id=53722" width="1" height="1" /></strong><span style="font-size: 16px;">サービス利用者数<strong>20万人</strong>突破。</span></span><span style="font-size: 18px;"><span style="font-size: 16px;"><br />
平均<strong>年収アップ率77%</strong>であなたの転職成功を保証します。</span></span></p>
<p><span style="font-size: 18px;"><strong><span class="badge">No.3　&gt;</span>　</strong></span><span style="font-size: 18px;"><strong><img loading="lazy" decoding="async" style="border: none;" src="//i.moshimo.com/af/i/impression?a_id=1995891&amp;p_id=969&amp;pc_id=1263&amp;pl_id=13840" width="1" height="1" /><a rel="nofollow" href="//af.moshimo.com/af/c/click?a_id=3134203&amp;p_id=3802&amp;pc_id=9376&amp;pl_id=52943">リクルートエージェント</a><br />
<img loading="lazy" decoding="async" style="border: none;" src="//i.moshimo.com/af/i/impression?a_id=3134186&amp;p_id=3878&amp;pc_id=9624&amp;pl_id=53722" width="1" height="1" /></strong><span style="font-size: 16px;">＼転職支援実績NO.1／</span></span><span style="font-size: 18px;"><span style="font-size: 16px;"><br />
応募が殺到しすぎるが故に・・・非公開にせざるを得ない魅力的な求人が多数！<br />
</span></span></p>
</div>

<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph {"align":"center"} --></p>
<p class="has-text-align-center" style="text-align: center;"><span class="badge-green">読者料典</span>　<a href="https://it-biz.online/sap/abap-abc/">【完全無料】ABAP：学習カリキュラム</a>　←こちらから！</p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph --></p>
<p><!-- /wp:paragraph --></p>
</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>【SAP】原価センタとは？１分でざっくり解説</title>
		<link>https://it-biz.online/sap/cost-center/</link>
		
		<dc:creator><![CDATA[ビズドットオンライン]]></dc:creator>
		<pubDate>Mon, 29 Jul 2019 13:01:51 +0000</pubDate>
				<category><![CDATA[SAP]]></category>
		<guid isPermaLink="false">https://it-biz.online/?p=1684</guid>

					<description><![CDATA[このページではFI（財務会計）とCO（管理会計）の両モジュールで重要な役割を果たす「原価センタ」について解説します。 原価センタを一言で言えば「組織内のどこで原価が発生しているか」を把握するために用いられる「組織設定」の [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p class="wp-block-paragraph">このページではFI（財務会計）とCO（管理会計）の両モジュールで重要な役割を果たす「原価センタ」について解説します。</p>



<p class="wp-block-paragraph">原価センタを一言で言えば<strong><span class="marker-under">「組織内のどこで原価が発生しているか」を把握するために用いられる「組織設定」の一つ</span></strong>です。</p>



<p class="wp-block-paragraph">このページでは、基本的な概念、設定方法や注意点について解説し、ざっくり原価センタがなにものであるかをざっくり理解できるように説明していきます。</p>



<div class="wp-block-cocoon-blocks-label-box-1 label-box block-box"><div class="label-box-label block-box-label box-label"><span class="label-box-label-text block-box-label-text box-label-text">このページで学べる内容</span></div><div class="label-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">SAP初心者の方であれば必見の内容ばかりです。是非最後までご覧ください。</p>



<h2 class="wp-block-heading">前提：管理会計・COとは？</h2>



<p class="wp-block-paragraph">管理会計とは<strong>社内向けに費用・収益の分析をすること</strong>です。</p>



<p class="wp-block-paragraph">財務会計も管理会計も、お金の流れを管理するという点では同一ですが、 FIの最終ゴールが「<strong>財務諸表の作成</strong>」、すなわち社外向けの報告であるのに対し、COのゴールは<strong>社内向けのレポート</strong>であるという点で異なります。</p>



<hr class="wp-block-separator"/>



<p class="wp-block-paragraph"><strong>CO（管理会計）⇒　費用・収益の分析　⇒　<span style="color:#ea5506" class="color">社内</span>向け</strong></p>



<p class="wp-block-paragraph"><strong>FI （財務会計）⇒　財務諸表の作成　　⇒　<span style="color:#ea5506" class="color">社外</span>向け</strong></p>



<hr class="wp-block-separator"/>



<p class="wp-block-paragraph">FIモジュールは、財務諸表の作成をゴールを目的としているため、組織設定も財務諸表を作成する単位で行えばOK。</p>



<p class="wp-block-paragraph">ですが、管理会計では、会社内部向けに分析を行う必要があることから、財務諸表よりも細かい粒度（例：経理部門、〇〇プロジェクト）で組織を設定する必要があります。</p>



<p class="wp-block-paragraph"><strong>この管理会計上における組織設定の１つが原価センタです。</strong></p>



<div class="wp-block-cocoon-blocks-label-box-1 label-box block-box"><div class="label-box-label block-box-label box-label"><span class="label-box-label-text block-box-label-text box-label-text">ざっくりCOモジュールの概要を知りたい方は</span></div><div class="label-box-content block-box-content box-content">
<p class="wp-block-paragraph">COモジュールの概要をザックリと解説しています。CO-OM、CO-PAなどの言葉にピンとこない方は是非こちらの記事に寄り道してみてください。</p>



<figure class="wp-block-embed-wordpress wp-block-embed is-type-wp-embed is-provider-ビズドットオンライン"><div class="wp-block-embed__wrapper">

<a href="https://it-biz.online/sap/co-introduction/" title="【SAP】COとは？管理会計とは？初心者向けに３分でわかりやすく解説" class="blogcard-wrap internal-blogcard-wrap a-wrap cf" target="_blank"><div class="blogcard internal-blogcard ib-left cf"><div class="blogcard-label internal-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail internal-blogcard-thumbnail"><img loading="lazy" decoding="async" width="320" height="180" src="https://it-biz.online/wp-content/uploads/2019/03/co-320x180.png" class="blogcard-thumb-image internal-blogcard-thumb-image wp-post-image" alt="" srcset="https://it-biz.online/wp-content/uploads/2019/03/co-320x180.png 320w, https://it-biz.online/wp-content/uploads/2019/03/co-240x135.png 240w, https://it-biz.online/wp-content/uploads/2019/03/co-640x360.png 640w" sizes="(max-width: 320px) 100vw, 320px" /></figure><div class="blogcard-content internal-blogcard-content"><div class="blogcard-title internal-blogcard-title">【SAP】COとは？管理会計とは？初心者向けに３分でわかりやすく解説</div><div class="blogcard-snippet internal-blogcard-snippet">【IT初心者向け】SAPのCOモジュールの主要機能をざっくり解説。そもそも管理会計とは何か？CO-OM、CO-PC、CO-OMって何？間接費、直接費って何？そんな疑問にお答えします。SAP初心者の方は特に必見です。</div></div><div class="blogcard-footer internal-blogcard-footer cf"><div class="blogcard-site internal-blogcard-site"><div class="blogcard-favicon internal-blogcard-favicon"><img loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://it-biz.online" alt="" class="blogcard-favicon-image internal-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain internal-blogcard-domain">it-biz.online</div></div><div class="blogcard-date internal-blogcard-date"><div class="blogcard-post-date internal-blogcard-post-date">2023.07.20</div></div></div></div></a>
</div></figure>
</div></div>



<h2 class="wp-block-heading">原価センタとは？</h2>



<p class="wp-block-paragraph">原価センタは「<strong><span class="marker-under">会社内のどこで費用が発生するかを把握するため</span>」</strong>に用いる組織単位です。</p>



<p class="wp-block-paragraph">会社コードが「財務諸表出力」の単位、つまり法人単位で１つ設定するのに対し、原価センタは会社内における<strong>原価管理の最小単位の部署ごと</strong>に設定されます。</p>



<p class="wp-block-paragraph">原価管理の最小単位―。</p>



<p class="wp-block-paragraph">つまり<strong><span class="marker-under">これ以上分解できない単位</span></strong>で原価センタは設定されることが基本となります。</p>



<p class="wp-block-paragraph">「営業部門」という部単位で原価センタを登録するのか、「営業部門」配下の「営業1課」という課単位で設定するのか。</p>



<p class="wp-block-paragraph">これは企業の管理方針によるのでどちらでもOK。</p>



<p class="wp-block-paragraph">もし「課」単位で原価管理を行いたい、ということであれば原価センタは課単位で設定することになりますし、いやいや「部」単位で良いということであれば「部」単位で設定します。</p>



<p class="wp-block-paragraph">各企業ごとの原価センタ設定方針により原価センタ体系がバラバラとなるのが分かりづらくなってしまうポイントですが、システム的な観点から原価センタの役割について丁寧に整理できれば決して難しくはありません。</p>



<p class="wp-block-paragraph">以下は原価センタのシステム的な位置づけを整理したものです。</p>



<div class="wp-block-image"><figure class="aligncenter"><img loading="lazy" decoding="async" width="784" height="331" src="https://it-biz.online/wp-content/uploads/2019/07/ea8a23b1b86eb2007ceefb627a8680c5-1.png" alt="" class="wp-image-1691" srcset="https://it-biz.online/wp-content/uploads/2019/07/ea8a23b1b86eb2007ceefb627a8680c5-1.png 784w, https://it-biz.online/wp-content/uploads/2019/07/ea8a23b1b86eb2007ceefb627a8680c5-1-300x127.png 300w, https://it-biz.online/wp-content/uploads/2019/07/ea8a23b1b86eb2007ceefb627a8680c5-1-500x211.png 500w, https://it-biz.online/wp-content/uploads/2019/07/ea8a23b1b86eb2007ceefb627a8680c5-1-768x324.png 768w, https://it-biz.online/wp-content/uploads/2019/07/ea8a23b1b86eb2007ceefb627a8680c5-1-304x128.png 304w" sizes="(max-width: 784px) 100vw, 784px" /></figure></div>



<p class="wp-block-paragraph">原価センタは会社コードごとに定義されます。</p>



<p class="wp-block-paragraph">上記例では、経理部門・製造部門・人事部門では部門単位で原価センタを設定していますが、営業部門だけは更に細かく「営業1課から営業4課」と1階層深い単位で設定しています。</p>



<p class="wp-block-paragraph">先ほど、言った通りこれは一例ですので、必ずしも営業部門の下に営業1課から営業4課までを設定する必要性はありません、</p>



<p class="wp-block-paragraph">要はその会社が<strong>どこまで分析したいのか</strong>次第です。</p>



<p class="wp-block-paragraph">きっとこの例にあげた株式会社は、営業部門で計上されるコストを注視しており、なんとか営業費用を削減できないか、ということに心を砕いているのだろうと推察されます。</p>



<div class="wp-block-cocoon-blocks-label-box-1 label-box block-box"><div class="label-box-label block-box-label box-label fab-info-circle"><span class="label-box-label-text block-box-label-text box-label-text">コストセンタ？</span></div><div class="label-box-content block-box-content box-content">
<p class="wp-block-paragraph">原価センタは、「<strong>コストセンタ</strong>」「<strong>コストセンター</strong>」とも呼ばれます。</p>



<p class="wp-block-paragraph">意味は全く同じですので、適宜現場で利用される言葉に合わせて使いましょう。</p>
</div></div>



<h2 class="wp-block-heading">原価センタと原価センタグループ</h2>



<p class="wp-block-paragraph">原価センタグループとは、<strong><span class="marker-under">原価センタを一つにまとめてグルーピングしたもの</span></strong>を言います。</p>



<p class="wp-block-paragraph">先ほどの図で言えば、営業部門が「<strong>原価センタグループ</strong>」であり、それ以外（営業1課～営業4課・経理部門・製造部門・人事部門）が「<strong>原価センタ</strong>」です。</p>



<p class="wp-block-paragraph">理解しやすいように更に別の図を用意しました。以下の図は、原価センタと原価センタグループが分かりやすく整理されています。</p>



<div class="wp-block-image"><figure class="aligncenter"><img loading="lazy" decoding="async" width="432" height="278" src="https://it-biz.online/wp-content/uploads/2019/07/034a80b43d0459a0f969e1e04258b8f4.png" alt="" class="wp-image-1701" srcset="https://it-biz.online/wp-content/uploads/2019/07/034a80b43d0459a0f969e1e04258b8f4.png 432w, https://it-biz.online/wp-content/uploads/2019/07/034a80b43d0459a0f969e1e04258b8f4-300x193.png 300w, https://it-biz.online/wp-content/uploads/2019/07/034a80b43d0459a0f969e1e04258b8f4-304x196.png 304w, https://it-biz.online/wp-content/uploads/2019/07/034a80b43d0459a0f969e1e04258b8f4-246x158.png 246w" sizes="(max-width: 432px) 100vw, 432px" /></figure></div>



<p class="wp-block-paragraph">つまり、費用計上をするのは原価センタであり、それをまとめてグルーピングしたもの（レポートの集計単位）が原価センタグループとなります。</p>



<p class="wp-block-paragraph">費用の計上先はあくまでも、「原価センタ」です。原価センタグループは<strong>原価センタをまとめてレポーティングする</strong>単位であるということを理解しましょう。初めに「原価センタは<strong>費用の発生元</strong>を特定するために設定する」と説明した意図はここにあります。</p>



<p class="wp-block-paragraph">原価センタと原価センタグループの違いは明確に分別できるようにしておきましょう。</p>



<h2 class="wp-block-heading">原価センタ―標準階層設定</h2>



<p class="wp-block-paragraph">原価センタを登録する前に、原価センタの階層関係を定義する必要があります。</p>



<p class="wp-block-paragraph">階層は複数設定できるのですが、最も基本となる最初の階層をしないと<strong>原価センタの登録自体ができません。</strong>（<small>原価センタは、必ず１つの階層に紐づきます。</small>）</p>



<p class="wp-block-paragraph"><strong><span class="marker-under">この最も基本となる階層定義を「標準階層」と呼びます。</span></strong></p>



<p class="wp-block-paragraph">原価センタの登録前には「標準階層」の登録が必要となります。</p>



<p class="wp-block-paragraph">ちなみに、標準階層を登録せずに原価センタを登録しようとすると以下画面のようにエラーが出ます。</p>



<div class="wp-block-image"><figure class="aligncenter is-resized"><img loading="lazy" decoding="async" src="https://it-biz.online/wp-content/uploads/2019/07/d984fc8ebd24e4ffdbe7fcc3b7a32ec8.png" alt="" class="wp-image-1692" width="385" height="438" srcset="https://it-biz.online/wp-content/uploads/2019/07/d984fc8ebd24e4ffdbe7fcc3b7a32ec8.png 645w, https://it-biz.online/wp-content/uploads/2019/07/d984fc8ebd24e4ffdbe7fcc3b7a32ec8-300x342.png 300w, https://it-biz.online/wp-content/uploads/2019/07/d984fc8ebd24e4ffdbe7fcc3b7a32ec8-263x300.png 263w, https://it-biz.online/wp-content/uploads/2019/07/d984fc8ebd24e4ffdbe7fcc3b7a32ec8-188x214.png 188w, https://it-biz.online/wp-content/uploads/2019/07/d984fc8ebd24e4ffdbe7fcc3b7a32ec8-138x158.png 138w" sizes="(max-width: 385px) 100vw, 385px" /></figure></div>



<h3 class="wp-block-heading">標準階層設定：KSH1</h3>



<p class="wp-block-paragraph">標準階層は「トランザクションコード：KSH1」で登録します。</p>



<p class="has-small-font-size wp-block-paragraph">※変更は KSH2、照会は KSH3 で行います。</p>



<p class="wp-block-paragraph">財務諸表バージョンの登録と同様に階層を定義していくだけの簡単なお仕事です。</p>



<h2 class="wp-block-heading">原価センタ登録方法：KS01</h2>



<p class="wp-block-paragraph">原価センタの登録はトランザクションコード：<strong>KS01</strong>で行います。</p>



<p class="wp-block-paragraph">ここでは必須項目の値について解説します。</p>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="702" height="461" src="https://it-biz.online/wp-content/uploads/2019/07/ks01-1-e1564400067945.png" alt="" class="wp-image-1694" srcset="https://it-biz.online/wp-content/uploads/2019/07/ks01-1-e1564400067945.png 702w, https://it-biz.online/wp-content/uploads/2019/07/ks01-1-e1564400067945-300x197.png 300w, https://it-biz.online/wp-content/uploads/2019/07/ks01-1-e1564400067945-500x328.png 500w, https://it-biz.online/wp-content/uploads/2019/07/ks01-1-e1564400067945-304x200.png 304w, https://it-biz.online/wp-content/uploads/2019/07/ks01-1-e1564400067945-241x158.png 241w" sizes="(max-width: 702px) 100vw, 702px" /></figure>



<h3 class="wp-block-heading">原価センタ：名称</h3>



<p class="wp-block-paragraph">原価センタの名称を設定します。エンドユーザが原価センタを識別する際にここで設定した名称が利用されます。</p>



<p class="wp-block-paragraph">そのため通常は部門名称など、分かりやすい名称を設定します。</p>



<p class="wp-block-paragraph"><span style="text-decoration: underline;"><strong>原価センタは物理削除ができない</strong></span>ため、原価センタ廃止の際、名称の先頭に「【廃止】」や「【使用不可】」などを設定してユーザに使用不可の旨がわかるように運用する場合もあります。</p>



<h3 class="wp-block-heading">原価センタ：責任者</h3>



<p class="wp-block-paragraph">システム的にほぼ意味はない、と推測しています。（断言はできませんが・・・）</p>



<p class="wp-block-paragraph">別にユーザIDを割り当てなければいけないということはなく、テキストで適当に登録しておけばOKです。</p>



<p class="wp-block-paragraph">ある企業では当該部門の部長名を設定していましたし、ある企業はシステム登録者（保守作業を行ったユーザ）を設定していました。</p>



<p class="wp-block-paragraph">いずれにせよ、どのように運用していくか次第の項目と言えます。</p>



<h3 class="wp-block-heading">原価センタカテゴリ</h3>



<p class="wp-block-paragraph">原価センタを束ねる上位概念です。</p>



<p class="wp-block-paragraph">どのような働きをするのか、という単位でまとめることもありますし、部門単位でまとめることもあります。</p>



<p class="wp-block-paragraph">事前にSAP標準で定義されているカテゴリもありますが、ユーザ定義も可能です。</p>



<h3 class="wp-block-heading">階層エリア</h3>



<p class="wp-block-paragraph">どの階層に属するかを設定します。</p>



<p class="wp-block-paragraph">どこの階層に紐づくのか。先の例で言えば、標準階層を設定します。</p>



<p class="wp-block-paragraph">階層はレポート体系や原価管理方針に沿って階層関係が複数設定されるため、ここでどの階層に属するのかを定義することになります。</p>



<h2 class="wp-block-heading">SAPをより詳しく知りたい方は</h2>



<p class="wp-block-paragraph">SAPの全体像を詳しく知りたい方や、SAPってそもそも何？どんなことができるの？という疑問のお持ちの方は以下のページをご覧ください。</p>



<figure class="wp-block-embed-wordpress wp-block-embed is-type-wp-embed is-provider-ビズドットオンライン"><div class="wp-block-embed__wrapper">

<a href="https://it-biz.online/sap/overview/" title="SAPとは何か：IT初心者向けにわかりやすく【３分ぐらいで読めます】" class="blogcard-wrap internal-blogcard-wrap a-wrap cf" target="_blank"><div class="blogcard internal-blogcard ib-left cf"><div class="blogcard-label internal-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail internal-blogcard-thumbnail"><img loading="lazy" decoding="async" width="320" height="180" src="https://it-biz.online/wp-content/uploads/2019/07/What_is_SAP-320x180.png" class="blogcard-thumb-image internal-blogcard-thumb-image wp-post-image" alt="" srcset="https://it-biz.online/wp-content/uploads/2019/07/What_is_SAP-320x180.png 320w, https://it-biz.online/wp-content/uploads/2019/07/What_is_SAP-240x135.png 240w, https://it-biz.online/wp-content/uploads/2019/07/What_is_SAP-640x360.png 640w" sizes="(max-width: 320px) 100vw, 320px" /></figure><div class="blogcard-content internal-blogcard-content"><div class="blogcard-title internal-blogcard-title">SAPとは何か：IT初心者向けにわかりやすく【３分ぐらいで読めます】</div><div class="blogcard-snippet internal-blogcard-snippet">【図解】SAPとは何か？SAPはどんなシステムで何ができる？SAPという単語を初めて聞いたIT初心者向けにわかりやすく解説します。→SAPエンジニアを目指そうと考えている方は必見です！</div></div><div class="blogcard-footer internal-blogcard-footer cf"><div class="blogcard-site internal-blogcard-site"><div class="blogcard-favicon internal-blogcard-favicon"><img loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://it-biz.online" alt="" class="blogcard-favicon-image internal-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain internal-blogcard-domain">it-biz.online</div></div><div class="blogcard-date internal-blogcard-date"><div class="blogcard-post-date internal-blogcard-post-date">2024.01.29</div></div></div></div></a>
</div></figure>



<p class="wp-block-paragraph"></p>
]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
