node v22.7.x で TypeScript をそのまま実行する

2024/08/29 17 users experimental-strip-types 承知

node の最新に近いバージョンで TypeScript の実験的なサポートが入っている。ts-node や tsx に頼らず typescript のスクリプトを実行できる。 ロードマップ 実験的な機能であることは承知の上で、動かしてみる。 tl;dr # ~/.zshrc alias nodets="node --experimental-strip-types --experimental-transform-types --ex... 続きを読む

【index.ts】そのVSCodeタブ名、わかりづらくない？【page.tsx】

2024/07/27 157 users vscode Page.tsx index.ts コスト 右側

はじめに VSCodeで、index.tsやpage.tsxなど、同名のファイルを複数同時に開いてしまい、わからなくなってしまったことはありませんか？ 実はよく見ると右側にディレクトリ名が表示されているのですが、薄い文字かつ、目線移動のコストが発生するため分かりづらいです。 この記事では、VSCodeの設定を変更することで、フ... 続きを読む

.tsファイルを直接実行するのにtsxで特に困っていない | Marginalia

2024/07/10 21 users TypeScript Marginalia プロポーザル

Node.js 本体で TypeScript ファイルを実行できるようにするプロポーザルが出されているという話が先週あたりから話題になっている。しかしそれほど嬉しいかといわれると、正直いらんなあと思っている。 TypeScriptで簡単なスクリプトを書くときは、長らくtsxを使って実行している。tsxを使い始めるより前は ts-node を... 続きを読む

Modern Emacs Typescript Web (React) Config with lsp-mode, treesitter, tailwind, TSX & more - Ovi Stoica

2024/07/07 22 users React tailwind mode MORE

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

[VS Code]タブのカスタムラベル設定でpage.tsx、layout.tsxなどのファイルを見やすくする | DevelopersIO

2024/05/09 18 users Page.tsx layout DevelopersIO

[VS Code]タブのカスタムラベル設定でpage.tsx、layout.tsxなどのファイルを見やすくする どうも！オペレーション部の西村祐二です。 最近、Next.jsなどでフロントエンドの実装も行うことが増えてきました。 実装を進めていくと、page.tsx,layout.tsx,index.tsx,route.tsなど同名のファイルが増えてきて、どのファイルを... 続きを読む

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 Prisma ORM Types React Next.js

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