Bun + TypeScript でブックマークレットの開発体験を高める - つまみログ
これを使うと頑張って「単位足りてるかな……」と単位修得状況の表の数字を目で追いかけずとも、一発で単位が足りているか分かり便利です。たぶん月曜日 (2024-03-04) に卒業予定者以外の人の成績発表があると思うので是非使ってみてください！ 本題に入ります。 ブックマークレットというと生の JavaScript を書くイメージがあると思いますが、今回私はこのブックマークレットをファイル分割した TypeScript のプロジェクトとして作りました。しかも linter/formatter も入れています。かなり快適に開発ができたので、やったことを紹介したいと思います。 tl;dr ファイル分割した TypeScript のプロジェクトもバンドルすればブックマークレットに使える Bun.build を使うと TS のプロジェクトを簡単にバンドルできる 開発サーバを立てると、スムーズにブックマ
絶対つまづかないwebpack入門 - JavaScriptのモジュールバンドラ - ICS MEDIA
webpack（ウェブパック）とはJSファイルをまとめる高機能なモジュールバンドラー。まとめることでウェブページのHTTPリクエストの数を減らしたり、高度なウェブアプリケーションの開発に役立ちます。 連載ではTypeScriptやBabelなどのES2015+の環境構築、ReactなどのJSライブラリの設定方法を網羅。サンプルファイルで詳しく解説します。 webpackの入門記事は他のサイトにもありますが、対象バージョンが古くて使えなかったりします。検索結果の上位の野良記事を参照にしたら古いバージョンの内容ばかり。解説記事通りにやったのにうまく動かない･･･なんて困った方も多いのではないでしょうか。本記事は常に最新版に対応させているので、安心して読み進めてください。 ※本記事では2025年5月現在のwebpack 5（2020年10月リリース）以上で解説しています。 本記事で解説しているこ
TypeScript で Web 開発をする際の候補メモ
2025/01/04 Git Hooks ツールの Lefthook を追記 2025/01/05 フロントエンドの状態管理に XState を追記 各リンクテキストを対象名がわかりやすい形式に変更 概要 以前のプロジェクトで使っていたり、進行中に差し替えまでは出来ないけど次使うならこれを使おうと思っていたライブラリやツールなどが、いざ新しくプロジェクトを作ろうと初期構築を始めたら色々と失念している事ってよくありませんか？ 最近実際それがあり、個別のページにわかれて技術メモはとってあったりするのですが探しながらは手間なのとブクマしただけのものもあるので、インデックス的に手軽に気になった技術をメモっておく見ながら構築したり技術選定の前段階に使うようなノートを作ったので誰かのお役に立つかもと公開してみます。 気軽に雑にメモるのを前提に作ったものをそのまま公開しているので文体等は統一されてません
StreamDeckのプラグインを作ってみる - Activ8 Tech Blog
はじめに エンジニアの松原です。趣味のガジェット漁りで以前 StreamDeck を購入しました。エンジニアとして、デバイスに関して何かできないか調べていたところ、このデバイスではプラグインを自作できるようで、ソースコードにhtmlとJavascriptが使われているようでした。これらはフロントエンド開発でよく扱う言語のため、これまで培った経験を活用して今回自作のプラグインを作ることを記事にしてみました。 公式サイトのサンプルコードがGitHubに上がっていたので、今回の記事ではこちらを参考にしつつ、自分なりにプラグイン開発について整理してみました。 github.com プラグインの構造について プラグイン開発をする前に、まずはカスタムプラグインがどのように実行されるかざっくり調べてみました。 プラグインのアーキテクチャ StreamDeckの公式サイトにプラグインの構造について解説があ
JavaScriptでSTREAM DECKのプラグインを作った
JavaScriptでSTREAM DECKのプラグインを作った 最近STREAM DECKというデバイスを買いました. よくある設定したマクロををボタンで起動する的なやつです. 当初は物理ボタンやダイヤルで音量調節できたらいいなーって感じで買ったのですが,他にもできることを模索したりいろいろカスタマイズしていくうちに既存のプラグインでは物足りなさを感じた（Macに対応しているプラグインが少ない😡）ので自作しました. 調べているとそれなりにしっかりした開発用ドキュメントが見つかりました. 天下のJavaScriptで開発ができるようですね. しかし,このドキュメントが分かりづらいのか,私の技術力が低いのかでかなり苦戦したので,ここにドキュメントのドキュメントを記しておこうと思います. ちなみに私は普段ReactとTypeScriptでゴリゴリフロントエンドを開発している人です.MacOS
lodash-esよりも軽量かつ高速なes-toolkitに移行してみる
es-toolkitとは es-toolkitは配列・数値計算・オブジェクトや文字列操作などの機能を提供するJavaScriptのユーティリティです。公式の紹介文によると、lodashなどの代替品と比較して最大97%のバンドルサイズの削減、実行時パフォーマンスの2～3倍高速化、シンプルかつ堅牢なTypeScriptのサポートを特徴としています。バージョンv1.0.0が2024年5月末と新しいライブラリに関わらず（現在はv1.16.0）、GitHub Starは4.6kと期待のライブラリです。 検証内容/前提条件 今回はlodash（正確にはlodash-es）をあまり利用していないプロジェクトで移行を行い、効果を検証します。具体的には配列の比較にisEqual、ディープコピーにcloneDeep、オブジェクトのマージにmergeの全3関数を利用しているプロジェクトを対象とします。 インスト
実践: await using でリソース開放
実践 いつ使うんだこれと思ってたら使う日が来たシリーズ。 今回、Deno で使ったんですが、 Node.js やブラウザでも Polyfill を入れれば動きます。 try finally で puppeteer を終了したい Deno で puppeteer を扱うために、こういうコードを書いてました。 // original import puppeteer from "npm:puppeteer@23.6.1"; import chromeFinder from "npm:chrome-finder@1.0.7"; let browser: puppeteer.Browser | null = null; try { browser = await puppeteer.launch({ headless: false, executablePath: chromeFinder(),
TypeScript/Rollup/Vercelでサクッとブックマークレットを作ってみよう - Adwaysエンジニアブログ
こんにちは。エンジニアブログ運営の梅津です。 普段はエージェンシー事業部でリードアプリケーションエンジニアとして働いています。 エンジニアブログ運営としてブログの質を向上させるために、これまでのブログの情報を集めたりもするのですが、これを逐一手作業で行うのは大変です。 ある程度の作業は自動化したい。そういったときはブックマークレットを作ると便利ですよね。 今回はそんなブックマークレットの作り方をまとめてみました。 「ブックマークレット？よく知らないな」「聞いたことあるけど作り方とか気にしたことなかった」という人がいれば是非一緒に試してみてください！ 筆者の開発環境やこのブログで利用する主な技術のバージョンは次のとおりです。 macOS Node.js 18.12.1 TypeScript 5.0.4 Rollup 3.23.0 Vercel CLI 29.4.0 ブックマークレットとは T
ブックマークレットをTypeScriptで書く（rollup編） - Qiita
rollupを用いて、ブックマークレットをTypeScriptで書く環境を構築する手順を示します。 ブックマークレットをTypeScriptで書きたい 私は、日々のウェブブラウジングを快適にするためのブックマークレットを自作しています。 ブックマークレットの魅力は、なんといっても1行でさくっと書けるお手軽さにあります。 しかしながら、ある程度の規模を超えたブックマークレットを素のJavaScriptで、それも1行の中に書いていくのは、なかなかつらいものです。 そこで、ブックマークレットをTypeScriptで書きたいと思いました。 ブックマークレットをTypeScriptで書くには ブックマークレットをTypeScriptで書くには、おおむね次のようなことをおこなう必要があります。 TypeScriptをJavaScriptにトランスパイル ファイルが分かれている場合は1ファイルにバンドル
TypeScriptは型安全じゃないからすばらしい - まめめも
「TypeScriptではじめる型システム」という記事をn月刊ラムダノートに寄稿しました。 新刊を発売しました "『n月刊ラムダノート』Vol.4 No.3（2024）発行のお知らせ https://t.co/PGppk1aRRA— lambdanote (@lambdanote) 2024年10月4日 どんな内容？ TypeScriptの極小サブセットに対する型検査器を書き、それを通して型システムを体感してみよう、という内容です。 詳しく言うと、boolean型とnumber型と関数型しかないTypeScriptサブセット言語がターゲットです。 型検査器の実装言語にもTypeScript（処理系はDeno）を使います。 TypeScriptづくしの一品です。 わかる人向けに言うと、「型システム入門」という本（通称TAPL）の単純型付きラムダ計算に相当する内容をTypeScriptで説明し
JavaScriptの非同期処理をしっかり理解する 〜async/await/Promise〜 - Qiita
JavaScript での非同期処理について、身近な例や具体例を交えながら詳細に解説しています。 最後には練習問題も用意しています！ 頑張って書いているので、良いと思ったらコメント・いいね・ストック・共有などしてもらえると嬉しいです！！ 非同期処理とは 非同期処理とは、プログラムの処理が順番に実行されず、ある処理を実行している間に他の処理を並行して実行することができる仕組みです。非同期処理では、あるタスクが完了するのを待たずに次のタスクが実行されるため、効率的に複数の処理を進めることが可能です。 （by ChatGPT） 非同期処理とは、「同期処理」の対義語で、同期処理は「プログラムの処理が順番に実行され、ある処理が終わるまで次の処理を待つ仕組み」です。 非同期処理の最大のメリットは、 「時間のかかる処理を行っている間に別の処理を行うことができる」 ことです！ 身近な例では、部下への仕事の
Prettier のコードを読む Part 1 | Memory ice cubes
とは言っても、あんな巨大コードベースを一気に読み切れるわけがないので、まずは大枠のイメージを掴むことを目標にしてみる。 バージョンは、現時点で最新のリリースである3.3.3で。v4系はなんとなくやめておいた。 https://github.com/prettier/prettier/tree/3.3.3 知りたいのはメインの整形処理だけではあるけど、いちおう大枠から見ていく。何か発見があるかもしらんし。 はじめに TSじゃなくてJSで書かれてるの知らんかった それ自体はそこまで否定的ではない派 JSDoc TSなところと、そうでないところがある そして思ったよりexclude指定されてる・・・ 知りたい！と思ったところに型がない まあ型つけるのも大変そうではあるけども おま環かもしれないが、LSPが機能しない場面もあって、コードリーディングの難易度は高めかもと思った。 LSPに慣れきった現
Clipboard APIで非同期処理を含む操作をする際の注意点とその対策
本記事では、Clipboard APIのブラウザ間での仕様の違いと、非同期処理を含む操作をする際の注意点とその対策をまとめました。 Clipboard APIとは Clipboard APIは、Webアプリケーションがシステムクリップボードにアクセスするためのインターフェースを提供します。 例えば、Clipboard.writeTextを使用すると、クリップボードを特定の文字列で上書きすることができます。 // テキストをクリップボードにコピー navigator.clipboard.writeText("コピーしたいテキスト").then(() => { console.log("コピー成功"); }).catch(err => { console.error("コピー失敗:", err); }); Clipboard APIは、現在W3CのWorking Draftとして公開されていま
export {}; が使われるTypeScript特有の事情
TypeScriptのコードでは、export {}; という記述を見かけることがあります。これはECMAScriptの構文ではあるものの、これが使われる背景にはTypeScript特有の事情があります。この記事では、export {}; がなぜ使われるのか、どのような効果があるのかを解説します。 export {}; とは この構文は、exportというキーワードから分かるように、モジュールに関連する構文です。 一般に、export { ... };という構文は、既存の変数をモジュールからエクスポートするために使われます。例えば、次のようなコードが考えられます。 const foo = 42; const bar = "hello"; const banana = "banana"; export { foo, bar as hello, banana as "🍌", }; 変数をエク
超簡単にChromeの拡張機能を作ってみる【誰でもできるよ】 - Qiita
はじめに みなさんはChromeの拡張機能を使っていますか？ 僕も使っていますが、案外Chromeの拡張機能を作るのは簡単です。 今回は、普段の業務の効率を上げるのも兼ねて自作してみました! 最低限準備するもの manifestファイル Javascriptファイル ぶっちゃけ、これだけで動きます。 実際に作ってみよう それでは実際に作成していきましょう。 今回はDとVを押すだけで、Markdownのリンクを作成する拡張機能を作成していきます。 まずは、manifestファイルから設定していきます! manifestファイル を参考にして、備忘録も兼ねて説明していきます。 今回は、最低限の設定を行います。 { "manifest_version": 3, "name": "Create markdown link", "version": "1.0.0", "icons": { "16":
うるう日にしか発生しないバグ
昨日うるう日にしか発生しないバグに遭遇した。Javascriptを書く人には有名な話だとは思うので大して面白くはないかもしれないが一応メモ。 詳しくは書けないがバグが発生した関数の仕様としてはざっくりと下記のような感じ。 対象の年月日が基準日の1年前から1年後の間に含まれる場合はtrueを返しそうでない場合はfalseを返す 引数として2020-12-24というフォーマットの文字列が渡される(判定対象の日) 引数として2021-01-01というフォーマットの文字列が渡される(+-1年の基準日) Javascriptで書く (例) 対象の日: 2024/10/10 基準日: 2024/01/28 この時、trueになる範囲は2023/01/28 ~ 2025/01/28。なので2024/10/10はtrue。2023/01/28も2025/01/28もtrueになる。閉区間。 とあるコードの
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ブックマークレットを esbuild で作る - たくさんの自由帳
Getting Started | Stream Deck SDK
Can't get the correct Language Mode / IntelliSense for a script tag with type="text/jsx" in an HTML file
Tempo • Dates by FormKit
