<?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>エディタ設定 | Seek Rise</title>
	<atom:link href="https://seek-rise.com/tag/%E3%82%A8%E3%83%87%E3%82%A3%E3%82%BF%E8%A8%AD%E5%AE%9A/feed/" rel="self" type="application/rss+xml" />
	<link>https://seek-rise.com</link>
	<description></description>
	<lastBuildDate>Tue, 17 Mar 2026 14:56:24 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9.4</generator>

<image>
	<url>https://seek-rise.com/wp-content/uploads/2019/10/cropped-favicon-32x32.png</url>
	<title>エディタ設定 | Seek Rise</title>
	<link>https://seek-rise.com</link>
	<width>32</width>
	<height>32</height>
</image> 
<atom:link rel="hub" href="https://pubsubhubbub.appspot.com"/><atom:link rel="hub" href="https://pubsubhubbub.superfeedr.com"/><atom:link rel="hub" href="https://websubhub.com/hub"/><site xmlns="com-wordpress:feed-additions:1">167377966</site>	<item>
		<title>2-2 開発環境構築の全体像と流れ</title>
		<link>https://seek-rise.com/web-development/setup/post-251/</link>
					<comments>https://seek-rise.com/web-development/setup/post-251/#respond</comments>
		
		<dc:creator><![CDATA[NOA（ノア）]]></dc:creator>
		<pubDate>Sun, 14 Dec 2025 17:15:23 +0000</pubDate>
				<category><![CDATA[Web開発学習ロードマップ]]></category>
		<category><![CDATA[2.開発環境構築]]></category>
		<category><![CDATA[VSCode]]></category>
		<category><![CDATA[PhpStorm]]></category>
		<category><![CDATA[エディタ設定]]></category>
		<guid isPermaLink="false">https://seek-rise.com/?p=251</guid>

					<description><![CDATA[前の記事では、開発環境とは何か、なぜ必要なのか を整理しました。 ここからは、実際に環境構築に入っていきますが、その前に 必ず理解しておいてほしいこと があります。 それは、 「これから何を、どんな順番で準備していくのか [&#8230;]]]></description>
										<content:encoded><![CDATA[<p data-start="247" data-end="286">前の記事では、<br data-start="254" data-end="257" /><strong data-start="257" data-end="277">開発環境とは何か、なぜ必要なのか</strong> を整理しました。</p>
<p data-start="288" data-end="347">ここからは、<br data-start="294" data-end="297" />実際に環境構築に入っていきますが、<br data-start="314" data-end="317" />その前に <strong data-start="322" data-end="340">必ず理解しておいてほしいこと</strong> があります。</p>
<p data-start="349" data-end="353">それは、</p>
<p data-start="355" data-end="378">「これから何を、どんな順番で準備していくのか」</p>
<p data-start="380" data-end="395">という <strong data-start="384" data-end="391">全体像</strong> です。</p>
<p data-start="397" data-end="413">この全体像を知らないまま進むと、</p>
<p data-start="415" data-end="468">・今どの作業をしているのか分からない<br data-start="433" data-end="436" />・エラーが出たときに戻れない<br data-start="450" data-end="453" />・用語だけが増えて混乱する</p>
<p data-start="470" data-end="483">という状態になりがちです。</p>
<p data-start="485" data-end="523">この記事では、<br data-start="492" data-end="495" /><strong data-start="495" data-end="518">開発環境構築の流れを“地図”として整理</strong> します。</p>
<hr data-start="525" data-end="528" />

  <div id="toc" class="toc tnt-number toc-center tnt-number border-element"><input type="checkbox" class="toc-checkbox" id="toc-checkbox-2" checked><label class="toc-title" for="toc-checkbox-2">目次</label>
    <div class="toc-content">
    <ol class="toc-list open"><li><a href="#toc1" tabindex="0">この記事で学べること</a></li><li><a href="#toc2" tabindex="0">開発環境構築のゴールを確認する</a></li><li><a href="#toc3" tabindex="0">開発環境に必要な構成要素（再整理）</a></li><li><a href="#toc4" tabindex="0">なぜまとめてインストールするのか</a></li><li><a href="#toc5" tabindex="0">開発環境構築の全体の流れ</a><ol><li><a href="#toc6" tabindex="0">ステップ① 環境構築ツールを用意する</a></li><li><a href="#toc7" tabindex="0">ステップ② サーバーを起動する</a></li><li><a href="#toc8" tabindex="0">ステップ③ PHPが動くか確認する</a></li><li><a href="#toc9" tabindex="0">ステップ④ ブラウザで確認・デバッグする</a></li></ol></li><li><a href="#toc10" tabindex="0">この流れを飛ばしてはいけない理由</a></li><li><a href="#toc11" tabindex="0">2章の各記事の役割</a></li><li><a href="#toc12" tabindex="0">なぜMacとWindowsで分けているのか</a></li><li><a href="#toc13" tabindex="0">この章を終えた後の姿をイメージする</a></li><li><a href="#toc14" tabindex="0">まとめ</a></li><li><a href="#toc15" tabindex="0">次に読むべき記事</a></li></ol>
    </div>
  </div>

<h2 data-section-id="189k5z7" data-start="530" data-end="543"><span id="toc1">この記事で学べること</span></h2>
<p data-start="545" data-end="602">・開発環境構築の全体の流れ<br data-start="558" data-end="561" />・何をインストールするのか<br data-start="574" data-end="577" />・それぞれの役割<br data-start="585" data-end="588" />・この後の記事の位置づけ</p>
<hr data-start="604" data-end="607" />
<h2 data-section-id="5447gf" data-start="609" data-end="627"><span id="toc2">開発環境構築のゴールを確認する</span></h2>
<p data-start="629" data-end="649">まず、<br data-start="632" data-end="635" />2章のゴールを明確にします。</p>
<p data-start="651" data-end="679">2章を終えた時点で、<br data-start="661" data-end="664" />次の状態になることが目標です。</p>
<p data-start="681" data-end="753">・PHPファイルを作成できる<br data-start="695" data-end="698" />・ブラウザからアクセスできる<br data-start="712" data-end="715" />・PHPが実行されて結果が表示される<br data-start="733" data-end="736" />・エラーが出たときに確認できる</p>
<p data-start="755" data-end="779">この状態を作るために、<br data-start="766" data-end="769" />環境構築を行います。</p>
<hr data-start="781" data-end="784" />
<h2 data-section-id="q6gsdi" data-start="786" data-end="806"><span id="toc3">開発環境に必要な構成要素（再整理）</span></h2>
<p data-start="808" data-end="835">PHPの開発環境は、<br data-start="818" data-end="821" />次の要素で構成されています。</p>
<p data-start="837" data-end="869">・Webサーバー<br data-start="845" data-end="848" />　→ ブラウザからのアクセスを受け取る</p>
<p data-start="871" data-end="893">・PHP<br data-start="875" data-end="878" />　→ プログラムを実行する</p>
<p data-start="895" data-end="926">・データベース<br data-start="902" data-end="905" />　→ データを保存する（後の章で使用）</p>
<p data-start="928" data-end="953">これらが連携して、<br data-start="937" data-end="940" />1つの開発環境になります。</p>
<hr data-start="955" data-end="958" />
<h2 data-section-id="u99ikk" data-start="960" data-end="979"><span id="toc4">なぜまとめてインストールするのか</span></h2>
<p data-start="981" data-end="989">初心者のうちは、</p>
<p data-start="991" data-end="1019">「Webサーバー」<br data-start="1000" data-end="1003" />「PHP」<br data-start="1008" data-end="1011" />「データベース」</p>
<p data-start="1021" data-end="1044">を、<br data-start="1023" data-end="1026" />1つずつ個別に用意するのは大変です。</p>
<p data-start="1046" data-end="1051">そのため、</p>
<p data-start="1053" data-end="1069">・MAMP<br data-start="1058" data-end="1061" />・XAMPP</p>
<p data-start="1071" data-end="1103">といった、<br data-start="1076" data-end="1079" /><strong data-start="1079" data-end="1096">必要なものをまとめたツール</strong> を使います。</p>
<p data-start="1105" data-end="1111">これにより、</p>
<p data-start="1113" data-end="1146">・設定ミスが減る<br data-start="1121" data-end="1124" />・すぐに動かせる<br data-start="1132" data-end="1135" />・学習に集中できる</p>
<p data-start="1148" data-end="1161">というメリットがあります。</p>
<hr data-start="1163" data-end="1166" />
<h2 data-section-id="sj5akz" data-start="1168" data-end="1183"><span id="toc5">開発環境構築の全体の流れ</span></h2>
<p data-start="1185" data-end="1206">ここで、<br data-start="1189" data-end="1192" />2章全体の流れを整理します。</p>
<hr data-start="1208" data-end="1211" />
<h3 data-section-id="dtrxoo" data-start="1213" data-end="1235"><span id="toc6">ステップ① 環境構築ツールを用意する</span></h3>
<p data-start="1237" data-end="1262">まずは、<br data-start="1241" data-end="1244" />自分のOSに合ったツールを使います。</p>
<p data-start="1264" data-end="1280">・Mac<br data-start="1268" data-end="1271" />　→ MAMP</p>
<p data-start="1282" data-end="1303">・Windows<br data-start="1290" data-end="1293" />　→ XAMPP</p>
<p data-start="1305" data-end="1325">これが、<br data-start="1309" data-end="1312" />開発環境の土台になります。</p>
<hr data-start="1327" data-end="1330" />
<h3 data-section-id="ww1aa3" data-start="1332" data-end="1351"><span id="toc7">ステップ② サーバーを起動する</span></h3>
<p data-start="1353" data-end="1367">ツールをインストールしたら、</p>
<p data-start="1369" data-end="1386">・Webサーバー<br data-start="1377" data-end="1380" />・PHP</p>
<p data-start="1388" data-end="1395">を起動します。</p>
<p data-start="1397" data-end="1438">この時点で、<br data-start="1403" data-end="1406" /><strong data-start="1406" data-end="1427">自分のPCが簡易サーバーとして動く</strong><br data-start="1427" data-end="1430" />状態になります。</p>
<hr data-start="1440" data-end="1443" />
<h3 data-section-id="g7k7jz" data-start="1445" data-end="1466"><span id="toc8">ステップ③ PHPが動くか確認する</span></h3>
<p data-start="1468" data-end="1490">次に行うのが、<br data-start="1475" data-end="1478" /><strong data-start="1478" data-end="1486">動作確認</strong> です。</p>
<p data-start="1492" data-end="1530">・PHPファイルを作成<br data-start="1503" data-end="1506" />・ブラウザからアクセス<br data-start="1517" data-end="1520" />・実行結果を確認</p>
<p data-start="1532" data-end="1561">この確認ができて、<br data-start="1541" data-end="1544" />初めて「環境ができた」と言えます。</p>
<hr data-start="1563" data-end="1566" />
<h3 data-section-id="1wlu2u4" data-start="1568" data-end="1592"><span id="toc9">ステップ④ ブラウザで確認・デバッグする</span></h3>
<p data-start="1594" data-end="1602">環境が動いたら、</p>
<p data-start="1604" data-end="1637">・表示結果を見る<br data-start="1612" data-end="1615" />・エラーを見る<br data-start="1622" data-end="1625" />・開発者ツールを使う</p>
<p data-start="1639" data-end="1666">といった、<br data-start="1644" data-end="1647" /><strong data-start="1647" data-end="1659">確認・調査の方法</strong> を学びます。</p>
<hr data-start="1668" data-end="1671" />
<h2 data-section-id="ccxfge" data-start="1673" data-end="1692"><span id="toc10">この流れを飛ばしてはいけない理由</span></h2>
<p data-start="1694" data-end="1707">環境構築でよくある失敗は、</p>
<p data-start="1709" data-end="1753">・インストールだけして満足する<br data-start="1724" data-end="1727" />・動作確認をしない<br data-start="1736" data-end="1739" />・エラーの見方を知らない</p>
<p data-start="1755" data-end="1764">というケースです。</p>
<p data-start="1766" data-end="1771">これでは、</p>
<p data-start="1773" data-end="1796">「動いているのか、動いていないのか分からない」</p>
<p data-start="1798" data-end="1806">状態になります。</p>
<p data-start="1808" data-end="1836"><strong data-start="1808" data-end="1822">必ず「確認」まで行う</strong><br data-start="1822" data-end="1825" />という意識が重要です。</p>
<hr data-start="1838" data-end="1841" />
<h2 data-section-id="138vo7f" data-start="1843" data-end="1855"><span id="toc11">2章の各記事の役割</span></h2>
<p data-start="1857" data-end="1879">ここで、<br data-start="1861" data-end="1864" />2章の記事の役割を整理します。</p>
<p data-start="1881" data-end="1901">・2-1<br data-start="1885" data-end="1888" />　→ 開発環境の考え方</p>
<p data-start="1903" data-end="1927">・2-2<br data-start="1907" data-end="1910" />　→ 全体像と流れ（この記事）</p>
<p data-start="1929" data-end="1954">・2-3<br data-start="1933" data-end="1936" />　→ MAMP（Mac）環境構築</p>
<p data-start="1956" data-end="1986">・2-4<br data-start="1960" data-end="1963" />　→ XAMPP（Windows）環境構築</p>
<p data-start="1988" data-end="2007">・2-6<br data-start="1992" data-end="1995" />　→ PHP動作確認</p>
<p data-start="2009" data-end="2031">・2-7<br data-start="2013" data-end="2016" />　→ ブラウザ開発者ツール</p>
<p data-start="2033" data-end="2058">この順番には、<br data-start="2040" data-end="2043" /><strong data-start="2043" data-end="2057">すべて意味があります</strong>。</p>
<hr data-start="2060" data-end="2063" />
<h2 data-section-id="1urhcbb" data-start="2065" data-end="2089"><span id="toc12">なぜMacとWindowsで分けているのか</span></h2>
<p data-start="2091" data-end="2101">理由はシンプルです。</p>
<p data-start="2103" data-end="2122">・操作方法<br data-start="2108" data-end="2111" />・画面<br data-start="2114" data-end="2117" />・設定</p>
<p data-start="2124" data-end="2142">が、<br data-start="2126" data-end="2129" />OSによって違うからです。</p>
<p data-start="2144" data-end="2180">自分のOSに合った記事だけを<br data-start="2158" data-end="2161" /><strong data-start="2161" data-end="2179">確実に進めれば問題ありません</strong>。</p>
<hr data-start="2182" data-end="2185" />
<h2 data-section-id="1jfc1vn" data-start="2187" data-end="2207"><span id="toc13">この章を終えた後の姿をイメージする</span></h2>
<p data-start="2209" data-end="2220">2章を終えた時点では、</p>
<p data-start="2222" data-end="2260">・PHPファイルを作って<br data-start="2234" data-end="2237" />・ブラウザで開いて<br data-start="2246" data-end="2249" />・結果を確認できる</p>
<p data-start="2262" data-end="2275">という状態になっています。</p>
<p data-start="2277" data-end="2330">これは、<br data-start="2281" data-end="2284" />3章以降の<br data-start="2289" data-end="2292" />HTML / CSS / PHP 学習の<br data-start="2312" data-end="2315" /><strong data-start="2315" data-end="2326">スタートライン</strong> です。</p>
<hr data-start="2332" data-end="2335" />
<h2 data-section-id="1huqhjm" data-start="2337" data-end="2343"><span id="toc14">まとめ</span></h2>
<p data-start="2345" data-end="2353">開発環境構築は、</p>
<p data-start="2355" data-end="2390">・手順をなぞる作業<br data-start="2364" data-end="2367" />ではなく<br data-start="2371" data-end="2374" />・Web開発の土台を作る作業</p>
<p data-start="2392" data-end="2395">です。</p>
<p data-start="2397" data-end="2415">全体像を理解したうえで進めることで、</p>
<p data-start="2417" data-end="2442">・今どこにいるか<br data-start="2425" data-end="2428" />・何のためにやっているか</p>
<p data-start="2444" data-end="2457">を見失わずに学習できます。</p>
<hr data-start="2459" data-end="2462" />
<h2 data-section-id="iedzut" data-start="2464" data-end="2475"><span id="toc15">次に読むべき記事</span></h2>
<p data-start="2477" data-end="2515">▶ 次の記事<br data-start="2483" data-end="2486" /><a href="https://seek-rise.com/web-development/setup/post-254/">2-3 MAMPとは？MacでのPHP開発環境構築手順</a></p>
<p data-start="2517" data-end="2560">▶ 関連記事<br data-start="2523" data-end="2526" /><a href="https://seek-rise.com/web-development/setup/post-322/">2-4 XAMPPとは？WindowsでのPHP開発環境構築手順</a></p>
]]></content:encoded>
					
					<wfw:commentRss>https://seek-rise.com/web-development/setup/post-251/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">251</post-id>	</item>
	</channel>
</rss>
