はじめに 対象イベント 読み方、使い方 Remote Code Execution(RCE) 親ディレクトリ指定によるopen_basedirのバイパス PHP-FPMのTCPソケット接続によるopen_basedirとdisable_functionsのバイパス JavaのRuntime.execでシェルを実行 Cross-Site Scripting(XSS) nginx環境でHTTPステータスコードが操作できる場合にCSPヘッダーを無効化 GoogleのClosureLibraryサニタイザーのXSS脆弱性 WebのProxy機能を介したService Workerの登録 括弧を使わないXSS /記号を使用せずに遷移先URLを指定 SOME(Same Origin Method Execution)を利用してdocument.writeを順次実行 SQL Injection MySQ
この本は、ブルーベリー本の 8 章からインスパイアされて、 TS の型が示す情報から Promise というものを理解してみる、というアプローチで書いたJSの非同期処理の解説です。 これらの資料と合わせて読むことを推奨します。 JSのイベントループのイメージを掴む JSでは中々意識することが少ないですが、正しく理解するには OS レベルのスレッドの視点で考え始める必要があります。 ブラウザや Node.js では一つのスクリプト実行単位を1つのスレッドに割り当てます。それをメインスレッドと呼んだり、ブラウザだったら UI スレッドと呼んだりします。 例えばブラウザでは、これは秒間60回、つまり 16.6ms ごとにループを呼び出します。(node だったらこれがもっと短いです) 仮に setTimeout の実装がなかったとして、それ相当の擬似コードを書くのを試みます。 let handl
TypeScriptの型と値とバリデーション
TypeScript は本質的に自分に型が付与されていると思っているだけの JavaScript です。 いくら型を付与しようが、それが実行時に影響を与えることはありません。 コードレビューをしているとここを誤解している人が本当に多いです。何度も解説しているのですが、なかなか浸透しないので、TypeScript におけるバリデーションという視点で記事を書くことにしました。 あと TS でバリデータ使って色々作ろうとしている友人と、プログラミング始めたてで zod と openapi を使っいる友人がいたので、彼らが想定読者です。 型と値の名前空間 TypeScript 上での名前空間(スコープ)は2つに分類できます。 値: 実行時にランタイム上のメモリに存在するもの 型: 静的解析時にのみ参照可能なもの。コンパイル時に完全に消滅する。 TypeScript は基本的に JavaScript
SOLID原則を理解し、JavaScriptで実践するためのガイド - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
ソフトウェア開発者にとって、堅牢でテスト可能で拡張性があり、保守性の高いオブジェクト指向のソフトウェアシステムを設計することは重要です。 そこで登場するのがSOLID原則です。 SOLIDは、ソフトウェア開発中に生じるかもしれない特定の問題を解決するために5つの設計原則が組み合わさったセットです。 この記事では、SOLID設計の原則について詳しく学んでいきます。 具体的には、SOLID原則が何を意味しているのか、各部分がそれぞれ何を表しているのか、また実際のプログラム例を挙げながら現役のプログラマーが説明します。 さらに、JavaScriptを使ってこれらの原則を実装する方法も紹介します。 SOLID設計原則とは？ 単一責任原則 (SRP) Open/Closed原則 リスコフ置換原理 (LSP) インターフェース分離原則 (ISP) 依存関係逆転の原則 最後に SOLID設計原則とは？
式年遷宮の様な感じですが、数年おきにブログを作り直してます(前回)。今回は Gatsby でデザインした UI をほぼそのままに、フレームワークを Astro に移行しました。静的サイトの作成では Astro の開発者体験が最高に優れているので、2 年間ほぼ塩漬けにしてしまっていた Gatsby のコードを無事に移行できてよかったです。 Astro とは？ Astro は 一言で言うと、Better HTML です。Astro というフォーマットでサイトが記述できるのですが、普通の(素の)HTML も Astro としてそのまま使えます。厳密には違いますが、HTML のスーパーセットみたいな感じです。その HTML の要素群を component としてまとめることで関心を分離できて(この辺は Web Components でも実現できます)、必要に応じてビルド時にロジックも走らせることが
チュートリアル: Yjs, valtio, React で実現する共同編集アプリケーション - ROUTE06 Tech Blog
Yjsは、リアルタイム共同編集を実現するためのアルゴリズムとデータ構造を提供するフレームワークです。Notion や Figma のように、1 つのコンテンツを複数人で同時に更新する体験を提供することができます。 Y.Map, Y.Array, Y.Text といった共有データ型を提供し、それらは JavaScript の Map や Array のように利用できます。さらにそのデータに対する変更は他のクライアントに自動的に配布・同期されます。 Yjs は Conflict-free Replicated Data Types (CRDT) と呼ばれるアルゴリズムの実装であり、複数人が同時にデータを操作してもコンフリクトが発生せず、最終的に全てのクライアントが同じ状態に到達するように設計されています。 クイックスタート Y.Map がクライアント間で自動的に同期されるコード例を見てみましょ
htmxは、HTMLの属性を追加するだけで、インクリメンタル検索やインライン編集をはじめとするさまざまな動的なUI（User Interface）を実現できるJavaScriptライブラリです。SPA（Single Page Application）フレームワークのような大がかりなビルド環境を用意することなく、すでにあるサーバーサイドアプリケーションに段階的に導入できる点も大きな魅力です。 本記事では、htmxの基本的なしくみや使用方法を紹介したのち、架空のタスク管理アプリケーションを題材に、htmxで実現できるさまざまなインタラクションを紹介します。 htmxの概要 HTMLを拡張するアプローチ htmxの基本的なアイデアは、HTMLの属性を使ってサーバーとの通信およびDOM更新を宣言的に記述するというものです。 たとえば、ボタンがクリックされたらサーバーからデータを取得し、画面の一部を
TypeScriptのコードでは、export {}; という記述を見かけることがあります。これはECMAScriptの構文ではあるものの、これが使われる背景にはTypeScript特有の事情があります。この記事では、export {}; がなぜ使われるのか、どのような効果があるのかを解説します。 export {}; とは この構文は、exportというキーワードから分かるように、モジュールに関連する構文です。 一般に、export { ... };という構文は、既存の変数をモジュールからエクスポートするために使われます。例えば、次のようなコードが考えられます。 const foo = 42; const bar = "hello"; const banana = "banana"; export { foo, bar as hello, banana as "🍌", }; 変数をエク
こんにちは！sugitaniと申します。 これまで有名芸能人と通話ができる(かもしれない)ライブ配信アプリとか、オリジナルマンガの配信サービスとか、コメントが横に流れるライブ配信システムとかを作ってきました。(SUGARは今も作業してます) 最近ご縁がありましてUUUMの子会社で、簡単に有料フォロワー向けの投稿が行えるFOLLOW MEを主に開発していて、NFTでデジタルトレーディングカード(※)を売り買いすることができるHABETをIndieSquare社さんと協業で運営しているNUNW株式会社(5月にFOROから社名変更)に入社し半年くらい経っています。最近CTOに任命していただきました！ ※NFTについては思うことがある開発者の皆様が多いと思っていますが、自分がどう思っているかは後述します 少し前に「スタートアップがまともなわけ無いから入るな」というインタビュー記事を書いて頂いたんで
Today we’re excited to announce the release of TypeScript 5.0! This release brings many new features, while aiming to make TypeScript smaller, simpler, and faster. We’ve implemented the new decorators standard, added functionality to better support ESM projects in Node and bundlers, provided new ways for library authors to control generic inference, expanded our JSDoc functionality, simplified con
他言語経験者が知っておきたいTypeScriptのクラスの注意点 - KAKEHASHI Tech Blog
はじめに こんにちは、岩佐 幸翠(@kosui_me)です。カケハシで認証基盤・ライセンス基盤・組織階層基盤などのプラットフォームシステムを開発・運用する認証権限基盤チームのテックリードをしています。 TypeScriptのクラス構文は、一見するとJavaやC#などの言語と非常に似ていますが、その背景にあるJavaScriptの特性により、振る舞いに重要な違いが存在します。これらの違いを理解することは、これまでの経験を活かしつつ、TypeScriptで堅牢なアプリケーションを構築する上で非常に重要です。 本記事では、主にJavaやC#など、クラスベースの静的型付け言語に慣れ親しんだエンジニアの方々を対象に、TypeScriptでクラスを扱う際に特に留意すべきポイントを解説します。さらに、クラスを用いない関数型のアプローチについても触れ、TypeScriptにおけるドメインモデリングの多様な
先週の This Week In React に流れてきたやつ。 🧵 TypeScript Cheat Sheets by @orta 4 nicely designed and official cheatsheets now online: - Types - Interfaces - Classes - Control Flow Analysishttps://t.co/fnqAcuU8c8 pic.twitter.com/D7BlZsyvjf— Sebastien Lorber 🇫🇷 🦖 ⚛️ 📨 (@sebastienlorber) 2022年1月19日 ざっと読んでみたけどそこまで目新しい発見はありませんでした。以下メモ。 💬 はコメント。 Classes https://www.typescriptlang.org/static/TypeScript%20Clas
はじめに 「Flat Config が何かはわかったからサンプルをくれ！」という方向けの記事です。 筆者が普段使用している eslint.config.js をご紹介します。 Flat Config については良記事がたくさんあるため ↓ などを参照してください。 今回ご紹介する設定は、React × TypeScript を使用し、フォーマットは Prettier に任せる前提になっています。 しかし、Vue やサーバー Node.js でも使いまわせる箇所は多いと思います。 eslint.config.js まずは結論から。 // @ts-check import { fixupConfigRules } from '@eslint/compat'; import { FlatCompat } from '@eslint/eslintrc'; import eslint from '@
Node.js has undergone a remarkable transformation since its early days. If you’ve been writing Node.js for several years, you’ve likely witnessed this evolution firsthand—from the callback-heavy, CommonJS-dominated landscape to today’s clean, standards-based development experience. The changes aren’t just cosmetic; they represent a fundamental shift in how we approach server-side JavaScript develo
Tool integration for AI agents is a mess. Even for developers building agents every day, it's frustrating to navigate the fragmented ecosystem. Finding high-quality tools is difficult - search for "MCP Calendar integration" and you'll find ten different implementations with no way to know which one is best. If you've ever tried to integrate tools with an LLM, you know this pain. Tool discovery, in
Tauri 2.0 Stable Release
We are very proud to finally announce the stable release for the new major version of Tauri. Welcome to Tauri 2.0! What is Tauri? In a Tauri application the frontend is written in your favorite web frontend stack. This runs inside the operating system WebView and communicates with the application core written mostly in Rust. When Should I Use Tauri? If you check any of the boxes below, you should
CLI用のコマンドを作ってみようと思いたったのですが、CLI開発フレームワークoclifを試してみたらとても簡単で環境構築もすんなりできたのでびっくりしたという話。 概要 ある用途で思いたってCLIのコマンド作ろうと思った oclifというCLI用のフレームワークがあったので試してみた 簡単すぎてびっくりした 追加でPrettierとJestも対応してみました 動機 誰しもCLIのコマンドをつくりたくなることがたまにある。僕はある。 今回はGUIを作るまでもなく、コマンドでシュッと実行したい作業があったので勉強と遊びを兼ねてコマンドを作ることにしました。CLIの開発ツールはいろいろありますが、今回はやりたいことを実現するのにすでに知見としてあるものを流用したい背景aからNode.jsでやることにしまた。 Node.jsにもCLI用を作るためのライブラリがさらにいくつかありますが、今回はoc
Introducing Ezno
Ezno is an experimental compiler I have been working on and off for a while. In short, it is a JavaScript compiler featuring checking, correctness and performance for building full-stack (rendering on the client and server) websites. This post is just an overview of some of the features I have been working on which I think are quite cool as well an overview on the project philosophy ;) It is still
概要 タイトル通りですが、AWSでサーバーレスなメール送信システムを、AWS CDKを使って構築してみました。 サーバーレスなので、スケールする良い感じの構成になります。 荒いところもありますが結構便利なのでよかったらぜひご参考に、またはそのまま使ってくださいという感じで読んでいただけたら光栄です。 Amazon SESを使用してメールを送信していますが、（少し変えれば）SES以外でも送信できるかと思います。 目次 目次 概要 目次 まとめ(AWS Dev Day 2022 Japan) 要件 前提 アーキテクチャ 構成図 使用AWSサービス コード アーキテクチャ解説と補足 AWS CDK aws_lambda_nodejs パラメータ用コンフィグファイル バリデーション Amazon SES SQS 標準キュー 可視性タイムアウト ロングポーリング 部分バッチ応答 S3 DynamoD
うさぎでもわかる！TypeScriptの型レベルプログラミングと高度な設計手法 👇️ポッドキャストでも聴けます こんにちは、🐰です！今日はTypeScriptを使いこなすための高度なテクニックについてお話しします。TypeScriptは単なる「JavaScriptに型をつけただけの言語」ではなく、型システムを活用した表現力豊かなプログラミングが可能なんです！ 私自身、TypeScriptでの開発に挑戦し、「こんなこともできるんだ！」と驚くことがたくさんありました。この記事では、型レベルプログラミングや高度な設計パターン、パフォーマンス最適化など、実践的で役立つ知識を共有します。 TypeScriptの型システムを極め、より安全で保守性の高いコードを書く冒険に一緒に出かけましょう！🥕 TypeScriptの型システムを極める TypeScriptの型システムとは何が凄いのか TypeS
Web Design System: Migrating Web Components To React | Mercari Engineering
This post is for Day 8 of Mercari Advent Calendar 2022, brought to you by Williams Kwan from Mercari Core team and Faisal Rahman from the Mercari Architect team. Intro Mercari internal design systems power the UI in Mercari web apps. It allows Frontend engineers to implement UI changes quickly by providing UI building blocks. The design system is currently built using Web Components but we are in
【実験】 Google OAuth2 付きMCPサーバーを作って、Claude Desktopから呼んでみる（Cloudflare）
はじめに LLMと外部データソースを統合する際、ツールの認証をどうするのか悩みます。たとえば、MyGPTsのActionsではOAuth 2.0による認証[1]が実装されています。 MyGPTsではこのようにOAuth設定が可能 これは結構便利で、Google Apps Scriptを作り、組織内ユーザーにアクセスを限定した形でデプロイすれば、スプレッドシートやGmailとのセキュアな連携が、認証フロー含めてMyGPTs上で完結します。 Apps Scriptは呼び出し元を制限できる。呼び出しにはOAuth2が必要。 一方でClaude Desktopも使えるGoogle Workspace連携MCPサーバーの作例を見ると、APIキー認証のものか、手元で認証フローを走らせるもので、Claude Desktop上で認証・認可できるものは管見の限りありません。 この記事は、Claude Des
Today we’re excited to announce the release of TypeScript 4.5! If you’re not yet familiar with TypeScript, it’s a language that builds on JavaScript by adding statically checked types. When you use static types, you can run the TypeScript compiler to check for bugs like typos and mismatches in the shapes of your data, and get handy suggestions. These types don’t change your program, and you can re
Today we’re excited to announce the release of TypeScript 5.1! If you’re not yet familiar with TypeScript, it’s a language that builds on JavaScript by adding constructs called types. These types can describe some details about our program, and can be checked by TypeScript before they’re compiled away in order to catch possible typos, logic bugs and more. TypeScript also uses these types to provid
Valibot Schema Driven UI - ユーザーがノーコードで自由に UI を組み立てられるエディタを Next.js と Valibot で構築する - ROUTE06 Tech Blog
近年 Bubble や Webflow、日本だと STUDIO などのノーコードプラットフォームが注目を集めています。これらのツールは、プログラミングの知識がなくてもユーザーが思い思いの UI を構築できる機能を提供し、アプリケーション開発の民主化に貢献しています。 このようなノーコードでユーザーが自由に UI を組み立てる仕組みはどのように構築されているのでしょうか。一見複雑に見えますが、基本的な考え方を理解すれば独自のエディタを構築することも不可能ではありません。アーキテクチャの中核となるのは、動的な UI コンポーネントを表現するスキーマ定義と、それを実際の UI 要素に変換する仕組みです。この過程では、データのバリデーション、データ型の絞り込みと UI コンポーネントの動的生成、そしてそれらの適切な配置が重要な役割を果たします。 本記事では、ユーザーがブラウザ上で UI を自由に構
Sublime Text 4
The first stable release of Sublime Text 4 has finally arrived! We've worked hard on providing improvements without losing focus on what makes Sublime Text great. There are some new major features that we hope will significantly improve your workflow and a countless number of minor improvements across the board. A huge thanks goes out to all the beta testers on discord and all the contributors to
Today we are excited to announce the beta release of TypeScript 4.6! To get started using the beta, you can get it through NuGet, or use npm with the following command: You can also get editor support by Downloading for Visual Studio 2019/2017 Following directions for Visual Studio Code and Sublime Text 3. Here’s a quick list of what’s new in TypeScript 4.6! Allowing Code in Constructors Before su
フロントエンドのLinterやCIを改善した話
この記事は 株式会社エス・エム・エス Advent Calendar 2023 の 21 日目の記事です。 介護事業者向けの経営支援サービス「カイポケ」のリニューアルプロジェクトでフロントエンド開発をしている @hush_in です。 今年の 4 月にエス・エム・エスに入社しました。 入社してからフロントエンドの Linter や CI を改善した話をします。 忙しい人向けまとめ ESLint の recommended 系 extends を追加 全般 eslint:recommended plugin:import/recommended TypeScript plugin:@typescript-eslint/recommended-type-checked plugin:@typescript-eslint/stylistic-type-checked plugin:import/
Today we’re excited to announce the availability of TypeScript 4.7! If you’re not yet familiar with TypeScript, it’s a language that builds on JavaScript and adds syntax for types. Types help describe what kinds of values you’re working with and what kinds of functions you’re calling. TypeScript can use this information to help you avoid about mistakes like typos, missing arguments, or forgetting
Today we are excited to announce the beta release of TypeScript 4.7! To get started using the beta, you can use npm with the following command: npm install typescript@beta You can also get editor support by Downloading for Visual Studio 2022/2019 Following directions for Visual Studio Code and Sublime Text 3. Here’s a quick list of what’s new in TypeScript 4.7! ECMAScript Module Support in Node.js
Context is all you need: Better AI results with custom instructions
Version 1.108 is now available! Read about the new features and fixes from December. March 26, 2025 by Rob Conery, @robconery.com, Burke Holland, @burkeholland Earlier this month, we announced the general availability of custom instructions in Visual Studio Code. Custom instructions are how you give Copilot specific context about your team's workflow, your particular style preferences, libraries t
JavaScriptの識別子
JavaScriptの識別子として使えるもの・使えないものに関して整理しました。 識別子、予約語、キーワード ECMAScriptでは識別子、予約語、キーワードを以下のように使っています 識別子 (identifier) とは、ざっくり言うとローカル変数名に使える名前のことです。が、この定義は細かいことを言うと状況によってぶれがあり複雑です。これを細かく見ていくのが本記事の主眼です。 例: foo 規格上は Identifier がこれに相当しますが、様々な例外を勘案するとこれをそのまま使うのが自然とは言えないため、以降では微妙に異なる定義を採用します。 予約語 (reserved word) とは、識別子と同じ形式であるにも関わらず識別子としては使えないもののことです。 例: if, public (strict modeの予約語だが、使い道はない) 非例: async (識別子として自
Cypressのカスタムコマンドを用いたVue.jsの効率的なE2Eテスト実装 - ZOZO TECH BLOG
はじめに こんにちは、EC基盤本部・MA部・MA基盤チームでマーケティングオートメーションのシステムを開発している長澤（@snagasawa_）です。この記事では、CypressによるE2EテストをVue.jsプロジェクトへ導入した取り組みについて、実際の画面を交えてご紹介します。このE2Eテストによって、複雑な入力フォームを自動でテストできるようになり、修正後のバグを検知しやすくなりました。E2Eテストの導入を検討されている方の参考になれば幸いです。 Vue.jsプロジェクトの技術スタック 今回Cypressを導入したプロジェクトの主な技術スタックは以下の通りです。 Vue.js TypeScript Vuetify Open API 導入背景 E2Eテスト導入の理由は、複雑な入力フォームを動作保証するためです。 我々のチームでは、Line Friendship Manager（以下、L
Hypershell: A Type-Level DSL for Shell-Scripting in Rust | Context-Generic Programming
Discuss on Reddit, Lobsters, and Hacker News. Summary I am thrilled to introduce Hypershell, a modular, type-level domain-specific language (DSL) for writing shell-script-like programs in Rust. Hypershell is powered by context-generic programming (CGP), which makes it possible for users to extend or modify both the language syntax and semantics. Table of Contents Estimated reading time: 1~2 hours
MCP Apps - Bringing UI Capabilities To MCP Clients
Today, we’re announcing that MCP Apps are now live as an official MCP extension. Tools can now return interactive UI components that render directly in the conversation: dashboards, forms, visualizations, multi-step workflows, and more. This is the first official MCP extension, and it’s ready for production. We proposed MCP Apps last November, building on the amazing work of MCP-UI and the OpenAI
Today we’re excited to announce our beta release of TypeScript 5.0! This release brings many new features, while aiming to make TypeScript, smaller, simpler, and faster. We’ve implemented the new decorators standard, functionality to better support ESM projects in Node and bundlers, new ways for library authors to control generic inference, expanded our JSDoc functionality, simplified configuratio
June 5, 2023 by Dirk Bäumer VS Code for the Web (https://vscode.dev) has been available for some time now and it has always been our goal to support the full edit / compile / debug cycle in the browser. This is relatively easy for languages like JavaScript and TypeScript since browsers ship with a JavaScript execution engine. It is harder for other languages since we must be able to execute (and t
Today we’re excited to announce the release of TypeScript 4.8! If you’re not yet familiar with TypeScript, it’s a language that builds on JavaScript and adds syntax for types. These types let you put your expectations and assumptions into your code, and those assumptions can then be checked by the TypeScript type-checker. This checking can help avoid typos, calling uninitialized values, mixing up
Today we’re excited to announce the release of TypeScript 5.2! If you’re not familiar with TypeScript, it’s a language that builds on top of JavaScript by making it possible to declare and describe types. Writing types in our code allows us to explain intent and have other tools check our code to catch mistakes like typos, issues with null and undefined, and more. Types also power TypeScript’s edi
Today we excited to announce the availability of TypeScript 5.7! If you’re not familiar with TypeScript, it’s a language that builds on JavaScript by adding syntax for type declarations and annotations. This syntax can be used by the TypeScript compiler to type-check our code, and it can also be erased to emit clean, idiomatic JavaScript code. Type-checking is helpful because it can catch bugs in
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【2020年】CTF Web問題の攻撃手法まとめ - こんとろーるしーこんとろーるぶい
イベントループと TypeScript の型から理解する非同期処理
ブログをAstro に移行しました - As a Futurist...
HTMLを拡張し、JSなしで動的UIを作る「htmx」 | gihyo.jp
export {}; が使われるTypeScript特有の事情
こんなに辛いことになるから、最初にがんばろう / 辛い開発状況をどうにかするためにやった13のこと
Announcing TypeScript 5.0 - TypeScript
TypeScriptの公式チートシートを読んだ - dackdive's blog
2024年9月 俺の eslint.config.js
Modern Node.js Patterns for 2025
Why We're All-In on MCP - Mastra Blog
CLIツールを作るためにoclifを試してみたら簡単すぎて吃驚した | Trial and Spiral
サーバーレスでスケールするメール送信システムをAWS CDKで構築する - 365歩のテック
うさぎでもわかる！TypeScriptの型レベルプログラミングと高度な設計手法
Announcing TypeScript 4.5 - TypeScript
Announcing TypeScript 5.1 - TypeScript
Announcing TypeScript 4.6 Beta - TypeScript
Announcing TypeScript 4.7 - TypeScript
Announcing TypeScript 4.7 Beta - TypeScript
Announcing TypeScript 5.0 Beta - TypeScript
Run WebAssemblies in VS Code for the Web
Announcing TypeScript 4.8 - TypeScript
Announcing TypeScript 5.2 - TypeScript
Announcing TypeScript 5.7 - TypeScript