【勉強会】Node.jsの環境構築をしよう

【勉強会】Node.jsの環境構築をしよう

事前準備で行うこと

• VSCodeをインストールする
• VSCodeは、コードを編集するためのコードエディターです。

• Node.jsをインストールする
• Node.jsは、JavaScriptを利用してサーバーサイド開発が行える環境。
• サーバーサイド開発とは、ブラウザからのリクエストに応じてデータの保存・更新・削除・読み取りなどを処理するための開発です。

VSCodeをインストールする

Macユーザー

MacOSでVisual Studio Codeをインストールする手順 - Qiita

Visual Studio Codeとは通称VSCodeと呼ばれ、Microsoft社が開発したテキストエディタです。他のテキストエディタに比べ、HTMLやCSSなどを書く時の補助的な機能が揃って…

https://qiita.com/watamura/items/51c70fbb848e5f956fd6

Windowsユーザー

Visual Studio Codeインストール手順＜Windows向け＞

step1Visual Studio Codeのサイトにアクセス Visual Studio CodeはMicrosoftが開発したWindows、Linux、macOS用の無料で使えるソースコードエ

https://sukkiri.jp/technologies/devtools/vscode_win.html

Macユーザー・Windowsユーザー共通

• 拡張機能とは？

「VSCode」での開発をよりスムーズに！基本的で役に立つ拡張機能を解説

VSCodeの優れているところは、豊富な拡張機能を選んで組み合わせて使えることです。第3回は、拡張機能の探し方、拡張機能の情報の見方、インストールや管理などの方法、基本的で役に立ついくつかの拡張機能を紹介します。

https://codezine.jp/article/detail/17116#:~:text=%E6%8B%A1%E5%BC%B5%E6%A9%9F%E8%83%BD%EF%BC%88VSCode%20Extensions%EF%BC%89%E3%81%A8,%E3%82%A8%E3%83%87%E3%82%A3%E3%82%BF%E3%81%A8%E3%81%97%E3%81%A6%E5%88%A9%E7%94%A8%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%99%E3%80%82

• ほとんどの開発者がインストールしとくと良い拡張機能一覧
• Japanese Language Pack for Visual Studio Code
• vscode-icons
• Code Spell Checker
• zenkaku
• Path Autocomplete
 
 

Node.jsをインストールする

はじめに

• すでにNode.jsがインストールされているかを確認します

// Windowsユーザー
// コマンドプロンプトを起動して以下を入力
// Macユーザー
// ターミナルを起動して以下を入力
node -v

// 以下のようなバージョンが返ってくればインストール済み
v18.16.0

• もしバージョンが返って来なければ以下の手順からインストールを勧めます

Macユーザー・Windowsユーザー共通

ダウンロード | Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

https://nodejs.org/ja/download

• インストールは最新版ではなくLTS推奨版をダウンロードして実施してください
• 理由
• 最新版を利用する必要がないため
• 最新版では開発プレビューの機能が入っていてバグを踏む可能性があるため
• LTSは安定して世の中で広く利用されていて安心なため

• インストールが完了したら以下コマンドでインストールされたかを確認します

// Windowsユーザー
// コマンドプロンプトを起動して以下を入力
// Macユーザー
// ターミナルを起動して以下を入力
node -v

// 以下のようなバージョンが返ってくればインストール済み
v18.16.0

• Node.jsをインストールすると一緒にnpmもインストールされます。

• npmはNode.jsのパッケージ管理ツールです。
• パッケージ管理ツールとは
• どのツールをインストールしているか
• どんなバージョンをインストールしているか
をパッケージ管理ツールを窓口として問い合わせて管理・利用できるもの
例)
• Windows
• Chocolatey
• scoop
• Mac
• Homebrew
• PHP
• Composer
• 作成するWEBアプリケーションにさまざまな便利なライブラリをnpmを通してインストールしてアプリを作成していきます。
例)
• React
• LINE
• GoogleMap