<?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>TypeScript  |  ITのあれこれ</title>
	<atom:link href="https://himatoto.com/category/typescript/feed/" rel="self" type="application/rss+xml" />
	<link>https://himatoto.com</link>
	<description>初心者視点で分かりやすく</description>
	<lastBuildDate>Fri, 01 Apr 2022 00:50:17 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.2</generator>

<image>
	<url>https://himatoto.com/wp-content/uploads/2020/06/cropped-4495bed8051fcc9fd4ac4bababda36e3-32x32.png</url>
	<title>TypeScript  |  ITのあれこれ</title>
	<link>https://himatoto.com</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>【TypeScript】TypeScriptの環境構築</title>
		<link>https://himatoto.com/typescript-1/</link>
					<comments>https://himatoto.com/typescript-1/#respond</comments>
		
		<dc:creator><![CDATA[himatoto]]></dc:creator>
		<pubDate>Wed, 09 Sep 2020 06:55:09 +0000</pubDate>
				<category><![CDATA[TypeScript]]></category>
		<guid isPermaLink="false">https://himatoto.com/?p=458</guid>

					<description><![CDATA[Windowsを使ってTypeScriptが動作する環境を構築します。 目次 準備するもの環境構築の流れNode.jsのインストールインストールインストール確認Type Scriptのインストールインストールインストール [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p>Windowsを使ってTypeScriptが動作する環境を構築します。</p>




  <div id="toc" class="toc tnt-number toc-center tnt-number border-element"><input type="checkbox" class="toc-checkbox" id="toc-checkbox-2" checked><label class="toc-title" for="toc-checkbox-2">目次</label>
    <div class="toc-content">
    <ol class="toc-list open"><li><a href="#toc1" tabindex="0">準備するもの</a></li><li><a href="#toc2" tabindex="0">環境構築の流れ</a></li><li><a href="#toc3" tabindex="0">Node.jsのインストール</a><ol><li><a href="#toc4" tabindex="0">インストール</a></li><li><a href="#toc5" tabindex="0">インストール確認</a></li></ol></li><li><a href="#toc6" tabindex="0">Type Scriptのインストール</a><ol><li><a href="#toc7" tabindex="0">インストール</a></li><li><a href="#toc8" tabindex="0">インストール確認</a></li></ol></li><li><a href="#toc9" tabindex="0">Type Scriptの動作確認</a></li></ol>
    </div>
  </div>

<h2 class="wp-block-heading" id="準備するもの"><span id="toc1">準備するもの</span></h2>



<ol><li>Windows 10がインストールされているパソコン</li><li>Visual Studio Code（※テキストファイルを編集できるものであれば何でもOKです。）</li></ol>



<h2 class="wp-block-heading" id="環境構築の流れ"><span id="toc2">環境構築の流れ</span></h2>



<div class="wp-block-image"><figure class="aligncenter size-large"><img decoding="async" width="366" height="576" src="https://himatoto.com/wp-content/uploads/2020/09/6fb5678cc489050ee47e55e1262ae402-1.png" alt="" class="wp-image-461" srcset="https://himatoto.com/wp-content/uploads/2020/09/6fb5678cc489050ee47e55e1262ae402-1.png 366w, https://himatoto.com/wp-content/uploads/2020/09/6fb5678cc489050ee47e55e1262ae402-1-191x300.png 191w" sizes="(max-width: 366px) 100vw, 366px" /></figure></div>



<h2 class="wp-block-heading" id="node-jsのインストール"><span id="toc3">Node.jsのインストール</span></h2>



<p>Node.jsのインストール方法を記述します。</p>



<p>ここではNode.jsの詳細な説明については省略します。</p>



<h3 class="wp-block-heading" id="インストール"><span id="toc4">インストール</span></h3>



<p>インストール所要時間：約3分</p>



<p><strong>１．</strong>下記URLにアクセスする。</p>




<a rel="noopener" href="https://nodejs.org/ja/download/" title="ダウンロード | Node.js" 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 src="https://himatoto.com/wp-content/uploads/cocoon-resources/blog-card-cache/ca137f8b1df814fb050b2cd4982d640e.png" alt="" class="blogcard-thumb-image external-blogcard-thumb-image" width="160" height="90" loading="lazy" decoding="async" /></figure><div class="blogcard-content external-blogcard-content"><div class="blogcard-title external-blogcard-title">ダウンロード | Node.js</div><div class="blogcard-snippet external-blogcard-snippet">Node.js® is a JavaScript runtime built on Chrome&#039;s V8 JavaScript engine.</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 src="https://www.google.com/s2/favicons?domain=https://nodejs.org/ja/download/" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" loading="lazy" decoding="async" /></div><div class="blogcard-domain external-blogcard-domain">nodejs.org</div></div></div></div></a>




<p><strong>２．</strong>「Windows Installer」をクリックする。クリックするとダウンロードが開始されます。</p>



<p>「node-v12.18.3-x64.msi」がダウンロードされます。</p>



<p><strong>３．</strong>２でダウンロードしたファイルを実行する。</p>



<p><strong>４．</strong>「Welcome to The Node.js Setup Wizard」が表示されたら、「Next」ボタンを押す。</p>



<p><strong>５．</strong>ライセンスを確認し、「I accept the terms in the License Agreement」のチェックを入れ「Next」ボタンを押す。</p>



<p><strong>６．</strong>今回は変更せず、初期値の状態で「Next」ボタンを押す。</p>



<p>インストール先を自分で決めたい場合、ここで変更してください。</p>



<p><strong>７．</strong>「Custom Setup」ページでは、「Next」ボタンを押す。</p>



<p>カスタムしたい内容があればカスタムしてください。</p>



<p><strong>８．</strong>「Tools for Native Modules」では何も変更せず「Next」ボタンを押す。</p>



<p><strong>９．</strong>「Ready to install Node.js」では、「Install」ボタンを押す。</p>



<p><strong>１０．</strong>「Completed the Node.js Setup Wizard」では、「Finish」ボタンを押す。</p>



<h3 class="wp-block-heading" id="インストール確認"><span id="toc5">インストール確認</span></h3>



<p><strong>１．</strong>「コマンドプロンプト」または「Windows PowerShell」を起動する。</p>



<p>※今回は「コマンドプロンプト」を使用します。</p>



<p><strong>２．</strong>「node &#8211;version」を入力する。</p>



<figure class="wp-block-image size-large"><img decoding="async" loading="lazy" width="447" height="263" src="https://himatoto.com/wp-content/uploads/2020/09/ec298ed89b8598ca0db96068f280e9f3.png" alt="" class="wp-image-469" srcset="https://himatoto.com/wp-content/uploads/2020/09/ec298ed89b8598ca0db96068f280e9f3.png 447w, https://himatoto.com/wp-content/uploads/2020/09/ec298ed89b8598ca0db96068f280e9f3-300x177.png 300w" sizes="(max-width: 447px) 100vw, 447px" /></figure>



<p><strong>３．</strong>バージョンが表示されたらOKです。</p>



<p>ここでは「v12.18.3」がバージョンです。</p>



<h2 class="wp-block-heading" id="type-scriptのインストール"><span id="toc6">Type Scriptのインストール</span></h2>



<p>TypeScriptのインストール手順を記述します。</p>



<p>インストール所要時間：約1分</p>



<h3 class="wp-block-heading" id="インストール"><span id="toc7">インストール</span></h3>



<p>１．コマンドプロンプトを起動する。</p>



<p>２．「npm install -g typescript」を入力し、実行する。</p>



<figure class="wp-block-image size-large"><img decoding="async" loading="lazy" width="979" height="197" src="https://himatoto.com/wp-content/uploads/2020/09/3d23a9c0e8714bc4ad2fadf6acd4f52f.png" alt="" class="wp-image-473" srcset="https://himatoto.com/wp-content/uploads/2020/09/3d23a9c0e8714bc4ad2fadf6acd4f52f.png 979w, https://himatoto.com/wp-content/uploads/2020/09/3d23a9c0e8714bc4ad2fadf6acd4f52f-300x60.png 300w, https://himatoto.com/wp-content/uploads/2020/09/3d23a9c0e8714bc4ad2fadf6acd4f52f-768x155.png 768w" sizes="(max-width: 979px) 100vw, 979px" /></figure>



<figure class="wp-block-image size-large"><img decoding="async" loading="lazy" width="979" height="249" src="https://himatoto.com/wp-content/uploads/2020/09/ca21b36f8fbf689c530fbc3f507081b9.png" alt="" class="wp-image-474" srcset="https://himatoto.com/wp-content/uploads/2020/09/ca21b36f8fbf689c530fbc3f507081b9.png 979w, https://himatoto.com/wp-content/uploads/2020/09/ca21b36f8fbf689c530fbc3f507081b9-300x76.png 300w, https://himatoto.com/wp-content/uploads/2020/09/ca21b36f8fbf689c530fbc3f507081b9-768x195.png 768w" sizes="(max-width: 979px) 100vw, 979px" /></figure>



<h3 class="wp-block-heading" id="インストール確認"><span id="toc8">インストール確認</span></h3>



<p>１．コマンドプロンプトに「tsc -v」を入力し、実行する。</p>



<figure class="wp-block-image size-large"><img decoding="async" loading="lazy" width="979" height="319" src="https://himatoto.com/wp-content/uploads/2020/09/6bdbc41d5b18f1e7893a08f2e90db83f.png" alt="" class="wp-image-478" srcset="https://himatoto.com/wp-content/uploads/2020/09/6bdbc41d5b18f1e7893a08f2e90db83f.png 979w, https://himatoto.com/wp-content/uploads/2020/09/6bdbc41d5b18f1e7893a08f2e90db83f-300x98.png 300w, https://himatoto.com/wp-content/uploads/2020/09/6bdbc41d5b18f1e7893a08f2e90db83f-768x250.png 768w" sizes="(max-width: 979px) 100vw, 979px" /></figure>



<p>２．バージョンが表示されたらOKです。</p>



<h2 class="wp-block-heading" id="type-scriptの動作確認"><span id="toc9">Type Scriptの動作確認</span></h2>



<p><strong>１．</strong>Type Scriptを保存するフォルダを作成する。</p>



<p>ここでは「typescript」フォルダを作成します。</p>



<figure class="wp-block-image size-large"><img decoding="async" loading="lazy" width="240" height="121" src="https://himatoto.com/wp-content/uploads/2020/09/d4ef8ec096e09f1d45ecc0585044bcf3.png" alt="" class="wp-image-484"/></figure>



<p><strong>２．</strong>コマンドプロンプトで「１．」で作成したフォルダに移動する。</p>



<figure class="wp-block-image size-large"><img decoding="async" loading="lazy" width="421" height="178" src="https://himatoto.com/wp-content/uploads/2020/09/679455c40fccc6fa768ef6e955c702e1.png" alt="" class="wp-image-485" srcset="https://himatoto.com/wp-content/uploads/2020/09/679455c40fccc6fa768ef6e955c702e1.png 421w, https://himatoto.com/wp-content/uploads/2020/09/679455c40fccc6fa768ef6e955c702e1-300x127.png 300w" sizes="(max-width: 421px) 100vw, 421px" /></figure>



<p><strong>３．</strong>TypeScriptの初期設定をします。コマンドプロンプトで初期設定コマンドを実行する。</p>



<pre class="wp-block-code"><code>tsc –init</code></pre>



<figure class="wp-block-image size-large"><img decoding="async" loading="lazy" width="483" height="213" src="https://himatoto.com/wp-content/uploads/2020/09/f2a7df8c462af5a7c37158d361a29b94.png" alt="" class="wp-image-486" srcset="https://himatoto.com/wp-content/uploads/2020/09/f2a7df8c462af5a7c37158d361a29b94.png 483w, https://himatoto.com/wp-content/uploads/2020/09/f2a7df8c462af5a7c37158d361a29b94-300x132.png 300w" sizes="(max-width: 483px) 100vw, 483px" /></figure>



<p>「tsconfig.json」というファイルが作成されます。</p>



<figure class="wp-block-image size-large"><img decoding="async" loading="lazy" width="245" height="126" src="https://himatoto.com/wp-content/uploads/2020/09/bbf2ef562349421f5cad006c7fced09b.png" alt="" class="wp-image-488"/></figure>



<p><strong>４．</strong>テスト用のTypeScriptファイルを作成する。TypeScriptファイルの作成場所は、「１．」で作成したフォルダの直下に作成します。ここでは「sample.ts」というファイル名で作成します。</p>



<p><span class="marker-under-red">※TypeScriptのファイル拡張子は「.ts」です</span></p>



<figure class="wp-block-image size-large"><img decoding="async" loading="lazy" width="252" height="138" src="https://himatoto.com/wp-content/uploads/2020/09/f22d85f2f20e589d2bfb7cc2637c214c.png" alt="" class="wp-image-490"/></figure>



<p><strong>５．</strong>「４．」で作成したファイルに簡単なプログラムを書きます。</p>



<pre class="wp-block-code"><code>console.log("Hello, Test");</code></pre>



<figure class="wp-block-image size-large"><img decoding="async" loading="lazy" width="430" height="313" src="https://himatoto.com/wp-content/uploads/2020/09/591bfd79788f82ff3918384ce7bc6637.png" alt="" class="wp-image-491" srcset="https://himatoto.com/wp-content/uploads/2020/09/591bfd79788f82ff3918384ce7bc6637.png 430w, https://himatoto.com/wp-content/uploads/2020/09/591bfd79788f82ff3918384ce7bc6637-300x218.png 300w" sizes="(max-width: 430px) 100vw, 430px" /></figure>



<p><strong>６．</strong>TypeScriptファイルをコンパイルします。</p>



<p>※コンパイル・・・実行可能なファイルにすること。</p>



<p>コマンドプロンプトでTypeScriptファイルがある場所まで移動し、コンパイルのコマンドを実行する。</p>



<pre class="wp-block-code"><code>tsc</code></pre>



<figure class="wp-block-image size-large"><img decoding="async" loading="lazy" width="421" height="185" src="https://himatoto.com/wp-content/uploads/2020/09/4fdbc0b95b1208e4cc62707269ab8d99.png" alt="" class="wp-image-492" srcset="https://himatoto.com/wp-content/uploads/2020/09/4fdbc0b95b1208e4cc62707269ab8d99.png 421w, https://himatoto.com/wp-content/uploads/2020/09/4fdbc0b95b1208e4cc62707269ab8d99-300x132.png 300w" sizes="(max-width: 421px) 100vw, 421px" /></figure>



<p>コンパイルが成功するとJavaScriptファイルが作成されます。</p>



<figure class="wp-block-image size-large"><img decoding="async" loading="lazy" width="245" height="180" src="https://himatoto.com/wp-content/uploads/2020/09/7eae45081dc83e2584d54d70ad916152.png" alt="" class="wp-image-494"/></figure>



<p><span class="marker-under-red">※JavaScriptのファイル拡張子は「.js」です</span></p>



<p>７．コンパイルされたファイルを実行します。</p>



<pre class="wp-block-code"><code>node sample.js</code></pre>



<p>TypeScriptファイルに記述した「Hello, Test」が表示されればOKです。</p>



<figure class="wp-block-image size-large"><img decoding="async" loading="lazy" width="430" height="250" src="https://himatoto.com/wp-content/uploads/2020/09/0ec0dc925e2768b76a514808b9943ec8.png" alt="" class="wp-image-496" srcset="https://himatoto.com/wp-content/uploads/2020/09/0ec0dc925e2768b76a514808b9943ec8.png 430w, https://himatoto.com/wp-content/uploads/2020/09/0ec0dc925e2768b76a514808b9943ec8-300x174.png 300w" sizes="(max-width: 430px) 100vw, 430px" /></figure>
]]></content:encoded>
					
					<wfw:commentRss>https://himatoto.com/typescript-1/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
