TSKaigiは配信画面もTypeScript製だったという話
はじめに 先日開催されたTSKaigi 2024にて配信チームとして、オンライン配信のスタッフをしていました。 当日の各トラックの配信運営や総合的な環境構築などは他のメンバーを中心に行っていただきましたが、自分は配信画面のデザインや配信に乗せる情報管理用のシステムをコツコツ作っていたのでその紹介をさせていただきます。 情報管理用のシステムといってもローカルマシン上で動く簡単なもので、NodeCGと呼ばれるNode.js向けの配信画面管理用のフレームワークを利用しました。 NodeCGとは NodeCGは先ほど紹介したようにNode.jsとブラウザ技術で動的な配信画面を作成したり、管理画面を提供してくれるフレームワークです。 配信レイアウトとダッシュボードはブラウザ上で動作し、ダッシュボードで編集した情報を配信レイアウト側にWebSocketでリアルタイムに反映したり、WebSocketサー
両面どころかインフラもTSでできるよ ～ 全方位TypeScriptによるプロダクト開発 ～
IntelliJ IDEA を知らなかった 自分に教えたい小ネタ集 / IntelliJ IDEA Hints for My Past Self
TypeScriptで知ってコードの安全性が上がったtips集
TypeScriptを用いた開発では、その型システムを活かしてランタイムエラーを事前に防いだり、実装漏れを防いだりとコードの安全性の向上を図ることができます。 本記事では、個人的に知ったおかげでコードの安全性が増した！と感じたtipsをまとめました。 ※ なお、linterを用いたコードの安全性向上も非常に有効ですが、この記事では主にTypeScriptの型システムに焦点を当てています。 tips集 配列周りのtips まずは配列を扱う際に役立つ、tipsを紹介します。 配列からUnion型を作成する ↓のように(typeof array)[number]で配列の全要素を持つUnion型を作成できます。 const fruits = ["apple", "banana", "lemon"] as const; type Fruit = (typeof fruits)[number]; //
ゼロランタイムで fetch に型をつけたい
まだライブラリ化してないのと、フルパス対応してないけど、いじれば使えると思う。 これは何 こういう感じに fetch に型がついて動く import { type TypedFetch, JSON$StringifyT, JSON$ParseT } from "./typed-fetch"; const stringifyT = JSON.stringify as JSON$stringifyT; // こんな感じの記法で型情報を与える const fetch = window.fetch as TypedFetch<{ "/api/:xxx": { method: "GET"; bodyType: { text: string; number: number; boolean: boolean }; headersType: { "Content-Type": "application/
`*.d.ts` ファイルをコミットする前に知ってほしい4つのこと
export type Bookmark = { id: number; url: string; comment: string; }; このファイルには型しか書いてありませんね。ということは、「型定義ファイル」として bookmark.d.ts という名前にするべきでしょうか。実はそうではなく、この場合は bookmark.ts とするべきです。 「型定義ファイル」とは、「どこか別の場所にある実装に型をつけるためのファイル」です。たとえば、以下のファイルは「どこか別の場所にある実装」に型をつけているから、 *.d.ts にするのは自然です。 いっぽう、 type Bookmark は別のどこかにある *.js の型を与えているわけではないので、 *.ts でよいです。 このように本来 *.ts であるべきものを *.d.ts にしてしまうことには問題があります。代表的な問題として型エラ
TypeScript をより安全に使うために その 2: オブジェクトの具体的な形にアクセスするのを避ける - Object.create(null)
前回はこちら. susisu.hatenablog.com 引き続き環境は以下を前提とします: TypeScript 4.4 (この記事を書いている 2021 年 11 月時点の最新版) strict: true 原則: オブジェクトの具体的な形にアクセスするのを避ける 具体例 in 演算子による型の絞り込み Object.keys の誤った使用 Object.values, Object.entries の使用 リテラルの先頭以外での object sperad 次回 原則: オブジェクトの具体的な形にアクセスするのを避ける ここで「オブジェクトの具体的な形にアクセスする」とは, 静的な型によらずに, 実行時にオブジェクトがどのようなプロパティを持っているかといった情報を取得することを指しています. ある種のリフレクションと呼んでも良いかもしれません. こういった操作には, JavaSc
Object.entries()で厳格に型定義された結果を受け取りたい【typescript】 - Ribbit's works
typescript の標準設定では、Object.entries()の型は以下のように定義されています。 interface ObjectConstructor { entries<T>(o: { [s: string]: T } | ArrayLike<T>): [string, T][]; entries(o: {}): [string, any][]; } つまり、型をRecord<string, number | string>として定義した値を引数に渡した場合、返り値の型は[string, number | string][]になります。 const object: Record<string, number | string> = { one: 100, two: 'test', }; const entries = Object.entries(object); // 型は
TypeScript で string 型の値に自動補完を効かせる: Days on the Moon
結論 type X = 'foo' | 'bar' | (string & {}); のように、文字列リテラル型の共用体型に | (string & {}) を付け足した型 X を定義します。X 型は任意の文字列を受け付けますが、IDE (Visual Studio Code など) で X 型の値を入力するときには 'foo' と 'bar' が自動補完の候補として提示されます。 解説 単純に type X = 'foo' | 'bar' | string; と書いてしまうと、共用体型の各要素がまとめられて、X は単なる string 型になってしまいます。{} 型は null と undefined を除く任意の値を受け付けるので、string & {} 型は実質的に string 型と同一なのですが、TypeScript 4.4 の時点では同一扱いされず、共用体型の各要素がまとめられ
Next.js + TypeScriptにStorybookを導入して遭遇したエラーを全て共有します - パンダのプログラミングブログ
Next.jsにStorybookを導入してTypeScriptで書けるようにする この記事では、Next.jsにStorybookを導入してTypeScriptでReactコンポーネントを書けるようにする手順を紹介します。またその際に、私が踏み抜いたバグと解消法を全て共有します。 Next.jsとは、Vercelが作成しているReactのフレームワークです。 SSRにも対応しており、Reactで開発するならNext.jsかFacebook製のCreate React Appを使うのがスタンダードになっています。また、面倒な設定を書かなくてもすぐに使えるZero Configを標榜しており、実際にWebpackやTypeScriptと一緒にReactを書く際にも特別な準備は不要です。 Storybookとは、UIコンポーネントのカタログを作るツールです。 Storybookの実行環境はメイ
Next.jsでGoogle Analyticsを使えるようにする - パンダのプログラミングブログ
**Next.jsとはVercelが作成しているReactのフレームワークです。**面倒な設定を書かなくてもすぐに使えるZero Configを標榜しており、実際にwebpackやTypeScriptと一緒にReactを書く際にも特別な準備は不要です。SSRにも対応しており、Reactで開発するならNext.jsかFacebook製のCreate React Appを使うのがスタンダードになってます。 私は実務でNext.jsを使っており、このフレームワークはとても便利だと思っています。私はNext.jsの大ファンなので、Reactでの開発時にNext.jsを使う現場が増えるといいなと思って記事を書いています。 関連記事: Next.js + esa.io + VercelでJAMStackな爆速ブログを構築する **この記事では、Next.jsでReactアプリケーションを作成する時に、
TypeScriptのError Handling - mrsekut-p
TypeScript/JavaScriptの言語思想的にはtry/catchを使ってerror handlingをするのが普通
js.CheckiO - TypeScript coding challenges and exercises with solutions for beginners and advanced
After solving a coding puzzle you can check the solutions of other users and code-reviews for those solutions. You can learn much more from that.
【検証】React.FC と React.VFC はべつに使わなくていい説
こんにちは、クレイの正岡です。 コロナ禍が始まってから小学生時代以来のゲーム生活を送っています。ゲームボーイと呼んでください。 さて、今回は React × Typescript でコードを書いている人／書こうとしている人に向けて、Reactコンポーネントの型定義について頭の片隅に置いておいて欲しい情報を共有したいと思います。 寝ながら使えてしまうReactコンポーネントの3つの型 () => JSX.Element 型 interface Props { text: string } const Hoge = ({ text }: Props) => { return ( <p>{ text }</p> ) } 上記のように返り値の型を特に指定していない場合、 このコンポーネントは JSX.Element型 を返す関数（ () => JSX.Element ）として返ります。 React
TypeScript の「型安全」を担保するために知っておきたかったこと - OITA: Oika's Information Technological Activities
タイムリープTypeScript 〜TypeScript始めたてのあの頃に知っておきたかったこと〜 アドベントカレンダー1日目の記事になります。 よろしくお願いします。 3行で TypeScript で安全に型を扱う勘所は以下2点だと思いました。 最初から最後まで型が壊れていないことを保証する 型が壊れる可能性があるものは壊れている前提で扱う 個人的背景と前提 もともと C# での開発をメインとしていました。 Web開発は、JavaScript歴 ≒ TypeScript歴くらいの型付依存者です。 そのため、型付けのゆるい言語に対する耐性がなく、本内容もそういうポジションからの見解になります。 本記事内のサンプルコードは TypeScript V4.4 で挙動を確認しています。 最近のバージョンで変更のあった点は脚注を入れています。 最初から最後まで型を壊さない C# という静的型付け言語
TypeScript における変性（variance）について - 30歳からのプログラミング
プログラミングの型システムに関する記事を読んでいると、共変や反変といった用語が出てくることがある。 TypeScript や Flow についての記事でも、見かけることがある。 それらは TypeScript を使う上で必須の知識ではないが、把握しておくに越したことはない。 この記事では、TypeScript を題材にして、変性について説明していく。 TypeScript に関する議論を理解できるようになることがこの記事の目的であり、より詳細な、学術的、数学的な内容には踏み込まない。 この記事の内容は、TypeScript のv3.9.5で動作確認している。 変性 変性（variance）とは、任意の型Tに対してどのような性質を持つのか示したものであり、以下の 4 種類がある。 不変性（invariance） Tそのものが必要 共変性（covariance） Tそのものか、そのサブタイプが
TypeScriptのプロジェクトにESLintとPrettierを導入する方法（+VSCodeでの設定） - Qiita
ネット上に様々な方法で導入する方法が載っており、どれが良いのか分からなかったので自分なりにまとめてみました。 この記事は2020年8月時点での情報です。（2021/06/21 最新の情報を一部追記しました。） 内容 各種パッケージのインストール TypeScriptとESLintのインストール Prettierのインストール 動作確認 VSCodeでの自動フォーマット設定 （余談）eslint-plugin-prettierというプラグインの利用に関して 環境 typescript: 4.0.2 eslint: 7.7.0 @typescript-eslint/eslint-plugin: 3.10.1 @typescript-eslint/parser: 3.10.1 prettier: 2.1.1 eslint-config-prettier: 6.11.0 各種パッケージのインストー
React TypeScript Cheatsheets | React TypeScript Cheatsheets
React TypeScript CheatsheetsCheatsheets for experienced React developers getting started with TypeScript
GatsbyをTypeScript化してESLintとPrettierを導入する
GatsbyJS と TypeScript でブログを作成して公開する(3) ~ Gatsby を TypeScript 化して ESLint と Prettier を導入する ~ 今回は、これまでにgatsby-starter-blogを用いて生成されたソースを TypeScript で書けるように変更していきます。 環境構築についてはこちらを、gatsby-starter-blog についてはこちらをご覧いただければと思います。 変更履歴 2020/12/12: .eslintrc の設定内容を変更 2021/09/19: スタイルの調整 参考にさせていただいた記事 こちらの ZENN の投稿がとても参考になりました。 検証環境 node 14.15.1 yarn 1.22.3 gatsby cli 2.14.0 TypeScript 4.0.3 新しいプロジェクトの作成 まず gat
GatsbyJS + TypeScript でゼロから作るサーバーレスブログ - blog.livewing.net
当ブログでは GatsbyJS の Starter を用いてデザイン等を作っていましたが、 React と GraphQL を勉強したので、ブログシステムを自分好みにスクラッチから書き直しました。その時の作業をログとして残しておきます。 GatsbyJS とは GatsbyJS は静的サイトジェネレータ (SSG: Static Site Generator) の一種です。 React を使用してサイトを組み立てます。そのため、既存の React ライブラリをそのまま活用できます。 GatsbyJS の最大の特徴は、CMS や Markdown ファイルなどさまざまなデータソースを GraphQL でクエリすることです。 GraphQL で標準化されているので、データソース毎にデータ取得方法がバラバラにならず、簡単にデータを抽出することができます。 また、プラグインシステムを搭載しています
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TypeScriptを振り回せ！
