Embed Size (px)
Citation preview
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 の世界へようこそ !!
