ブックマークレットの作例 - 小技チョコレート
PCのウェブブラウザで使用するブックマークレットの作例です。 Twitterで1つのツリーに属している複数のツイートを一括してクリップボードにコピーする 一部で"X"などと呼ばれているTwitterで使用するブックマークレットです。 仕様 個々のツイートを、本文 投稿日時 ツイートのURLという形式で、クリップボードにコピーします。 各ツイートの末尾で改行されます。 ツリー化されていない単独のツイートでもコピーできます。 ツイートの下に表示される「もっと見つける」の欄にぶら下げられた無関係のツイート（ツリーに属していないツイート）も一緒に取得されてしまう場合がありますが、それは仕様です。 サンプル 永井均氏のこちらのツリーから、サンプルとして3個のツイートのみ切り出しています。 ブックマークレットの機能としては、1つのツリーに属している全てのツイート（このツリーの場合は20個）を一度にコピ
Cookieの安全性を高める "__HttpOnly-"プレフィックスの提案仕様 - ASnoKaze blog
新しくCookieに"__HttpOnly-"プレフィックスを追加する『HttpOnly cookie prefix』という提案仕様が出されています。 前提: Cookie Name Prefixes について Cookieには『Cookie Name Prefixes』という仕様があります(もうそろそろRFCになります)。なお、すでにブラウザに実装されています。 Cookie名にプレフィックスをつけることで、特定の属性が付与されている事が保証されます。 例えばCookie名に "__Secure-" をつけることで、secure属性が付与されている事が保証されます。javascriptや共有先のサイトにより勝手に属性値が外されることはありません。 現在は次の２つのプレフィックスが定義されています __Secure- __Host- googleのサイトもすでに、これらがついたCookie
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
「TypeScriptが当たり前」になった世界において、ESモジュール本来の運用に必要な考え方と設定とは こんにちは、藤吾郎（gfx）と申します。Starleyという会社でおしゃべりAIアプリ「Cotomo」を開発しています。TypeScript歴は10年くらいです。 はじめに - TypeScriptが当たり前になった世界今年（2025年）はTypeScriptがリリースされて13年、ESモジュールが導入されたES2015のリリースから10年が経ちます。今やJavaScriptプロジェクトにおいては、TypeScriptが当たり前の世界になってきました。つまり「JavaScriptプロジェクトの実装言語のデフォルトはTypeScript」という状況にかなり近づいています。 TypeScriptが当たり前の世界とは、JavaScript処理系がデフォルトでTypeScriptをサポートして
フロントエンド、というよりUI一般では、ユーザーの操作に対してまったく無反応なのは良くありません。ユーザーが意味のある操作をしたならば、何らかのフィードバックを返すべきです。 例えば、何かをユーザーのクリップボードにコピーするボタンというのはありがちですが、クリップボードに何かを書き込んでもそれだけだと目に見える変化がないので、追加で「コピーしました」のような通知を出すというのはよくあるパターンです。 ここでは、そのような通知が、ちょっとフェードインしながら表示され、一定時間後にフェードアウトしながら消えていくという要件を想定することにしましょう。 transitionを使う基本的な実装 まずはReactの部分をざっくりお見せします。 import { useState } from "react"; import "./styles.css"; export default functi
I am excited to announce the release of Valibot v1. Valibot is a modular and fully tree-shakable schema library that helps you describe and validate your data with a type-safe and easy-to-remember API. As a 1 kB alternative to Zod, Valibot is perfect for validating forms and securing backend-frontend communication with a single source of truth. How everything started Some of you may remember my in
Late last year I sat down and looked at some of this site’s stats. I had loads of articles written that are read by people in the 5-digits every month. Next to that I have a sizeable following on dev.to (+30k) and a solid amount of email subscribers. From all the articles I write, the ones on JavaScript elicit the most questions: “what if I want to do this?”, “how would you fix that?” and so on. S
Devindabot: Devinで実現するライブラリの脆弱性自動対応システム - freee Developers Hub
freee PSIRT( Product Security Incident Response Team ) のhikaeです。freeeでも自律型AI AgentのDevin*1を雇用しています。 今回はPSIRTの業務の一つである Dependabot対応におけるDevinの活用事例（Devindabot）… ライブラリの脆弱性対策にAIを活用して、開発ライフサイクル全体にいい影響が出た話 をご紹介します。 Dependabot対応 ... ライブラリの脆弱性対策 ライブラリアップデートの辛さ フローを見直し負担を下げる ===DependabotがPull Requestを作る流れ 1. GitHub Advisory Database · GitHub に脆弱性情報が追加される 2. Dependabotがリポジトリごとの依存グラフを定期的に更新する。もし脆弱性による影響がある場合
Enhance Your Form Validation with Pure CSS — No JavaScript Needed! 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 ユーザーが入力フィールドと対話する際にリアルタイムの視覚的フィードバックを提供するなど、フォームに追加のバリデーションを設けることを考えたことはありますか？例えば、正しい入力には緑色の枠線を表示し、不正な入力には赤色の枠線を表示するといった具合です。通常、これを実現するにはJavaScriptやReactなどが必要で、少し複雑になることがあります。しかし、CSSだけでこれを実現できるとしたらどうでしょうか？嘘ではありません — 実際に可能なのです！ シンプルなフォームの作成 有効および無効な状態にCSSを適用する :user-validと:user-inval
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
はじめに こんにちは、ダイニーの ogino です。 TypeScript のコンパイラは今まで TypeScript で実装（セルフホスト）されていました。 それが TypeScript 7.0 から、Go による実装に移植され、10 倍高速になります。 本記事は、移植に関して筆者が疑問に感じた点を、GitHub discussion や TypeScript lead architect のインタビュー動画などから調べてまとめたものです。 移行の背景 今回 Go に移植される背景は、大規模な TypeScript コードベースをコンパイルする際のスピードの遅さにあります。 例えば VSCode のコードベース (150 万行) に対して tsc を実行すると、約 80 秒もかかります。 TypeScript のコンパイルは大きく以下の段階に分けられ、その内の check が特に複雑で重
【個人開発】リリース1ヶ月で月5万円(理論値)のサービスを作ったのでノウハウを全公開してみる（Next.js / Rails） - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? こんにちは、とまだです。 みなさん、個人開発はしていますか？ そして個人開発をしている方は 個人開発アプリで一発あてて月収 xx 万円 を夢見ていたりしませんか？ 私も夢見る一人なのですが、特に「集客」や「マネタイズ」の方法に悩んでいる方も多いのではないでしょうか。 今回は、私が個人開発した Learning Next というサービスがあります。 こちらが軌道に乗ってきたので、開発の背景から技術的な工夫まで、赤裸々にお話ししたいと思います。 この記事を読んだらわかること この記事は、個人でサービスを作ってみたい人、特に 集客やマネタイズ
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? JavaScriptで型を書いたことがありますか？ この記事は、型を利用して安全に開発ができるようになるための方法をご紹介します。 この記事で得られること JavaScriptの開発で型を利用できるようになります。 型の支援を受けるようになるとこんなメリットがあります。 インテリセンスの利用によるタイプミス防止 ソースコードの可読性の向上 開発速度・精度の向上 特に開発速度・精度の向上はかなりの効果を発揮します。 またAIによるサジェストの精度向上にも寄与するようです。 対象とする読者 私はサイボウズ社のkintoneを利用した業務シス
RustベースのJavaScriptツールチェーン開発プロジェクト「Oxc」が、ESLint互換のリンター実装を目指すOxlintベータ版をリリースし大きな注目を集める
3月17日、JavaScriptツールチェーンをRustベースで置き換えることを目指すプロジェクトOxcが、Eslintの置き換えを目指す「Oxlint」のベータ版をリリースした。 3月17日、JavaScriptツールチェーンをRustベースで置き換えることを目指すプロジェクトOxcが、Eslintの置き換えを目指す「Oxlint」のベータ版をリリースした。 以下に、その内容を紹介する。 Oxcとは何か Oxcは「JavaScript Oxidation Compiler」の略称であり、Rustで記述された高性能なJavaScript向け開発ツール群の総称である。JavaScriptに不可欠とされるコンパイラツール（パーサー、リンター、フォーマッタ、トランスパイラ、ミニファイア、リゾルバ）を構築することを目的として開発が進められている。プロジェクトの目標は、VoidZeroの一環としてJ
GitHub - casparwylie/cascii-core: A web-based ASCII and Unicode diagram builder written in vanilla Javascript
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
1円も使いたくない個人開発のための技術スタック
対象 一般的なWebアプリケーション 特に、学生などはクレジットカードが使えずそもそも支払いができないという状況もあるので無料のものをまとめてみました。 結論として Supabase Next.js Drizzle Cloudflare Pages Cloudflare D1 / KV どんな要素が必要か Webアプリの開発に必要なのはフロントエンドと、バックエンドです。 バックエンドといっても、その中身は実際の処理に加え、DB、またログイン認証機構が必要になります。 フロントエンド フロントエンドとしては、Next.js一強です。 すでにコミュニティも成熟しているので使いやすく、いろんなところに統合できます。 バックエンド処理 バックエンド処理は、Next.jsの"use server";を使えば簡単に行えるので、別にAPIを作ったりする必要はなさそうです。 フロント・バックエンドのデプ
For more detailed instructions on how to use Oxlint and integrate it with your project or editor, check out the installation guide. Highlight of new features since general availability Significant performance improvements, up to twice as fast compared to the previous releaseIncludes over 500 rules built-in, with no extra installation requiredMany rules from the typescript, unicorn, react, react-p
SSRで認証をどうするべきか？
既存プロジェクトにNext.js等のSSRを導入する場合は既存の認証機能を維持したり活かしたりする必要があります。しかしSSRの認証とCSR(SPA)の認証は同じではなく、簡単に共有できるものではありません。 ここでは複数のテックブログの事例を見ながら、この難しさと本物のウェブサービスで採用された解決策を見ていきます。 CSRとSSRの認証の違い まず最初に、CSR(SPA)とSSR[1]の認証の違いをざっくり紹介します。技術的制約を理解していただくことが目的です。 クライアント視点では、認証システムは突き詰めると、トークン(鍵)[2]を安全に保管し、必要時にサーバに渡す(鍵穴に差し込む) ことです。この２つに絞って解説します。[3] https://www.flaticon.com/free-icons/vault (by IYIKON) https://www.flaticon.com
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 某SNSで、こんな興味深い投稿があった。 弊社のコーディング規約で FizzBuzz を書ける人はおりまするか？🤔 ＜規約＞ (1) else if を含む nested if 禁止 (2) switch 文禁止 (3) 三項演算子を if 文の制御構造の代わりに使うの禁止 (4) 以下の逐次処理禁止 - for - while - do-while - for-in - for-of - Array#forEach#JavaScript — 悉生 游漩 (@StewEucen) March 15, 2025 返信に書かれている内容も
TypeScript で MCP サーバーを実装し、Claude Desktop から利用する MCP（Model Context Protocol）とはアプリケーションが LLM にコンテキストを提供する方法を標準化するプロトコルです。MCP を使用することで、LLM は外部ツールやサービスからコンテキストを取得するだけでなく、コードの実行やデータの保存など、さまざまなアクションを実行できるようになります。この記事では MCP サーバーを TypeScript で実装する方法を紹介します。 MCP（Model Context Protocol）とはアプリケーションが LLM にコンテキストを提供する方法を標準化するプロトコルです。多くの LLM ではユーザーに適切な回答を提供するために追加のコンテキスト情報を必要とします。例えば、今日の天気の情報をユーザーから求められたとしても LLM
こんにちは、エムスリーエンジニアリンググループ、コンシューマチームの園田です。本記事では、外部サービスとAIエージェントの連携を可能にするMCPプロトコルについて、技術検証の実装例を交えてお話しします。 1. MCPとは（ざっくり） MCP（Model Context Protocol）とは、Anthropic社によって策定されたAIエージェントが外部サービスから情報を参照したり連携することを目的としたプロトコルです。 「MCPサーバー」は、GitHubやPostgreSQLといったリソースをMCPで喋れるように変換してあげるプロキシのようなサーバーです。 Claude DesktopやCursorなどはMCPクライアントの機能があり、GitHubなどのMCPサーバーを利用してナレッジとして利用したり、プルリクエストの作成なども行えます。 Introduction - Model Cont
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? こんにちは、JavaScriptの魔法使いの皆さん！🧙♂️✨（まだ見習いの方も大歓迎です👶） 「また退屈なコードの話？」いえいえ、今日は違います！今回は「作って楽しい・使って楽しい・シェアして楽しい」の三拍子が揃った、ちょっと面白いWeb小物の作り方をご紹介します。コーヒー☕を片手に、リラックスしながらお付き合いください。 なぜWeb小物を作るのか？🤔 プログラミングって、時にはマラソンのように長く険しい道のりですよね。でも、たまには「100mダッシュ」的なミニプロジェクトも必要です！理由はこんな感じ： 👨🔬 新しい技術の
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに JavaScriptはWeb開発に欠かせないプログラミング言語です。 今まであまり気にしていなかったですが、その起源・歴史について最近キャッチアップする機会があったので、時系列で振り返ります。 目次 JavaScriptの誕生 ECMAScriptの標準化 AjaxとJavaScriptの発展 ES5とNode.jsの登場 ES6とその後の進化 現在と未来 MDN Web Docs誕生の経緯 参考文献🌟 JavaScriptの誕生 JavaScriptは1995年にNetscape社のBrendan Eich（ブレンダン・ア
toranoana.deno #20 発表資料
2025/3/14 toranoana.deno #20 で発表した内容です。
We are excited to announce an alpha release for oxc-minify. While lacking some advanced minification techniques, the current version already outperforms esbuild in terms of performance and compression size, as demonstrated by minification-benchmarks. Comparing widely-used minifiers on typescript.js: Artifact Original size Gzip size typescript v4.9.5 (Source) 10.95 MB 1.88 MB Minifier Minified size
データサイエンスという分野は、データ収集や可視化などが身近になったことで、より重要になってきています。システムを使ってデータ分析する際、利用者は最終的な結果のみを求めますが、私たちエンジニアはその途中経過についても正しく評価する必要があります。そのためには、中学や高校で学んだ数学の知識が欠かせません。そこで本連載は、高校までに学ぶ基本的な数学知識を使って、データ分析やデータ表現の基礎的な考え方を紹介します。また、既に学んだ数学的基礎からデータの特徴を見つけるためにデータ表現する方法について紹介したいと思います。 はじめに コンピュータでのデータ分析といっても多種多様で、画像や音声、映像、文章などを対象にする場合もあれば、売上値や検査値などの数値を分析する場合もあります。最近では、AIによってさまざまなデータが扱いやすくなり、利用者にとって分かりやすく結果を提示できるようになっています。 そ
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Leapcell: 次世代のサーバレスプラットフォームでWebホスティング JavaScriptランタイムフレームワークHonoの詳細理解 Github上で、JavaScriptランタイムフレームワークのHonoはすでに22,000のスターを獲得しています！ Honoの誕生背景 Honoの誕生は2021年12月に遡ることができます。その作者は、当時Cloudflareの社員として、Cloudflare Workers向けのアプリケーションを作成したいと考えていました。しかし、フレームワークを使用しない場合、コードは非常に冗長になり、要件
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
マイクロソフトのテクニカルフェローで、TypeScriptのリードアーキテクトであるアンダース・ヘルスバーグ（Anders Hejlsberg）氏は、TypeScriptのコンパイラを始め各種ツール群をGo言語に移植する「Project Corsa」を実施中であり、結果としてコンパイラの処理速度などが約10倍速になることを明らかにしました。 これによりTypeScriptからJavaScriptへの変換が高速になり、コードエディタでTypeScriptを記述するときの補完や検索などのコードアシスト機能も迅速になるなど、さまざまな開発者体験が向上すると説明されています。 ヘルスバーグ氏はTurbo Pascalの作者であり、その後もDelphi、C＃などの優れたプログラミング言語の開発に携わってきたことで知られています。 TypeScriptの処理速度やスケーラビリティに課題 TypeScr
JSer.info #728 - React Aria March 5, 2025リリースされました March 5, 2025 Release – React Spectrum Releases Toast/Tree/Virtualizerコンポーネントを追加、AutocompleteをMenu/Selectなどと組み合わせて利用できるようになりました。 また、<Pressable>/<Focusable>の追加、usePressのリファクタリングなどが含まれています。 その他には、ドキュメントをTailwind v4に対応など Firefox 136.0リリースされました Firefox 136.0, See All New Features, Updates and Fixes Firefox 136 for developers - Mozilla | MDN HTMLのautoc
JavaScriptのコードスニペットを動作テストできるクロスプラットフォーム対応のOSS・「playjs」 - かちびと.net
playjs playjsはJavaScriptのコードスニペットを動作テストできるクロスプラットフォーム対応のOSSです。ReactとElectronで構築されており、Windows、MacOS、Linuxなどの各OSで動作します。 jsfiddleやCodepenのようなコードスニペット実行ツールと同様のものとなりますが、こちらはインストールしてローカル環境で使うもので、OSSでもあるのでWebアプリ故に使う事が出来ずにいた開発者でも気軽に使えるJSテストアプリとして設計、公開しています。 Codepen代替のOSSは過去にも何度か紹介していましたが、デスクトップアプリはあまり無く貴重かなと思ったのでご紹介しました。ライセンスはMITとの事です。 playjs The post JavaScriptのコードスニペットを動作テストできるクロスプラットフォーム対応のOSS・「playjs」
Hi folks, Daniel Rosenwasser from the TypeScript team here. We're obviously very excited to announce this! RyanCavanaugh (our dev lead) and I are around to answer any quick questions you might have. You can also tune in to the Discord AMA mentioned in the blog this upcoming Thursday. Hey Daniel.I write a lot of tools that depend on the TypeScript compiler API, and they run in a lot of a lot of JS
TypeScript is being ported to Go | interview with Anders Hejlsberg
You're about to see concurrent 10x performance on your type checking with half the memory and much faster editor startup. The TypeScript team has been porting the project to Go for the past 8 months. https://devblogs.microsoft.com/typescript/typescript-native-port/ In this interview with Anders Hejlsberg, co-creator and lead architect of TypeScript, we tried to ask questions that would be valua
Why Go? · microsoft/typescript-go · Discussion #411
Language choice is always a hot topic! We extensively evaluated many language options, both recently and in prior investigations. We also considered hybrid approaches where certain components could be written in a native language, while keeping core typechecking algorithms in JavaScript. We wrote multiple prototypes experimenting with different data representations in different languages, and did
GitHub - microsoft/typescript-go: Staging repo for development of native port of TypeScript
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
While we’re not yet feature-complete, these numbers are representative of the order of magnitude performance improvement you’ll see checking most codebases. We’re incredibly excited about the opportunities that this massive speed boost creates. Features that once seemed out of reach are now within grasp. This native port will be able to provide instant, comprehensive error listings across an entir
JavaScript | 2024 | The Web Almanac by HTTP Archive
Introduction JavaScript is essential for creating interactive web experiences, driving everything from basic animations to advanced functionalities. Its development has significantly enhanced the web’s dynamic capabilities. However, this heavy dependence on JavaScript involves compromises. Each stage—from downloading and parsing to execution—demands substantial browser resources. Using too little
ASTを眺めてるとよく目にするやつ。 ことの発端はすこし別の角度ではあるが、結局こういうのは根本から調べるに限るので・・・。 Literalノードのrawプロパティ 一番わかりやすいのは文字列リテラルに対応するノード。 BabelではStringLiteralだが、ESTree本家では、数値も真偽値もまとめてLiteralと名乗ってる。 で、このLiteralの定義はこうなってる。 interface Literal <: Expression { type: "Literal"; value: string | boolean | null | number | RegExp; } https://github.com/estree/estree/blob/master/es5.md#literal なんと、rawなんてない。 というわけで、ESTreeで決められてるわけではないらしい。
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【JavaScript】日付の存在チェックにおけるタイムゾーンの影響 - Qiita
「TypeScriptが当たり前」になった世界において、ESモジュール本来の運用に必要な考え方と設定とは
ReactとCSSで一定時間表示される通知をやるときの色々な方法 - Qiita
Valibot v1 - The 1 kB schema library
JavaScript for Rails Developers is Coming Soon
CSS だけでフォームバリデーションが超進化！JavaScript不要の裏技公開！ - コハム
JavaScript getterとsetterに関するまとめ📔 - Qiita
TypeScript の Go 移植に備えて知っておくべきこと
【初心者向け】JavaScriptで型を書く方法 - Qiita
The JavaScript Oxidation Compiler
多数の制約をかいくぐって JavaScript で FizzBuzz - Qiita
TypeScript で MCP サーバーを実装し、Claude Desktop から利用する
MCPサーバーが切り拓く！自社サービス運用の新次元 - エムスリーテックブログ
JavaScriptで作る、思わず友達にシェアしたくなるWeb小物 - Qiita
JavaScriptの起源と歴史を振り返ります！ - Qiita
バックエンドNode.js × フロントエンドDeno で開発して得られた知見
Node.js, Deno, Bun 最新動向とその所感について
The JavaScript Oxidation Compiler
データサイエンス基礎を高校数学から復習しよう！ D3.jsでデータを表現する
HonoJSがJavaScriptの未来を変える！ - Qiita
JavaScript constは変更不可という理解を捨てる🚮 - Qiita
30分で出来る、JavaScript (Electron) でデスクトップアプリを作って配布するまで - Qiita
マイクロソフト、TypeScriptのコンパイラなどをGo言語に移植することで10倍の処理速度に
2025-03-12のJS: React Aria March 5, 2025、Firefox 136.0、TypeScriptコンパイラをGoに移植
A 10x Faster TypeScript | Hacker News
A 10x Faster TypeScript - TypeScript
ESTreeの`Literal`ノードの`raw`プロパティ | Memory ice cubes