@ledsun blog

Hのキーがhellで、Sのキーがslaveだ、と彼は思った。そしてYのキーがyouだ。

JavaScript

Node.js製ツールチェーンの開発に参加している日本人プログラマー

github.com Node.jsとWebpackのコミッターさんです。 github.com Prettierのコミッターさんです。 github.com ESLintのコミッター(たぶん)さんです。

Node.jsのスーパープログラマ達の今

僕がNode.jsを熱心に勉強していた頃に、スーパープログラマとして憧れていた人たちが、今何をやっているのか調べてみました。 github.com Express.jsなんかを作っていたtjは、Go言語がメインに書いているようです。 OSS活動自体あまりやっていなさそうです。…

WSLにいれたfish shellで使っているnvm.fishにデフォルトバージョンを設定する

現象 WSLにfish shellを入れnvmを入れた状態で、gitのコミットフックを設定してあるリポジトリで、VSCodeからGitコミットしたら次のエラーが起きました。 VSCodeからGitを操作したときのエラー Git: /usr/bin/env: 'bash\r': No such file or directory とい…

npm updateで表示されるnpm WARN old lockfile を解消する

結論 最新のnpmを使えば良いです。 nvmでnvm install latestとすると、必ずしも最新のnpmがインストールされないので、再発することがあります。前にも対応したはずなのに?一体?という気持ちになります。 現象 ledsun@MSI:~/textae►npm update npm WARN ol…

JScriptコンパイルエラーの怪

{ // 判定 } こういう何もしないJavaScriptファイルがあります。 Windowsのcscriptコマンドで実行するとあるときはコンパイルエラーをおこし コンパイルエラーがおきます あるときはコンパイルエラーを起こしません。 コンパイルエラーがおきません JavaScri…

script type moduleでCommonJSモジュールを読み込むとどうなるのか?

npm install debounce してあるディレクトリで次のように、script type="module"を使って、debounceを読み込んでみましょう。 <html> <head> <script type="module"> import { debounce } from './node_modules/debounce/index.js'; </script> </head> </html> debounceはunderscore.jsのdebounce関数だけを切り出したC…

Hello script type module

いきなり既存のアプリケーションにimport mapsを導入するのはつらいことがわかりました。 もっと小さなアプリケーションから試して行きましょう。 まずは、type="module”だけをつかって、Hello worldします。 index.htmlです。 <html> <head> <script type="module"> import { sayHello } from </script></head></html>…

importmapを手書きするとつらいこと

VSCodeがinvalidなJSONを検出してくれない VSCodeが次のようなInvalidなJSONをかいても検知してくれないこと。 <script type="importmap"> { "imports": { "action-stream": './node_modules/action-stream/index.mjs', } } </script> JSONなので、シングルクォートもケツカンマも許容されませ…

ESモジュールをCommonJSモジュールにバベル

npmにESモジュールとCommonJSモジュールを両方公開すること - @ledsun blog の続きです。 npmにESモジュールとCommonJSモジュールを両方公開するために、ESモジュールからCommonJSモジュールを自動生成する方法を考えます。 先行事例 世の中にはいくつかの方…

npmにESモジュールとCommonJSモジュールを両方公開すること

Node.js 12からESモジュールがサポートされています。 ブラウザでもESモジュールをサポートしています。 ということで、Node.jsむけのパッケージもESモジュールで書きたいです。 自分がESモジュールで書くと言うことは、依存ライブラリもESモジュールで書か…

concurrently

www.npmjs.com Foremanみたいに複数のプログラムを並列に起動してくれるnpmパッケージです。 npmなので、npmスクリプト中で使うのに、環境設定の面で有利です。 主にwatchスクリプトで使います。 使用例 例えば、次の例ではngcコマンドとesbuildコマンドを両…

Rails 7 はユニバーサルJavaScriptモジュールの夢を叶えるか?

2009年に発表されたCommonJSの夢。この夢が叶えられるかもしれない時がきています。それもJavaScriptではないRuby on Railsによってです。 JavaScriptのライブラリ管理の歴史を紐解いてみましょう。 モジュール前夜 jQueryによるプラグイン管理がありました…

文章中のサンプルコードが壊れていませんか?

ドキュメントにサンプルコードを書くことがありますが、しばしば壊れていることがあります。 読む方からすると、ちゃんとチェックして欲しいと思いますが、 書く方からすると、文章のどこにスクリプトがあるか探すのも大変だし、それをいちいち動かして確認…

sprockets-css-purgerのAPIを考えるために、tailwindcssとPurgeCSSの境界を考える

sprockets-css-purgerの姿を想像する - @ledsun blogの続きです。 tailwindcssからPurgeCSSを呼び出している箇所 https://github.com/tailwindlabs/tailwindcss/blob/v2.2.15/src/lib/purgeUnusedStyles.js#L188-L220 const purgeCSS = new PurgeCSS() purge…

sprockets-css-purgerの姿を想像する

DHHはsprockets-css-purgerというCSSをパージするための汎用的なGemが欲しいようです。 github.com This is btw and open invitation to anyone who'd like to work on this とありますので、誰がやっても良いようです。ところで、このbtwってどういう意味…

npm auditは有益なのか?

体感として、npm auditが出してくる警告は、利益より手間の方が多いように感じてはいます。 とはいえセキュリティに関わることなので、手間でも対応しなきゃなあと、頑張って対応しています。 僕自身は、主にアプリケーションのメンテナンスだけなので、それ…

echoするAngularJSアプリケーションを新Angularの環境で動かす

Angularには、AngularJSからの移行を支援するための@angular/upgrade/staticがあります。これを使ってみましょう。 まず、Angular CLIで新Angularの環境を作ります。 次のように簡単なAngularJSアプリケーションを組み込みます。 <html lang="en"> <head> <meta charset="utf-8"> <title>MyApp</title> <base href="/"> </base></meta></head></html>

PPLサマースクール2021

ss2021 - 日本ソフトウェア科学会 プログラミング論研究会 (JSSST-SIGPPL) (Special Interest Group on Programming and Programming Languages) に参加というか、視聴しました。 例えば、あるHTML要素の上にマウスカーソルがあるときに マウスの左ボタンを…

Angular CLI

Angularの開発環境はRuby on Railsと同じくらい複雑です。 最小でindex.htmlファイル1つで動かせるAngularJSと比べると驚きです。 このような環境を手動で作るのは大変なので、自動的に作成してくれるコマンドがあります。 これがAngular CLIです。 Ruby on …

echoするAngularJSアプリケーション

See the Pen とてもシンプルなAngularJSアプリケーション by shigeru.nakajima (@ledsun) on CodePen. AngularJSはng-app属性が付いたHTML要素に対して機能を追加していきます。 ng-app属性をつける代わりに、次のようにangular'bootstarp関数に対象のHTML要…

AngularのplatformBrowserとplatformBrowserBynamicの違い

stackoverflow.com チェックが付いているAnswerは嘘情報です。 その下が正解です。 platform-browser-dynamicとplatform-browserの違いは、angularアプリのコンパイル方法です。 dynamic platform を使用すると、angular は Just-in-Time コンパイラをアプリ…

AngularJSとAngularの歴史の整理

現Angular、当時Angular2ってずっと最近になって出たと思っていました。 調べたら、Angular2は結構前に出ていたことを知りました。 日付 AngularJS Angular 2015/01/13 AngularJS 1.4 開発始まる *1 2015/03/24 Angular2 開発始まる *2 2015/05/26 AngularJS…

importmapのサンプル

Google Chorme、Firefox、Safariのような、現代的なブラウザは、<script type="module">を使ってESMモジュールが読み込めます。 さらに、import文を使って依存モジュールを解決できます。 例えば、次のHTMLではvueが動きます。 <html> <body> <div id="container"> The Planet Wercury was formed {{ age }} age. </div> <script type="module"> </body></html>…

引数13万個の関数呼び出し

Rubyのバッチ処理でFile.deleteでたくさんのファイルを消していたらSystemStackError: stack level too deepという見慣れないエラーが起きました。 再帰などしていないのに、スタックを使い切るのはなぜでしょう? File.delete(*to_delete) こんな感じで呼び…

RubyのdelegateみたいなことをJavaScriptでやる

Rubyのdelegate Rubyにはdelegateというメソッドがあります。 docs.ruby-lang.org あるクラスのメソッドを、依存するインスタンスに委譲するメソッドです。 次のように使います。 delegate [:first, :last] => :@arr ぱっと見不思議ですが、ハッシュ { [:fir…

jQueryUIダイアログの上に自作モーダルダイアログをつくって要素をフォーカスするときの注意

次のようにjQueryUIダイアログの上にさらに、自作のモーダルダイアログを開く時の話です。 jQueryUIダイアログの上に自作モーダルダイアログを開く 「すでにjQueryUIダイアログを使っているのだから、自作のモーダルダイアログは要らないだろう?」という疑…

TextAEのリレーション描画を独自SVGに置き換えた

お仕事の話です。 長年GitHub - pubannotation/textaeの改修に携わっています。 リレーション(下の図の矢印)の描画にjsPlumb Toolkit - build connectivity quicklyというコネクション描画用のライブラリを使っていました。 汎用ライブラリですので、少し…

OSSライブラリからの学びかた npmからJavaScriptのライブラリを探してソースコードを見つける編

はじまり blog.magnolia.tech CPANに上がってるモジュール、一つ一つの粒度が小さいから読みやすいし、ドキュメントもテストもしっかり揃ってて挙動を把握しやすくて、自分にとっては最高の教科書だった OSSで公開されているソースコードは、最高の教科書で…

イベントハンドラーAの処理があるときはイベントハンドラーBの処理を止めたいです

ブラウザのJavaScriptの話です。 イベントハンドラーAの処理があるときはイベントハンドラーBの処理を止めたいです。 イベントハンドラーAは新しいNodeを作って選択します。 イベントハンドラーBは選択を解除します。 期待する動作は、新しいNodeができて選…

今週の作業メモ

JavaScripting runコマンドのバグ https://github.com/workshopper/javascripting/issues/218 javascripting run hogohoge.jsを実行するとたしかに[object Object]が表示されます。 javascriptingではrunコマンドは使っていません。 https://github.com/work…