【windows10】挫折しないTypeScript環境構築

僕は2021年現在、食品卸の通販部門で働いていますが、今までモール(楽天・アマゾン・ヤフーショッピング)運営がメインでちょっとしたHTML・CSSがちょろっとできれば問題ありませんでした。

しかし自社サイトを開設して以来、モールの売り上げが順調でも何かと自社サイトの売上ばかり求められるように・・

正直オリジナリティの乏しい卸業者が自社サイトで勝負するのはかなりの鬼門だと思うわけですが、僕が入社するちょっと前に自社サイトが開設され、なんでもそれに200万円の外注費がかかっているらしい。

だからこのコストを回収するためにも上からこっぴどく自社サイトの売上を求められるのです。

ろくに要望も出さずにほぼ丸投げで作られたためこれなら僕でも作れるんじゃないかというデザインと機能性。

通販部門が万年赤字なのも納得です。

そうだTypeScript環境を構築しよう

勝手に作っておいて、それを丸投げされ、かなり理不尽な思いをしていますが会社に勤めている以上そんなのは日常茶飯事です。

その理不尽さを訴えたところで現状は何も変わらないし、仕方のないことだ割り切っています。

だからと言ってこのまま今の会社に居座ると使い古されたボロ雑巾のような末路をたどると思うので、そうならないために転職を考えています。

どうせ転職するなら今の職の知識を活かせるような仕事に就きたい。

ただ今より良い環境で働くにはもっと技術と知識を培う必要があります。

こうした経緯で僕のTypeScript習得の修業が始まるのでした。

TypeScriptの習得ができれば今のサイトも少しはましになるでしょうし、勉強をしながら給料をもらっているというポジティブシンキングで地道に鍛錬を積んでいきます。

なぜJavaScriptではなくTypeScripなのか?

HTML・CSSをある程度学んだら次はJavaScriptを学ぶのが定石だと思います。

しかしJavaScriptはプログラムを実行するまでエラーをチェックできず、動的型付けであるためにバグが発生しやすいというデメリットが問題視されていました。

そしてその欠点を補うために開発された言語が「TypeScrip」です。

TypeScripは静的型付けができるのでJavaScriptのコンパイル時事前にエラーの検出が可能となります。

クラスを記述できる分、第三者が見ても読みやすいコードが書けるというのも大きな利点です。

静的型付け?クラス?って何だと思われる方もいるかもしれませんが、そういった用語はプラグラムを組んでいけば自然に理解できるようになります。

用語から勉強するのもいいですが、インプットばかりではイメージしづらい部分もあるため個人的には並行でやったほうが習得スピードは速いんじゃないかと思います。

Windows10でTypeScript環境を構築するためのツールとパッケージ

ではさっそくWindows10でtypeScriptの環境を構築していきます。

といってもある動画を紹介するだけなんですけどね。

今回はこちらの動画を参考にWindows10でTypeScriptを構築していますが動画の内容ではmacOSでの構築。

ほとんど動画で紹介されているGitの内容をコピペでできますがWindowsではエラーになる内容も含まれ営るので修正箇所を合わせてご紹介という形をとります。

構築するうえで抑えておくべき用語と手順

いきなり環境構築から始めてもいいのですがその前に手順をしておいたほうが自分が何をやっているのかわかりやすいですし復習の時もスムーズに事が運びます。

というわけで環境構築する手順と用語の解説からしていきます。

1.コマンドプロンプトを開ける状態にする
2.node.jsのインストール
3.TypeScriptコンパイラをインストール
4.テキストエディタのインストール
5.フォルダ(ファイル)の作成と各パッケージインストール
6.webpack、tsconfigの設定
7.hello world出力

とりあえず流れとしてはこんな感じです。

これにまた、コードのエラーを修正するESLintやPrettierなどを導入して本格的に環境を整えていくわけですがそれはまた次回の記事で詳しく説明したいと思います。

では手順が分かったところで早速動画の内容を実践してみましょう。

前述したとおり、解説動画はmacOSでの環境構築なのでWindows10で構築ができるように補足を加えます。

1.コマンドプロンプトを開ける状態にする

macでは通常ターミナルというものを使用しますがWindows10ではコマンドプロンプトを使用します。

マウスを使って視覚的に操作するGUI(Graphical User Interface)とは対称にキーボード操作のみのCUI(Command Line Interface)で作業を進めていく形ですね。

視覚的にわかりやすいGUIで操作したいところですが、プログラムを組むうえで”操作の記録が残る””複数人で共有しやすい”というメリットからCUIを利用します。

コマンドラインツールでpowerShellやWSL用にwslttyを利用してもいいですが、初めのうちはコマンドプロンプトで十分です。

もし開発を進めるにつれもっと環境を良くしたいと思ったときに検討すればよいでしょう。

コマンドプロンプトの起動方法ですが左下のWindowsスタートメニュー→Windowsシステムファイルの中にあるのでそれをクリックすると実行可能です。

2.Node.jsのインストール

TypeScriptを記述するうえで必須のツールNode.jsをインストールしましょう。

前述したようにJavaScriptはブラウザ上で動くプログラム言語ですが、Node.jsではサーバーサイドでプログラミングができるのがメリットです。

以下のサイトでインストール可能。

https://nodejs.org/ja/

最新版と推奨版がありますが、バグを考慮して推奨版のダウンロードが無難かと思います。

なお、動画ではNode.jsのバージョン管理としてHomebrewとNodebrewのインストールが推奨されていますがとりあえずWindows版ではスルーということで。

Windowsでも同じようなバージョン管理ツールにNodistやnvm-windowsもありますがほかのツールのインストールが失敗するケースもありと、りあえずはスルーすることにしました。

また何か情報をつかんだら追記します。

ということでインストールがすんだら以下のコマンドでバージョンを確認することができます。

node -v
npm -v

npm(Node Package Manager)はNode.jsをインストールと同時についてくれるものでPackageを管理するためのツールです。

ゲームソフトがPackageでそれをしまっている棚がnpmと考えればイメージしやすいでしょうか。

そして実機がNode.jsと。

3.TypeScriptコンパイラをインストール

続いてTypeScriptコンパイラをインストールします。

コマンドプロンプトで以下のコマンドを実行。

npm install -g typescript

以下のコマンドを実行するとバージョンを確認できます。

tsc -v

なぜTypeScriptコンパイラが必要なのかというとそのままTypeScriptをブラウザで動かすことができないためJavaScriptに変換する必要があるからです。

TypeScriptコンパイラを導入することで自動的にJavaScriptに変換することが可能となります。

4.テキストエディタのインストール

コードを書くうえでテキストエディタ(プログラミングエディタ)は必須と言ってもいいでしょう。

メモ帳を使ってコードを書くこともできますがファイル管理などが面倒ですしコードの補助入力もありません。

より快適にプログラミングをするためにも使いやすいエディタを導入することをお勧めします。

と言われても何がいいのか分からない・・という方はVSCodeをインストールしておけば間違いないでしょう。

VSCodeを開けばコマンドプロンプトもそこで実行できますし自分なりにカスタマイズもできますし。

無料で利用可能ですしMicrosoft社が提供しているだけあって安心、安全です。

https://code.visualstudio.com/Download

5.フォルダ(ファイル)の作成と各Packageインストール

ここまで来たらようやく準備完了です。

一通り開発環境に必要なツールがそろったので実際にファイル、フォルダの作成をしていきます。

ではまずデスクトップでもどこでもいいのでフォルダを作成します。(練習がてらコマンドでフォルダを作ってみましょう。)

デスクトップにフォルダを作成したい場合はデスクトップに移動(cd)してフォルダを作成(mkdir)します。

cd c:\Users\ユーザーネーム\Desktop
mkdir test-ts
cd test-ts

フォルダの名前は分かりやすいものであればなんでもOKです。

空のファイル作成もコマンドプロンプトで可能です。

type nul > ファイル名.拡張子(tsやjs)

ここまで来たらあとは動画の内容を一つずつ実行していけば問題なく進められるはずです。

6.7はすっ飛ばしてここまでの流れを図解で表します。

TypeScript環境構築のおけるフォルダ・ファイル図解

タイプスクリプト説明

はい、こんな感じでTypeScript環境が整いました。

環境を構築するだけでへとへとです。

ですが、この作業をすることで後々楽になります。挫折しないよう頑張りましょう。

TypeScriptサムネ
最新情報をチェックしよう!