はじめに VSCodeで、index.tsやpage.tsxなど、同名のファイルを複数同時に開いてしまい、わからなくなってしまったことはありませんか？ 実はよく見ると同一名称のファイルを開いているときには右側にディレクトリ名も表示されているのですが、薄い文字かつ、目線移動が必要で分かりづらいです。 この記事では、VSCodeの設定を変更することで、タブ表示名にディレクトリ名を含めて表示する方法を紹介します。 設定方法 VSCodeの設定ファイルsettings.jsonに以下の設定を追加します。 "workbench.editor.customLabels.patterns": { "**/index.*": "${dirname} .../${dirname(1)}", "**/{page,layout,template,route,actions,hooks,components,ut
LLMのプロンプトもTSXで書く時代
VS Code拡張向けライブラリprompt-tsxの紹介。 prompt-tsxとはGitHub - microsoft/vscode-prompt-tsxContribute to microsoft/vscode-prompt-tsx development by creating an account on GitHub.GitHubmicrosoft@vscode/prompt-tsxはVSCode拡張で利用できるライブラリで、Copilot Chat向けの@コマンドで呼び出すエージェントの開発や、それ以外のLM APIを使った拡張とともに使うことができる。 利用イメージこれをこう以上のようにLM APIに渡すパラメータをTSX（JSX）コンポーネントとして管理する。 prompt-tsxが必要な背景prompt-tsxが必要な背景だが、なぜわざわざTSXで書けるようにしたのかと
プロトタイピング向けにペライチで最低限のフロントエンドスタックを動かす方法について。 注意: 本番で使わないでください。tailwind は CDN モードで動かしているし、 esm.sh はスクリプトを動的にビルドするのでパフォーマンスは良くないです。 前提 jsconf.jp で色々なツールを使えばそれっぽいバンドルレス実現できる(けどパフォーマンスに難)という話を書きました。 具体的には NativeESM + importmaps + esm.sh 等の組み合わせます。 <script type="importmap"> - HTML: ハイパーテキストマークアップ言語 | MDN ESM>CDN これに、 esm.sh の v135 の新機能を使って tsx をバンドルするのを組み合わせる話です。 esm.sh/run 使い方は簡単。 <!-- esm.sh からランナーをロード
[VS Code]タブのカスタムラベル設定でpage.tsx、layout.tsxなどのファイルを見やすくする | DevelopersIO
[VS Code]タブのカスタムラベル設定でpage.tsx、layout.tsxなどのファイルを見やすくする どうも！オペレーション部の西村祐二です。 最近、Next.jsなどでフロントエンドの実装も行うことが増えてきました。 実装を進めていくと、page.tsx,layout.tsx,index.tsx,route.tsなど同名のファイルが増えてきて、どのファイルを開いているか分かりづらいなと思う場面がありました。 VS Codeのv1.88で開いているファイルタブのラベルをカスタマイズできるようになったので、その設定方法を紹介したいと思います。 Visual Studio Code March 2024 結論 最初に結論として、settings.jsonに下記設定をすることでディレクトリ名も表示されるようになりタブを見やすくすることができます。 { "workbench.editor
![[VS Code]タブのカスタムラベル設定でpage.tsx、layout.tsxなどのファイルを見やすくする | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/611914e4c074abe947efa5c820fc1646e6c60a0a/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2020%2F06%2Fvscode-2020-eyecatch-1200x630-1.png)
Next.jsの認証チェックどこでするか問題 基本的には middleware.ts で行うと思うのですが、肥大化を避けたり、ちょっとした共通処理は layout.tsx に書くこともあるでしょう。今回は layout.tsx で認証チェックをした場合に、実装によっては意図せず認証ユーザにしか表示したくない情報が漏洩してしまうかもしれないケースを紹介します。 問題のあるコード import { redirect } from "next/navigation"; export const dynamic = 'force-dynamic'; function currentUser() { // ここでセッションデータから認証ユーザ情報を取得する関数 // デモ用にログインしていないユーザを再現したいのでfalseを返す return false; } export default fun
Rails 7 で React & TypeScript を導入する方法（tsx, esbuild, jsbundling-rails） - LEFログ：学習記録ノート
※この記事では「新しくRails 7 アプリを作成するときのこと」を想定していますが、Rails 6を7に上げるときにもそれなりに役立つ情報だと思います！ 結論 rails newのときにesbuildを指定してあげれば、あとはJavaScriptファイルや.jsxファイルを、.tsxにしてあげるだけでOK。 型チェックや構文チェックを導入するには少し注意が必要。 概要 現在、Rails 7を使ってフロントエンドを構築する方法には、大きく分けて３種類あります。 importmapsを使って、素のJavaScriptを使ってフロントエンドを作る esbuildを使って、JSXファイルを使ってフロントエンドを作る Rails 7をAPIモードにして、フロントエンドはNextjsで作る 自分はこの２番めの「esbuildを使ってフロントエンドを作る」を選択しました。理由は、Railsのslim上
Node.js 本体で TypeScript ファイルを実行できるようにするプロポーザルが出されているという話が先週あたりから話題になっている。しかしそれほど嬉しいかといわれると、正直いらんなあと思っている。 TypeScriptで簡単なスクリプトを書くときは、長らくtsxを使って実行している。tsxを使い始めるより前は ts-node を使っていたが、tsxを使ってからは何の不満もなく使い続けている。 tsxは内部的にはesbuildでTypeScriptをトランスパイルしていて、型チェックは行わない。tsxのありがたい点は、すべての node コマンドのオプションを tsx コマンドでサポートしていることだ。単純にコマンドを置き換えるだけでいいので、何も新しく覚えることがない。 構造的にはNode.jsの中でswcでJavaScriptに変換されるか、外でesbuildで変換されるかの
Vue.js with TSX - From Vue 2.x to Vue 3 #v_tokyo11
2020/08/25 の #v_tokyo11 で話した登壇スライドです。
Modern Emacs Typescript Web (React) Config with lsp-mode, treesitter, tailwind, TSX & more - Ovi Stoica
Table of Contents Introduction Part 1: Treesitter for Typescript & TSX LSP Support Completion setup Linter setup LSP Setup Eslint (Optional) Tailwind LSP Server LSP Performance Emacs LSP Booster Structural editing Formatting buffers with Prettier Other resources Conclusion Introduction I've worked within the JS ecosystem for the past 8 years using editors like Webstorm and VSCode, I started using
新規プロジェクトで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 3 Study 『Render function で React の世界を覗いてみる』 templateに対するTypeScriptの型補完に不満を感じていた UIデザインに対するフロントエンドエンジニアの裁量が大きく、templateを利用するメリットが少なかった もしかしてただ使ってみたかっただけ？ Vue 3+TSXの開発体験/Vue 2やtem
TSX First な Zero-Runtime SSG potato4d/dodai とその仕組み / owned static site generator #kyotojs
2023/02/03 に開催された、 #kyotojs での発表時の登壇資料です。
jsx, tsx のシンタックスハイライトにも対応しました。また、JavaScriptのハイライトを改善しました - はてなブログ開発ブログ
はてなブログでは、ソースコードなどを構文（シンタックス）に応じて色付け（ハイライト）表示する シンタックスハイライトに対応しています。今回、シンタックスハイライトに関する改善を行いました。 jsx, tsx形式のシンタックスハイライトの追加 JavaScript形式のシンタックスハイライトの改善 jsx, tsx形式のシンタックスハイライトの追加 jsx 及び tsx 形式に新たに対応しました。 はてな記法、Markdownでのハイライト方法は以下のとおりです。 はてな記法 >|jsx| ...ソースコードを記述する... ||< Markdown ```jsx ...ソースコードを記述する... ```詳しい利用方法やその他の形式の対応につきましては、下記のヘルプをご参照ください。 JavaScript形式のシンタックスハイライトの改善 JavaScriptのシンタックスハイライトの改善
Jun Makino on Twitter: "ワクチンデマって、ワクチンだけが唯一かつ最終的な解決、みたいなのかしら？これは確かに極めて有害で、欧米で今そうではないことが明らかになっていて、日本でもこれから重大な問題になる。 https://t.co/9khO961tsx"
ワクチンデマって、ワクチンだけが唯一かつ最終的な解決、みたいなのかしら？これは確かに極めて有害で、欧米で今そうではないことが明らかになっていて、日本でもこれから重大な問題になる。 https://t.co/9khO961tsx
GitHub - privatenumber/tsx: ⚡️ TypeScript Execute | The easiest way to run TypeScript in Node.js
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
export default async function Layout({ children }: { children: ReactNode }) { const supabaseClient = createSupabaseServerComponentClient(); const { data, error } = await supabaseClient.auth.getUser(); if (!data.user) { // This is unreachable because the user is authenticated // But we need to check for it anyway for TypeScript. return redirect('/login'); } else if (error) { return <p>Error: An err
自分も同じ道を辿ってきて今はちょっと考え方が変わっているので自身の整理がてらmeijinさんの記事に乗っからせていただきます🙏 Re: 「A layout is UI that is shared between routes.」って書いているのでめっちゃめちゃ違う用途じゃないか？ export default async function Layout({ children }: { children: ReactNode }) { const supabaseClient = createSupabaseServerComponentClient(); const { data, error } = await supabaseClient.auth.getUser(); if (!data.user) { // This is unreachable because the use
先日の 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 Vue 3 にて、render function の h 関数が分離された h 関数の分離に伴い、 API が React のに近いインターフェースとなった この2点によって tsc だけで Vue TSX が動くようになったが、 近いだけで微妙に違う仕様によって実用は難しい 具体的には children のとり方が VNode[] か ...VNode かの違いがある Vue
JSXを含むファイル 型アサーションの記法として value as type と <type>value の2通りあるが、後者は .tsx には書けない （ <> はJSXタグのマーカーであるため） Reactを使うプロジェクト内のTypeScriptファイルは全て.tsxではダメなのか 結論 .ts と .tsx は明示的に分けるべき 理由 拡張子で明示的にしておくことで、「このファイルにJSXを書くべきではない」ことを表すことができるため （UIコンポーネントのファイルか、ロジックを書くファイルか）
Features Seamless TypeScript execution Run TypeScript code without worrying about configuration! tsx runs your TypeScript code with modern and sensible defaults, making it user-friendly and especially great for beginners. Seamless CJS ↔ ESM imports No need to wonder whether a package is CommonJS or ESM again. If you've encountered the ERR_REQUIRE_ESM error in Node, you'll never see it again! Wa
TypeScriptコードを直接実行したい（ts-node、esbuild-register、tsx） - CLOVER🍀
これは、なにをしたくて書いたもの？ Node.jsでソースコードを書く時は基本的にTypeScriptにしたいのですが、時々ちょっとしたスクリプトを書きたい時もあったりします。 そういう時は、ちゃんとした設定などは特に用意せず、さっと書いてそのまま実行したいのですが、そういう時はどういう手段が あるのかなと思って、調べてみることにしました。 やりたいこと TypeScriptファイルを実行時に直接トランスパイル、実行したいわけですね。 選択肢としては、ts-node、esbuild-register、tsxがあるようです。 今回はそれぞれをあまり深追いせず、さらっと見ていく感じにします。求めている用途がそういう傾向なので。 ただ、実行速度は気になるので、そこは動作時に合わせて見ていきたいと思います。 ts-node ts-nodeは、Node.jsのTypeScript実行エンジン、REP
Emacsでtsxを編集するときのいい設定がないなあないなあと思って、長年いろいろ模索 (typescript-mode に rjsx-minor-mode を併用して (define-derived-mode typescript-tsx-mode typescript-mode "TSX") して (typescript-tsx-mode-map ("<" . rjsx-electric-lt) (">" . rjsx-electric-gt)) したり)やっていたんですが、どうもインデントとかがおかしくなりがちでした。 ここにきて Emacs 29からならtree-sitterで設定できそう だとわかったのでメモします。 手順 まずmacOSでHomebrewを使っている場合は tree-sitter を次でインストールしておきます。
Intel To Disable TSX By Default On More CPUs With New Microcode - Phoronix
Intel To Disable TSX By Default On More CPUs With New Microcode Written by Michael Larabel in Intel on 28 June 2021 at 12:18 PM EDT. 30 Comments Intel is going to be disabling Transactional Synchronization Extensions (TSX) by default for various Skylake through Coffee Lake processors with forthcoming microcode updates. Yes, this does mean performance implications for workloads benefiting from TSX.
Server Actionで状態遷移するベストプラクティスが知りたい フォーム入力 データベース更新 画面更新 というよくある黄金シナリオを考えます。 NextJSはSSR Frameworkなので可能な限りServer Componentを利用することを推奨しています。しかしServer ComponentではHooksが使えません。 これまでのようにAPIを叩く→State更新→画面再レンダリングという黄金のパターンは使えなくなります[1]。そこでhooksに頼らずにデータの更新と再レンダリングを行う新しいNextJSのメンタルモデルに適応する必要があります。 公式ドキュメントでおすすめされる１つの方法はServer Actionを使うことです。今日はこのあたりのベストプラクティスについて備忘録としてまとめます。 Server Action Server Actionとはサーバーサイド
As AI engineers, our products communicate with large language models using chat messages composed of text prompts. While developing Copilot Chat, we've found that composing prompts with just bare strings is unwieldy and frustrating. Some of the challenges we ran into include: We used either programmatic string concatenation or template strings for composing prompts. Programmatic string concatenati
import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' +import vueJsx from '@vitejs/plugin-vue-jsx' // https://vitejs.dev/config/ export default defineConfig({ - plugins: [vue()] + plugins: [vue(), vueJsx()] })
これは ZOZO Advent Calendar 2022 カレンダー Vol.3 の 10日目の記事です。 ts-node 便利ですよね。 TypeScriptで書いてトランスパイルをしないで動かせるので簡単なスクリプトやデバッグで用いることがあると思います。 でも、遅いですよね。 そんなあなたにtsx tsxといっても App.tsx みたいな TypeScript+JSX の話ではないです。 tsxとは ts-nodeのように使えるコマンドです。 内部的にはトランスパイルにesbuildが用いられており、ts-nodeより早く速くTypeScriptファイルを実行できます。 v.s. esbuild-register ts-nodeより早くてTypeScriptを実行するesbuildなパッケージにesbuild-registerというものもあります。（ほかにも様々ありますが検索した
tsx
TypeScript Execute (tsx): The easiest way to run TypeScript in Node.js Documentation | Getting started → Already a sponsor? Join the discussion in the Development repo!
Next.jsでの_documment.js(tsx)・App.js(tsx)について爆速で理解しよう - Qiita
class SampleDocument extends Document { static async getInitialProps(ctx) { const initialProps = await Document.getInitialProps(ctx) return { ...initialProps } } render() { return ( <Html> <Head> <link rel="dns-prefetch" href="//www.google.co.jp" /> </Head> <body> <Main /> <NextScript /> </body> </Html> ) } } export default SampleDocument _document.js(tsx)では、<Html>, <Head />, <Main />, <NextScript
今回は、Next.js で全体の設定ができる_document.js(tsx) と_app.js(tsx) について解説してききます ✍️ _document.js(.tsx) Next.js の Page コンポーネントはデフォルトでは<html>・<body>タグの定義を行いますが、それらを拡張したい場合は _document.js(tsx) を作成し、その中で Document コンポーネントを継承したクラスを実装しましょう。 class SampleDocument extends Document { static async getInitialProps(ctx) { const initialProps = await Document.getInitialProps(ctx); return { ...initialProps }; } render() { return
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【index.ts】そのVSCodeタブ名、わかりづらくない？【page.tsx】
インストール不要。ペライチHTMLでReact+TSX+Tailwind のフロントエンド一式を動かす
Next.jsのlayout.tsxで認証チェックすると情報漏洩するかも
.tsファイルを直接実行するのにtsxで特に困っていない | lacolaco's marginalia
ep.82 Vue 3のためのTSXという新しい選択肢 | UIT INSIDE
Layout.tsxはミドルウェア的に使ってもいいの？（Next.js 14）
Re: Layout.tsxはミドルウェア的に使ってもいいの？（Next.js 14）
Vue.js 3 の TSX を TypeScript Compiler だけで動かす方法について
【TypeScript】.ts拡張子と.tsx拡張子 - Qiita
tsx
Emacs 29でTree-sitterでtsxの設定をする
Loading.tsxはServer Action中に待機画面を表示しない【NextJS】
GitHub - microsoft/vscode-prompt-tsx
Vue 3 + TSX (JSX) の環境作成（Vite 使用）
まだts-node使ってるの？tsxの紹介 - Qiita
Next.jsの_documment.js(tsx)と_app.js(tsx)について爆速で理解しよう