Node.jsではじめるオレオレツールの世界

Transcript

1. Node.jsではじめる オレオレツールの世界
2. 名前：堀内 大史 　　　Hirofumi Horiuchi 仕事：C# でPOSアプリ開発 趣味：キャンプ・サッカー観戦
3. “ オレオレツールとは？(本LTでの定義)
4. “ オレが作ってオレのために使う ローカル環境で実行する(JSの)ツール
5. はじめに 1
6. “ WindowsやMacでもJSを実行する コマンドが用意されている Windows：wscript, cscript Mac：jsc
7. “ コードを書いて実行してみると・・・ index.js console.log(“Hello world”);
8. “ なんと、エラーになって動かない。 $ cscript index.js C:\work\sample\index.js(1, 1) Microsoft JScript 実行時エ ラー: 'console' は宣言されていません。
9. “ `console.log()` はサポートされておらず コンソールへの出力は `print()`、`WScript.Echo()` など、ホスト環境により変わる。
10. “ めんどくさい・・・ （知らなかっただけ）
11. “ そこで登場するのが・・・
12. “ 　 　Node.js
13. Node.jsでHello world console.log();
14. “ index.js console.log(“Hello world”);
15. “ 出力される！ $ node ./index.js Hello world
16. “ ここからはNode.jsで出来ることを紹介 （オレオレツールとして）
17. Node.jsでファイル操作
18. ファイル操作モジュール 「fs」 Node.js公式のモジュールで、 ファイル操作を行うためのもの。 標準のまま `require('fs')` するだけで 利用できる。
19. 利用例 const fs = require('fs'); // カレントディレクトリのファイル一覧 const pathList = fs.readdirSync('./'); // ファイルの書き込み const path = 'index.js'; const data = 'console.log("Hello world");'; fs.writeFileSync(path, data); // ファイル読み込み const fileData = fs.readFileSync(path, "utf-8"); console.log("fileData", fileData);
20. NPMを使う
21. “ Node.jsなので、npmで 既存のパッケージを簡単に使える
22. “ ` npm init ` で package.json を作成
23. “ 色々聞かれますが、 全てEnterでいいです。
24. “ なぜなら・・・ オレオレツールだからです。
25. “ package.json ができたら npmでインストールする準備が完了。 ここからライブラリを紹介
26. Excelを操作する 「xlsx」
27. Excel操作ライブラリ 「xlsx」 Excelファイルへのread/writeが出来る。 シート内の情報をjsonで取得出来たり して便利。
28. こんなExcelを読み込んでみます
29. 利用例 const xlsx = require("xlsx"); // ファイル名、シート名を指定してシート情報を取得 const book = xlsx.readFile("sample.xlsx"); const sheet = book.Sheets["Sheet1"]; // シート情報をJsonで取得 const jsonData = xlsx.utils.sheet_to_json(sheet); console.log(jsonData);
30. 実行結果 $ node .\xlsx-sample.js [ { ItemNo: '1', ItemName: 'ぶどう', price: '600' }, { ItemNo: '2', ItemName: '桃', price: '400' }, { ItemNo: '3', ItemName: 'スモモ', price: '300' } ]
31. HTTPクライアントの「axios」
32. HTTPクライアント 「axios」 Promise ベースのHTTPクライアント。 ReactとかVue.jsとかではおなじみ (だと思っている)
33. 利用例 const axios = require('axios'); // connpassからWeJSの勉強会情報をGetで取得 const url = 'https://connpass.com/api/v1/event/'; const param = { keyword : 'We Are JavaScripters! @22nd' } axios.get(url, { params: param }) .then((response) => console.log(response.data));
34. 実行結果 $ node .\axios-sample.js { results_returned: 1, events: [ { event_url: 'https://wajs.connpass.com/event/91558/', event_type: 'participation', started_at: '2018-07-23T19:30:00+09:00', hash_tag: 'WeJS', title: 'We Are JavaScripters! @22nd【初心者歓迎LT大会】', event_id: 91558, waiting: 31, limit: 86, accepted: 86, ], results_start: 1, results_available: 1 } ※一部結果を省略
35. “ ここまで紹介したものを組み合わせると、 ①特定のディレクトリから 　Excelファイルを探し ②Excelから必要なデータを取得 ③Webサーバにデータを送信 みたいなことができます。
36. 作ったツールを他人に使ってもらう
37. “ いざツールが完成したら 同じチームの仲間にも作ったツールを 使ってほしいと思うかもしれません。
38. “ ただし、 ソースは渡したくない （ソースを汚く書いちゃったとか） といったこともあるでしょう。
39. “ そこで
40. “ Webpack
41. 「Webpack」 JSファイルをまとめる高機能な モジュールバンドラ。 1つのJSファイルに色々まとめてくれる。 オレオレツールなので雑に導入
42. 「Webpack」を雑に導入① `npm i -D webpack webpack-cli` Webpack.config.js を作成。中身↓ module.exports = { mode: 'production', target: 'node', };
43. 「Webpack」を雑に導入② `npx webpack ./index.js` ←mainに該当するjsファイル ./dist/main.js が作成されます。 これを提供すればOKです。
44. まとめ
45. “ ・Node.jsと各種ライブラリのおかげで 　楽にいろいろなことが出来そう ・オレオレツールなので、エラー処理など 　細かいことには目をつぶり、 　自由に楽しく作ることができる。 ・誰かにツールを渡したくなったら雑に 　WebPackを使えば簡単。
46. “ オレオレツールで 楽しいJavascriptライフを送りましょう。
47. “ ご清聴ありがとうございました。