サンプルアプリについて 今回サンプルとして Zenn の閲覧履歴を管理できる Chrome 拡張機能を作成しました。 メッセージパッシングやストレージなど基本的な Chrome 拡張 API を使用しているので学習の補助などにご活用ください。 ソースコードは MIT ライセンスで公開しています。

はじめに Chrome拡張機能を作る機会があったのでその時のメモです。 ライブラリ選定 以下のライブラリを使用する。 React TypeScript Vite Material-UI prettier 選定基準は新しすぎず古すぎない。 プロジェクトの作成 プロジェクト作成は以下のサイトを参考に行う。 vite3がbeta版なので、vite2を使用する。 プロジェクトの設定 MUIは以下のサイトを参考にインストールする。 prettierは以下のコマンドでインストールする。 . ├── manifest.json ├── package-lock.json ├── package.json ├── src │ ├── background.ts │ ├── content.ts │ └── popup │ ├── App.tsx │ ├── index.css │ ├── index.ht

最近、Vite + TypeScriptの構成でマニフェストV3のChrome拡張を作った。 今後もChrome拡張を作る機会は何度もありそうなので、未来の自分のために、この記事では次のことが参照できるようにする。 Vite + TypeScriptで作る場合のファイル構成Chrome拡張でよくある処理をどう実現するか以前Chrome拡張をwebpackで開発する話を書いたことがあるが、この記事は、その記事のVite版である。 Chrome Extensions を wepback + TypeScript で開発する 動作を確認した環境 Typescript v4.6.4Vite v3.2.3@crxjs/vite-plugin v2.0.0-beta.17CRXJS Vite Plugin 今回は、CRXJS Vite PluginというChrome拡張を作るためのViteのプラグイン

マイクラ統合版に機能を追加する仕組みとして「アドオン」が存在しますが、実はアドオン以外にもWebSocketを利用すればマイクラ統合版の「外部」からマイクラを操作できます。この記事ではWebSocketサーバーの作り方と、実際に接続してマイクラを遠隔で操作する方法を紹介します。 マイクラ統合版はWebSocketでサーバーと通信できる みなさんはマイクラ統合版の「wsserver」または「connect」コマンドをご存じでしょうか。普通にプレイしていたらまず使わないコマンドだと断言できるぐらい利用頻度の低いコマンドだと思います。コマンドの説明は「指定したURLのwebsocketサーバーへの接続を試行する。」となっています。 connectコマンドの説明文（wsserverコマンドも同様の説明） 実はこのコマンド、マイクロソフトが教育用に提供している「Code Connection for

JavaScriptランタイムのBun、インストール不要の実行ファイル生成が可能に。Webpackより200倍以上高速とするバンドラがβ版、Puppeteerにも対応 サーバサイドで実行可能なJavaScriptランタイム「Bun」は、5月に登場したバージョン0.6で、Bunをインストールすることなく、配置することでアプリケーションを実行できる単独の実行ファイルを生成できる「bun build」機能が搭載されました。 同じくバージョン0.6で高速なバンドラ「Bun Bundler」もβ版となり、6月に登場したバージョン0.6.7ではDiscordのボットを操作するDiscord.jsやWebブラウザを操作するPuppeteerなどの動作も確認されています。 下記はBunの開発者であるJarred Summer氏のツイート。 Standalone executables are coming

Corepackを使ってNode.jsをアップデートする ⬆️⬆️というタイトルで、Node.js 14からNode.js 18へのアップデートする方法について話した。 Node.js 14は4月末でEOLで、Node.js 18までアップデートする必要があるけど、npmの変更が混ざって大変です。 Corepackを使うことで、Node.jsとnpmのアップデートを同時にやらなくても良くなり、問題を分割して対応できます！ Corepackを使ってNode.jsをアップデートする ⬆️⬆️https://t.co/mRHsBcYbpn pic.twitter.com/HiiCe7c5YE — azu (@azu_re) April 28, 2023 スライド: Corepackを使ってNode.jsをアップデートする ⬆️⬆️ Note: Node.js 14は2023-04-30でEOLで

plai[email protected]: Final Release The plaiceholder project is feature complete and will now be kept in maintenance mode. Read the migration guide for further information. If this project has been useful to you, please consider sponsoring my work (opens in a new tab). Overview "Plaiceholder" is a suite of server-side functions for creating low quality image placeholders (LQIP). There is no "one-size-

I love writing CLI scripts using JavaScript (mostly with deno, zx, or plain node.js). Here's something I add to almost all my scripts: a tiny copy-pasteable way to color the output of success and failure messages without adding external libraries. With a green ✔ and a red ｘ character: console.success = (...args) => console.log("\x1b[32m✔\x1b[0m", ...args); console.failure = (...args) => console.er

Raspberry Pi Zeroは安価にコンパクトなRaspberry Piの環境を手に入れることができ、大変重宝します。しかし、最新のRaspberry Pi(Raspberry Pi 3から、ARMv8/arm64です)と比べてアーキテクチャのバージョンがARMv6と古く、Node.jsのメインサポートから外れてしまっています。 ARMv7までしかダウンロードページに存在しない ARMv6で最も新しくダウンロードできるのは、2021/04/25現在v10.24.1のようです。ちゃんとセキュリティパッチは当たっているようですが、v10のEOLは今月で終わりですし、機能面の意味を考えても、極力新しいバージョンを使っていきたいですよね。 「メインサポート」とわざわざ明記したのは...そうです。非公式で実験的なプロジェクトとしてビルドされた成果物が https://unofficial-bu

子供が通っている学童では、入退室時に保護者にメールが送られてくるシステムが導入されています。ざっと調べた限りでは、そういうシステムを導入している学童・塾などは結構あるようです。 在宅で仕事をしているのですが、携帯をずっと見ているわけではないので、メール　Google Homeが通知してくれたら便利そうと思ったので作ってみることにしました。 (　Google Home　ではなく最近は Google Nest と呼ぶらしいですが、今回は分かりやすさのためにこの記事では Google Home と記述します) Google Home には任意のテキストを喋らせるような API は無いのですが、 Google Cast プロトコルで音声データを Google Home にしゃべらせることができるようです。また、クラウド等外部のサーバーから直接 Cast プロトコルで喋らせることはできません。そこで

Node.js には Stream というインターフェイスが用意されており、これを使うことでデータをストリーミングできる。 Stream を使うことで、データの全てをメモリに保持するのではなく、少しずつ順番にデータを処理していくことが可能になる。 この記事では、Stream の基本的な使い方について説明していく。 WHATWG で定義している Stream はまた別の概念なので、注意する。この記事で扱っている Stream は、それとは別に以前から Node.js に実装されている Stream である。 以下の環境で動作確認している。 Node.js のバージョン 16.15.1 使っている npm ライブラリ @types/[email protected] [email protected] typescript@4.7.4 環境構築 まず最初に、手元で実際にコードを動かすための環境を構築す

その名はBun ﾃﾞﾃﾞﾝ BunはNode.jsやDenoのようなJavascriptランタイムです。(2022/7/8現在ベータ版) ちなみにロゴが本当に肉まんなのかはわかりません。（赤ちゃんの頭にも見えるけど名前がBun/パンだしなぁ...) この記事ではNode.jsやDenoと比較をしつつ、bunの解説させていただきます。 割となんでもできる Bunはただのランタイムではありません。下のように、開発に必須の多くな機能を最初から有しています。 TypescriptからJavascriptへのトランスパイル jsxからJavascriptへのトランスパイル npmのようなパッケージのインストール&管理 webpackのようなプロジェクトのバンドル化 もちろんランタイムなのでNode.jsのようにサーバーでJavascriptを実行することも可能です。 これらに加えてBunには様々な機

本書は、Lydia Hallie 氏 と Addy Osmani 氏らによる Learning Patterns (https://www.patterns.dev/) の日本語訳です。原著は大きく 3 つのセクションに分かれていますが、本書は、その最初のセクションである Design Patterns を訳したものとなります。

この記事は Recruit Advent Calendar 2021 の 7 日目の記事です。 イントロダクション Web アプリケーションの新規開発をしていて、先日、日時処理のライブラリ選定をする機会がありました。直近のプロジェクトで date-fns を使っていたので、今回もそれでいいかと考えていたのですが、Temporal　が TC39 プロポーザルではあるが stage　3 になっているから試してみてもいいんじゃないかという話になりました。stage 3 であれば　　API 変更のハードルは非常に高いそうです。stage 3 になるまでの提案はこちらの記事が参考になります。少し見ただけでも大きく変わっていることがわかります。 プロジェクトはまだ開発段階ですが、実際に Temporal をプロジェクトに導入しながら、検証兼開発を進めていいます。しかし、Temporal を実際に使って

Node.jsでCSVファイルを読み込んだり、保存したりする方法です。自前で文字列を操作しなくてもライブラリを使うことで自動でオブジェクトとの変換を行ってくれます。 また、Expressで直接ダウンロードさせるサンプルも載せています。 2022.09.09 サンプルを各モジュールの新しいバージョンに修正しました。 本記事のサンプル動作バージョン csv-parse - 5.3.0 csv-stringify - 6.2.0 iconv-lite - 0.6.3 CSVファイルを読み込む csv-parseを使うことで、CSVをオブジェクトの配列や配列の配列に読み込みことができます。 csv-parseのインストール npm install csv-parse Excelなどで作成したShift-JISのCSVファイルを開くためにはiconv-liteもインストールします。 npm inst

どうも、まさとらん（@0310lan）です！ 今回は、ブラウザ上からNode.jsやPythonをプログラミング可能なクラウドエディタを提供する無料のWebサービスをご紹介します。 サーバレスでバックエンドを開発できるうえ、シンプルなエディタから即座にエンドポイントを作って公開もできる便利なサービスとなっています。 手軽にサーバ側の処理を構築したい場合やFaaSのように使いたい方にも最適なのでぜひ参考にしてみてください！ 【 Napkin 】 ■「Napkin」の使い方 それでは、「Napkin」をどのように使えばいいのか詳しく見ていきましょう。 まず最初にサイトのトップページから【Sign Up】ボタンをクリックして無料のユーザー登録を済ませておきます。 登録方法はいくつかありますが、今回はもっとも簡単なGitHubアカウントを利用してみます。 確認用のウィンドウが表示されるので承認をし

はじめに Typescriptのバックエンドでタイムゾーンを扱った時のメモです。 タイムゾーンを扱う場面 バックエンドでタイムゾーンを扱う場合、サーバーのタイムゾーン設定に依存しない実装が必要です。日本のタイムゾーンにおける特定の時間でDateオブジェクトを作る場合は、ライブラリに頼らなくてもISO8601形式で以下のように対応ができます。 では以下のような場合はどうでしょうか？ ファイル生成時に現在の日本時間をファイル名に入れたい 現在の日本時間から見た、その月の末日をサーバから返却したい これらを自前の関数でやろうとすると結構面倒だったりします。そこで今回はタイムゾーンを簡単に扱うことができるdayjsの機能をご紹介します。 dayjsをインストール・初期化 dayjsは軽量の日付操作用ライブラリです。以下のようにインストールして対象のファイルからimportします。