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

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

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

React Server Componentの実行順序とフレームワークでの注意点

2024/03/09 12 users フレームワーク 実行順序 RSC layout 注意点

前回はこちらで議論できて大変有意義でした、ありがとうございました。 その際、Next.jsでのlayout.tsxとpage.tsxの実行順序についてpage -> layoutの順で実行されることを初めて知ったのですが、疑問に思ったのは「これはReact Server Component（RSC）の仕様なのかNext.js（フレームワーク）の仕様なのか？」というこ... 続きを読む

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

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

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

アセットの import を簡単にする TypeScript Language Service Plugin を作った - mizdra's blog

2023/07/10 7 users import アセット Components header

Web ページを作るときに、あらかじめファイルに書き出しておいた画像 (アセット) をページに埋め込みたいことがよくあると思います。例えばヘッダーにサービスのロゴ画像を埋め込む場合、以下のようなコードを書くと思います。 // src/components/Header.tsx export function Header() { return ( <header> <img src="/a... 続きを読む

Rails 7 で React & TypeScript を導入する方法（tsx, esbuild, jsbundling-rails） - LEFログ：学習記録ノート

2023/02/21 13 users Rails React TypeScript esbuild

※この記事では「新しくRails 7 アプリを作成するときのこと」を想定していますが、Rails 6を7に上げるときにもそれなりに役立つ情報だと思います！ 結論 rails newのときにesbuildを指定してあげれば、あとはJavaScriptファイルや.jsxファイルを、.tsxにしてあげるだけでOK。 型チェックや構文チェックを導入するには少... 続きを読む

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

2023/01/24 9 users emacs TypeScript LSP りすメモ インデント

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

Next.js の Error を丁寧に扱う

2021/09/12 11 users error component pages Next.js

Next.js には組み込みのエラーフォールバック機構が存在します。Unhandled Error を捉え、pages/404.tsx・pages/500.tsx・pages/_error.tsxの順に適した Component にフォールバックされます。 実アプリケーションにおいてはこれだけでは不十分なケースが多く、きちんとハンドリングしログ収集に繋げるなどのエラー設計... 続きを読む

ep.82 Vue 3のためのTSXという新しい選択肢 | UIT INSIDE - LINE UIT の開発者による「最新のフロントエンド」をキャッチアップできる Podcast

2021/04/09 10 users Setup Podcast TypeScript Vue 最新

新規プロジェクトでVue 3とTSXを導入した感想について、@spring_raining が @changhee.kim と @daisuke.yamamoto に聞きました。 Vue 3にTSXを導入した経緯 TSXとは？ TypeScript + JSX Vue 3では特に追加のプラグイン無くTSXが利用できる Composition APIのsetupで、TSXで書いたRender functionを返す 参考: ep.39 Vue ... 続きを読む

Next.jsでページ共通の処理をする（useEffectを使う例）

2021/01/25 13 users Middleware TypeScr useEffect

Nuxt.jsだとmiddlewareという機能を使うことで、ページの遷移ごとに特定の処理をはさむことができます。 Next.jsで全ページで特定の処理をはさむためには、Appコンポーネント（_app.tsx）にその処理を書くことになります。 Next.jsの_app.tsxに全ページ共通の処理を書く 参考：Next.jsの_app.tsxのカスタマイズ（TypeScr... 続きを読む

Next.js から Prisma ORM を利用する

2020/12/22 38 users Types React Next.js Save node

Next.js に Prisma ORM を導入する方法について解説します。 Next.js プロジェクトの雛形を作成 $ mkdir hello-next-app && cd hello-next-app $ npm init -y $ npm install next react react-dom --save $ npm install typescript @types/node @types/react --save-dev $ code src/index.tsx 続きを読む

Vue.js 3 の TSX を TypeScript Compiler だけで動かす方法について | potato4d D(iary)

2020/08/30 8 users tsc iary github.com tl;dr https

先日の v-tokyo #11 の懇親会で質問されたので、Native TSX Support される Vue 3 でなぜ tsc だけで TSX が動作しないのかを聞かれたのでメモとして残しておこうと思います。 ちなみに Vue 3.0 beta が出た頃に既に検証し終えているコードは以下にあります。 https://github.com/potato4d/vue-next-tsx-only-tsc TL;DR ... 続きを読む

PT3+Ubuntu 14.04+KVM+Chinachuで録画 - sudo_viの日記

2014/07/08 60 users sudo_vi 録画 Compare 日記 動作検証

個人の日記です GA-Z87X-UD3H Core i5 4570 PT3*1 Ubuntu 14.04 LTS KVM host みたいな構成で録画鯖の動作検証をした。 4440ではなく4570にしたのはTSXなどのなんかかっこいい拡張命令に対応しているからですが、実際に活用できるのかは調べてない http://ark.intel.com/compare/75038,75043 KVM PT3 ... 続きを読む