Try Deno

Transcript

1. 1 Deno 試してみた Tatsushi Kiryu 2020.5.19 Tue #隅田川.js
2. 桐生 達嗣（きりゅう たつし） Frontend Engineer@CADDi @TatsushiKiryu 2 HELLO!
3. 会社概要 社名 キャディ株式会社 代表取締役 加藤勇志郎 創業 2017年11月9日 資本金 1億円 ( 資本準備金含み、 10.9億円 ) 事業内容 製造業における 受発注プラットフォーム「 CADDi」の開発・運営 東京本社 〒111-0051 東京都台東区蔵前 1-4-1（総合受付3F） 東京物流拠点 〒130-0005 東京都墨田区東駒形 2丁目22-9 関西支社 兼 物流拠点 〒531-0061　大阪府大阪市 北区長柄西2-10-13 許認可 ISO 9001 取得
4. Tech Stack
5. CTOレター
6. 6 Deno v1.0
7. Deno ざっくり 7 » Node.jsの作者である Ryan Dahl 氏が作った » V8, Rust, Tokio 上に構築された、TypeScript/JavaScript ランタ イム » デフォルトではファイルやネットワークへのアクセスが禁止されてい てセキュア » デフォルトでTypeScriptをサポート » ビルトインでコードフォーマッタや各種ユーティリティを備えている
8. Node.js との主な違い 8 https://deno.land/manual#comparison-to-nodejs » npm を使わない。module への URL か file path を使う。 » package.json を使わない。 » require() を使わない。Es module を使う。 » import * as log from "https://deno.land/std/log/mod.ts"; » 全ての非同期アクションは Promise を返す。 » file, network, environment への明示的な許可をが必要 » Uncaught error で死ぬ
9. Deno で試したこと 9 1. Getting Started をなぞる。 2. 環境構築をする。 3. Style Guide を読む。 4. Deno API をざっと眺める。 5. Third Party Modules を import してみる。
10. 10 1. Getting Started https://deno.land/manual/getting_started
11. 1. Getting Started 11 $ brew install deno $ deno run https://deno.land/std/examples/welcome.ts Welcome to Deno Install & run
12. 1. Getting Started 12 $ deno run https://deno.land/std/examples/curl.ts https://example.com error: Uncaught PermissionDenied: network access to "https://example.com/", run again with the --allow-net flag at unwrapResponse ($deno$/ops/dispatch_json.ts:43:11) at Object.sendAsync ($deno$/ops/dispatch_json.ts:98:10) at async fetch ($deno$/web/fetch.ts:591:27) at async https://deno.land/std/examples/curl.ts:3:13 $ deno run --allow-net https://deno.land/std/examples/curl.ts https://example.com HTTP request requires --allow-net
13. 1. Getting Started 13 OPTIONS: -A, --allow-all Allow all permissions --allow-env Allow environment access --allow-hrtime Allow high resolution time measurement --allow-net=<allow-net> Allow network access --allow-plugin Allow loading plugins --allow-read=<allow-read> Allow file system read access --allow-run Allow running subprocesses --allow-write=<allow-write> Allow file system write access ... -r, --reload=<CACHE_BLACKLIST> Reload source code cache (recompile TypeScript) deno run -h
14. 1. Getting Started 14 $ deno install \ --unstable \ --allow-net \ --allow-read \ --allow-write \ --allow-run \ -f -n das \ https://deno.land/x/deno_app_setuper/cli.ts Run with multiple --allow-xxx options
15. 15 2. 環境構築 https://deno.land/manual/getting_started/setup_your_environment
16. 2. 環境構築 16 VS Code extension　　justjavac のが公式
17. 2. 環境構築 17 .vscode/.settings.json { "deno.enable": true }
18. 18 3. Style Guide https://deno.land/manual/contributing/style_guide
19. 3. Style Guide 19 » 一般 » TypeScript を使う。 » “module”という言葉を使う。library や package という言葉は使わない。 » メタプログラミングは推奨しない。 » 依存は最小に。循環参照を避ける。 » ファイル命名規則 » ファイル名には underscore _ を使う。foo_bar.ts » _foo.ts など underscore から始まるファイル名は、 internal module なので import してはいけない。index.ts / index.js を使わない。もしエントリーポイン トが必要なら mod.ts を使う。Rust の慣例に倣っている。
20. 3. Style Guide 20 » テスト » Module が公開している機能にはテストを書く。 foo.ts -> foo_test.ts » Unit Test は明示的であるべき。
21. 3. Style Guide 21 » コードスタイル » module には copyright header を入れる。 » TODO コメントには Github の Issue や author name を入れる。 » 公開機能には JSDoc を書く。 » 関数の必須引数は最大で 2つまで。オプション引数はオブジェクトとして渡す。 » オプション引数だけが唯一、 ”プレーン”オブジェクトである。必須引数はプレーン オブジェクトとは区別ができる必要がある。（ Array, Map, Date, class MyThing） » トップレベル関数には function を使う。Arrow function はクロージャーに限 定する。
22. 3. Style Guide 22 // BAD: optional parameters not part of options object. (#2) export function resolve( hostname: string, family?: "ipv4" | "ipv6", timeout?: number ): IPAddress[] {} 関数の必須引数は最大で 2つまで。オプション引数はオブジェクトとして渡す。 // GOOD. export interface ResolveOptions { family?: "ipv4" | "ipv6"; timeout?: number; } export function resolve( hostname: string, options: ResolveOptions = {} ): IPAddress[] {}
23. 3. Style Guide 23 // BAD: `env` could be a regular Object export interface Environment { [key: string]: string; } export function runShellWithEnv( cmdline: string, env: Environment ): string {} オプション引数だけが唯一、 ”プレーン”オブジェクトである。 // GOOD. export interface RunShellOptions { env: Environment; } export function runShellWithEnv( cmdline: string, options: RunShellOptions ): string {}
24. 3. Style Guide 24 // BAD export const foo = (): string => { return "bar"; }; トップレベル関数には function を使う。Arrow function はクロージャーに限定する。 // GOOD. export function foo(): string { return "bar"; }
25. 25 4. Deno API https://doc.deno.land/https/github.com/denoland/deno/releases/lat est/download/lib.deno.d.ts
26. 4. Deno API 26 Web と同じ名前のAPI多い。うん、大丈夫そう。 <- これ、かなりのメリット
27. 27 5. Third Party Modules https://deno.land/#third-party-modules
28. 5. Third Party Modules 28 » Web 上のどこからでも import できる » Github » 独自の Web Server » CDN » pika.dev » jspm.io » etc... » Deno 公式 » https://deno.land/x » Deno で動くES Module をホストしているサービス
29. 5. Third Party Modules 29 // moment_sample.ts import { moment } from 'https://deno.land/x/moment/moment.ts'; console.log(moment.now()); $ deno run --reload moment_sample.ts Compile file:///Users/xxx/yyy/zzz/moment_sample.ts Download https://deno.land/x/moment/moment.ts Download https://deno.land/x/moment/vendor/moment.js 1589849822499 Ex）https://deno.land/x から moment.js を import して使ってみる
30. 5. Third Party Modules 30 実行はできたが コード補間 が効かない。。
31. 5. Third Party Modules 31 // import { moment } from "https://deno.land/x/moment/moment.ts"; // @deno-types="https://raw.githubusercontent.com/moment/moment/develop/ts3.1-typings/moment.d.ts" import moment from "https://raw.githubusercontent.com/moment/moment/develop/dist/moment.js"; // さらに deno.land のものをそのまま使ってもコード補間は効かず。 // GitHub から import したものを使ってようやく効くようになった。 console.log(moment.now()); // @deno-types=”” で tsd ファイルを指定
32. 5. Third Party Modules 32 » JavaScript module を import して使いたい場合 // deno-types=”” で型定義 ファイルを指定する。 » CDNで公開されているURLを指定する。 » GitHub にホストされている raw file のURLを指定する。 » ただしサポートする型定義ファイルには制限あり » Node のパス解決に依存して、別の型定義を内部参照しているもの無理。 » ex) React の 型定義ファイル 内部では以下の参照が含まれているので Deno では扱えない。これは JS Module 自体も同様。 import * as CSS from 'csstype'; // 解決できない import * as PropTypes from 'prop-types'; // 解決できない
33. 5. Third Party Modules 33 » npm の @types に相当するものはないのか？ » あった。https://deno.land/x/types » しかし現状は React の型定義ファイルのみ。。 » Deno.land に置いてあるものはそもそも .ts だから問題ないのでは？ » しっかり型がついていなかったりする。
34. 5. Third Party Modules 34 » Deno で扱える module, 型定義ファイル » 外部依存ないもの » 外部依存あるが node module resolution に依存していないもの » Deno で扱えない module, 型定義ファイル » 外部依存あり node module resolution に依存しているもの » Import に明示的なパス指定が必要であるために、 npm package は使えない可能 性が高い。 » pika.dev は検索性がよく探しやすい。 Deno フレンドリーで、一緒に型定義ファイルも ダウンロードできる仕組みを提供している。 » pika.dev にもなければ、GitHub を直接覗きに行く。
35. 35 余談
36. 余談 36 // server.ts import { serve } from "https://deno.land/std@0.50.0/http/server.ts"; const s = serve({ port: 8000 }); for await (const req of s) { req.respond({ body: "Hello World\n" }); } $ deno bundle server.ts server.bundle.js $ deno run --allow-net server.bundle.js error: Uncaught SyntaxError: Unexpected reserved word for await (const req of s) { このサンプル、bundle は成功するが、bundle の run が失敗する
37. 余談 37 Issueを発見 » Top-level for-await not working in bundles #4207 » TypeScript で未実装だったことが判明 » Top Level "for await" not supported, but should be #37402 しばらくは for await は使わないように
38. 38 所感
39. 所感 39 » Install からサンプルを動かすまではあっという間。 » API は Web フレンドリーでとっつきやすい。 » Style Guide は目を通しておいたほうがいい。 » Module の import はちょっとツライと思ったが pika.dev のおか げでだいぶ和らぎそう。 » で、何か作った？ » 作れていないので今後やりたい。
40. Let's try Deno 40
41. キャディに興味ある方 2020/05/21(金)19:30～@オンライン