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を使う おわりに 作った... 続きを読む

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

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

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

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 する方法を調べたところ、ほと... 続きを読む

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... 続きを読む

Announcing TypeScript 1.6 Beta: React/JSX, better error checking, and more - TypeScript - Site Home - MSDN Blogs

2015/09/03 19 users React TypeScript beta and more

Today, we’re making a beta of the upcoming TypeScript 1.6 available.  There are a bunch of new features coming in the 1.6 release, and we wanted to give you a preview of these features and time to giv... 続きを読む

TypeScript における ES6 との兼ね合いで避けているパーツ ::ハブろぐ

2015/05/20 43 users TypeScript Private 兼ね合い 独断 偏見

ES6 フレンドリな TypeScript のために 先日書いた JSX と TypeScript の混合 Flux または悪魔合体 の経緯から TypeScript と JSX を併用しているため、コードの記述に大きな差ができないよういくつかのパーツ（主に TypeScript のもの）を避けることにしています。 NGなパーツ 独断と偏見です。 Private/Public modifiers ... 続きを読む

reactjs - React Native ファーストインプレッション - Qiita

2015/03/28 338 users Qiita reactjs ファーストインプレッション 作法

React Native 概要 React.js とだいたい同じ作法で、JavaScript で書いたコードが iOS ネイティブアプリとして一応動く。そのフレームワークと開発環境を提供する。 React.js と同じ React を謳っているとおり、JSX で UI コンポーネントを定義するとか、Props や State で View のデータフローを整えるとか、setState() によるデ... 続きを読む

JSライブラリ/フレームワークの良い、悪いメモ - 素人がプログラミングを勉強していたブログ

2014/11/05 441 users フレームワーク JSライブラリ Fac プログラミング 素人

2014-11-05 JSライブラリ/フレームワークの良い、悪いメモ ※ただのメモで、未来志向なのであまり真に受けてはいけない。 良いっぽい React.js 早い/コンポネント志向/APIの設計がいい。JSXと他のトランスパイラの組み合わせという問題はある Promise ネイティブに入った、誰もが使ってる TypeScript ES6時代でも存在意義のある言語。TypeScript互換のFac... 続きを読む

Web Components(+Virtual DOM)ラッパー書いてみた ::ハブろぐ

2014/10/30 52 users Virtual DOM ハブろぐ React ahomu 内容

Concept 『Web Components with Virtual DOM』 ahomu/Claylump Motivation Web Components ラッパーを書いてみたいなーと思った React の JSX がイマイチ気にくわない（JSとHTMLを一緒にするなオジサン） <template> に書いた内容を Virtual DOM 生成器に変換すればいいんじゃね というような所か... 続きを読む