monaco-editorをwebpackでバンドルする

問題 monaco-editorを以下のようなloader設定とplugin設定でバンドルしようとしたらハマった。 const path = require('path') const config = { externals: ["electron"], target: "electron-renderer", entry: "./src/renderer/index.tsx", plugins: [], //←重要, output: { path: path.join(__dirname, "dist"), filename: "renderer.js" }, module: { rules: [ //←重要 { test: /.tsx$/, exclude: /node_modules/, loader: "babel-loader" }, ] } } module.exports = config エラー内容はこんなかんじで 下部分で重要そうな問題だけコピペしてきた ERROR in ./node_modules/monaco-editor/esm/vs/editor/contrib/find/findWidget.css 8:0 Module parse failed: Unexpected token (8:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

Posted

pre-orderで走破する木構造を書いた

動機 人はまれに木構造を書きたくなるときがあって、ついにそれを発症したので植林活動に手を染めてみることにしました。 嘘です。本当は某所でビヘイビアツリーなるものを知ってしまったので、原理を知るために実装したかった。 最近 lintとかtypescriptとかでASTでなんやかんやするの流行ってるし木を自作できたらいろいろ幅が聞くだろうなぁ(妄想)と思って木構造と走破するやつをつくった。 実装 https://github.com/himanoa-sandbox/hayashi/commit/a165b76b773edc699fb5d2a53d947e9afae3a9bc 意識したこと こういうシンプルなやつはTDDの素振りに良いので意識しながら書いた commitには現れてないけどイテレータープロトコルを満たす普通の関数で最初書いてた ジェネレーターで書き直したくなった。 このときにテストがあったので壊さずリファクタリングできた。 ハマったときはgistに投げてTwitterで助けを求めた しかし だれも こなかった。 自分を信じて自分でなおしました 俺は神 感想した感想 たのしかったです!(幼稚園生並感)。ていうか走破処理ってこんなに短くかけるものだったのね。もっと複雑でだるいものかとおもってたわ leftとrightがあるし実質北上双葉。双葉の双葉はどーれだ

Posted

転職してました

Twitterで仕事やめた時ワイワイ騒いでたので今更なんですけど、3月末で株式会社ドワンゴとの契約終了して、株式会社A1Aに転職しました。 退職理由とかインターネットに書くのは面白くないんで、聞きたい人は酒にでも誘ってください 最近ライバロリさんの動画にハマってるのでリスペクトして終ろうと思います 株式会社ドワンゴ、契約 オワオワリでぇ〜〜〜す

Posted

aleで.prettierrc.*が存在する時のみprettierをする設定

どうでもいい設定シリーズ。 自分がやる(Java|Type)Scriptプロジェクトは全部prettier使いたいけど、他人のプロジェクトではprettierを動作させたない場合がある。 AtomだったりVSCodeだとprettierrcの有無でprettierをかけたりかけなかったりしてくれるんだが、ale + Neovimの構成だと自分で設定を書かないとうまくやってくれない。 んでその設定なんですけど僕はこうしてますってやつです。 let l:is_active = 0 let l:prettierrcs = [".prettierrc", ".prettierrc.toml", ".prettierrc.config.js", ".prettierrc.js"] for item in l:prettierrcs let l:is_active = l:is_active + filereadable(item) endfor let g:ale_fixers = { \ 'javascript': ['eslint'], \ 'typescript': ['eslint'], \ 'vue': ['eslint'] \ } let g:ale_fix_on_save = 1 if l:is_active > 0 call insert(g:ale_fixers.javascript, "prettier") call insert(g:ale_fixers.typescript, "prettier") call insert(g:ale_fixers.vue, "prettier") endif ここ を見るとわかるんですけど、package.jsonにconfigが書かれる場合もあるのだが、それに関しては未対応。 vimscript jsonソリューションを募集しています

Posted

自分専用のブックマークサービスを作り始めた

はてなブックマークでブックマークするたびにブコメを見てしまい心が厳しくなってしまっていたので、年末に脱はてブ活動をしました。その結果Pocketが便利でPocketを使っているのですが、コメントができなかったりと不便を感じていたりする。 Pocketの全文検索とか便利なんですけどこれははてブにはないし、そうなると自作するしかない。 というわけでタイトルのブックマークサービスを作り始めたに繋がる。 作り始めて何も動いてないので(CRの口だけ書いた)成果発表もないのだが、まぁ最近の近況報告的な感じで備忘録として記録しておこうと思う。 コンセプト コメントができる Pocketになくてはてブにはある機能。自分のコメントベースで検索したい気持ちがPocketを使い始めてから強くなってきた。半分くらいこれのために自作したいと思っているやつ ページをスクレイピングしといて全文検索できる Pocketにあるやつ。便利。全文検索に使う情報が増えるという意味でもアドがある はてブextension的な感じでChromeからワンクリックで登録 必須。ないとブックマークしないのが分かり切っているので絶対に作る。 どうやって実現しようかは考え中で、静的な登録用ページをFirebase Hostingでホスティングしてchrome extension内のpopupからiframeで呼び出すとかを考えている。 ChromeExtension有識者が居たら相談させてくれると助かります。 WebHook Publisherになれる 最初はTwitter連携でもいいかなと思ったんだけど、webhook喋れたらコード書くだけで何にでも連携できるじゃんという事に気づいたのでこれも実装したい 技術スタック TypeScript + Firebase(Hosting, Firestore, Functions)でやっている。一人でやる分にはインフラコストが一番低い気がするのでこの構成。 Firestoreを触るのが完全に初めてなんだが、まぁCRUD程度までは普通に実装できた。全文検索をどうするかは曖昧だがalgoliaを使えば上手く行くのではという感じ。 なんでお一人様用なのか お金貰ってるわけじゃないのにスケールアウトとか認証とか考えたくないっていうのが根底にある。あと自分のインフラ的なアプリケーションを他人が使ったがために落ちる、みたいな可能性を減らしたい。 GitHubでOSSにしてもいいかなと思ったけどコミットログに.firebasercが載ってしまっていて、削除するのがダルいという話があってOSSにする気持ちはなくなってきた。コード見たいとかそういう声があれば乗り気になるかもしれない

Posted