Node.js Hands-On

Node.js Hands-On

JavaScript はある程度書けるが

　　　　最近よく聞く Node.js はまだちょっと…

対象

Node.js ？ npm ？ …なにそれ？

対象

今回は Node.js の 世界 に少しだけ触れてみます。

目標

What is Node.js ?

Node.js とは

• javascript 実行環境• 実行エンジンは V8

【出来ること】• サーバーサイド開発• クライアントアプリ開発

（→ Electron ）• IoT

（→ Node.js + Raspberry Pi ）

npm とは

• Node.js のパッケージ管理ツール• JavaScript のエコシステム

【出来ること】• パッケージ登録• パッケージインストール• パッケージ削除

Setup development environment

準備するもの

• Node.js & npm

• Visual Studio Code

準備するもの

• Node.js & npm

• Visual Studio Code Node.js と npm はセットでインストールされる

Visual Studio Code はMS 提供のフリーのエディタ

Node.js の ダウンロード

• https://nodejs.org/en/

LTS 版をダウンロード

LTS ＝ long term support

Node.js の インストール

• 指示に従ってインストール

フォルダはデフォルト設定のまま

オプションはすべて選択

Node.js の インストール

• 指示に従ってインストール

インストールが終わるまでしばらく待つ。。。

Node.js の 動作確認

• コマンドプロンプトを開いて以下のコマンドを実行

> node --version

npm の 動作確認

• コマンドプロンプトを開いて以下のコマンドを実行

> npm --version

Visual Studio Code の ダウンロード

• https://code.visualstudio.com/

ダウンロードを選択

Visual Studio Code の インストール

• 指示に従ってインストール

フォルダはデフォルト設定のまま

Visual Studio Code の インストール

• 指示に従ってインストール

デフォルトのままでインストールPATH への追加はしておいた方が開発が楽なので必ずチェックしておく

Visual Studio Code の 動作確認

• 起動してみる

Visual Studio Code の 動作確認

• 起動してみる

ステータスバー

サイドバー

エディタビューバー

Try out “npm”

パッケージ管理

• プロジェクトの初期化（ package.json 作成）

–対話形式で入力していくだけで「 package.json 」を作成できる–「 package.json 」はプロジェクトのパッケージ管理情報を保持する

> npm init

パッケージ管理

• パッケージのインストール

• パッケージのアンインストール

• パッケージの更新

• インストール済みパッケージの一覧表示

> npm install <package name>

> npm uninstall <package name>

> npm update <package name>

> npm ls

「ローカルインストール」と「グローバルインストール」

• オプションを付けなければローカルインストール

–カレントディレクトリをプロジェクトルートとしてパッケージインストールする–Node.js の require で利用する場合、ローカルインストール

> npm install <package name>

「ローカルインストール」と「グローバルインストール」

• “--global” オプションを付けるとグローバルインストール

–デフォルトなら以下のパスへ配置される C:\Users\<UserName>\AppData\Roming\npm\node_modules–実行時にパスを通す必要がない–システム全体で使うコマンドの場合、グローバルインストール

(eg. bower, gulp, jshint)

> npm install <package name> --global

パッケージの検索

• https://www.npmjs.com/

検索窓に探し物を入力して探してみれば、パッケージ名、タグ、説明等から探してくれる

問題

Visual Studio Code の インテリセンスを有効化

• Visual Studio Code のインテリセンスを有効化するパッケージをインストールしてください。

[ ヒント ]• “typings” パッケージをグローバルインストールすれば

Visual Studio Code のインテリセンスが有効になります。

解答

Visual Studio Code の インテリセンスを有効化

• コマンドプロンプトを起動して以下のコマンドを実行> npm install typings --global

Try out “Node.js”

基本の実行

• ファイル名を指定して実行

> node <source file>

基本の実行

• ファイル名を指定して実行

> node <source file>

実行方法は Java に似ている。中間ファイル（ class ファイル）が生成されずソースコードの生ファイルで実行する点が異なる。

エントリーポイントとなる JavaScript ファイルを指定する

問題

コンソールに “ Hello World” 出力

• コンソールに “ Hello World” と出力するアプリを作成してください。

[ ヒント ]• コンソール出力は以下のコードでできます。

• 作成したプログラムの実行は以下のコマンドでできます。

console.log( string )

> node <source file>

解答

コンソールに “ Hello World” 出力

１．プロジェクトディレクトリ作成

C:\workspace\nodeproject

エクスプローラーから通常のフォルダを作成する

コンソールに “ Hello World” 出力

２． Visual Studio Code でディレクトリを開く

「フォルダーを開く」を選択して先ほど作成したフォルダーを開く

コンソールに “ Hello World” 出力

３．ソースコード (program.js) を追加

C:\workspace\nodeproject　└ program.js

「新規ファイル作成」ボタンを選択して「 program.js 」ファイルを作成

コンソールに “ Hello World” 出力

４．ソースコード (program.js) を実装

console.log(“Hello World”);

「エディタ」エリアで実装

コンソールに “ Hello World” 出力

５．コンソール起動　　　　　　を押下Ctrl + `

端末が起動する

コンソールに “ Hello World” 出力

６．コマンド実行> node program.js

実行結果が表示される

What is NodeSchool.io ?

NodeSchool.io とは

• http://nodeschool.io/

Web 開発で必要なスキルが身に着けられるような”ワークショップ”を提供している

learnyounode !!

• Node.js を学習できるワークショップ⇒ learnyounode

learnyounode !!

• とりあえずインストール…

> npm install learnyounode --global

learnyounode !!

• 実行

> learnyounode

CHOOSE LANGUAGE から日本語に変更できる

Node.js の世界へようこそ !!