JavaScript LT会〜 React.js Node.js歓迎〜 Deno でやってみるweb開発

Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
2022/02/26 
JavaScript LT会〜 React.js / Node.js歓迎  
 
虎の穴ラボ 
奥谷一陽 
Deno でやってみる WEB開発

自己紹介 
奥谷一陽 
所属：虎の穴ラボ株式会社 
担当：とらコインSHOPなど新規事業系の開発 
興味：TypeScript、Deno 
おすすめコンテンツ： 
　　『プラネテス』 
　　『機界戦隊ゼンカイジャー』 
 
Twitter：@okutann88

「Deno」使ってますか？

Deno とは？  
JavaScriptとTypeScript のシンプルで安全なランタイム 
シンプル：インストールは単一のバイナリだけ 
　　　　　テストツール等を本体のインストールで使える 
安全：　　リソースアクセスへのパーミッション 
　　　　　ファイルアクセスやネットワークの利用には、 
　　　　　明示的なオプションの付与が必要など

Deno とは？ 
そして、Node.js の作者 Ryan Dahl 氏がメインで開発。 
- Node.js の反省 
- package.json 
- モジュールインポートの拡張子の省略他 
参考:https://yosuke-furukawa.hatenablog.com/entry/2018/06/07/080335

Denoの特徴/いいところ  
- ノンセットアップで TypeScript を書き始められる 
- テストツールも付属している(テストとの関係が近い)　　標準モ
ジュールがテスト用の関数群を提供してくれる  
- パッケージ管理にnpmを採用しない　　　　　　　　　npm(及び
node_modules) での管理は複雑 
　　参考: https://kt3k.github.io/talk_devsumi_2022_deno/#1

今回は、 
「Denoそのもの」ではなく、 
「Denoで開発」どのくらいできるだろう？ 
というお話です

アジェンダ 
話すこと 
- 現在の「Denoで開発」ってどのくらいできるだろう？ 
- Reactを書きたい! 
- リッチにReactを書きたい!! 
- もっとリッチにReactを書きたい!!! 
- それでも足りていないものは？ 
話さないこと 
- Node.js 互換モードについて

Reactを書きたい！

https://github.com/kt3k/packup
https://github.com/kt3k/packup

packup 
概要 
- Parcel インスパイアの 
js(ts)/css(scss)をビルドしてくれるバンドラー

Deno は、Node.js におけるnpmにあたるものが無い 
npmパッケージをESM(ES Modules)で配信するCDNから、 
URLを使ってimportします。 
- esm.sh <= 今回はコチラ 
- Skypack 
- JSPM

デモ - packup で React を動かす -

packupを使えば 
- ビルドしたファイルを置くだけで良いアプリの場合、 
十分要件を満たせそう 
- scss -> css への変換もやってくれる 
注意事項 
- parcel や、vite 、webpack-dev-server 
にあるような API proxy 機能が無いので、 
APIも準備したい場合には工夫が必要

リッチにReactを書きたい！！

https://github.com/exhibitionist-digital/ultra

Ultra
概要 
- React アプリケーションフレームワーク 
- SSRに対応 
packup との使い分け 
- SSR を使いたい！ 
- APIも準備したい！ 
場合、Ultra をオススメ

デモ - Ultra で「twitter でログイン」 -

デモアプリ - ツイッタータイムライン -  
アプリを公開済みです。 
https://github.com/Octo8080/Twitter-Timeline-app 
Deno で Twitter 連携ログインをするアプリの検証として作成 
https://test001.deruta3.net/

Ultra を使えば 
SSR 機能付きのReact アプリケーションを　　　　　　　Denoで動かせ
る 
注意事項 
- 最近公開された Ultra 0.7 で大きく変更が入った 
APIの拡張など0.6のノウハウが一部生かせないかも

もっとリッチにReact書きたい!!!

https://github.com/alephjs/aleph.js
https://github.com/alephjs/aleph.js

Aleph.js 
概要 
- Next.js インスパイアのフルスタックフレームワーク 
- SSR/SSG対応 
- ファイルシステムルーティング対応 
Ultra との使い分け 
- SSGや、ファイルシステムルーティングを使いたい！ 
- 現在Next.jsを使っている 
場合、コチラをオススメ

デモ - Aleph.js を導入-

それでも足りないものは？

それでも足りないものは？ 
ORMの選定 
Node.js で使われるORMのいくつかは、　　　　　　　　 Deno 対応
の issue がありPrisma は　　　　　　　　　　モジュールの登録が済
んでいる、注視したい 
https://github.com/sequelize/sequelize/issues/12836 
https://github.com/typeorm/typeorm/issues/6123 
https://github.com/prisma/prisma/issues/2452 
要件次第では「アレがない」は起こりうる

最後に

これからのDeno 
Deno 2 が、2022年前半にやってくる！ 
- もうすぐロードマップも公開されそう 
- Deno は、最近Node.jsとの互換性に重きを置いている 
- NPMエコシステムとの互換性向上と、　　　　　　　　　代わりになる
パッケージ管理ソリューションにも言及されていてよりNode.jsの
既存資産を活かし易くなりそう

で、結局虎の穴ラボは開発に使っているの？ 
- 社内向けのアプリの開発で使用中 
- ノウハウが得られれば(＋要件とマッチすれば) 
社外向けのサービスに使うことも検討できる見込み

宣伝 
Denoに関することであればなんでもOKでのLT会やってます

ご静聴ありがとうございました

JavaScript LT会〜 React.js Node.js歓迎〜 Deno でやってみるweb開発

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to JavaScript LT会〜 React.js Node.js歓迎〜 Deno でやってみるweb開発

Similar to JavaScript LT会〜 React.js Node.js歓迎〜 Deno でやってみるweb開発 (20)

More from 虎の穴開発室

More from 虎の穴開発室 (17)

Recently uploaded

Recently uploaded (7)