O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Node.js Hands-On

1.313 visualizações

Publicada em

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

Publicada em: Tecnologia
  • Seja o primeiro a comentar

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 の世界へようこそ !!

×