TypeScriptを最小構成で実行する

TypeScriptを導入してみたいものの、小規模案件だから面倒なのは嫌だ!という開発は結構あるんじゃないかなと思います。そこで最小構成でTypeScriptを開発・コンパイルする環境を作って見ました。
npm環境は構築済み、エディタはvsCodeとします。

インストール

まずvsCodeでターミナルを開き、typescriptに関する機能をインストール。

npm install -g typescript

※Windowsの場合、初期設定だとvsCodeのターミナルでtscを動かせないので、PowerShellの権限設定を変更する必要があります。
Win+Sで[Powershell]を検索、右クリックし[管理者として実行]を選択。下記コマンド実行。

Set-ExecutionPolicy RemoteSigned

表示される注意書きにあるように、セキュリティレベルを下げてしまうので注意してください。もしPowerShellを使わないのであれば、vsCodeとは別に毎回コマンドプロンプトを立ち上げる必要があるみたいです。

プロジェクトルートに設定ファイルを作成

プロジェクトルートに「tsconfig.json」というファイルを作成します。中身は以下をコピペ。

{
  "compilerOptions": {
    "target": "es2016",
    "module": "commonjs",
    "esModuleInterop": true,
    "strict": true,
    "skipLibCheck": true
   }
}

これを保存してください。

テストファイルの作成とコンパイル

コンパイルする際にtsファイルが1つもないとエラーになるので、先に作成しましょう。
プロジェクト内のどこでもいいのでindex.tsという名前でファイルを作成してください。
その後、ターミナルで以下のコマンドを実行します。

tsc

すると先ほど作成したtsファイルと同じディレクトリにindex.jsが作成されているはずです。

自動コンパイル設定

tscコマンドでプロジェクト内の全tsファイルがコンパイルされるとはいえ、毎回ターミナルでコマンド実行は面倒ですよね。
そこで、ターミナルにて

tsc -w

を実行します。すると、tsファイルを編集後に保存するたび、自動でコンパイルされます。
また上記コマンドを実行するとターミナルが占拠されたような状態になるので、ターミナルタブの右側にあるプラスボタンをクリックし、WindowsならPowerShellウインドウを新規作成してください。

補足:tsファイルにアクセスされないようにする

あまり意味はないかもしれませんが、.htaccessに記述を追加することで、tsファイルへのアクセスを拒否できます。

# AccessControl Extension
<Files ~ "(\.ts)$">
deny from all
</Files>

まとめ

軽くスクリプトも書くデザイナさんとゴリゴリなフロントコーダーがいる案件等で試してみたくなりますね。npmもほぼ無視したお手軽構成なのでぜひ試してみてください。

レンタルサーバはConohaWINGが最強にオススメ!

muchilogでは今までいろんなレンタルサーバやSaaSを使ってきましたが、今では全てをConohaWINGにて運営しています。

■今まで使ってきたサービス一覧
・さくらレンタルサーバ(ベーシックプラン)
・カゴヤ
・Azure
・AWS

今ではこのブログは勿論、webサービスのバックエンドやアプリのサーバ機能もConohaWINGで動かしています。
そんなConohaWINGのメリットをいくつか紹介します!

【国内最速No.1】高性能レンタルサーバーConoHa WING

無料で最大2個の独自ドメインが使える!

サイト運営に必要な独自ドメインをなんと無料で取得することが可能です!これだけでも月100円以上は運営費が節約できます。

優れた速度と安定感

私がAzureやさくらを解約した大きな理由はこれ。Conohaは非常に安定して稼働しており、ダウンタイムがほぼ発生しません。発生した場合は潔くお知らせしてくれます。
また、このブログは勿論、バックエンドとして動いてるプログラムも処理速度が大幅に向上しました(体感で倍速以上)。 Azure等のSaaSからレンタルサーバに移行するって普通考えられませんよね?しかし実際に大きなメリットを感じているのです。

頻繁に開催されるキャンペーン

ConohaWINGは半額に迫るようなキャンペーンを頻繁に開催しています。このキャンペーンによって、性能的には業界トップクラスであるにも関わらず、 月額料金換算で最安値クラスで使えるのです。
基本的に長期一括契約の方がお得になるため、muchilogでは最長で契約することをオススメします。価格と性能のバランスを考えれば他に乗り換えることも考えれられませんし。

レンタルサーバは必須です!

web系のプログラミング学習を進める際には、レンタルサーバの契約は必須と思ってください。ローカルの環境と本番環境で動作が違うことは良くありますし、ポートフォリオを公開するのも大切です。

学習や制作に集中するためにも、満足度、速度、安定度全てのレベルが高いConohaWINGを最強にオススメします!

web系サービス開発会社に転職したい!

muchilogではIT系へ転職したいという方には「自社サービスを運営しているweb系企業」への転職をおすすめしています。

web系は「自由な社風」「成長できる環境」「ホワイトな労働条件」であることが多いからです。

そんなweb系企業への転職を確実にするためのプログラミングスクールが登場しました。


RUNTEQ

RUNTEQはただのスクールじゃない!

RUNTEQはweb系の開発会社。開発会社が運営するスクールなので必要とされる技術力は勿論習得可能。しかしそれだけではないのです。

特にweb系で転職・就職活動を行う際にはポートフォリオを求められることがあります。ポートフォリオとは自分自身の作品のことで、技術力や企画力を示すものです。

RUNTEQではポートフォリオの作成を企画段階からサポートしてくれます!

他のプログラミングスクールでは提携企業の派遣やアルバイトとして就職するしかなかったりもしますが、RUNTEQはあなたの市場価値を高める方法まで教えてくれるということですね。

また、RUNTEQが扱う教材はどれも第一線で当たり前に使われている技術。特に未経験者の独学ではどうしてもスキルセットに穴が出来てしまいます。その点RUNTEQは確実に現場力を養えます。

そして2020年2月〜2021年12月までの内定者の98%がweb系企業に内定しています。これはRUNTEQの指導力とサポートが優れていることの証拠でしょう。

まずは無料説明会に申し込んではいかがでしょうか?

RUNTEQ


js ts
muchiをフォローする
MUCHILOG
タイトルとURLをコピーしました