https://gyazo.com/f5d38ddb1f79462cb2d7c2cf6d776a7d
ざっくり説明
nodejs作者
ビルトインでユーティリティがある
package.jsonも使わない
es modulesを使う
明示的な許可が必要
試したこと
getting started
HTTP request requires --allow-net
deno run -hでヒント
multipleで複数実行
環境構築
VSCodeのExtension
deno公式がある
justjavac
settings.jsonでenableするだけ
Style Guide
ファイル命名規則
underscoreを使う
indexは使わない
エントリーポイントが必要ならmod.tsにする
コードスタイル
関数の必須引数は最大２つ
オプション引数はオブジェクトとして渡す
オプション引数はプレーンオブジェクトである
トップレベル関数にはfunction
arrow functionはクロージャーに限定する
Deno API
3rdパーティモジュール
webのどこからでもimportできる
コード補完が効かない（型の恩恵が得られない）
型定義を指定した
// deno-types=""で指定する
nodeのパス解決に依存しているのはない分参照しているので無理
npmの@typesはないのか？
deno.land/x/types
現状Reactの型定義のみ
pika.devは検索性がよい
mizchi.dev
full AMP
GA対応
どんなブログがほしかったのか
サーバーの運用をしたくない
つくった
本音
静的サイト運用の知見を貯めたい
Reactでガシガシ動く作例を置く場所がほしかった
next.jsのSSGとAMPモードの採用
amp: trueするだけ
AMPのプラグインをつっこむ
rollup+preact+amp-scriptで動的なコンポーネントが作れる
AMP環境のmarkdownに求められる仕様
img => amp-imgかつlayout仕様を満たす固定幅の要素に
数式ブロックをamp-mathmlに変換
コードライトはランタイムで構文解析できない
markdown内でimport構文が使える
AMDX
Accelarated MDX
AMDXG: AMDX による静的サイト生成ツールキット
amdx-loader: amdx の webpack 用のローダー
amdxg-components: ブログ用のデフォルトコンポーネント集。使わなくてもいい
amdxg-cli: ページの雛形や各種メタデータ生成用の CLI
amdxg-boilerplate: ただのボイラープレート。(注意: まだ安定してない。頻繁に変わる)
ドキュメントの解析
docs/*.mdx の frontmatter を解析
フリーランスエンジニア
@types/express
公式の型定義がなかった
メソッドごとに型定義ができるように
get
post
delete
Route handlers
ほぼほぼ any
型検査もない
Requestへジェネリックに渡せる
Declarationファイルを分ける
メソッドに合わせて値を返す
50〜100個のAPIはザラ
typed-oax
Open API
Open API AST
Typescript AST
Handler Types (d.ts)
Reactでstatefulなコンポーネントをどう作るか
前提
コンポーネントをツリー状に組み合わせてUIを構築
statefulなものとstatelessのものがある
view関数=stateless関数コンポーネント
view関数は同じpropsに対して同じhtmlを返す
状態管理について
ほとんどはstatelessにするのが好ましい
elmはすべてview関数にすることが推奨
view関数のみでアプリUIを構築する
それでもstatefulコンポーネントを使う
htmlの中に置くだけで使える
UI要素に付随する状態や副作用を隠蔽できる
インターフェイスがすっきり
ライブラリで提供するのは比較的わかりやすい
例
MultipleDatePicker
悩み
propsをstateにマージさせるとややこしい
statefulな子コンポーネントをpropsで渡した値によって変化させるのはインターフェイスとしてわかりにくい
どうつくるか
マイルール１
1. view関数
2. 状態遷移を定義したreducerと初期状態
3. 1と2を適切に組み合わせたstatefulコンポーネント
マイルール２
propsとして時間変化する相対を受け取らない
複雑なアプリケーションを実装する上で疎結合に作るのは重要
状態管理を一箇所に集めると見やすいわけではない
Nice to Meet you, Deno!
セキュアなJS/TSランタイム
ブラウザとサーバサイドの互換性、セキュリティを重視
ディーノと読む
v8エンジンをrustのAPI経由でAPIをいじる