🐤ひよこーど
STEP 10 / 10（さいご！）

そつぎょう制作🚀

HTML・CSS・TypeScriptで小さなプロジェクトを作って、pnpmでビルドして、GitHubに公開するところまで、一気通貫でやってみよう。実はこの流れ、「ひよこーど」自身が作られたときと、ほとんど同じだよ。

1

プロジェクトフォルダを作る

かんきょう準備のページで覚えたmkdirとcdを使うよ。

ターミナル 
$ cd ~/Desktop
$ mkdir my-first-ts-project
$ cd my-first-ts-project
2

pnpmでプロジェクトを初期化する

pnpm initで、プロジェクトの設定ファイルpackage.jsonができるよ。

ターミナル 
$ pnpm init
3

TypeScriptを入れる

このプロジェクトの中だけで使う「開発用の道具」として、TypeScriptを追加するよ。

ターミナル 
$ pnpm add -D typescript
-Dは「開発のときだけ使う道具だよ」という印（DevDependency）。TypeScriptは、実際に公開するページには必要ないので、こう指定するよ。

次に、TypeScriptの設定ファイルtsconfig.jsonを作ろう。

tsconfig.json 
{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ES2022",
    "outDir": "dist",
    "strict": true
  }
}
  • target … 変換後のJSが、どのくらい新しい書き方でいいか
  • outDir … 変換したJSファイルを、どのフォルダに出力するか
  • strict … 型のチェックを厳しめにする（迷ったらtrueでOK）
4

HTML・CSS・TSファイルを作る

VS Codeでこのフォルダを開いて（ターミナルでcode .）、3つのファイルを作ろう。

index.html 
<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>はじめてのプロジェクト</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div id="app"></div>
    <script src="dist/main.js"></script>
  </body>
</html>
このサイトの他のページでは<script type="module">を使っているけど、ここではあえてtype="module"をつけていないよ。あとでopen index.htmlのようにファイルを直接ブラウザで開くとき、type="module"のスクリプトはセキュリティ上の理由（CORS）で読み込みに失敗してしまうんだ。import/exportを使わない今回のような小さなファイルなら、ふつうの<script>で十分だよ。
style.css 
body {
  font-family: sans-serif;
  background: #fff0f7;
  padding: 40px;
  text-align: center;
}
h1 {
  color: #ff2e8b;
}
main.ts 
interface Profile {
  name: string;
  favorite: string;
}

const me: Profile = {
  name: "きみの名前",
  favorite: "すきなもの",
};

const app = document.querySelector<HTMLDivElement>("#app")!;
app.innerHTML = `
  <h1>${me.name}のページ</h1>
  <p>すきなもの: ${me.favorite}</p>
`;

console.log("プロジェクト、うごいた！", me);
meの中身は、じぶんの名前やすきなものに書きかえてOK！ここまでTSのきほんやモダンJS×TSで学んだこと（型注釈・interface・テンプレートリテラルなど）が、ぜんぶ使われているよ。
5

ビルドする

package.jsonに、ビルド用のコマンドを追加しよう。"scripts"という項目に1行足すだけ。

{
  "scripts": {
    "build": "tsc"
  }
}

これで、pnpm buildと打つだけでtscが実行されるようになるよ。

ターミナル 
$ pnpm build
　main.ts が変換されて、dist/main.js ができるはず
もし型のまちがいがあったら、ここでtscがエラーを教えてくれるよ。これが、モダンJS×TSのページで「このプレイグラウンドでは再現できない」と言っていた、本物の型チェックだよ。
6

ブラウザで確認する

ターミナルから、できあがったindex.htmlを直接開いてみよう。

ターミナル 
$ open index.html

じぶんの名前とすきなものが表示されたら大成功！

7

.gitignoreを作って、Gitでセーブする

Git & GitHubのページと同じ流れだよ。node_modulesだけ除外しておこう。

.gitignore 
node_modules
ターミナル 
$ git init
$ git add .
$ git commit -m "はじめてのTypeScriptプロジェクト"
8

GitHubに公開する

GitHub CLIで、リポジトリを作って送信するところまで一気にやろう。

ターミナル 
$ gh repo create my-first-ts-project --public --source=. --remote=origin
$ git push -u origin main
$ gh repo view --web

ブラウザでGitHubのページが開いて、じぶんのプロジェクトが見られたら完了だよ🎉

🎉 おめでとう！ぜんぶ できたね！ 🎉

HTML・CSS・TypeScriptでコードを書いて、pnpmでビルドして、GitとGitHubで世界に公開する。ここまでの一連の流れが、実際の現場でも使われている本物の開発フローだよ。ここから先は、じぶんの作りたいものを、じぶんのペースで作っていってね。

プレイグラウンドに戻る トップページへ