Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Node.js Hands-On

1,247 views

Published on

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

Published in: Technology
  • Be the first to comment

Node.js Hands-On

  1. 1. Node.js Hands-On
  2. 2. JavaScript はある程度書けるが 最近よく聞く Node.js はまだちょっと… 対象
  3. 3. Node.js ? npm ? …なにそれ? 対象
  4. 4. 今回は Node.js の 世界 に少しだけ触れてみます。 目標
  5. 5. What is Node.js ?
  6. 6. Node.js とは • javascript実行環境 • 実行エンジンは V8 【出来ること】 • サーバーサイド開発 • クライアントアプリ開発 (→ Electron) • IoT (→ Node.js + Raspberry Pi)
  7. 7. npm とは • Node.js のパッケージ管理ツール • JavaScriptのエコシステム 【出来ること】 • パッケージ登録 • パッケージインストール • パッケージ削除
  8. 8. Setup development environment
  9. 9. 準備するもの • Node.js & npm • Visual Studio Code
  10. 10. 準備するもの • Node.js & npm • Visual Studio Code Node.js と npm はセットで インストールされる Visual Studio Code は MS提供のフリーのエディタ
  11. 11. Node.js の ダウンロード • https://nodejs.org/en/ LTS版をダウンロード LTS = long term support
  12. 12. Node.js の インストール • 指示に従ってインストール フォルダはデフォルト設定のまま オプションはすべて選択
  13. 13. Node.js の インストール • 指示に従ってインストール インストールが終わるまでしばらく待つ。。。
  14. 14. Node.js の 動作確認 • コマンドプロンプトを開いて以下のコマンドを実行 > node --version
  15. 15. npm の 動作確認 • コマンドプロンプトを開いて以下のコマンドを実行 > npm --version
  16. 16. Visual Studio Code の ダウンロード • https://code.visualstudio.com/ ダウンロードを選択
  17. 17. Visual Studio Code の インストール • 指示に従ってインストール フォルダはデフォルト設定のまま
  18. 18. Visual Studio Code の インストール • 指示に従ってインストール デフォルトのままでインストール PATHへの追加はしておいた方が開発が楽なので 必ずチェックしておく
  19. 19. Visual Studio Code の 動作確認 • 起動してみる
  20. 20. Visual Studio Code の 動作確認 • 起動してみる ステータスバー サイドバー エディタビューバー
  21. 21. Try out “npm”
  22. 22. パッケージ管理 • プロジェクトの初期化(package.json 作成) –対話形式で入力していくだけで「package.json」を作成できる –「package.json」はプロジェクトのパッケージ管理情報を保持する > npm init
  23. 23. パッケージ管理 • パッケージのインストール • パッケージのアンインストール • パッケージの更新 • インストール済みパッケージの一覧表示 > npm install <package name> > npm uninstall <package name> > npm update <package name> > npm ls
  24. 24. 「ローカルインストール」と「グローバルインストール」 • オプションを付けなければローカルインストール –カレントディレクトリをプロジェクトルートとして パッケージインストールする –Node.js の require で利用する場合、ローカルインストール > npm install <package name>
  25. 25. 「ローカルインストール」と「グローバルインストール」 • “--global”オプションを付けるとグローバルインストール –デフォルトなら以下のパスへ配置される C:Users<UserName>AppDataRomingnpmnode_modules –実行時にパスを通す必要がない –システム全体で使うコマンドの場合、グローバルインストール (eg. bower, gulp, jshint) > npm install <package name> --global
  26. 26. パッケージの検索 • https://www.npmjs.com/ 検索窓に探し物を入力して探して みれば、パッケージ名、タグ、説 明等から探してくれる
  27. 27. 問題
  28. 28. Visual Studio Code の インテリセンスを有効化 • Visual Studio Code のインテリセンスを有効化するパッケージ をインストールしてください。 [ヒント] • “typings”パッケージをグローバルインストールすれば Visual Studio Code のインテリセンスが有効になります。
  29. 29. 解答
  30. 30. Visual Studio Code の インテリセンスを有効化 • コマンドプロンプトを起動して以下のコマンドを実行 > npm install typings --global
  31. 31. Try out “Node.js”
  32. 32. 基本の実行 • ファイル名を指定して実行 > node <source file>
  33. 33. 基本の実行 • ファイル名を指定して実行 > node <source file> 実行方法は Java に似ている。 中間ファイル(classファイル)が生成されず ソースコードの生ファイルで実行する点が異なる。 エントリーポイントとなる JavaScript ファイルを指定する
  34. 34. 問題
  35. 35. コンソールに “Hello World” 出力 • コンソールに “Hello World” と出力するアプリを作成してくださ い。 [ヒント] • コンソール出力は以下のコードでできます。 • 作成したプログラムの実行は以下のコマンドでできます。 console.log( string ) > node <source file>
  36. 36. 解答
  37. 37. コンソールに “Hello World” 出力 1.プロジェクトディレクトリ作成 C:workspacenodeproject エクスプローラーから 通常のフォルダを作成する
  38. 38. コンソールに “Hello World” 出力 2.Visual Studio Code でディレクトリを開く 「フォルダーを開く」を選択して 先ほど作成したフォルダーを開く
  39. 39. コンソールに “Hello World” 出力 3.ソースコード (program.js) を追加 C:workspacenodeproject └ program.js 「新規ファイル作成」ボタンを選択して 「program.js」ファイルを作成
  40. 40. コンソールに “Hello World” 出力 4.ソースコード (program.js) を実装 console.log(“Hello World”); 「エディタ」エリアで実装
  41. 41. コンソールに “Hello World” 出力 5.コンソール起動 を押下Ctrl + ` 端末が起動する
  42. 42. コンソールに “Hello World” 出力 6.コマンド実行 > node program.js 実行結果が表示される
  43. 43. What is NodeSchool.io ?
  44. 44. NodeSchool.io とは • http://nodeschool.io/ Web開発で必要なスキルが身に着けら れるような”ワークショップ”を提供し ている
  45. 45. learnyounode !! • Node.js を学習できるワークショップ ⇒ learnyounode
  46. 46. learnyounode !! • とりあえずインストール… > npm install learnyounode --global
  47. 47. learnyounode !! • 実行 > learnyounode CHOOSE LANGUAGE から 日本語に変更できる
  48. 48. Node.js の世界へようこそ !!

×