タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
はじめに ANDPADでフロントエンドの開発を担当している小泉です。 前回、約3ヶ月前にVue Composition APIをチームで導入して得られたメリットという記事を書かせて頂きました。 その後、今年の5月頃からまた新たなプロダクトの立ち上げを担当する機会があり、フロントの技術選定についていろいろ検討する中で、Vue.jsでもJSXを使って書けること、かなり導入しやすくなっていることを知りました。 そこで、Nuxt Composition API + TSXという組み合わせを採用してみたところ、かなり使いやすく、Vue と React のいいとこ取りができて最高 なのではないかとさえ思いました。 この記事では、そんなVue + TSX の導入方法と、メリット・デメリット、そして使う際のTipsをいくつか紹介しています。今後のフロントエンドの技術選定や、Vue + JSXでの開発に興味
JSX対応ライブラリをTypeScriptで作る方法を解説します。古い知識は省きつつも、必要な知識を全てお伝えします。
ゼロランタイムのミニマルな静的サイトジェネレーター『dodai』の開発と JSX First な世界観について2023/01/27 本記事では来たる2/3のKyoto.js #18に備え、年末年始に npm パッケージとして公開した『@potato4d/dodai』という静的サイトジェネレーター(以下SSG)について紹介します。なお、開発にあたって本ブログも @nuxt/content からこの dodai へと移行しています。移行作業の所要時間は 30 分程度でした。 @potato4d/dodai について dodai は 1~5 つ程度の固定ページと、Nつの動的なページを持つ Web サイトの構築を想定した静的サイトジェネレーターです。 元々は私が複数の Web サイトの管理で使っていた Node.js 用の Script 群をパッケージとしてまとめたものになります。 技術的には複数
*1 サーバーレスFunctionsぐらいの気軽さでサーバーアリのWebアプリをデプロイしたいという時がある。主に自分たちだけが使うようなツール系のやつ。 その時に今までのようにSPA+APIアーキテクチャではなく、モノリシックなサーバーサイドアーキテクチャにしつつもフロントエンド開発と同じツールチェインを使いたい、と前から思っていた。 これは単にReactメタフレームワークでも一気通貫に時短で作れそうだけど、個人の楽しみのための活動なので、一旦世間のトレンドからは離れて自分が本当に必要だと思った要素技術のみを最小限に使って理解しながら試行錯誤したい。 ※ただ第三者に提供するシステムとかは安全に作られた既存フレームワークに乗るのがいいというのもある しばらく考えてみたところ、私にとっては「TypeScriptでJSXをテンプレートエンジンに使ってHTMLを書けるだけでよい」という所に落ち着
フロントエンド・PHPカンファレンス 北海道 2026の発表資料です https://fortee.jp/frontend-phpcon-do-2026/proposal/9702d654-e233-4608-bffb-0fa04cff75c1
- TSKaigi Kansai 2024 発表資料 - https://kansai.tskaigi.org/talks/izumin5210 - サンプルリポジトリ: https://github.com/izumin5210-sandbox/custom-jsx-runtimes
Suppose you have an API route that returns some data as JSON: app.get('/api/likes/:postId', async (req, res) => { const postId = req.params.postId; const [post, friendLikes] = await Promise.all([ getPost(postId), getFriendLikes(postId, { limit: 2 }), ]); const json = { totalLikeCount: post.totalLikeCount, isLikedByUser: post.isLikedByUser, friendLikes: friendLikes, }; res.json(json); }); You also
function TodoInput(attrs: { add: (v: string) => void }) { const input = <input type='text' /> as HTMLInputElement; input.placeholder = 'Add todo item...'; input.onkeydown = (e) => { if (e.key === 'Enter') { attrs.add(input.value); input.value = ''; } }; return input; } class TodoList { ul = <ul class='todolist' /> as HTMLUListElement; add(v: string) { const item = <li>{v}</li> as HTMLLIElement; it
こんにちは。チームラボフロントエンド班の鹿島です。最近の趣味は Factorio です。緑バイターに怯えています。 この記事では、React や Preact、Hono のような、JSX を扱うライブラリを作るために必要なあれこれについて、調べたことを紹介します。内容としては以前社内勉強会で発表したものと同じですが、記事にするにあたってまとめ直しています。すこし長くなってしまいましたが、ぜひ最後までお付き合いください！ JSX とは JSX は、JavaScript の拡張構文です。主に React でコンポーネントを書く際に用いられ、HTML のような見た目を持ちます。 <div className={style["todo"]}> <h2 className={style["heading"]}>Todo</h2> <TodoList> <TodoItem checked={true}
はてなブログでは、ソースコードなどを構文（シンタックス）に応じて色付け（ハイライト）表示する シンタックスハイライトに対応しています。今回、シンタックスハイライトに関する改善を行いました。 jsx, tsx形式のシンタックスハイライトの追加 JavaScript形式のシンタックスハイライトの改善 jsx, tsx形式のシンタックスハイライトの追加 jsx 及び tsx 形式に新たに対応しました。 はてな記法、Markdownでのハイライト方法は以下のとおりです。 はてな記法 >|jsx| ...ソースコードを記述する... ||< Markdown ```jsx ...ソースコードを記述する... ```詳しい利用方法やその他の形式の対応につきましては、下記のヘルプをご参照ください。 JavaScript形式のシンタックスハイライトの改善 JavaScriptのシンタックスハイライトの改善
2025/6/20に開催された、React Tokyo ミートアップ #6 の発表資料です
Sorting imports and properties in software development offers numerous benefits: Readability: Finding declarations in a sorted, large list is a little faster. Remember that you read the code much more often than you write it. Maintainability: Sorting imports and properties is considered a good practice in software development, contributing to code quality and consistency across the codebase. Code
VanJS: A 1.0kB Grab 'n Go Reactive UI Framework without React/JSX Enable everyone to build useful UI apps with a few lines of code, anywhere, any time, on any device.VanJS (abbreviated Vanilla JavaScript) is an ultra-lightweight, zero-dependency, and unopinionated Reactive UI framework based on pure vanilla JavaScript and DOM. Programming with VanJS feels like building React apps in a scripting la
DAC is a Dashboard-as-Code tool for defining, validating, and serving dashboards from YAML and TSX. Dynamic charts, tabs, loops and conditionals with TSX. Built-in AI agent via Codex: chat with your dashboard live and get it updated. Supports all the major databases: Postgres, MySQL, Snowflake, BigQuery, Redshift, Databricks, and more via Bruin Built-in semantic layer: define metrics and dimension
Google ChromeのDevToolsがAngular、Vue、JSX、Dart、LESS、SCSS、SASSなどのシンタックスハイライトに対応 GoogleはすでにリリースしているWebブラウザのChrome 110と現在開発中のChrome 111に搭載されているDevToolsで、Angular、Vue、JSX、Dart、LESS、SCSS、SASSなどのシンタックスハイライトに対応したことが明らかになりました。 2月16日付けで公開されたブログ「What's New in DevTools (Chrome 111)」では、Chrome 111で、Angularのシンタックスハイライトに対応したことが「Better syntax highlight for Angular」の項目で紹介されています。 下記のサンプルでは、例えば2行目のダブルクオーテーション内の値などがAngul
Use JSX without ReactNakedJSX is a command-line tool for generating HTML files from JSX. The output is pure HTML and CSS - unless you choose to add your own JavaScript. This is an overview. Please refer to the documentation for a detailed look at each feature. This page was built using NakedJSX. You can look at its source. At a GlanceGenerate static HTML files from JSX by running an npx command. S
Cloudflare Workers向けのフレームワーク「Hono」にJSXミドルウェアが追加されたので、その紹介をします。HonoはCloudflare Workers向けのWebフレームワークです。Honoはビルトインミドルウェアが豊富で、今回紹介するものはそのひとつです。 概要 簡単に紹介すると、JSXのシンタックスとテンプレートリテラルでHTMLをかっこよく書けます。そして、非常に高速にSSRされます。以下のコードを見てください。これがCloudflare Workersのエッジで動くのです。 import { Hono } from 'hono' import { html } from 'hono/html' import { jsx } from 'hono/jsx' const app = new Hono() const Layout = (props: { childr
![[Cloudflare Workers] HonoにJSXミドルウェアが追加されました](https://cdn-ak-scissors.b.st-hatena.com/image/square/df56ecd6c3bfd8da03c95905ab623f5612612c34/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fcold-voice-b72a.comc.workers.dev%3A443%2Fhttps%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--hrd0s3Is--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%25255BCloudflare%252520Workers%25255D%252520Hono%2525E3%252581%2525ABJSX%2525E3%252583%25259F%2525E3%252583%252589%2525E3%252583%2525AB%2525E3%252582%2525A6%2525E3%252582%2525A7%2525E3%252582%2525A2%2525E3%252581%25258C%2525E8%2525BF%2525BD%2525E5%25258A%2525A0%2525E3%252581%252595%2525E3%252582%25258C%2525E3%252581%2525BE%2525E3%252581%252597%2525E3%252581%25259F%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Ayusukebe%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9saDMuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2EtL0FPaDE0R2pIMWY1VlpnSFMwLUJwekhzZjRGYXN0R1ZYTlpfZFh1U2pwdWNMNGc9czI1MC1j%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
Deno 2.4 is here with deno bundle, bytes/text imports, stabilized OTel and more
Vue Advent Calendar 2025 25 日目(シーズン 2)の記事です。 はじめに ナイトウ(@naitokosuke)と申します。 今回は vue-jsx-vapor を紹介します。 Vue 3.6 が 2025 年 12 月 23 日にリリースされました。 Vapor Mode についてはおそらく一度は目にしたことがあるのではないかと思います。 JSX と Vapor Mode についての情報はあまり目にしたことがないと思い今回調べてみました。 こういう JSX がほしい！と思った方は要 check です！ まずはこれを見てほしい import { ref } from "vue"; export default () => { const count = ref(0); return <button onClick={() => count.value++}>{cou
ReactのJSXの中で、Reactの開発者が条件を設定する方法は複数あります。 if/else文やswitch文も使えますが、第三の方法として三項演算子がございます。 この記事では、Reactで三項演算子を使用する方法について学習します。 Vanilla.JSでの三項演算子の基礎は下記で解説しております。 dev-k.hatenablog.com 三項演算子 Reactでの三項演算子 JSX内に記述する Reactでのネストされた三項演算子 論理積演算子 インラインスタイルでの三項演算子 最後に 軽く三項演算子のおさらいをしときましょう。 三項演算子 条件付き三項演算子は、3つのオペランド(値や変数)を取る唯一のJavaScript演算子となります。 この演算子は、値を返すif文のショートカットつまり代替えとしてよく使用されます。 条件を設定し、trueまたはfalseに基づいて特定の値
{unreadMessages.length > 0 && <h2> You have {unreadMessages.length} unread messages. </h2> }
ChatGPT（など）にIllustrator用のスクリプト作成を依頼するときのテンプレート（と、JSXファイルの作成） ChatGPT（など）にIllustrator用のスクリプトを依頼するとき、こちらをテンプレートとして使うとよい感じです。 Adobe Illustrator用のExtendScript開発を依頼します。 以下の要件に基づいたスクリプトの作成をお願いします。 # スクリプトの目的: [実現したい具体的な機能や自動化したい作業内容を記述] # 使用言語とバージョン: - ExtendScript（ECMAScriptのバージョン3に基づくAdobe固有の拡張を含む） - Adobe Illustrator 2024対応 # スクリプトの機能要件: [実装してほしい機能の詳細リストを記述] # 制約条件: - ExtendScriptの仕様に準拠し、ECMAScriptのバ
この記事では、Reactでのループについて初心者向けに解説します。 JavaScriptやTypeScriptのロジックでループを実行する場合、特別なルールに気を配る必要はありません。 普通のJSループを使えば、様々な種類のループを使用できます。 もちろん、すべてのループがすべての場合に適しているわけではありませんが、ほとんどの場合には可能です。 Reactでは、主にES2015で導入された最新のJavaScript機能を使用しています。 これらの機能を活用するために、Reactアプリケーションでよく使われる一般的なJavaScriptパターンやメソッドを紹介します。 例えば、配列から商品のリスト全体をレンダリングする場合、反復処理を使用して実現できます。 これらのポイントを詳しく説明します。 React JSXでループする マップ関数 forEachループ Reactループ処理での注意点
Perfection is finally attained not when there is no longer anything to add, but when there is no longer anything to take away. (c) Antoine de Saint Exupéry 🐊Putout is a JavaScript Linter, pluggable and configurable code transformer, drop-in ESLint replacement with built-in code printer and ability to fix syntax errors. It has lots of transformations that keeps your codebase in a clean state, remo
HonoとJSXを使ってミニマムに管理画面を作りました。サクッと管理画面を作りたい場合はめちゃくちゃいい構成だと思います。 はじめに 何かしらの管理画面を作る際、ReactやVue.jsのようなSPA（CSR）のフレームワークを使うケースがあると思いますが、「たったこれだけの機能を提供したいだけなのにこんなに大変なの！？」と思ったことはありませんか？ 私の場合、以下のような場合に感じることが多かったです 企業内のごく一部のユーザーのみが操作する管理画面 ユーザーのITリテラシーが高い（コードが書ける・読める） CRUDなどの単純な機能しかない管理画面 特に、SPAはフロントエンドとバックエンドそれぞれでメンバーのアサイン・仕様すり合わせ（API発火タイミングなど）・フロントエンドとバックエンド間のスキーマの同期など、色々なことに気を使う必要があり実現したい機能に対しての開発コストが嵩む印象
「EJS, Nunjucks, PugなどでWeb制作をやってたけど、もっとモダンな開発がしたい・・・」 「ReactやVueに手を出してみたけど、別にアプリケーションが作りたいんじゃなくて静的なWebページが作りたいんだ・・・」 「Next, Gatsby, Nuxtみたいな静的サイトビルダーを使ったけど、結局SPAの挙動するやん・・・」 「SPAは別にいらんねん・・・」 いずれかに当てはまる方、いませんか？（全部私が思ってたこと） そんなあなたに Astro です。 Astro ではどんな書き方ができるの？ Astroにはいろんな特徴がありますが、この記事では「どんな書き方ができるのか」を中心に紹介します。 Astroでは .astro という独自のファイル形式を使用します。 早速ですが、Astroでどんな書き方ができて、どんな出力が得られるのか見てみましょう。 こういう書き方↓ができ
An online playground to convert HTML to JSX
The Ease of JSX with the power of SSR The developer experience of asynchronous JSX with the proven benefits of server-side rendering, resulting in a robust and streamlined web development approach. export default async function ({ request, reply }) { const id = request.query["id"]; const { name, image, ingredients } = await ( await fetch(`https://dummyjson.com/recipes/${id}`) ).json(); return ( <a
従来、開発者はマークアップとロジックを別々のファイルに分け、構造にはHTML、スタイリングにはCSSを使用し、インタラクションやデータ操作にはJavaScriptを記述してきました。 しかし、これらの技術を組み合わせることで、開発プロセスを簡素化し、複雑なユーザーインターフェースを簡単に構築できる方法があるとしたらどうでしょうか。そこで登場するのがJSXです。 この記事では、JSXとは何か、どのように機能するのか、そしてなぜウェブ開発において、これが動的なユーザーインターフェースを構築するために重要なのかを学びます。 この革命的な技術について、詳しく見てみましょう。 JSXとは JSX（JavaScript XML）は、JavaScriptの構文拡張で、JavaScriptファイル内にHTMLのようなコードを記述できるようにするものです。Meta（旧Facebook）によって開発されました
とある開発会社での千鳥の会話 ノブ「大吾、手隙か？」 大吾「手隙じゃ」 ノブ「ちょいと大吾に頼みたいことがある」 大吾「なんでもまかせろ」 ノブ「ユーザーが自由に入力フォームを追加できる機能を作ってくれんか」 ノブ「完成形はこんな感じじゃ。増やすボタンを押すと入力フォームが追加されるイメージじゃ」 大吾「こんなん簡単じゃな。任せときい」 カタカタカタカタカタカタカタカタカタカタカタカタ 大吾「ノブ〜できたぞ」 ノブ「おお！？はや早い。どれどれ見てみよか」 ノブ「ちゃんとボタンを押すと入力フォームが増えとるな」 ノブ「入力フォームに値を入れて確認してみようか」 ノブ「おいおいおい！！」 ノブ「idが1の入力フォームに入れた入力値が追加ボタンを押して出てくるidが2の入力フォームに移動しとるやないカイ！」 大吾「そんなんワシは知らん」 ノブ「ちょっと大吾の書いたコードを見せてくれんか」 大吾「
Error: x Unexpected token `div`. Expected jsx identifier ,-[hello.tsx:17:1] 17 | return ( 18 | <div> : ^^^ 19 | {/* 1行コメント */} 20 | Hello world! 21 | { // 1行コメント} `---- Caused by: Syntax Error
はじめに Reactを書くとき、私たちはほぼ必ずJSX（TSX）で書くと思います。 そんなJSX（TSX）の代替となるようなTSRXというTypeScriptのスーパーセット言語がアルファ版として公開されていて、ちょっと面白そうだったので触れてみました。 TSRXとは？ TSRXは、元ReactコアエンジニアであるDominic Gannawayさんが開発しているTypeScriptのスーパーセット言語です。 Gannawayさんは現在RippleというUIライブラリを開発しており、TSRXはもともとRippleのなかで使われていた構文です。それをフレームワーク非依存として切り出したのがTSRXという出自です。 RippleとTSRXの関係としては、RippleがReactやVue.jsと同じ「UIライブラリ」として動作します。TSRXはUIライブラリの1段上のレイヤーに位置するテンプレー
条件によってレンダーするコンポーネントを出し分ける際は条件付きレンダーを利用します。 今回は条件付きレンダーの記述方法について紹介します。 条件付きレンダーの記述方法 条件付きレンダーの記述方法について紹介します。 条件分岐を実装したメソッドを定義し、JSX内でメソッドを呼び出す 条件付きレンダーをコンポーネントのメソッドで定義し、JSX内でメソッドを呼び出す方法です。 JSXからメソッドを呼び出す、つまりJSX内に式を埋め込む場合は中括弧（{}）で式を囲む必要があります。1 以下のコードはisMorningがtrueなら<GoodMorning />、falseなら<GoodEvening />をレンダーする例です。 import React from "react"; import GoodEvening from "./GoodEvening"; import GoodMorning
Matt PocockMatt is a well-regarded TypeScript expert known for his ability to demystify complex TypeScript concepts. #Quick Explanation JSX.Element and React.ReactElement are functionally the same type. They can be used interchangeably. They represent the thing that a JSX expression creates. import React from 'react'; // ---cut--- const node: JSX.Element = <div />; const node2: React.ReactElement
概要 Viteで、React17以降のJSXトランスフォームに対応する方法です。 動機 React16以前では、JSXを利用するには明示的にReactをインポートする必要がありましたが、React 17以降は新しいトランスフォームの方法が提供され(現在は16以前のバージョンでも提供されています)、babelやtsconfigの設定を変更することで明示的にReactをインポートせずともJSXが利用できるようになりました。 しかし、Viteでは現状、このトランスフォームに対応していないため、明示的にReactをインポートする必要があります。 また、以下のようにesbuildのjsxInjectでインポート文を注入するといった方法もあります。
これはなんの記事か？honoはJSXを処理する実装をもっています。JSXはJavaScriptの構文を拡張したもので...のような話は皆さんご存知でしょうしググってもらった方が正確な情報を得られると思うのでここでは書かずに、honoの実装での特徴的なところについて書いていこうと思います。 特徴は？文字列の出力に特化していることです。Reactでいうところの`renderToString(<App />)` のみに対応しています。`<App />.toString()` が文字列になります。`document.body.innerHTML = <App />`が動くのはそのためです。 esm. sh/runのやつ、HTMLに内で書いたJSXコンポーネントをそのままHTMLとして渡すなんてことができる。意味不明でよい pic.twitter.com/TD7AwSQ7HI — Yusuke Wa
早速ですがマークダウンの中でJSXを使えるようにするmarkdown-itのプラグインを作りました。 下の画像のようにマークダウンの中でJSXを使えるようになります。 そうすると、下の画像のように記事の中に下のようにインタラクティブに動くコンポーネントを埋め込むことができます。 この実行結果は mosya.dev という私が開発したプログラミング学習サービスのブログで確認することができます👇 JSXを書けるこの仕組みは個人の技術ブログ用途にはぴったりなのではないかと思います！ なぜ作ったか 海外のこの記事を見て、技術記事は文字と画像だけでなくインタラクティブ性が必要だと実感しました。 触っててとても楽しいし、記事の続きが読みたくなったのです。 私はこんな読んで楽しい、触って楽しい記事を書かないといけない！！ そこでマークダウンの中でReactを埋め込めないかと考えました。 最初は表示され
TypeScript React の FC, VFC という型は過渡期で将来的に変更になる可能性があるからコンポーネントの返す型は JSX.Element にした方が良いという記事を読んで新しいプロジェクトでは JSX.Element を使うようにしたのですが、そこでハマったことのメモ null を返せない 条件によって表示したくないようなコンポーネントで null を返したりしていましたが、JSX.Element は null を含まないようです const ComponentVFC: VFC = () => { return null; }; // => OK const ComponentJsxElement = (): JSX.Element => { return null; }; // => Type 'null' is not assignable to type 'Elem
Origins of JSX and Why It Exists As if plain JavaScript wasn't complex enough already… Often, JSX is described as allowing you to write HTML inside JavaScript. That might not make sense for you at first, and rightfully so — both languages serve different purposes and merging them might seem confusing. But JSX is not a mix of HTML and JavaScript. It's just plain JavaScript with some clever syntax t
Server Actions の戻り値には、シリアライズ可能なデータ型を返す必要があります。ドキュメントでは Server Actions の戻り値に JSX を使うことはサポートされていないと記述されていますが、実際には Server Actions の戻り値に JSX を使うことができます。ただし、公式にサポートされている仕様ではないので、思わぬバグを踏む、将来追加される機能に対応しないおそれがあることを理解した上で、使うかどうかを判断する必要があります。 Server Actions の戻り値には、サーバーからクライアントにデータを渡せるように、シリアライズ可能な形式である必要があります。具体的には、以下の型をサポートしています。 Primitives string number bigint boolean undefined null symbol, only symbols r
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
