狠狠撸

JavaScript はある程度書けるが
最近よく聞く Node.js はまだちょっと…
対象

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

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

Node.js とは
? javascript実行環境
? 実行エンジンは V8
【出来ること】
? サーバーサイド開発
? クライアントアプリ開発
（→ Electron）
? IoT
（→ Node.js + Raspberry Pi）

npm とは
? Node.js のパッケージ管理ツール
? JavaScriptのエコシステム
【出来ること】
? パッケージ登録
? パッケージインストール
? パッケージ削除

準備するもの
? 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 の動作確認
? 起動してみる
ステータスバー
サイドバー
エディタビューバー

パッケージ管理
? プロジェクトの初期化（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>AppDataRomingnpmnode_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

基本の実行
? ファイル名を指定して実行
> node <source file>

基本の実行
? ファイル名を指定して実行
実行方法は Java に似ている。
中間ファイル（classファイル）が生成されず
ソースコードの生ファイルで実行する点が異なる。
エントリーポイントとなる
JavaScript ファイルを指定する

コンソールに “Hello World” 出力
? コンソールに “Hello World” と出力するアプリを作成してくださ
い。
[ヒント]
? コンソール出力は以下のコードでできます。
? 作成したプログラムの実行は以下のコマンドでできます。
console.log( string )

１．プロジェクトディレクトリ作成
C:workspacenodeproject
エクスプローラーから
通常のフォルダを作成する

２．Visual Studio Code でディレクトリを開く
「フォルダーを開く」を選択して
先ほど作成したフォルダーを開く

３．ソースコード (program.js) を追加
C:workspacenodeproject
└ program.js
「新規ファイル作成」ボタンを選択して
「program.js」ファイルを作成

４．ソースコード (program.js) を実装
console.log(“Hello World”);
「エディタ」エリアで実装

５．コンソール起動
を押下Ctrl + `
端末が起動する

６．コマンド実行
> node program.js
実行結果が表示される

NodeSchool.io とは
? http://nodeschool.io/
Web開発で必要なスキルが身に着けら
れるような”ワークショップ”を提供し
ている

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

learnyounode !!
? とりあえずインストール…
> npm install learnyounode --global

learnyounode !!
? 実行
> learnyounode
CHOOSE LANGUAGE から
日本語に変更できる

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

狠狠撸

Node.js Hands-On

Recommended

More Related Content

What's hot (20)

Viewers also liked (6)

Similar to Node.js Hands-On (20)

More from Akinari Tsugo (7)

Recently uploaded (11)

Node.js Hands-On