altJSである「TypeScript」とCSSプリプロセッサである「Sass（読み方：サス）」の実行環境を構築します。TypeScriptとSassを学ぶため、とりあえず実行環境を作ってみたい人向けの手順になります。
前提
以下がインストールされた環境に対して、TypeScript＋Sassの実行環境を構築します。
- Windows 11
- Visual Studio Code（VS Code）
Node.jsのインストール
まず、Node.jsをインストールします。
TypeScript、Sassのインストールに、npm（Node Package Manager）を使うので、Node.jsが必要になります。
以下のサイトから、Node.jsのLTS版のインストーラをダウンロードします。
インストーラを実行し、Node.jsをインストールします。
インストーラ画面に表示される設定は、すべてデフォルトのままでOKです。
TypeScriptのインストール
TypeScriptをインストールします。
npm install -g typescript
Sassのインストール
Sass（Dart Sass）をインストールします。
npm install -g saas
tsファイル / scssファイルの作成
「C:\workspace\test」を作業フォルダーとします。
作業フォルダーに、以下のファイルを作成します。
let message: string = 'Hello World';
console.log(message);$padding: 6px;
nav {
ul {
margin: 0;
padding: $padding;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: $padding 12px;
text-decoration: none;
}
}トランスコンパイル
トランスコンパイルすることで、tsファイルはjsファイルに、scssファイルはcssに変換します。
コマンドプロンプトで、以下のコマンドを実行します。
tsc helloworld.ts
sass styles.scss styles.css生成されたファイルを以下に示します。
var message = 'Hello World';
console.log(message);nav ul {
margin: 0;
padding: 6px;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
/*# sourceMappingURL=styles.css.map */まとめ
TypeScriptとSassをとりあえず動かしてみたい人向けに、環境構築手順をまとめました。
TypeScriptとSassは、npmコマンドを使ってインストールします。
インストール後、tsファイルとscssファイルを作成し、トランスコンパイルします。
トランスコンパイルすることで、jsファイルとcssファイルが生成されます。
コメント