jsx, tsx のシンタックスハイライトにも対応しました。また、JavaScriptのハイライトを改善しました - はてなブログ開発ブログ

2024/03/21 17 users シンタックスハイライト しんた シンタックス TSX 構文

はてなブログでは、ソースコードなどを構文（シンタックス）に応じて色付け（ハイライト）表示する シンタックスハイライトに対応しています。今回、シンタックスハイライトに関する改善を行いました。 jsx, tsx形式のシンタックスハイライトの追加 JavaScript形式のシンタックスハイライトの改善 jsx, tsx形式のシンタ... 続きを読む

Honoで雑React SPA最小

2024/02/27 17 users hono クライント stream vite laisoさん

laisoさんが書いてたのほぼなんだけど Honoは文字列でもStreamでもなんでも返せるし、tsconfig.jsonで適切に設定すればJSXなんでもいけるし、Viteのdev-serverがあるから、サーバーもクライントも同時に開発、ビルドできるので、雑React SPA環境作るのに向いてるよ。 作り方解説します。めんどい人はここにプロジェクト... 続きを読む

HonoとDenoで社内ツールを作ってみた - RAKSUL TechBlog

2023/11/08 79 users TSX hono deno esbuild 新進気鋭

こんにちは！ラクスルの灰原です！ 軽量かつ高速なWebフレームワークであるHonoと、新進気鋭のJSランタイムであるDenoを使って、社内ツールを作ってみましたので紹介します。 作ったツール 技術スタック index.tsx の内容 Tips HonoでTwindを使う HonoのJSXでAlpine.jsを使う Hono+Denoでesbuildを使う おわりに 作った... 続きを読む

2023年のCSSは0ランタイムにしたい - console.lealog();

2023/03/24 8 users console.lealog CSS vite ポエム 土台

したいよね？ 事の経緯としては、 とある新規プロジェクトで、技術選定をすることに 開発の土台はViteで、フレームワークはJSXが使えるやつに決まった さてCSSはどうやって書こうかとなる あれこれ考えて、とある方法に決めた というのをまとめた、まあポエムの域を出ないメモです。 CSS ModulesやらTailwindやらCSS-in-... 続きを読む

Next.js で Props をソートすると gzip 時のビルドサイズを少しだけ減らせる

2023/03/17 11 users Props gzip 知見 Next.js パッケージ

どういうこと？ 少し前に、CSS プロパティを自動ソートすると gzip 時のビルドサイズを減らせる記事を見ました 👇 これにならい、JSX の Props もソートしたら同じようになるんじゃね？って思って試したら、ビルドサイズを減らすことができたので、この場を借りてその知見を共有したいと思います 💪 検証環境 パッケージ... 続きを読む

Google ChromeのDevToolsがAngular、Vue、JSX、Dart、LESS、SCSS、SASSなどのシンタックスハイライトに対応

2023/02/21 7 users シンタックスハイライト Dart less Sass SCSS

Google ChromeのDevToolsがAngular、Vue、JSX、Dart、LESS、SCSS、SASSなどのシンタックスハイライトに対応 GoogleはすでにリリースしているWebブラウザのChrome 110と現在開発中のChrome 111に搭載されているDevToolsで、Angular、Vue、JSX、Dart、LESS、SCSS、SASSなどのシンタックスハイライトに対応したことが明らか... 続きを読む

EmacsでTypeScript/React開発する2023 - たごもりすメモ

2023/01/24 9 users emacs TypeScript LSP TSX りすメモ

世間に死ぬほど色々な方法があるのはわかっているがとにかくまっさらな状態から最短手順でEmacsでJSX/TSXが書けるようになりたい! という話。VSCodeとかそういう話には目を背ける。 tsxファイルはweb-modeで起動するようにすればシンタックスハイライトとインデントはうまくいくので、あとはlspを起動するようにすれば快... 続きを読む

[Cloudflare Workers] HonoにJSXミドルウェアが追加されました

2022/06/14 6 users hono シンタックス テンプレートリテラル フレームワーク

Cloudflare Workers向けのフレームワーク「Hono」にJSXミドルウェアが追加されたので、その紹介をします。HonoはCloudflare Workers向けのWebフレームワークです。Honoはビルトインミドルウェアが豊富で、今回紹介するものはそのひとつです。 概要 簡単に紹介すると、JSXのシンタックスとテンプレートリテラルでHTMLをか... 続きを読む

2021年現在Vueを選択すべきでないと思う理由 感想

2021/09/23 93 users 感想 理由 ローカルスコープ tailwindcss Vue

Vueに対する熱いメッセージを頂いたので感想を述べてみる（ここが解決されればVueを率先して使ってくれるという意味と受け取った） コンポーネントのローカルスコープでコンポーネントを定義しようとするとJSXが必要 わかる 主にTailwindCSSのようなユーティリティファーストとの相性の悪さ スタイリングはテンプレート... 続きを読む

Vue + JSX + Nuxt Composition API で最高のフロント開発体験 - ANDPAD Tech Blog

2021/07/01 137 users Vue API ANDPAD Tech Blog

はじめに ANDPADでフロントエンドの開発を担当している小泉です。 前回、約3ヶ月前にVue Composition APIをチームで導入して得られたメリットという記事を書かせて頂きました。 その後、今年の5月頃からまた新たなプロダクトの立ち上げを担当する機会があり、フロントの技術選定についていろいろ検討する中で、Vue.jsで... 続きを読む

Deno で 学ぶ React のサーバサイドレンダリング - 30歳からのプログラミング

2021/06/27 110 users React deno サーバサイドレンダリング SSR 範囲

Deno で React のサーバサイドレンダリング（以下、SSR）を実現する方法をハンズオン形式で書いていく。 自分が調べた範囲では、単に JSX で HTML を構築して終わり、という記事が多かった。それではあまり実用的ではないので、この記事ではハイドレーションまで行う。 また、React で SSR する方法を調べたところ、ほと... 続きを読む

JSXはspread演算子で<Foo a={a} b={b}>を<Foo {...{a, b}}>で書ける

2021/04/13 6 users foo a, b

JSXはspread演算子で<Foo a={a} b={b}>を<Foo {...{a, b}}>で書ける 続きを読む

React17におけるJSXの新しい変換を理解する | Zenn

2020/09/22 31 users React Zenn HTML 変換 我々

今日発表された公式ブログの記事によれば、React17では新しいJSXの変換がサポートされます。これはどういうことなのか、我々にどういう影響があるのかをまとめました。 JSXの変換とは ほとんどの人は、Reactを使う際に以下のようなJSX記法を使っているはずです。具体的には次のようなもので、<div>のようなHTMLに近い記... 続きを読む

DenoがJSXに対応した - No Regrets in Bathing

2019/10/09 46 users deno No Regrets in Bathing

台風がVue Fesを直撃する勢いで向かってきています。 参加者の方にカンファレンスを楽しんで頂きたい気持ちはもちろんですし、スタッフも多大な労力をかけてタフな調整を続けてきた方ばかりなので、報われるような結果になることを祈るばかりです。諸々の事情は公式記事で詳しく書かれています。 私は発注したりなんだり... 続きを読む

TypeScript Deep DiveでTypeScriptに入門する ｜ DevelopersIO

2019/10/02 64 users React TypeScript DevelopersIO

TypeScript Deep Dive とは TypeScript Deep Diveとは、TypeScriptはもちろん、JavaScript（ES6）/ サーバーサイドJavaScript（Node.js）/ Reactなどで使うJSX など、TypeScript周辺技術を包括的に学ぶことができるTypeScriptの入門サイトです。 TypeScript Deep Dive TypeScript Deep Dive 日本語版 GitHub TypeScript ... 続きを読む

Introducing swc 1.0 · swc

2019/02/11 24 users SWC ECMAscript TypeScript

Introduction What is swc? swc(speedy web compiler) is a super-fast javascript to javascript compiler. What can swc do? It can transpile typescript / jsx / ecmascript 2019 to browser-compatible javascript. input.js: class Foo { set foo(v) { } } class Bar extends Foo { get bar1() {} async bar2() {}... 続きを読む

Vue.jsのrender関数(JSX)に思いを馳せた結果 - じまろぐ

2018/12/18 18 users Vue Vue.js template じまろぐ 主流

この記事はVue.js #2 Advent Calendar 2018の18日目の記事です。 Vue.jsを使った開発では、特別な理由がない限り.vueファイルで記述するのが主流かと思います。.vueの場合、テンプレートの定義は<template>で行うことになるでしょう。 自分も何の疑問が湧くことなく<template>を使っていましたが、ある日ふとrender関数... 続きを読む

Before Gutenberg - WPerが知っておくべきES6とReactのこと - Capital P

2018/09/28 20 users React Gutenberg jQuery ES6 概念

この連載ではGutenbergがリリースされる前にやっておくべきことをまとめているのだが、Gutenbergがもたらしたもっとも大きな変更点として、Reactの導入がある。これにより、次の新しい要素が導入される。 ES6/ES Next React + JSX さて、以上の概念について慣れ親しんでいる人は特に驚きはないだろうが、これまでjQuery... 続きを読む

ドラッグ&ドロップでReact製のWEBアプリがつくれるReactStudioがやばい - Qiita

2018/01/09 508 users Qiita Props React製 state React

はじめに reactというとJSXの書き方、props、stateの挙動等を覚える必要があるため、 学習コストが割りと高めであったり、環境を構築するのに一手間かかったり等、 まだまだとっつきにくさが否めないライブラリです。 しかし、今回は、そんなReactをドラッグ&ドロップでアプリが 作れてしまうツールがあったので紹介したいと思います。 ※尚、Windowsはなく、Macのみで使用できるツールで... 続きを読む

「JSX キモい」に反論してみる - Qiita

2017/12/06 77 users Qiita グロービス React 麹町 プロローグ

この記事は グロービス Advent Calendar 2017 の6日目です。 グロービスは麹町にある、社会人向けの経営大学院を運営している会社で、現在私はここの会員プラットフォームのフロントエンド開発をみさせてもらっています。なおグロービスでは、React 開発に参加してくれる方を絶賛募集中です。くわしくは こちら 。 プロローグ 本来「キモい」という主観の表明に正しいも間違っているもないので... 続きを読む

idやclassを使ってテストを書くのは、もはやアンチパターンである - Qiita

2017/11/19 394 users Qiita React class CSS カスタムデータ属性

いきなり結論を書くと、 id や class はスタイルのためのものなので、テストでそれを使うのはやめましょう。そして、カスタムデータ属性を使いましょう。 先に断っておくと主にreactについての話で、JSXを前提とします。 はじめに ご存知の通り、ロジックとスタイルは別物です。 もしスタイルの変更のためにclass名を変えて、ロジックのテストが落ちるなんてことはあってはならないのです。 cssに... 続きを読む

ブラウザ上でSVGをJSXに変換するWebアプリを作った - wadackel.me

2017/08/15 23 users ブラウ CLI wadackel SVG 少量

ブラウザ上でSVGをJSXに変換するWebアプリを作った Published August 15, 2017 javascript 以前に CLI で SVG を React Components へ変換する方法 を記事に書きました。数が多いものなら一気に変換したいのですが、ちょっとしたデモサイトのロゴや、少量のアイコン追加など、CLI で変換する為の環境準備をするより気軽に使いたい場合は、ブラウ... 続きを読む

Reactビギナーズガイド読んでよかったところ - hitode909の日記

2017/04/08 33 users Reactビギナーズガイド Button class ワイン

2017 - 04 - 08 Reactビギナーズガイド読んでよかったところ 最初はJSXも使わず平易にスタートして，最終的にはワインを管理するアプリケーションを作る例が載っている． ビギナーズ向けだけど，おすすめテクニックが紹介されていて参考になった． よかったところ コンポーネント に コンポーネント 名のクラスを付与する Button コンポーネント ならclass="Button"をつけて... 続きを読む

生のReactを知ろう – JSX、Flux、ES6、Webpackを使わず… | プログラミング | POSTD

2016/03/31 313 users Webpack Flux react-router 用語 通り

React.jsが騒ぎを起こしているのはご存知の通りです。しかし、調査に数時間を費やした挙句、あまりに多くの用語に圧倒されただけで終わっていないでしょうか。JSX、flux、ES6、webpack、react-routerが使える今、他に必要なのはReactの使い方を説明してくれる人だけです。免責事項：　私はJSX、Flux、 ES6 、そして webpack を非常に気に入っています。これらのツ... 続きを読む

2015-11-23のJS: JSDoc 3.4.0、Grunt/Bowerの今後、JavaScriptトレンド - JSer.info

2015/11/24 17 users BOWER Grunt modules JSDoc ES6

JSer.info #254 - JSDoc 3.4.0がリリースされました。 jsdoc/CHANGES.md at 3.4.0 · jsdoc3/jsdoc パーサーにEspreeを使うことでES6やJSXのコードをパース出来るようになりました。 それに加えてまだ完全ではありませんが、ES6 Classesやmodulesに関するサポートが追加されています。 Use JSDoc: ES 201... 続きを読む