React 19の新機能まとめ — サーバーコンポーネントは全フロントエンドエンジニア必見
9月5日、Vercelの公式ブログで「What’s new in React 19 – Vercel」と題した記事が公開された。この記事では、React 19における重要な新機能や改善点について、詳細かつ実践的な内容が取り上げられている。これまでのReactのバージョンで導入されてきた実験的機能が、React 19で正式に安定化され、多くの開発者にとってさらなるパフォーマンスの向上と開発体験の向上が期待されている。 ここでは、同記事からポイントを絞って内容をご紹介する。 サーバーコンポーネント (Server Components) サーバーコンポーネントは、Reactの10年の歴史の中でも最も大きな変化の1つであり、React 19の新機能の基盤となるものである。この機能により、以下の点が大幅に改善される。 初期ページロード時間の短縮 サーバーコンポーネントを使用すると、クライアントに送
Exhaustive branch checks with TypeScript - Jack Franklin
March 4, 2024Exhaustive branch checks with TypeScriptIt's very common when working with TypeScript that you will have a type that declares a list of values, such as an enum or union type: enum SupportedColour1 { RED, YELLOW, BLUE, } type SupportedColour2 = 'RED' | 'YELLOW' | 'BLUE'And then you will often have functions that need to run differently or return different values based on what variant i
ts-node の代わりに esbuild-register を使ってスピードアップ
ts-node でも型チェックを外すオプションがあることをコメントで教えてもらいました。型チェックをかけない esbuild と同様の条件としたほうが、より平等な計測結果になりますので、計測し直しました。 参考 https://github.com/TypeStrong/ts-node#typechecking Node.js で TypeScript をトランスパイルしながら実行できる、 esbuild-register というパッケージがあります。 非常に速い esbuild を使いながら雑に TypeScript が実行できちゃう頼もしいパッケージです。 今までのメインプレイヤーであった ts-node よりも速いです。次の小さなスクリプトでも 1.5 倍程度の速度が出ています。 function wait(duration: number) { return new Promise
TS 4.2
README.md TypeScript 4.2 https://devblogs.microsoft.com/typescript/announcing-typescript-4-2/ New Features Leading/Middle Rest Elements in Tuple Types 下記のように、Rest Elements が tuple の最初でなくても使えるようになっています。 let foo: [...string[], number]; foo = [123]; foo = ["hello", 123]; foo = ["hello!", "hello!", "hello!", 123]; let bar: [boolean, ...string[], boolean]; bar = [true, false]; bar = [true, "some text",
TypeScriptでMapped Typesを使ってきれいなインターフェースを作る話 - Qiita
みなさんこんにちは。この記事はTypeScript Advent Calendar 2020の5日目の記事です。 TypeScriptにはintersection typeという機能があります。これはT & Uのような構文をもつ型であり、意味としては「TでもありUでもある型」です。 構造的部分型とIntersection Type 「TでもありUでもある」という説明の仕方をされるとIntersection Typeが何の役に立つのかピンと来ないという方がいるかもしれません。実際のところ、Intersection Typeはオブジェクト型を合体するという役割によく使われます。 例えば、Tが{ foo: string }型でUが{ bar: number }型だった場合、T & Uは実質上{ foo: string; bar: number }型となります。 見方によっては、T & UはTとU
Semgrepを使った構文木ベースの検索と置換でコードのリファクタリングをする
Semgrepはr2cという会社/サービスが開発しているツールです。 Semgrepの特徴としてTree-sitterでコードをパースしたConcrete Syntax Tree(CST)の構文木をベースにして検索や置換ができます。 コードをCSTにパースした構文木に対して検索/置換することで、ただの文字列検索/置換に比べてミスマッチしない検索/置換ができます。 例えば、次のa.js、b.js、c.jsはそれぞれevalを使っていますが、スタイルは違いますが意味はほとんど同じです。 // a.js eval("const a = 1, b = 2; eval(a + b);"); // b.js eval('const a = 1, b = 2;\ eval(a + b);'); // c.js eval(`const a = 1, b = 2; eval(a + b);`); $ sem
TypeScriptの関数でDIパターン - id:anatooのブログ
Node.js+TypeScriptでバックエンドを書いてると、DIパターンを使いたい場面が結構ある。 いわゆるDIと言うとコンストラクタインジェクションなどクラスありきの方法が思い浮かぶけれども、実際には関数でもDIパターンを書くことができる。単純に関数のパラメータに依存を受け取ればよい。 // 依存を表現する型 interface Deps { appService: AppServiceInterface; } // DIパターンを記述する関数 function DoSomething({appService}: Deps, params: any) { ... } 依存を注入する場合には、引数を部分適用するbind()メソッドを使う。 // 依存を注入 const doSomething = DoSomething.bind(null, { appService: new MyAp
TypeScript 3.2.0-RC 変更点 - Qiita
こんにちはメルペイ社な@vvakameです。 TypeScript 3.2 RCがアナウンスされました。 What's new in TypeScriptも更新されて…いません！！ナンデ？？？ 破壊的変更はアップデートされてました。 この辺に僕が試した時のコードを投げてあります。 変更点まとめ Functionのbind, call, apply周りの型推論が更に賢くなった strictBindCallApply bind, call, apply についての型推論がさらにいい感じになった --strictBindCallApply が導入された --strict に含まれる CallableFunction と NewableFunction という組み込み型も導入 Genericsを使った型をObject spreadでいい感じに扱えるようになった Object spread on g
TypeScript 3.1 の Mapped Tuple Typeについて
気付いたらTS 3.1.1がしれっとリリースされていたので、今回導入されたMapped Tuple Typeについて書いてみようと思います。 対応するPRはこちら。 今回のMapped Tuple Typeは、TypeScript 2.1で導入されたMapped Typeの強化版です。 ちなみに「Mapped Type is 何」という人は、以前に解説記事を書いたのでこれを読むと良いかと。 さて、Mapped Tuple Type、別に新しい記法とかが追加されたわけではありません。 次のコードは上記のPRに記載されているサンプルです。 type Box<T> = { value: T }; type Boxified<T> = { [P in keyof T]: Box<T[P]> }; type T1 = Boxified<string[]>; // Box<string>[] type
TypeScript における ES6 との兼ね合いで避けているパーツ
ES6 フレンドリな TypeScript のために 先日書いた JSX と TypeScript の混合 Flux または悪魔合体 の経緯から TypeScript と JSX を併用しているため、コードの記述に大きな差ができないよういくつかのパーツ（主に TypeScript のもの）を避けることにしています。 NGなパーツ 独断と偏見です。 Private/Public modifiers ジャングル ニ プライベート ナイ！ class Acme { private himitsu = ''; public tellme() {} } みたいなのですね。バイオ JS にプライベートなんて必要なかったんや。protected も使えるっぽいけどアンドキュメント？ Modules ES6 ライクな import/export だけ使うということで内部モジュール禁止です。不便ないですね。
TypeScript 1.1.0 変更点 - Qiita
TypeScriptリファレンスお買い上げありがとうございます！ Amazon 達人出版会 2014/10/07 TypeScript 1.1.0-1 がリリースされました。ぱちぱち。 コンパイラが書き直されて、大幅な高速化と、わかめが見た感じコードベースのスリム化が行われている気がしなくもない、という感じです。 公式の変更点はChanges between 1.0 and 1.1とList of minor breaking changes from 1.0を見てください。 Playgroundも既に1.1.0-1ベースにアップデートされているようです。 なお、以下の解説はあまり確認せずIssueやサイトに記載の内容を鵜呑みにして記述しております。 言語仕様上の変更 TypeScript 1.0 系の間は、基本的には非互換な変更は導入されないことになっています。Roadmap 非互換な変
TypeScriptとECMAScript 6 - Qiita
block scope bindings block scope bindings let const block functions? TypeScript → 検討中 #19 個人的にはかなり欲しい。頑張れば arrow function expression のようにpolyfill的な実装を吐けると思うので、それやってほしいなぁ…。 Traceurちっくなことをつい求めたくなってしまうけど多分TypeScriptチームはそこはあんまし頑張る気がないと思う。 ていうか block functions ってなんなんじゃろ。 destructuring destructuring refutable matching これ現在のドラフトに入ってないよね？ 分割代入のこと。CoffeeScriptで昔から使えるので知ってる人も多いと思う。 脱構造とかダサい訳をあてられてることもある気がする
TypeScriptで複数ファイル構成する2つの方法 - teppeis blog
TypeScriptで複数ファイル構成のプロジェクトを扱う方法について書いてみる。日本語の入門記事や試してみました系の記事で勘違いされてることがたまに見受けられるので、整理してみる。 公式のModules in TypeScriptを既に読んでおられるような御仁は回れ右していただいても結構です。 やりたいこと ソースファイルをモジュールごとに分割して管理したい 実行環境はNode.js or ブラウザ 例えば、こういう処理があって、 // main.ts function trimLeft(str: string): string { return str.replace(/^\s+/, ''); } var input = document.getElementsByTagName('input')[0]; input.value = trimLeft(input.value); tri
Angular.jsとTypeScript - pirosikick's diary
Angular.jsでaltJSを使う場合、CoffeeScriptが一般的（たぶん）だが、TypeScriptはあんまり聞かない。TypeScriptの方が好きな自分としてはどうにかならんかねとずっと考えていて、こうやったらいいんじゃないかというのを思いついたのでメモ。 controller定義の基本 Angular.jsでcontrollerを定義する場合、だいたいはangular.module.controllerの第１引数にcontroller名、第２引数にcontrollerのコンストラクタ関数を渡す。 var app = angular.module('app', []); // 'MainCtrl'という名前のcontrollerを定義 app.controller('MainCtrl', function ($scope) { }); このままだとminiyした時にinje
javascript入門／配列編 | SONICMOOV LAB
こんにちは、hottyです。 今回は「javascript入門／配列編」という事で、javascript初心者の方を対象に配列の基本について紹介していきたいと思います。 目次 Javascriptの配列とは 配列を生成（初期化）する new演算子を使う リテラルを使う 文字列から生成する 連想配列を作る 2重配列を作る 配列のプロパティ 配列の基本的な操作 配列に要素を追加する 指定の場所に要素を追加、又は置き換える 連想配列に要素を追加する 配列から要素を削除する 連想配列から要素を削除する Javascriptの配列とは 配列とは、例えるならデータを出し入れするタンスのようなものです。 データを入れた引き出しの場所は、連続的な数字(添字、インデックスと呼ばれます)によって管理されています。 大量のデータを繰り返し処理する時に、配列を使うことで効率的にデータを処理することができます。 配
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TypeScript 1.5 Alphaに実装されたES6 modulesを試してみた - Qiita