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になる。閉区間。 とあるコードの
【Node.js】ES Moduleで__dirnameを使う方法
問題・背景｜ReferenceError: __dirname is not defined in ES module scope Node.jsで__dirnameを使用すると、現在のJavaScriptファイルが存在するフォルダーのパスを取得できる。 Node.jsを扱っている者なら、利用することが多い機能の1つだと思う。 がしかし、__dirnameはCommon JSでしかサポートされておらず、ES Moduleで利用しようとすると怒られてしまう。 ReferenceError: __dirname is not defined in ES module scope This file is being treated as an ES module because it has a '.js' file extension and '/example/example/exampl
ぼくのかんがえたさいきょうのGAS開発手法2023
前提clasp の制約、Script API の考え方、Google Drive の考え方に素直に従うその条件下である程度モダンな開発環境での開発を目指す 可能ならコードは VCS で管理する（pull-req など）ドキュメントベースで共同作業に向いた手法で開発を進める特にカジュアルに始めやすい Google Apps Script は悪い意味での属人化まっしぐらになりやすい。これが長期間の業務に影響しないような、ワンショットのものなら別にそれでもよいが、これが誰かに引き継がなければいけないような状況が生まれると一気に地獄みが増してしまうので、そうなってしまう前により良い開発手法を考えておきたい。 考慮したことGAS は素朴に作ると Script 本体の構造がそれを利用する container （例えば Spreadsheet）のデータ構造などと密結合になってしまう。この状態のままコード
async/awaitにおけるエラー処理を実行の順番から整理する - Qiita
はじめに promiseを使うとき、いつもpromiseメソッドチェーンで記載していますか？ async/awaitを利用していますか？ もちろん状況によって両方書くのが殆どだとは思うのですが、私はasync/awaitの方が同期的な書き方ゆえに読みやすいため、なるべくそちらで記載しています。しかしながら、エラーハンドリングが理解できていなかったため、エラーの所在を突き止めるのに苦労してしまいました。 そのため、これを機にasync/awaitにおけるエラーハンドリングについて備忘録的にまとめておきます。 この記事のまとめ; catchされるエラーはrejectのみか、throwされたエラーも含まれるか →両方catchできる async関数における処理の順序、awaitがある場合とない場合 →awaitがない場合には同期的に処理が実行され、catchできなくなる エラー処理を外側に伝播し
Cloud Firestoreで多量のデータをバッチ処理するときのスマートな書き方
バッチ処理 FirebaseのCloud Functions、或いはローカルに書いたスクリプトを使って多量のデータをバッチ処理でCloud FirestoreのDBに書き込みたいケースが有るかと思います。 ただ、バッチ処理の制約上、一度に500件ずつしか書き込むことができないため、500件以上処理する場合には500件ずつ区切ってバッチ処理をするように考慮する必要があります。 例えば、以下の例はusersコレクションを全て取得し、新たにフィールドを追加してマイグレーションする処理になります。 import * as adimn from 'firebase-admin' const db = admin.firestore() const users = await db.collection('users').get()) const batch = db.batch() users.do
Brave Browserの脆弱性を見つけた話（iOS編）
Shibuya.XSS techtalk #12の発表資料です。
URLエンコード関連メモ
encodeURIComponent(" ") // => '%20' encodeURIComponent("+") // => '%2B' encodeURIComponent("/") // => '%2F' encodeURIComponent("*") // => '*' encodeURIComponent("https://httpbin.org/get?x=#") // => 'https%3A%2F%2Fhttpbin.org%2Fget%3Fx%3D%23' 値に対して行う URLを構成する文字もエンコードする RFC3986 に近いが守っていない !'()* をエンコードしていない つまり RFC2396 らしい Component が何を指しているのかわかりづらい こんなものをグローバルに定義するとか設計がどうかしている(小声) decodeURIComponent
ファイルダウンロード完全マスター | フューチャー技術ブログ
Real World HTTPでも紹介したネタですが、お仕事で受けている技術コンサル中に質問をいただいた時に、微妙に本で紹介した内容では少し足りなかったので、改めて整理のためにブログ記事にしてみました。次回、本が改訂されることがあればこのブログエントリーの内容も入れて加筆したいと思います。 Real World HTTPだとGoを使っていましたが、フロントとサーバーを同時にいじるので、本エントリーではNext.jsをサンプルに使います。Next.jsでプロジェクトを作って（npx create-next-app@latest –ts)、適当なプロジェクト名を入れてアプリケーションの雛形を作っておいてください。 Next.jsでは、1つのスクリプトファイルを作成すると、それがサーバーAPI(/pages/api以下)と、フロントの画面(/pages/以下のapi以外)になります。Next.j
Chrome拡張 つくりかた 令和最新版
数年ぶりにChrome拡張のつくりかたを調べた。 本当に何も分からなかったので、Twitterで「2022年にChrome拡張つくりたかったら何見て学べばいい？」とつぶやいてみたところ、何人かの人が教えてくれた。教えてもらった中から幾つかのリンク先を紹介するような形で記述していく。 Create a Vite-React Chrome Extension in 90 seconds - DEV Community 2022年時点だと比較的新しめのフロントエンド向けツールであるviteと、viteのChrome拡張向けプラグインである@crxjs/vite-pluginを使ってChrome拡張をつくってみよう、という記事。今回自分は主にこれを参考にしながら開発を進めた。Reactと言っているが、自分のChrome拡張ではUIは存在しなかったので、Reactに関する部分は読み飛ばして、vite
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Can't get the correct Language Mode / IntelliSense for a script tag with type="text/jsx" in an HTML file
Tempo • Dates by FormKit
JavaScript Promiseの本
