見出し画像

#015　TypeScript（2）：環境構築１

KINO↓

Node.jsとは

Node.jsは、通常ウェブブラウザの中で動くJavaScriptを、コンピューターの中で直接動かせるようにした技術です。これにより、ウェブサイトだけでなく、様々なプログラムをJavaScriptで作ることができます。

バックエンドも操作可能

Node.jsの主な特徴と利点

💫JavaScriptの活用

ウェブ開発者が既に知っているJavaScriptを使って、サーバー側のプログラムも書けます。

💫高速性

多くの同時接続を効率的に処理できるため、高速なウェブアプリケーションの開発に適しています。

💫豊富なパッケージ

npmという大規模なパッケージ管理システムがあり、多くの便利なツールやライブラリを簡単に利用できます。

💫クロスプラットフォーム

Windows、Mac、Linuxなど、さまざまな環境で動作します。

💫フルスタック開発

フロントエンド（ブラウザ側）とバックエンド（サーバー側）の両方を同じ言語で開発できます。

💫使用例

Node.jsは、チャットアプリ、データ分析ツール、APIサーバーなど、様々な種類のアプリケーション開発に使われています。

💻インストール


Progateさんの記事がわかりやすかったです。
感謝🙏

npm init -y コマンド

私の環境はWindowsなので、コマンドプロンプトにて実行しました。
このコマンドは、新しいNode.jsプロジェクトを素早く始めるために使われます。簡単に言えば、プロジェクトの基本的な設定ファイルを自動的に作成してくれるものです。

📓説明

  • npm：これはNode Package Manager（Nodeパッケージマネージャー）の略で、Node.jsのパッケージを管理するツールです。

  • init：新しいプロジェクトを初期化（はじめる）という意味です。

  • -y：Yesの略で、全ての質問に自動的に「はい」と答えるオプションです。

⭐実行

以下のようなことが起こります

説明は以下に記述

  1. プロジェクトフォルダに package.json というファイルが作られます。

  2. この package.json ファイルには、プロジェクトの基本的な情報が記載されます：

    • プロジェクト名（現在のフォルダ名がデフォルトになります）

    • バージョン（通常は "1.0.0" から始まります）

    • 説明（空欄）

    • エントリーポイント（通常は "index.js"）

    • リポジトリ情報

    • キーワード

    • 作者名

    • ライセンス（通常は "ISC"）

  3. これらの情報は後から簡単に編集できます。

npm init -y の利点：

  • 時間の節約：手動で情報を入力する必要がありません。

  • 簡単：複雑な設定を覚える必要がありません。

  • 標準化：基本的な構造が自動的に作られるので、プロジェクト間で一貫性が保てます。

このコマンドは、新しいNode.jsプロジェクトを始める際の最初のステップとしてよく使われます。package.json ファイルがあることで、他の開発者とプロジェクトを共有したり、必要なパッケージを簡単にインストールしたりできるようになります。

npm install typescript --save-dev コマンド

このコマンドは、TypeScriptを現在のプロジェクトの開発用の依存関係としてインストールするために使用されます。少し複雑に聞こえるかもしれませんが、一つずつ見ていきましょう。

📓説明

npm install typescript --save-dev は、TypeScriptを現在のプロジェクトに開発用依存関係としてインストールするためのコマンドです。以下のように動作します：

  1. npm install：パッケージをインストールする基本的なコマンド。

  2. typescript：インストールするパッケージの名前。

  3. --save-dev：TypeScriptを開発時の依存関係として保存。

🏃コマンドの動作

  1. TypeScriptが node_modules フォルダにインストールされます。

  2. package.json の devDependencies セクションに TypeScript が追加されます。

  3. もし package-lock.json が存在すれば、それも更新されます。

--save-dev オプションの理由

  • 開発時のみ必要：TypeScriptは開発時にのみ使用され、本番環境では使用されません。

  • 依存関係の管理：他の開発者がプロジェクトをクローンしたとき、npm install だけで必要な開発ツールも含めてすべてインストールできます。

  • 本番環境の最適化：本番環境にデプロイする際、devDependencies はインストールされないので、不要なパッケージを避けられます。

⭐実行

以下のようなことが起こります

イメージ

  • node_modules フォルダに TypeScript がインストールされる。

  • package.json にtypescriptの記述が追加される。

各ファイルの説明

package.json

プロジェクトの設定ファイル、依存関係や基本情報を記述する

・プロジェクトの概要を提供
・必要なパッケージのリストを保持
・スクリプトコマンドを定義

現実世界の例
レシピ本。
料理（プロジェクト）に必要な材料（パッケージ）と手順（スクリプト）が書かれている。

package-lock.json

依存関係の正確なバージョンと構造を記録するファイル。

・依存関係の正確なバージョンを保証
・プロジェクトの再現性を確保
・インストール過程を最適化

現実世界の例
食材（パッケージ）の詳細な仕入れ先リスト。
ブランドや産地（バージョン）まで細かく指定されている。

node_modules

インストールされたパッケージが格納されるフォルダ。

・依存パッケージのコードを保存
・開発環境をセットアップ

現実世界の例
キッチンの食材棚。
必要な食材（パッケージ）が全て揃っている。

終わりに

少し長くなったので、ここで一旦お話をクローズさせて頂きます。
自分自身の学習記録帳のため、乱雑な文章になっている可能性があります。
申し訳ございません。

最後までお読みいただき、ありがとうございます。
私も皆さんのnoteを拝見させて頂いて、多くの気づきを得ています。
本当に感謝🙏です。
今後ともよろしくお願いします。

この記事が気に入ったらサポートをしてみませんか？