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勉強会

3,578 views

Published on

[秋葉原][とらのあな] オタク×Node.js勉強会 2/28 水 説明用資料

Published in: Engineering
  • Writing good research paper is quite easy and very difficult simultaneously. It depends on the individual skill set also. You can get help from research paper writing. Check out, please ⇒ www.HelpWriting.net ⇐
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • I pasted a website that might be helpful to you: ⇒ www.WritePaper.info ⇐ Good luck!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

オタク×Node.js勉強会

  1. 1. Copyright (C) 2018 Toranoana Inc. All Rights Reserved. オタク×Node.js勉強会 (Node.js入門) 虎の穴 開発室 柳沢 衛
  2. 2. Copyright (C) 2018 Toranoana Inc. All Rights Reserved. 目次 1. はじめに 2. Node.jsのインストール 3. Node.jsとは 4. Node.jsでの開発 5. Node.jsのJavaScript 6. npmについて 7. Node.jsを使ってみる 8. webページの作り方 9. お題 10.勉強方法について 1
  3. 3. Copyright (C) 2018 Toranoana Inc. All Rights Reserved. 1. はじめに 2
  4. 4. Copyright (C) 2018 Toranoana Inc. All Rights Reserved. 自己紹介 • 柳沢 衛 • 今期見ているアニメ - 宇宙よりも遠い場所 - りゅうおうのおしごと - ヴァイオレット・エヴァーガーデン • 今はまっていること - はつゆきさくら - この大空に、翼をひろげて 3
  5. 5. Copyright (C) 2018 Toranoana Inc. All Rights Reserved. 勉強会の目的 虎の穴での開発はRuby(Ruby on Rails)が中心で すが、Node.jsでもサービスを作りたい。 社内で勉強会を開催しよう! せっかくなので社外にも共有しよう!! 4
  6. 6. Copyright (C) 2018 Toranoana Inc. All Rights Reserved. 勉強会の対象者 • JavaScriptに触ったことがある方 • サーバサイドの開発に興味がある方 • 手軽にwebサービスを作ってみたい方 • Node.jsを勉強てみたい方 • オタクな方 5
  7. 7. Copyright (C) 2018 Toranoana Inc. All Rights Reserved. 勉強会のゴール ちょっとしたwebサービスを作れるようになる 6
  8. 8. Copyright (C) 2018 Toranoana Inc. All Rights Reserved. 2. Node.jsのインストール 7
  9. 9. Copyright (C) 2018 Toranoana Inc. All Rights Reserved. Windows・Mac • 公式からダウンロード(8.9.4 LTS版) - https://nodejs.org/ja/download/ node –v でバージョンが出れば成功 8
  10. 10. Copyright (C) 2018 Toranoana Inc. All Rights Reserved. 3. Node.jsとは 9
  11. 11. Copyright (C) 2018 Toranoana Inc. All Rights Reserved. 特徴①:サーバサイドJavaScript • Google V8 JavaScript Engine - JIT Virtual Machine型のJavaScript実行エンジン - C++で記載されたOSS - 名前の由来はV型8気筒エンジン 10
  12. 12. Copyright (C) 2018 Toranoana Inc. All Rights Reserved. 特徴②:シングルスレッド • C10K問題の解消(クライアント1万台問題) - マルチスレッドは同時アクセス数が増えると性能低下 > スレッド毎に必要なスタックメモリ > コンテキストスイッチによる処理速度の低下 11
  13. 13. Copyright (C) 2018 Toranoana Inc. All Rights Reserved. 特徴③:ノンブロッキングI/O • I/O処理を待たずに次の処理を行う 店レンジ 1 2 これ温めてください少々お待ちください 店レンジ 1 2 温め中 店レンジ 1 2 お待たせしました おせぇよ(怒) 店レンジ 1 2 これ温めてください少々お待ちください 店レンジ 1 2 お次お並びのお客様 どうぞ! 店レンジ 1 お待たせしました お、この店員できる! 客2は既に買い物 を終えて退店 ブロッキングI/O ノンブロッキングI/O 12
  14. 14. Copyright (C) 2018 Toranoana Inc. All Rights Reserved. メリットデメリット • メリット - フロントもサーバも一貫してJavaScriptで書ける - ライブラリが豊富 - 非常に軽量 - 小さな処理を素早く処理するのが得意 • デメリット - 同期処理が苦手 - 重い処理をすると全体のパフォーマンスが低下 13
  15. 15. Copyright (C) 2018 Toranoana Inc. All Rights Reserved. 使用事例 • PayPal - Spring(Java)からNode.jsへ乗り換え > https://www.infoq.com/jp/news/2014/01/paypal-java-javascript • Linked - Ruby on RailsからNode.jsへ乗り換え > https://www.infoq.com/jp/news/2012/10/Ruby-on-Rails-Node-js-LinkedIn • Uber > https://fa-works.com/blog/how-uber-scales-their-real-time-market-platform • サイバーエージェント > https://developers.cyberagent.co.jp/blog/archives/562/ • Netflix > https://thenewstack.io/netflix-uses-node-js-power-user-interface/ 14
  16. 16. Copyright (C) 2018 Toranoana Inc. All Rights Reserved. web以外にできること • デスクトップアプリケーション(Electron) - VisualStudioCode - Atom - Slack • フロントエンドの開発環境構築 - gulp - Webpack • 組み込み - IoT - ラズパイ • サーバレスアプリケーション - API Gateway + AWS Lambda + Node.js 15
  17. 17. Copyright (C) 2018 Toranoana Inc. All Rights Reserved. 4. Node.jsでの開発 16
  18. 18. Copyright (C) 2018 Toranoana Inc. All Rights Reserved. webフレームワーク • Express - ほぼデファクトな軽量フレームワーク • Koa - Expressの開発チームが開発(非同期系の処理に配慮) • Sails - Ruby on Rails Likeなフレームワーク • Meteor - サーバもクライアントもコードが共有できる、フルスタック フレームワーク 17
  19. 19. Copyright (C) 2018 Toranoana Inc. All Rights Reserved. 開発環境について • エディター - VisualStudioCode(MS製) - Atom - Brackets(Adobe製) - Sublime • 統合開発環境(IDE) - Eclipse - WebStorm • WEB IDE - AWS Cloud9 - Eclipse che 18
  20. 20. Copyright (C) 2018 Toranoana Inc. All Rights Reserved. 5.Node.jsのJavaScriptについて 19
  21. 21. Copyright (C) 2018 Toranoana Inc. All Rights Reserved. ES2017(ES8)対応 • 現在の最新版(v9.6.1)では100%対応 - 対応状況はこちら http://node.green/ 20
  22. 22. Copyright (C) 2018 Toranoana Inc. All Rights Reserved. CoffeeScript • coffee-scriptパッケージを入れるとビルド無しで使用 可能 • 実行結果 $coffee main.coffee Hello 0 Hello 1 Hello 2 Hello 3 Hello 4 Hello 5 21
  23. 23. Copyright (C) 2018 Toranoana Inc. All Rights Reserved. 6. npmについて 22
  24. 24. Copyright (C) 2018 Toranoana Inc. All Rights Reserved. npmとは • ライブラリやパッケージを管理するツール 言語 コマンド名 Python pip PHP composer Ruby gem 23
  25. 25. Copyright (C) 2018 Toranoana Inc. All Rights Reserved. npmの使い方(事前準備) • Package.jsonの作成 $ mkdir npmtest $ cd npmtest $ npm init 〜〜中略(全部EnterでOK)〜〜 $ ls package.json package.jsonが作成されている 24
  26. 26. Copyright (C) 2018 Toranoana Inc. All Rights Reserved. パッケージのインストール • 指定したパッケージをインストール • 依存パッケージを全てインストール $ npm install coffee-script ~(中略)~ $ls node_modules package-lock.json package.json インストールされた パッケージが入ってる $ npm install globalにインストールしたい場合は npm install –g coffee-script 25
  27. 27. Copyright (C) 2018 Toranoana Inc. All Rights Reserved. package.jsonの中身 "name": "npm-test", // アプリケーションの名前 "version": "1.0.0", // アプリケーションのバージョン "description": "", // アプリケーションの説明 "main": "index.js", // エンドポイントのファイル "scripts": { // エイリアスコマンド "test": "echo "Error: no test specified"&&exit 1" }, "author": "", // 作者名 "license": "ISC", // ライセンス "dependencies": { // 依存しているライブラリ群 "coffee-script": "^1.12.7" } npm run test で実行 パッケージのバージョンパッケージ名 26
  28. 28. Copyright (C) 2018 Toranoana Inc. All Rights Reserved. よく使うnpm パッケージ名 用途 express webフレームワーク passport 認証ライブラリ jade テンプレートエンジン bluebird Promise拡張 gulp タスクランナー eslint 静的検証ツール sequelize ORM 27
  29. 29. Copyright (C) 2018 Toranoana Inc. All Rights Reserved. 7. Node.jsを使ってみる 28
  30. 30. Copyright (C) 2018 Toranoana Inc. All Rights Reserved. ワークスペースの準備 • 下記URLをクローン • クローンができない方はこちらにアクセス - https://github.com/toranoana/nodejs-study $ git clone https://github.com/toranoana/nodejs-study.git ここからダウンロード 29
  31. 31. Copyright (C) 2018 Toranoana Inc. All Rights Reserved. アニメ情報取得ツール • アニメ情報取得API - http://api.moemoe.tokyo/anime/v1/master/2018/1 ※ 今期のアニメ一覧がJSONで取得できます アニメ情報をオブジェクト の配列で返す 一つのアニメ情報 30
  32. 32. Copyright (C) 2018 Toranoana Inc. All Rights Reserved. ソースコード 31 var http = require('http'); var url = 'http://api.moemoe.tokyo/anime/v1/master/2018/1'; http.get(url, function(res) { var body = ''; res.setEncoding('utf8'); res.on('data', function(chunk) { body += chunk; }); res.on('end', function() { console.log(JSON.parse(body)); }); }); • getAnimeData.js
  33. 33. Copyright (C) 2018 Toranoana Inc. All Rights Reserved. 32 実行結果 $ node getAnimeData.js [ { title_short2: '', twitter_account: 'milkyholmes', public_url: 'https://sp.bushiroad.com/special_tv/', title_short1: 'ミルキィホームズ', sex: 0, twitter_hash_tag: 'milkyholmes', id: 673, sequel: 5, created_at: '2018-01-07 20:29:38.0', city_name: '', cours_id: 17, title: '探偵オペラ ミルキィホームズ アルセーヌ 華麗なる欲望', city_code: 0, title_short3: '', updated_at: '2018-01-07 20:29:38.0' }, … … … ]
  34. 34. Copyright (C) 2018 Toranoana Inc. All Rights Reserved. 8. webページの作り方 33
  35. 35. Copyright (C) 2018 Toranoana Inc. All Rights Reserved. テンプレートエンジン • Jade(Pug) - haml形式で記述 • EJS - JavaのJSPやRubyのERBに似ている • Mustache.js - 多言語で開発されているので一度覚えると流用できる • Handlebars - Mustache互換 • Hogan - Twitterが開発 今回はEJSを使用! 34
  36. 36. Copyright (C) 2018 Toranoana Inc. All Rights Reserved. • ワークスペースの移動 • EJSのインストール 35 EJSを使用したwebページ作成(準備) $ cd learn $ pwd /・・・・・・/nodejs-study/learn $ ls learn-ejs.js learn-template.ejs $ npm install ejs
  37. 37. Copyright (C) 2018 Toranoana Inc. All Rights Reserved. ソースコード(サーバサイド) 36 • learn-ejs.js11行目辺りを下記に修正 server.on('request', function(req, res) { // template.ejsをUTF8で読み込む var template = fs.readFileSync('./learn-template.ejs', 'utf-8'); // templateに変数の値を埋め込む var page = ejs.render(template, data); res.writeHead(200, {'Content-Type': 'text/html; charset=UTF-8'}); res.write(page); res.end(); });
  38. 38. Copyright (C) 2018 Toranoana Inc. All Rights Reserved. ソースコード(テンプレート) 37 <%# ヘッダー %> <h1><%= header %></h1> <%# アニメ数分ループ %> <% for (anime of animes) { %> <div class="div_block"> <div class="div_header"> <%= anime.title %> </div> <img src="<%= anime.image %>" /> <p> 制作会社:<%= anime.production %> </p> </div> <% } %> • learn-template.ejsの14行目辺りに追加
  39. 39. Copyright (C) 2018 Toranoana Inc. All Rights Reserved. 38 実行結果 • コマンドを実行 • ブラウザで http://localhost:3000 にアクセス $ node learn-ejs.js Server runnning at http://127.0.0.1:3000/ ※ 終了は ctrl + z
  40. 40. Copyright (C) 2018 Toranoana Inc. All Rights Reserved. 9. お題(20分) • お題1(難易度:★☆☆) - Web APIで取得したデータをブラウザに表示する • お題2(難易度:★★★) - Web APIで取得したデータを見栄えよくブラウザに表示する 39 http://api.moemoe.tokyo/anime/v1/master/2018/1?ogp=1
  41. 41. Copyright (C) 2018 Toranoana Inc. All Rights Reserved. 10. 勉強方法 • 書籍 - JS+Node.jsによるWebクローラー/ネットエージェント開発 テクニック - サーバサイドJavaScript Node.js入門 • web - JavaScript Promiseの本 > http://azu.github.io/promises-book/ - express実践入門 > https://gist.github.com/mitsuruog/fc48397a8e80f051a14 5 • Udemy - Node.js + Expressで作るWebアプリケーション実践講座 > https://www.udemy.com/web-application-with-nodejs- express/ 40
  42. 42. Copyright (C) 2018 Toranoana Inc. All Rights Reserved. おしまい 41

×