TypeScriptの条件分岐をスマートに記述するためのTips - Nealle Developer's Blog
はじめに こんにちは、ARCH チームの立川です。 今回が初めてのテックブログになります。 先日、社内で「条件分岐をスマートに評価する」というテーマで、TypeScript（JavaScript）における条件分岐の書き方について発表する機会がありました。古いコードに触れる中で、見通しの悪い記述を多く見かけることがあったため、発表に至った経緯があります。 この記事では、その発表内容をベースにコードの可読性を高める条件分岐のテクニックをご紹介します。基礎的な内容ではありますが、少しでも役立つヒントがあれば幸いです！ 三項演算子をよりスマートに使うためのヒント 三項演算子は非常に便利ですが、状況によってはもっとシンプルで読みやすい代替手段があります。ここでは、等価な三項演算子と比較しながら、それらの方法を紹介します。 null 合体演算子（ ?? ）を活用する null 合体演算子は、左辺が n
誤解されがちなnever型の危険性: 「存在しない」について - Qiita
never型はTypeScriptに存在する型のひとつで、「存在しない値の型」として説明されることが多いものです。 この説明は正しいのですが、誤解されることがあると感じました。そこで、今回はnever型に関する誤解を解くための記事を用意しました。ぜひこの記事を読んで、never型について正しく理解しているかチェックしてみてください。 never型とは never型は、上述の通り、「存在しない値の型」です。言い換えれば「never型の値は存在しない」ということです。こんな簡潔な説明ですが、never型は奥深い性質を持っています。 まず、「never型の値は存在しない」というのがどういうことか理解しましょう。これは、どんな値もnever型には代入できない（never型の値ではない）ということです。このように、never型の変数には、何を代入しようとしても全てエラーになります。
TypeScript でバックもやるって実際どう？ 実運用で困ったこと3選
ROSCA株式会社さん主催のイベント フロントからバックエンドまで、TypeScriptでシームレスな開発エクスペリエンスを で発表させていただいた際に使用したスライドです。
さようならLodash、TypeScript時代の新星ユーティリティ【Radash】 - コハム
Lodash is dead. Long live Radash. 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 Lodashの何が問題なのか？ 関数の詳細分析 Lodashの_.get関数 Lodashの_.filter関数 Lodashの_.map関数 コード品質 でも、そのコミュニティは... では、どうするか？ try関数 parallel関数 retry関数 counting関数 range関数 list関数 Lodashの何が問題なのか？ JavaScriptの動的な能力が欠点ではなく特徴として捉えられていた時代に、Lodashは異なる入力に対して異なる振る舞いをする関数を提供することで、できる限り役立つように作られました。現在では、私たちはより良い方法を知っています。純粋関数、決定論的な振る舞い、関数合成といった関数型のコ
TypeScriptのextendsってなんなん？
今日ではインターネットなしでは生活できないのと同様に、TypeScriptなしではフロントエンドの開発ができない世の中になっています。 そんなTypeScriptに囲まれた生活をしていると度々extendsを見ることになるでしょう。 今回はこのextendsの理解を深めるために記事を書きました。 Genericsのおさらい まずはじめに本記事ではGenericsを用いたコードが出てきますので、おさらいします。 以下は最もシンプルなGenericsを用いた記法です。 type A<T> = T const moji:A<string> = 'moji'; const suji:A<number> = 123;
TypeScript と ESLint における検査エラーを無視したい時のおまじないまとめ
ESLint にも TypeScript にも「ルールを設定してみたけど、いざ運用するとなるとエラー出ちゃった。これ動作確認して欲しいのにデプロイが CI に弾かれちゃう。うーん、ごまかしちゃえ(てへぺろ)」って時などに使えるハッチが存在しています。ファイル単位・ブロック単位・行単位でそれぞれいろいろな方法があるのでそれらをまとめます。 TypeScript word 単位で無視する ご存知の通り as や any が使えます。 行単位で無視する @ts-ignore で抑制できます。 TS2.6 からの機能でSuppress errors in .ts files using ’// @ts-ignore’ commentsによると、 TypeScript 2.6 support suppressing errors in .js files using // @ts-ignore co
typeとinterfaceって結局どう使い分ければ良いの？
TypeScriptではtype alias syntax（型エイリアス構文）とinterface declaration（インターフェース宣言）を使って型を定義できます。 おおよそ両者同じことができるので、どちらを使うか迷います。 両者の使い分けに関する記事は沢山あります。 これらの記事を読んで基本的にはtypeを使えば良いと思っていました。 ですが最近以下のことがあり、typeとinterfaceの使い分けがわからなくなってしまいました。 typeよりもinterfaceの方がコンパイルのパフォーマンスが良いという話を耳にした。 interfaceしか使えない特定の機能を知った。 そこでtypeとinterfaceの違いを学んで、どう使い分ければよいかを整理しました。 type, interfaceそれぞれのメリット typeのメリット interfaceで表現できないことが表現できる
2024年9月 俺の eslint.config.js
はじめに 「Flat Config が何かはわかったからサンプルをくれ！」という方向けの記事です。 筆者が普段使用している eslint.config.js をご紹介します。 Flat Config については良記事がたくさんあるため ↓ などを参照してください。 今回ご紹介する設定は、React × TypeScript を使用し、フォーマットは Prettier に任せる前提になっています。 しかし、Vue やサーバー Node.js でも使いまわせる箇所は多いと思います。 eslint.config.js まずは結論から。 // @ts-check import { fixupConfigRules } from '@eslint/compat'; import { FlatCompat } from '@eslint/eslintrc'; import eslint from '@
【create-react-app】webpackのaliasをTypeScriptでも有効にする方法は
はじめに create-react-app（以下、cra）めちゃくちゃ便利ですよね。 また、TypeScriptでもサクッとテンプレートを作成できるのがグッドです。 で、craでwebpackの設定いじりたいなーって時に私は「craco」というライブラリを使います。 今回はこのcracoを使って、上記のaliasの設定をしていきます。（厳密にはwebpackに定義するわけではないのですが...） 普通にaliasを設定する まず、cracoをVanillaなJSテンプレートで使う場合の、webpackのalias設定は下記のような感じです。 const path = require("path"); module.exports = { mode: process.env.REACT_APP_ENVIROMENT, output: { path: __dirname }, // webpa
export {}; が使われるTypeScript特有の事情
TypeScriptのコードでは、export {}; という記述を見かけることがあります。これはECMAScriptの構文ではあるものの、これが使われる背景にはTypeScript特有の事情があります。この記事では、export {}; がなぜ使われるのか、どのような効果があるのかを解説します。 export {}; とは この構文は、exportというキーワードから分かるように、モジュールに関連する構文です。 一般に、export { ... };という構文は、既存の変数をモジュールからエクスポートするために使われます。例えば、次のようなコードが考えられます。 const foo = 42; const bar = "hello"; const banana = "banana"; export { foo, bar as hello, banana as "🍌", }; 変数をエク
TypeScript Object を Object.keys() を使ったループの型エラーにハマる - かもメモ
TypeScript で Object.keys(obj) でキーの配列を作ってループさせてループ内でキーでオブジェクトのデータにアクセスしようとして型エラーになってしまったのメモ e.g. 例としてデータ構造が良くないけど、ID をキーにしたオブジェクトみたいなイメージで const idols = { hosimiya: {name: '星宮いちご', type: 'cute', brand: 'Angely Sugar'}, kirija: {name: '霧矢あおい', type: 'cool', brand: 'FUTURING GIRL'}, shibuki: {name: '紫吹蘭', type: 'sexy', brand: 'SPICY AGEHA'}, }; Object.keys(idols).map((key) => { const data = idols[key
TypeScriptの型入門 - Qiita
TypeScriptは型がついたJavaScriptです。プログラミングにおいて型があることの恩恵は大きく、近頃AltJSの代表格として人気を集めています。TypeScriptはもともと型のないJavaScriptで書かれるコードに型を付けることを使命としていることもあり、たまに変な型が追加されます。例えばTypeScript2.8で追加されたconditional typesはずいぶん注目を集めました。これによってTypeScriptの型システムの表現力が広がりましたが、一方でTypeScriptを書いている人の中には、よく分からない型が増えてついて行けない、一部の人たちが長くてよく分からない型定義を書いて喜んでいるだけと思っている方もいるのではないでしょうか。実際、健全にJavaScriptを書いていれば、自分でそのような変な型を書くことはあまり多くありません。 そこで、この記事ではT
TypeScript 非同期処理 Promise や Fetch の使い方
TypeScript 非同期処理 Promise と Fetch Promise や async 関数（async/await）で型注釈する方法や TypeScript を使用して fetch を利用する方法などについての解説のような覚書です。 JavaScript の Promise（概要） JavaScript の Promise は非同期処理を扱うための Promise オブジェクトとその仕組みのことです。Promise を使うことで非同期処理をその仕様に従って統一された書き方で扱うことができます。 以下は JavaScript の Promise の概要です。 コンストラクタ Promise は new と コンストラクタ関数 Promise() で promise オブジェクトのインスタンスを作成して利用することができます。 コンストラクタ Promise() は引数に reso
Promise<T> | TypeScript入門『サバイバルTypeScript』
PromiseはES2015から追加された機能で、非同期処理を見通しよく書くことができます。ES2017で導入されたasync/awaitを使うことでPromiseで書いたコードをさらに見通しよく書くことができます。 Promiseがなかった時代のこと次の３つのAPIがあるとしてこれらで得た結果を表示する処理を考えてみます。 API1: リクエストを送り、結果を受け取るAPI2: API1の結果を使ってリクエストを送り、結果を受け取るAPI3: API2の結果を使ってリクエストを送り、結果を受け取るAPI1, API2, API3の通信をする関数request1(), request2(), request3()は次のようになります。各関数のsetTimeout()はAPI通信をしている部分の遅延を意味している程度に考えてください。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
useDebounceCallback
TypeScript、上達の瞬間
TypeScript入門 2024
tsconfig.jsonの設定を見直そう！�フロントエンド向け 2024夏
TypeScriptの変数の末尾の"!"(エクスクラメーション/感嘆符)の意味 - Qiita
TypeScriptを導入する意味と限界、型レベルプログラミングの紹介 - Qiita
