0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@Tomo27(EG- Fujita)
in

TypeScriptを学ぶ①（JS経験者向けTS学習記録〜フロントエンド側の環境構築まで）

0
Posted at

はじめに

本記事の内容は筆者個人の見解に基づくものであり、所属する会社および組織の公式な見解や方針を示すものではありません。

本記事は、JavaScriptの基礎知識をお持ちの方向けの内容です。

この記事はMac OSでの学習の記録です。
記載しているコマンドはターミナル向けのものとなりますのでWindowsでの利用の場合は読み替えて下さい。

学習の経緯

案件でTypeScript × Next.js,TypeScript × Node.jsを使うことになるため、勉強することとした。
今までJavaScript(以降JSと記載)は業務などで使ったことはあるがTypeScript(以降TSと記載)については実務経験はもちろん、自己学習もしたことなかった為、理解と備忘録として記載する事とした。
またTSを理解する上でJSについてもリスキリングのため学んだことを合わせて記載する。

学習は『サバイバルTypeScript』より行う事とした。
ここでは上記のサイトに記載されていることの自己解釈について記載する。
間違った解釈などもあると思うのでここに記載されている情報を鵜呑みにせず上記サイトを確認されるのが一番いいと思う。

今回は簡単にTSの背景などを学びつつ環境構築をしてフロント（Next.js）を導入してローカル起動できるところまでを記載する。

TypeScriptとは

『サバイバルTypeScript』/TypeScriptとはに記載のある通りであるので歴史的にな背景についてはサイトを確認してほしい。

自己解釈で記載するならば、静的型付けが必要であるという事。
変数や関数の戻り値に型を指定する必要がある（any型など何でも代入できるものもある様だが）。

  • 型を指定することでコーディングの段階で型による不整合を検知することができる。
  • TSはコンパイルが必要
    • なぜ必要かというとあくまでJSの拡張言語という位置付けでありJSに「型」の情報を付与した文法なため直接ブラウザやNode.jsでは理解できないためコンパイルが必要である。
    • 型はあくまで開発支援のためのものであり実行時には不要であるまた型チェックのバグ発見や型を記載していることでソースを読む際の型が明確になる（保守性や可読性が上がる）

開発環境準備

読むことも大切だがとにかく手を動かして学ぶことが大事だと考えているのでまずは環境を整える。

Node.jsの準備

まずは諸々準備が必要だけどその前にこのPCにNode.jsが入っているかの確認する。
下記コマンドを入力してバージョンが返ってきたらNode.jsがすでにインストールされていることがわかる。

bash
# Node.js のバージョンを確認(例　v22.16.0)
node -v

npm(Node Package Manager)のバージョンも合わせて確認しておきましょう。

bash
# npmのバージョンを確認（例 10.9.2）
npm -v

出てこなければNode.jsを公式からダウンロードする。

Nodeはインストールされているがバージョンが古いなどの時はアップデートする方法はいくつかあるみたい。
1.nvmで管理（推奨）
2.公式サイトで上書き(最も簡単）
3.Homebrewで上書き(macユーザー向け)
の様です（ChatGPT調べ）

1.nvmで管理（推奨）

nvmとは
Nodeのバージョン管理ツールのこと
複数のバージョンをインストールして使うことができる。
複数のNodeのバージョンで開発する場合なんかは便利なんだと思う（つか必須？）

まずはインストールされているかの確認を込めてバージョンを調べてみる

bash
# nvmのバージョンを確認
nvm -v

インストールされていればバージョンが表示される例）0.39.7
入っていなければ「command not found」となる

インストールする場合は下記コマンドを実行

bash
# GitHub上の install.sh をダウンロードして、bashでそのまま実行
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/master/install.sh | bash

上記コマンドでインストールする。
インストールの一環でシェル設定ファイルに以下のような記述が記載される

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"

記載された設定を今開いているターミナルでそのまま使える様にするため下記コマンドを実行する。
この際自分が使っている環境によってコマンドが少し違うのでまずは環境がどうなっているか調べる。

bash
echo $SHELL
結果
/bin/zsh

利用中の環境がbashなら下記コマンド

bash
source ~/.bashrc

zshなら下記コマンド

zsh
source ~/.zshrc

nvmを入れたら次はNode.jsのインストール

  • 最新LTS版をインストール
bash
nvm install --lts
  • 特定バージョン指定
bash
nvm install 20.11.1
  • 使用するバージョンを切り替え
bash
nvm use 20.11.1
  • 現在のバージョン確認
bash
node -v
  • デフォルトに設定
    • ターミナルを開いた時に自動でそのバージョンを使うようになります。
bash
nvm alias default 20.11.1

2.公式サイトで上書き(最も簡単）

1.公式 にアクセス
2.「LTS版」をダウンロード
3.上書きインストールするだけ

これでも問題はないけど、古いバージョンに戻せない点が注意。

3.Homebrewで上書き(macユーザー向け)

MacユーザーでHomebrewで入れている場合は以下の手順でもOK

bash
brew update
bash
brew upgrade node
  • 特定バージョンを入れたい場合
bash
brew install node@20

長々説明したけど今回はnvmを使ってLTS版（v22.20.0 npm:v10.9.3）のバージョンで学習を進める。

プロジェクトファイルを作成する

今回はこれからやるであろう構成を意識して以下のようにプロジェクトを生成する

myapp/
├─ frontend/        ← Next.js (TypeScript)
│   ├─ src/
│   ├─ package.json
│   ├─ tsconfig.json
│   └─ ...
│
├─ backend/         ← Node.js (Express + TS)
│   ├─ src/
│   │   ├─ index.ts
│   │   └─ routes/
│   ├─ package.json
│   ├─ tsconfig.json
│   └─ ...
│
└─ README.md

Workディレクトリに移動しプロジェクト用のディレクトリを作成

bash
mkdir myapp
cd myapp

まずはNext.js（フロント側）を作成する。下記を実行すると色々と質問されるのですが今回は以下の様にしました。

bash
npx create-next-app@latest frontend --ts

1. Linter：ESLint

選択肢：✔ ESLint

  • コードの品質とスタイルを自動でチェックするツール。
  • TypeScriptやReactとの相性が良く、構文ミスやフォーマットのズレを防げる。
  • 保存時にエラーや警告を出してくれるため、品質維持に役立つ。

💡 ポイント：
チーム開発でも統一されたコードスタイルを保てる。

2. Tailwind CSS：Yes

選択肢：✔ Yes

  • CSSフレームワークの一種で、ユーティリティクラスベースのスタイリングが可能。
  • 例：className="text-center bg-blue-500 p-4"
  • デザインを素早く試作でき、レスポンシブにも強い。

ポイント：
UI設計を効率化できるため、ツール系アプリとの相性が抜群。

3. src/ ディレクトリ構成：Yes

選択肢：✔ Yes

  • ソースコードを src/ フォルダ配下にまとめる構成。
  • プロジェクトルートを設定ファイル（package.json 等）専用にでき、整理しやすい。

💡 ポイント：
大規模化しても見通しが良く、読みやすいプロジェクト構造に。


frontend/
└─ src/
├─ app/
├─ components/
├─ styles/
└─ ...

4. App Router：Yes（recommended）

選択肢：✔ Yes

  • Next.js 13 以降の新ルーティング方式（app/ ディレクトリベース）。
  • ページ構成・レイアウト・APIを一元管理できる。
  • TypeScript対応が強化され、SSR（サーバーサイドレンダリング）も簡単に扱える。

ポイント：
Next.jsの標準構成。最新機能を活用できる。

5. Turbopack：Yes（recommended）

選択肢：✔ Yes

  • Next.js公式の新しい開発ビルドエンジン（Rust製）。
  • 開発サーバーの起動や変更反映（HMR）が驚くほど速い。
  • Webpackの後継として今後標準化が進む。

ポイント：
開発効率アップ。保存した瞬間にブラウザ反映されるスピード感。

6. Import Alias：No（@/* デフォルト）

選択肢：✔ No

  • ファイルのインポートパスを省略できる仕組み。
  • @/components/Header のように書ける（src/を自動で解決）。
  • 階層の深い ../../ のような指定を避けられる。

ポイント：
@/* は業界標準。特に変更不要。

まとめ

設定項目 選択内容 意味
Linter ESLint コード品質チェック
Tailwind CSS Yes CSSを効率的に記述
src/ ディレクトリ Yes ソースを整理しやすく
App Router Yes 最新のNext.js構成
Turbopack Yes 開発ビルドが高速
Import Alias No（@/*） モジュールパスの省略記法
  • 実行後の構成はこんな感じ
myapp/
└─ frontend/                   # Next.js（TypeScript + Tailwind + ESLint）
    ├─ node_modules/           # インストールされた依存パッケージ
    ├─ public/                 # 公開ファイル（画像・アイコンなど）
    │   ├─ file.svg
    │   ├─ globe.svg
    │   ├─ next.svg
    │   ├─ vercel.svg
    │   └─ window.svg
    │
    ├─ src/                    # ソースコードを格納するメインフォルダ
    │   └─ app/                # App Routerルート
    │       ├─ favicon.ico     # ブラウザのタブに表示されるアイコン
    │       ├─ globals.css     # 全体スタイル
    │       ├─ layout.tsx      # 全ページ共通のレイアウト
    │       └─ page.tsx        # トップページ（/）
    │
    ├─ .gitignore              # Gitで無視するファイル定義
    ├─ eslint.config.mjs       # ESLint（構文チェック設定）
    ├─ next-env.d.ts           # TypeScriptのNext.js型定義
    ├─ next.config.ts          # Next.jsの設定ファイル
    ├─ package.json            # 依存パッケージとスクリプト設定
    ├─ package-lock.json       # npm依存関係のロックファイル
    ├─ postcss.config.mjs      # Tailwind/PostCSSの設定
    └─ README.md               # プロジェクト説明ファイル

まだテンプレートの状態なのでこの後消したりフォルダを増やしたりしていきますが、ひとまずフロントが立ち上がるかをチェックする。
フロントエンドのディレクトリに移動して起動コマンドを実行

bash
cd frontend
bash
npm run dev

実行後はhttp://localhost:3000を叩く!

こんな画面が立ち上がればひとまずプロジェクトは正しくセットアップされたと言えるだろう。
スクリーンショット 2025-10-14 0.11.57.png

今回はここまで次回はバックエンド（Node.js）側のプロジェクトの作成と簡単なフロント側の実装を進める。
TypeScriptを学ぶ②の公開をお待ちください。

その他の学び

  • JSにおいてメソッドと関数って厳密には違うということ知った（同じものだと思ってた）
  • 関数はいわゆるfunction hoge() のひとブロックのことである
// 関数
function greet() {
  console.log("Hello!");
}
greet(); // → Hello!
  • メソッドはオブジェクトに属する処理クラスなどの中に書かれた処理が〇〇クラスのメソッドという扱いになり以下もメソッドと呼ぶらしい
// メソッド
const person = {
  name: "Tom",
  greet() {
    console.log(`Hello, I'm ${this.name}`);
  }
};

person.greet(); // → Hello, I'm Tom

あとがき

JS結構理解してなかったのかなって思う。
現場である程度使えてるし・・・みたいな感覚
ちゃんと理解しているとは言い難いと思った。
今まではJava専門みたいなところもあったけど今回はあえてやったことない領域で仕事をしてみようと思うので苦手としているフロントエンドをこの機会にしっかりと理解して好きと言えるように学んでいきたい。

ということで第二弾に続く

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?