Denoに無理矢理React.jsの型検査をやらせようとしていたけどようやく優勝できそうな気がしてきた
2022-03-13
改めて見るとめっちゃ意味わからんことやっているな
全然こんなことする必要無いです
esm.shを使いましょう
index.html<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=utf-8">
<meta name="MobileOptimized" content="width">
<meta name="HandheldFriendly" content="true">
<meta name="viewport" content="width=device-width">
<script async="" type="module" src="main.js"></script>
</head>
<body>
<span id="react-root"></span>
</body>
</html>main.tsx/// <reference no-default-lib="true" />
/// <reference lib="esnext" />
/// <reference lib="dom" />
import React from "https://esm.sh/react@17.0.2";
import ReactDOM from "https://esm.sh/react-dom@17.0.2";
const element = document.getElementById("react-root")!;
ReactDOM.render(element, <span>DenoでReactできますよ</span>);bundle.shdeno bundle -r=https://scrpabox.io https://scrapbox.io/api/code/villagepump/Denoに無理矢理React.jsの型検査をやらせようとしていたけどようやく優勝できそうな気がしてきた/main.tsx main.js修正感謝
そっかasyncするといいのか
この用途だとdeferの方がよさげ？
deferはいらないとかなんとかMDNさんが言ってた気がする
あったあった
なるほど、そもそも
module 付けた時点でDOMツリー構築後まで遅延評価されるのかなにもわからない、雰囲気でHTMLをやっている
独学の悪い所ですよねーこれ、悪い点がこうして晒さないと分からない
まあ自分もscrapboxの
<script> にあった属性をコピペしただけですそのあとMDNで調べた
あっそうだ、これも含めた修正を#1に投げてあるのでお時間のあるときにご確認ください～
修正はしたけどスマホなのでテストはできないです
from 2020/12/17
JS/TSのimportを全然理解していなかったのが敗因だった
https://github.com/Soremwar/deno_types という便利なものがあるのでcloneした上で
tsimport type JSX from "./deno_types/react/v16.13.1/react.d.ts";
import * as React from "./deno_types/react/v16.13.1/react.d.ts";
import * as ReactDOM from "deno_types/react-dom/v16.13.1/react-dom.d.ts";みたいにしたら型だけimportできた
型定義しかないからbundleがこける…つらい…
本筋からはそれますが、cloneしなくても
from "https://raw.githubusercontent.com/Soremwar/deno_types/master/react/v16.13.1/react.d.ts" でよさそうですね
ローカルにcloneしてるのは趣味ですね（たしかに必要ない）
いや、これ完全に間違ってるな
bundleしたくなくて
<script> 経由でReact使いたいだけなのにどうしてここまで苦労しないといけないんだ一日溶かしたけど無理な気がしてきた
allowUmdGlobalAccess というフラグを立てればいけそうな気がするんだけどご丁寧に潰されているあ、行けた
これに書いてあるTriple-slash directivesのpathに型定義ファイルを指定したら行けた
型定義だからtypesじゃないとだめだと思っていたのが罠だった
Node.js用のオプションだからDenoで使うと死ぬ
丸一日かけて辿り付いた答えがたった1行というのはよくある話
上に書いたリポジトリに書いてある
@deno_types が全然効かなかったのはcloneしたせいなんだろうか、検証が必要ちゃんと型検査される
すごくバッドノウハウ感ある
知見まとめたいけど誰の役にも立たなさそう
ぜひ/deno-jaに書いていただきたい
そういえば参加してたの忘れてた、整理と追加検証が済んだらそこに書きますか
とりあえずサーバーサイド用の正しいやり方は書いた
いい感じに加筆されてる！
そろそろ環境構築おじさんになりつつある気がするのでもう一度やりたいことを考えたほうがいい気がしてきた
React.jsいじりは楽しいからいいっちゃいいんだけど可処分時間のほぼ全てが注ぎ込まれて他のほぼ全てが止まっているので
React.jsを実践的に学んでいるとみれば、あとあと役に立つことではあると思う
そもそもの目的を書き出してみるといいかも
要件はPCとスマホの間で楽にメモを共有したい、ただそれだけのはずだった
自分のアホさ加減でも使えるような同期ツールがあれば済むだけの話
これだけだったら既存tool (それこそscrapboxとか)で済むことのはず
他にもほしい要件があったのでは？
Vimで使ってるメモと共有したいというのはあった
なるほど
2020/11/22#5fba75634bb2e200004b7fceを見る限り、試しにscrapboxっぽいものを作ってみたかった感じでもあるような
2 hop linkが効くメモツールが自前で欲しいというのはありますね
探したけど無かった、完全にここがオリジナルらしい
ある意味タグがそれに該当しますが、文中リンクのように使えるのserviceはないですね
Roam Researchならいけるか？
2021-07-24 17:07:00 Obsidianでも使える
それに哲学を知るのには真似するのが一番
なんでも真似ぶのが一番
どうせならWikiがいいよね、どうせならWebで動いてると開発楽だよね、どうせWikiにするならWYSIWYGっぽくなってたほうがいいよねみたいな感じでどんどん脱線していった
気が付いたらScrapboxのcloneに近い物を段階的に作ろうとしていた
これやるとimportが一切使えなくなることが判明した、だめじゃん
UMDのReactとES Modulesは共存できないということらしいです
結局ダーティハックで回避した
UMDのReactを無理矢理exportするハリボテを作ってDenoに読ませた
そろそろ何やってるんだろうって気がしてきた(n回目)
てかReactってESModulesではなかったのか
個人的事情でUMDの物を無理矢理使ってるだけです
ESMのがあるのか自体把握してないですすみません
import * as React from 'react' のような文法を使って書いたのを、ESModulesを使って書いてると認識していたのですが、そのESModulesとは違うのでしょうか？もっともNode.js上で構築されているのでそのままでは使えないのでしょうが
これですね
Node.jsがCommonJSで書かれた物もES Modulesのセマンティクスで解決してくれるのでその方法で上手くいくのであって、内側までES Modulesで書かれてるわけではない
完全に嘘を付いてた
Webpackがいい感じに差異を吸収してくれるかららしいです
ここに書いてありました
すっごくわかりやすい!
タダでいいのか
試し読み版だからいいのか……
Webpack君が過去の遺産をなんとかしてくれるのか
感謝しなきゃ
紛らわしくてスマソ
いえ。むしろ説明してくださって助かりました
なるほど。他方式で書かれたコードをES Modules記法で使えるようにwrapしてあるだけということですか。
wrap、というよりはNode.jsのモジュール解決が闇便利なのでexport側がCommonJSでimport側がES Modulesということが可能
Node.jsの闇を垣間見た
(そもそもUMDもCommonJSもよくわからん)
雑に言うとUMDが
<script> 経由でグローバルに読み込ませるアレでCommonJSがnodeが使ってるモジュールの解決法です(requireと(modules.)exportsを使うやつ)_
| UMD | <script>経由 |
| CommonJS | require()のアレ |
| ESModule | export/import |
CDN経由も
<script> に読み込ませられるから、実質UMDと同じ？それとも相違点がある？
同じですね
UMDで配ってる所もあればES Modulesで配ってる所もあるって感じかな
違ったら訂正オナシャス
npmから落としてきた物はUMDとCommonJSしかないな
CDN経由だとESModulesで使えるけどこれがどうやって生成されてるのかがよくわからないので安心して使えない
Zatsu wikiの外部module参照がややこしかったのはこういう経緯があったのか
これらを一気に解決したesm.shは偉大
実を言うと、当時からesm.shはあった(気がする)
なぜこんな回りくどいことをしていたかというと聞いたこともないサービスを信頼していいのか分からなかったから
Denoのキャッシュ機構についての理解も足りなかったので将来ビルドできなかったらどうしようとか思っていた
信頼とかぜんぜん考えたことなかった()
もうちょっと警戒心を持つようにしないとだめか
警戒、というか突然死んだら困るなーくらいの感覚
リンク切れて使えなくなること意外とある
紆余曲折あって信頼していいと判断したので使うようになった
そもそもOSSである
いざとなったら自分で動かせる
実際に動かして確かめてみた
Goなので気軽に試せる
作ったのはAleph.jsの人で、恐らく最初からDenoのために作られている
中の人は現在Deno Companyで働いており、Denoとの距離がかなり近いため安泰かなと思った