JavaScript はある程度 読み書きできる人 を対象に、Node.js および npm を実際に使ってみます。 環境は何でもよいのですが、今回は Windows 環境で Visual Studio Code という エディタ を利用して、コンソール に "Hallo World" を出力する プログラム を作成します。 このスライドで Node.js を始める足掛かりが得られる ハズ。

1. Node.js Hands-On

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

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

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

5. What is Node.js ?

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

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

8. Setup development environment

9. 準備するもの
• Node.js & npm
• Visual Studio Code

10. 準備するもの
• Node.js & npm
• Visual Studio Code
Node.js と npm はセットで
インストールされる
Visual Studio Code は
MS提供のフリーのエディタ

11. Node.js の ダウンロード
• https://nodejs.org/en/
LTS版をダウンロード
LTS ＝ long term support

12. Node.js の インストール
• 指示に従ってインストール
フォルダはデフォルト設定のまま
オプションはすべて選択

13. Node.js の インストール
• 指示に従ってインストール
インストールが終わるまでしばらく待つ。。。

14. Node.js の 動作確認
• コマンドプロンプトを開いて以下のコマンドを実行
> node --version

15. npm の 動作確認
• コマンドプロンプトを開いて以下のコマンドを実行
> npm --version

16. Visual Studio Code の ダウンロード
• https://code.visualstudio.com/
ダウンロードを選択

17. Visual Studio Code の インストール
• 指示に従ってインストール
フォルダはデフォルト設定のまま

18. Visual Studio Code の インストール
• 指示に従ってインストール
デフォルトのままでインストール
PATHへの追加はしておいた方が開発が楽なので
必ずチェックしておく

19. Visual Studio Code の 動作確認
• 起動してみる

20. Visual Studio Code の 動作確認
• 起動してみる
ステータスバー
サイドバー
エディタビューバー

21. Try out “npm”

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

23. パッケージ管理
• パッケージのインストール
• パッケージのアンインストール
• パッケージの更新
• インストール済みパッケージの一覧表示
> npm install <package name>
> npm uninstall <package name>
> npm update <package name>
> npm ls

24. 「ローカルインストール」と「グローバルインストール」
• オプションを付けなければローカルインストール
–カレントディレクトリをプロジェクトルートとして
パッケージインストールする
–Node.js の require で利用する場合、ローカルインストール
> npm install <package name>

25. 「ローカルインストール」と「グローバルインストール」
• “--global”オプションを付けるとグローバルインストール
–デフォルトなら以下のパスへ配置される
C:Users<UserName>AppDataRomingnpmnode_modules
–実行時にパスを通す必要がない
–システム全体で使うコマンドの場合、グローバルインストール
(eg. bower, gulp, jshint)
> npm install <package name> --global

26. パッケージの検索
• https://www.npmjs.com/
検索窓に探し物を入力して探して
みれば、パッケージ名、タグ、説
明等から探してくれる

27. 問題

28. Visual Studio Code の インテリセンスを有効化
• Visual Studio Code のインテリセンスを有効化するパッケージ
をインストールしてください。
[ヒント]
• “typings”パッケージをグローバルインストールすれば
Visual Studio Code のインテリセンスが有効になります。

29. 解答

30. Visual Studio Code の インテリセンスを有効化
• コマンドプロンプトを起動して以下のコマンドを実行
> npm install typings --global

31. Try out “Node.js”

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

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

34. 問題

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

36. 解答

37. コンソールに “Hello World” 出力
１．プロジェクトディレクトリ作成
C:workspacenodeproject
エクスプローラーから
通常のフォルダを作成する

38. コンソールに “Hello World” 出力
２．Visual Studio Code でディレクトリを開く
「フォルダーを開く」を選択して
先ほど作成したフォルダーを開く

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

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

41. コンソールに “Hello World” 出力
５．コンソール起動
を押下Ctrl + `
端末が起動する

42. コンソールに “Hello World” 出力
６．コマンド実行
> node program.js
実行結果が表示される

43. What is NodeSchool.io ?

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

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

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

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

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