TypeScript 関数型スタイルでバックエンド開発のリアルTSKaigi 2024 のスライドです
フロントエンドのパラダイムを参考にバックエンド開発を再考する / TypeScript による GraphQL バックエンド開発
2022年10月1日に開催された #postdev での発表です
TypeScriptのもとでuseRefを使うときに知るべきRefObjectとMutableRefObjectについて
TypeScript環境でのReactの useRef は、初期値と型引数の与え方によって返り値の型が RefObject と MutableRefObject のどちらかになります。どういう使い方のときにどう書いてどちらを得るべきかを、 @types/react の更新まわりの議論を追った結果を示します。 この記事は2021年5月現在、React 17.0.2が最新バージョンの時点で記述します。 参考にした情報 https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31065#issuecomment-446425911 RefObject と MutableRefObject が別である理由について https://github.com/DefinitelyTyped/DefinitelyTyped/pull/38228#i
TypeScriptのError Handling - mrsekut-p
TypeScript/JavaScriptの言語思想的にはtry/catchを使ってerror handlingをするのが普通
イベントループと TypeScript の型から理解する非同期処理
この本は、ブルーベリー本の 8 章からインスパイアされて、 TS の型が示す情報から Promise というものを理解してみる、というアプローチで書いたJSの非同期処理の解説です。 これらの資料と合わせて読むことを推奨します。 JSのイベントループのイメージを掴む JSでは中々意識することが少ないですが、正しく理解するには OS レベルのスレッドの視点で考え始める必要があります。 ブラウザや Node.js では一つのスクリプト実行単位を1つのスレッドに割り当てます。それをメインスレッドと呼んだり、ブラウザだったら UI スレッドと呼んだりします。 例えばブラウザでは、これは秒間60回、つまり 16.6ms ごとにループを呼び出します。(node だったらこれがもっと短いです) 仮に setTimeout の実装がなかったとして、それ相当の擬似コードを書くのを試みます。 let handl
「読みやすい」とはどういうことか？ コード品質の一指標
「良いコード」とは何でしょうか？ コードの品質には色々な指標がありますが、「読みやすいコードは良いコードである」というのは一つの指標として多くの方が認めるところではないでしょうか。しかし、では読みやすいコードとはどのようなコードかというのもなかなか難しい問題です。 この記事では、品質の良いコードとしての「読みやすいコード」に対する筆者の考え方を共有します。もちろんこれが唯一解だと主張するつもりはありませんが、参考になった・共感したという方はぜひこの記事を周りに教えてあげてください。 なお、サンプルコードはTypeScriptを使って示しますが、必要に応じて説明するのでTypeScriptの経験が無い方でも読むことができます。 短いまとめ 読みやすいコードとは、書き手の意図が伝わりやすいコードです。 書き手の意図を読み手に伝えるには、読み手に意図を推論してもらうためのヒントを残します。 複数
frourioを使って1ヶ月で管理画面をリリースした話 - Leverages Tech Blog
はじめに こんにちは、レバテック開発部の河村です。 私はレバテック各種メディアのリプレイスを担当しており、バックエンドを中心にフルスタック開発を行っています。 今回は管理画面のリリースで採用した、フルスタックフレームワークであるfrourioについて、frourioを採用した理由や使ってみて良かったこと、困ったことを紹介します。 この記事を通して、frourioのメリット、デメリットだけでなく、レバテック開発部ではどのような背景のもと、技術・アーキテクチャの選定を行っているのか、どれくらいのスピード感で開発を行っているのかをお伝えできればと思います。 なお、この記事ではfrourioにおける環境構築や使い方等の説明は割愛させていただきます。 開発背景・経緯 今回、開発する対象となった管理画面は、レバテックの各メディアで運用する記事やセミナー情報、エントリー情報を管理するものになります。 す
Aspidaに感動しちゃった件について - Qiita
/* eslint-disable */ export type ApiResponse = { code: number type: string message: string } export type Category = { id: number name: string } export type Pet = { id?: number category?: Category name: string photoUrls: string[] tags?: Tag[] status?: 'available' | 'pending' | 'sold' } export type Tag = { id: number name: string } export type Order = { id: number petId: number quantity: number ship
新言語『TypoScript』を作った - Qiita
この記事は、クソアプリAdvent Calendar2021の20日目(ホノルル時間)の記事であると同時に、GMOペパボエンジニア Advent Calendar 2021の21日目(日本時間)の記事でもあります。 みなさん、TypeScript使ってますか？TypeScriptはJavaScriptの世界に秩序をもたらす素晴らしい言語ですね。 しかし世界には光の秩序だけでなく闇の混沌も必要です。 という訳で、JavaScriptに闇の混沌をもたらす新言語を作ってみました。 その名も『TypoScript』です。 TypoScript is 何 TypoScriptとは何か。まずはこちらのコードをご覧ください。 function fizz_buzz(count) { for (var i = 1; i <= caunt; i++) { if (i % 3 === 0 && i % 5 ==
OpenAPI Generator と TypeScript で型安全にフロントエンド開発をしている話 - SmartHR Tech Blog
こんにちは、SmartHR でフロントエンド開発を担当している @Tokky0425 です。 この記事では、私のプロダクトでの OpenAPI Generator を使ったフロントエンド開発の取り組みを紹介していきます。 目次 OpenAPI とは 「ラクラク分析レポート」の DX 上の課題 OpenAPI Generator とは 実際に generate してみる 生成ファイルを使ってみる 型情報を出力してみる 組み込み・運用の工夫 chokidar で監視する lint-staged に組み込む メリット・デメリット メリット デメリット まとめ OpenAPI とは OpenAPI とは、「REST API のドキュメントの記述形式を定めた仕様」のことを指しています。 簡単な例ですが、下記のような YAML ファイルがあるとします。 schema.yml paths: "/some
例外処理 — 仕事ですぐに使えるTypeScript ドキュメント
TypeScriptの世界を知る 前書き Node.jsエコシステムを体験しよう TypeScriptの書き方 変数 プリミティブ型 複合型 基本的な構文 基本的な型付け 関数 その他の組み込み型・関数 クラス 非同期処理 例外処理 TypeScriptの例外処理構文 Error クラス 標準の例外クラス 例外処理とコードの読みやすさ try 節はなるべく狭くする Error 以外を throw しない リカバリー処理の分岐のためにユーザー定義の例外クラスを作る 例外処理を使わないエラー処理 非同期と例外処理 例外とエラーの違い 例外処理のハンドリングの漏れ 例外処理機構以外で例外を扱う まとめ モジュール console.logによるログ出力 中級のテクニック ジェネリクス 関数型指向のプログラミング クラス上級編 リアクティブ 高度なテクニック 環境ごとのTips（共通環境・ブラウザ以
TypeScript による Isomorphic な API Client 開発 - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは、フロントエンドエキスパートチームの @koba04 です。 本記事では、kintone の REST API を使うためのクライアントである @kintone/rest-api-client (以下 rest-api-client) の構成や工夫した点について紹介します。 本記事は rest-api-client の 1.6.0 のバージョンに基づいています。 @kintone/rest-api-client とは rest-api-client とは、kintone が提供する REST API を利用するためのクライアントライブラリです。 GitHub 上は kintone/js-sdk の Monorepo の 1 パッケージとして開発されています。 kintone/js-sdk での Monorepo 開発については下記の記事を参照してください。 https://blo
TypeScriptで既存の関数の引数と返り値の型情報をコピーする方法 - タオルケット体操
TypeScriptにはType infer in ConditionalTypeという便利機能があり、それを利用すると既存の型定義から柔軟に特定の方を取り出すことができます。 そして利用頻度が高そうなものについては組み込みの型定義がいくつか存在します。 関数の型定義から引数を取り出すのは Parameters<T> で、この型引数に関数の定義を与えることでその関数の引数がTupleとして返ってきます。 ちなみに返り値は ReturnType<T> で取り出すことが出来ます。 function testFunc(a: string, b: number, c: boolean): {a: string, b: number, c: boolean} { return {a, b, c}; } type TestFuncArgs = Parameters<typeof testFunc>;
TypeScript Compiler API で型を自動生成する仕組みを TDD で実装する
Compiler API で yaml から型を自動生成する この記事は TypeScript Compiler API を実際に使って TypeScript の型を自動生成する方法を紹介しています。 記事内では Google Analytics のイベントの型の自動生成にトライしています。 題材として GA を選んだのは、以前 Next.js に Google Analytics（GA） を導入する方法を紹介した記事でGA のイベントで使う型を yaml から自動生成するのはどうか と書いていたからです。 正直なところ、GA のイベントに馴染みのない方もいらっしゃると思うので、最初はもっと一般的な例にしようかなとも考えました。 しかし、一般的なことを例に挙げると「ふーん、便利だね」という感想で終わってしまい、業務で自分が使うようなイメージが湧かないかもしれないと考えました。 そこで、あえ
TypeScript で React.forwardRef を簡潔に書く方法
はじめに Dwango でニコニコ生放送のフロント開発を担当している misuken です。 TypeScript で React.forwardRef を簡潔に書く方法を紹介します。 React では Hooks が登場して以来、関数コンポーネントが主流となり、 forwardRef を使用する機会も増えているのではないでしょうか。 そんな身近な forwardRef ですが、以下のような問題に悩まされている方も少なくないはずです。 型の渡し方がよくわからない 型の渡し方が面倒くさい たまに型が通らないときがある そんなことを感じながら使っていたら、この記事を参考にしてみてください。 時間の無い方ヘ react-frec を使うと、 forwardRef 周りをシンプルに書けますよというお話です。 forwardRef の書き方に満足していますか？ forwardRef の型パラメータに
アンサー: named exportは有害なのか - uhyo/blog
こんにちは。ここ数日は、以下の記事が話題になりました。 named exportは有害だと考えられます「named exportは有害」という主張はこれまで常識と思われていたこととは異なるため、界隈のエンジニアからは否定的・懐疑的な意見が見られます。実際、筆者もnamed exportが有害であるとは1ミリグラムも思っていません。 しかし、自分と異なる意見は当然に下等・幼稚なものであるというのは筆者が最も嫌う考え方ですから、このような異なる意見を分析・理解する必要があると思い、アンサー記事という形でまとめました。具体的には、異なる意見に達する理由としては前提が異なることと論理が異なることが主に挙げられます。前提が異なることが分かれば、自分と異なる意見に至った理由を理解でき、場合によっては取り入れることもできます。論理が違うのであれば、それは瑕疵であり指摘しなければいけません。 なお、そもそ
「がんばらないTypeScript」のための現実的な設定を考える ─ 4レベルの厳しさを使い分けてTypeScript疲れを克服しよう！｜ハイクラス転職・求人情報サイト AMBI（アンビ）
ハイクラス求人TOPIT記事一覧「がんばらないTypeScript」のための現実的な設定を考える ─ 4レベルの厳しさを使い分けてTypeScript疲れを克服しよう！ 「がんばらないTypeScript」のための現実的な設定を考える ─ 4レベルの厳しさを使い分けてTypeScript疲れを克服しよう！ エンジニアHubでは2019年に「がんばらないTypeScript」を紹介しました。JavaScriptに静的型付けなどを提供するTypeScriptは、今では実プロジェクトに採用されるプログラミング言語になっています。そこで現実的なTypeScriptの設定を、藤吾郎（gfx）さんに解説してもらいました。 2021年の現在、TypeScriptの価値はますます広く認められるところとなり、多くのJavaScriptプロジェクトがTypeScriptで開発されるようになってきました。またT
TypeScriptでみかける"is"というキーワードについて - ひと夏の技術
TypeScriptでググっても出てこなくてよくわからないやつ。 他人が書いたTypeScriptのコード見てるとたまに const isString = (arg: any): arg is string => typeof arg === "string"; のように「引数 is 型」と書かれたものを見かける。 このコードは引数になんか受け取って、それがstringなのかどうかを判別するくん。 返り値の型に『arg is string』と書かれている。 この記事はこれについてのはなし。 "is" is なに… この"is"というキーワード、ググラビリティがめちゃくちゃ低くてどうググったらいいかわからないし、ググってもあんまりそれっぽいのがヒットしなくて困る。 What is this "is" keyword? という気持ちになる。isがゲシュタルト崩壊。 "is"は型の絞り込みができ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TypeScript & Rails プロジェクトに OpenAPI (swagger) の導入を検討する。
type-challenges/README.ja.md at main · type-challenges/type-challenges
