TSKaigi 2024 スライドまとめ【非公式】
TSKaigi 2024 のトークと、登壇者がスライドを公開していればその URL を記載しています。 トラックごとのトーク、および登壇者情報は公式サイトに詳しく掲載されているので、そちらをご確認ください。
TSKaigi 2024 のトークと、登壇者がスライドを公開していればその URL を記載しています。 トラックごとのトーク、および登壇者情報は公式サイトに詳しく掲載されているので、そちらをご確認ください。
本記事で記述した Node.js ESM 対応は2022 年 5 月に TypeScript 4.7 で正式版としてリリースされました。 本記事の内容との差分はmodule:node12がmodule:node16に変更されたことぐらいです。node16では top-level await が使え、現時点ではnodenextとの差分はありません。 他に関連する機能としてresolution-modeや--moduleDetectionが追加されましたが、一般利用者が意識することはないでしょう。 先日リリースされた TypeScript 4.5 Beta で、待望の Node.js ESM 対応がアナウンスされました。 その後、ユーザーからのフィードバックを経て、TypeScript チームは TS 4.5（11/16 リリース予定）では ESM 対応を stable リリースせず、Nigh
useState, useContext を使った状態共有 graphQL BFF + Codegen + Apollo Hooks で型安全なデータ取得 Redux の型定義、Loading 状態の運用、エラー処理、等々煩雑なコードがなくなる 1日一つ強くなる中西とは https://ja.reactjs.org/ React 日本語公式ドキュメントのトップページの翻訳を担当 Apollo Japan User Group 主宰 / 公式ドキュメントチュートリアルを翻訳しました Hasura Japan User Group 主宰 / チュートリアル公開しています JavaScript が中心となった生産性の高い Web App 開発チームの運用、及びその普及活動が今のテーマ => https://apollographql-jp.com/makeMoneyTS/ 毎月 JavaScri
Node.js Dual Packages (CommonJS/ES Modules) に対応した npm パッケージの開発 - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは。フロントエンドエキスパートの平野（@shisama_）です。 フロントエンドエキスパートチームでは業務時間の 30 % の時間で技術探究を行っています。 今回は探究した技術の中から Node.js の ES Modules（以下 ESM）についてと Dual Package (CommonJS/ES Modules) に対応した npm パッケージの開発について紹介します。 ES Modules の特徴 ESM はブラウザ互換 ESM は Strict モード ESM は非同期 ESM は静的解析可能 Node.js の ESM 対応について Dual Package（CJS/ESM）に対応した npm パッケージの開発 Conditional Exports によるファイルの指定 .mjs と .cjs require など CJS 特有の機能を使う ESMから CJS ファ
私が働いているAniqueという会社では、1年前に全てのソフトウェアでTypescriptを採用することにしました。私たちが開発している進撃の巨人のNFTサービス “Attack on Titan: Legacy” でも採用しています。 TypescriptではNestJSという素晴らしいAPIフレームワークを利用することができ、生産性高く開発を続けることができます。また、私たちはフロントエンドでNext.jsを利用しています。言語レベルでのコンテキストスイッチを抑えることで、一人のエンジニアがフロントエンドとバックエンドのどちらもの機能を開発する環境が作れました。 しかし、Nodeならではの作法や設計について、Web上にはたくさんの情報があるものの、あまりにも情報が多すぎて、まとまったプラクティスになかなか出会うことができませんでした。そのため、最初はチーム内での共通認識を作るのに苦労し
【第5回】「型」はウェブシステム開発に「エンドゲーム」をもたらすか | GeeklyMedia(ギークリーメディア) | Geekly（ギークリー） IT・Web・ゲーム業界専門の人材紹介会社
伊藤直也さんが「今逢いたい」ソフトウェアエンジニアに声をかけて対談を重ねてきたシリーズの最終回は、これまでの対談の文章化を手がけたラムダノート株式会社の鹿野桂一郎さんとの異色対談です。コンピュータ技術書や記事の編集者であると同時に仕事や趣味でHaskellのプログラムも書く鹿野さんの視点を通し、現代のウェブシステム開発に伊藤さんが何を見ているのか、特に「型」と「エンジニアの学び」というこれまでの対談に通底するテーマについて掘り下げます。 ・伊藤 直也さん / 株式会社 一休 執行役員 CTO 新卒入社したニフティ株式会社でブログサービス「ココログ」を立ち上げ、CTOを務めた株式会社はてなでは「はてなブックマーク」などの開発を主導。グリー株式会社では統括部長としてSNSを担当した。2016年4月、一休に入社し執行役員CTOに就任。 ・鹿野 桂一郎さん / ラムダノート株式会社 代表取締役社長
gRPC-Web + React + Node.js + TypeScriptでシンプルなチャットサービスを作る - Qiita
概要 かねてよりgRPCおよびgRPC-Webに興味があり、これを用いてシンプルなリアルタイムチャットサービスを制作し、公開した。 本稿では、その開発工程について解説する。 ゴール gRPC-Webを用いて「わいわいチャット」を作る。 https://waiwai-chat-2019.aanrii.com/ ※2020年9月現在、公開停止しました。 内容はシンプルなチャットアプリケーションだ。サイトを開くとまず過去ログが表示され、ほかの入室者の投稿が随時流れてくる。任意の名前で入室すると投稿欄が出現し、発言ができる。発言した内容はサイトにアクセスしている全員に、即座に共有される。過去ログは無限スクロールで遡ることができる。 フロントエンドはReactを用いたSPAとし、Netlifyを使って静的サイト生成・配信する。また、バックエンドはGKE上で動くNode.jsアプリケーションとし、かつ
2022年5月1日 JavaScript, React Viteは2020年に発表されたフロントエンドのビルドツールです。最初「ヴァイト」と読んでたんですが、「ヴィート」と読むみたいですね。フランス語で「速い」という意味だそうです。絶賛Reactのお勉強中なので、ViteでReactの環境を作る流れを備忘録的にまとめておきます！ ↑私が10年以上利用している会計ソフト！ この記事は動画でも解説しています。動画派の方はぜひご覧ください！ Viteとは？ Viteを使えばベースのプログラムを予め準備しておいてくれているので、開発をすぐに始められるようになります。スターターキットとか、テンプレートみたいなものですね。他にも複数のファイルをひとつにまとめたり、SassをCSSに変換するなどの作業を爆速でできるようになります。 また、ファイルを保存すると同時に、確認画面も自動的に更新されます。ホット
GitHub - type-challenges/type-challenges: Collection of TypeScript type challenges with online judge
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
SES 企業のソフトウェアエンジニア -> ソシャゲ会社のテックリード兼スクラムマスター -> 日系 SIer の社内アジャイルコミュニティオーナー 発言や記載した内容は個人のものであり、所属団体とは関係ございません
TypeScriptで「選択肢」の定義をEnum的な定数にまとめる――satisfiesとSSoTもあるよ
ソート順の選択プルダウンがある一覧系ページを実装するとき、選択肢たちの管理方法に頭を悩ませることが多いと思います。 商品一覧ページの概要 ソート順プルダウンの選択肢たち 上の画像に示したような場合だと、 《クエリパラメータ》と《選択肢》の間の相互変換 ?sort=price&order=desc <--> 「価格が高い順」 《select の状態に使うための文字列》と《選択肢》の間の相互変換 <option value={id}>{label}</option> クエリパラメータが sort order の2つあり、それらをそのまま流用できないので 最低限でも、これらの変換ロジックを用意しておく必要がありますね。 この記事では、このような「選択肢と、それにまつわる変換ロジック群」を整理する方法を、高凝集・SSoT (Single Source of Truth; 信頼できる唯一の情報源)
先日 Babel のメンテナーとして知られる Nicolò Ribaudo 氏が次のツイートを投稿した。 We finally finished migrating the Babel monorepo from Flow to TypeScript! It has been a very long process started by @z_bodya, and after migrating package-by-package @JLHwung just opened this PR 😄 pic.twitter.com/WKXxV8x2MY — Nicolò Ribaudo 🏳️🌈 • 💙💛 (@NicoloRibaudo) July 23, 2022 そう、JavaScript のトランスコンパイラである Babel のソースコードが Flow から TypeScrip
Microsoftは2019年11月5日（米国時間）、オープンソースのプログラミング言語の最新版「TypeScript 3.7」を公開した。 TypeScriptは、静的型付けができる言語で、JavaScriptのスーパーセット。ECMA規格に従った最新のJavaScriptの機能を、古いWebブラウザやランタイムが扱えるようにコンパイルすることもできる。 TypeScript 3.7は、NuGetを使うか、次のコマンドラインのように、npmを使ってインストールできる。 TypeScript 3.7は「Visual Studio 2019」「Visual Studio 2017」の他、「Visual Studio Code」と「Sublime Text」でも利用できる。TypeScript 3.7の主な特徴は次の通り。 セミコロンフォーマッターオプションを追加 TypeScriptのビルト
GraphQLとクライアントサイドの実装指針.md GraphQLとクライアントサイドの実装指針 GraphQLって何 Facebookが開発した クエリ言語 今はGraphQL Foundationに移管されている https://quramy.github.io/graph-api-note/#/ GraphQLの特徴 スキーマと静的な型 Demand Driven Architecture Composition 1. スキーマと静的な型 スキーマには可能なクエリや操作の全てが記述されている。 表現方法はいくつかあるが、SDL(Schema Definition Language)で表現されることが多い。 type User { id: ID! name: String! age: Int friends: [User] articles: [Article] } type Arti
自分で Svelte + TypeScript を色々と書いてみたが、情報がまとまってなかったので、ここでまとめていく。 なぜ Svelte + TypeScript か Svelte + TypeScript はセマンティクスが単純で型が付く軽量な Vue として気に入っている。ビルドが軽量で他と混ぜやすいのが特に気に入っていて、React や Vue の他のシステムに対しても、末端のコンポーネントとして混ぜやすい。Vue は歴史的経緯でデータバインディングの仕様が混沌としているが、Svelte はESM First で構文解析時の処理に仕様を寄せてるので、とてもシンプル。 webcomponents として配布するモードがあるのも気に入っている。Vue React は単体のビルドサイズが大きすぎて webcomponents の末端にするのは難しい。 やりたいこと <script la
JavaScript の非同期処理は非常に難しく、その難しさの原因は「制御の流れ」が掴みづらいことにあります。 この本では非同期処理を理解するために必要な概念であり、仕組みでもあるイベントループでプロミスチェーンの処理がどのように行われるかをクイズ形式で学ぶことによって、非同期処理の「制御の流れ」を掴めるように訓練します。 知識面については中枢となるイベントループの機構から、実行環境と API、async/await や Promise.all などの一通りの範囲を学習し、最終的には並列化や順序づけて反復処理を行うための制御方法と TypeScript での型注釈までを網羅します。
GitHub - google/aside: 🚀 Apps Script development with formatting, linting, testing and more!
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
AWSのフルマネージド型サービスを使ったソフトウェアの開発でローカル開発端末からアクセスキーの漏洩を防ぐためのテスト方法 | DevelopersIO
AWSアクセスキーセキュリティ意識向上委員会って何？ 昨今、AWSのアクセスキーを漏洩させてしまうことが原因でアカウントへの侵入を受け、 多額の利用費発生・情報漏洩疑いなど重大なセキュリティ事案が発生するケースが実際に多々起きています。 そこで、アクセスキー運用に関する安全向上の取組みをブログでご紹介する企画をはじめました。 アクセスキーを利用する場合は利用する上でのリスクを正しく理解し、 セキュリティ対策を事前に適用した上で適切にご利用ください。 本記事の想定読者 本記事ではフルマネージド型サービス=IAMを使ってアクセス制御を行うサービスと置き換えられます、これらを一切使わない開発(ALB, EC2, RDSのみなど)をしている方は対象外です 本記事はAWS上にソフトウェアを構築する開発者(主にバックエンドエンジニア)や開発環境を提供するプラットフォーマーを想定読者としています Typ
import { useState } from 'react'; function Square({ value, onSquareClick }) { return ( <button className="square" onClick={onSquareClick}> {value} </button> ); } function Board({ xIsNext, squares, onPlay }) { function handleClick(i) { if (calculateWinner(squares) || squares[i]) { return; } const nextSquares = squares.slice(); if (xIsNext) { nextSquares[i] = 'X'; } else { nextSquares[i] = 'O'; } on
TypeScript開発にRailway Orientedを持ち込み、より型安全なエラーハンドリングへ - Sansan Tech Blog
Digitization部 Bill One Entry*1グループの秋山です。 はじめに Domain Modeling Made Functionalというスゴ本 補講：Make Illegal States Unrepresentable バックエンドの処理を抽象化する 手続き型プログラミングの典型例 課題1：制約のないエラーハンドリング 課題2：低い可読性 課題3：エラーハンドリングの低い網羅性 Railway Oriented Programming TypeScriptで型安全にエラーハンドリングする ステップ1：サブ関数の出力はResult型で表現する ステップ2：サブ関数にResult型を入力できるようにする ステップ3：サブ関数を連結する ステップ4：網羅的にエラーハンドリングする おわりに 付録 TypeScriptの全文サンプル はじめに エラーハンドリングは重要な処
こんにちは！sugitaniと申します。 これまで有名芸能人と通話ができる(かもしれない)ライブ配信アプリとか、オリジナルマンガの配信サービスとか、コメントが横に流れるライブ配信システムとかを作ってきました。(SUGARは今も作業してます) 最近ご縁がありましてUUUMの子会社で、簡単に有料フォロワー向けの投稿が行えるFOLLOW MEを主に開発していて、NFTでデジタルトレーディングカード(※)を売り買いすることができるHABETをIndieSquare社さんと協業で運営しているNUNW株式会社(5月にFOROから社名変更)に入社し半年くらい経っています。最近CTOに任命していただきました！ ※NFTについては思うことがある開発者の皆様が多いと思っていますが、自分がどう思っているかは後述します 少し前に「スタートアップがまともなわけ無いから入るな」というインタビュー記事を書いて頂いたんで
Deno、JavaScript/TypeScriptのためのデータストア「Deno KV」発表。Deno本体にSQLiteを統合、分散環境では強い一貫性も提供
Deno、JavaScript/TypeScriptのためのデータストア「Deno KV」発表。Deno本体にSQLiteを統合、分散環境では強い一貫性も提供 サーバサイドやエッジでのJavaScriptランタイムを提供するDenoは、Deno本体に統合したJavaScript/TypeScriptのためのデータストア「Deno KV」を発表しました。 これまでDenoでアプリケーションを開発し実行する際には、データを保存するためのデータベースをユーザーが用意する必要がありました。 Deno KVはDenoに統合されたデータストアとして、JavaScriptの変数や配列変数、オブジェクトなどのあらゆる構造化された値が保存可能なキーバリュー型のデータベースとして提供されるため、ユーザーがデータベースを用意しなくてよくなります。 Announcing Deno KV: A Global Dat
Go + TypeScriptによるGraphQLスキーマ駆動開発 - 一休.com Developers Blog
こんにちは。宿泊事業本部の宇都宮です。この記事では、GraphQLをベースに、GoとTypeScriptでスキーマを共有しながら開発を進める方法について紹介します。 この記事は 一休.com Advent Calendar 2019 の16日目の記事です。 GraphQLとは ライブラリの選定 コードファースト vs スキーマファースト Goによるサーバ実装 TypeScriptによるクライアント実装 おわりに 参考文献 GraphQLとは GraphQLは、Facebookによって開発された、Web APIのための クエリ言語 です。その特徴もSQLに似ていて、データの取得や更新を宣言的な記述によって行うことが出来ます。 仕様は公開されており、リファレンス実装として graphql-js がありますが、それ以外にも様々な言語でGraphQLサーバを実装できます。 GraphQLでは以下の
Prettier 3.0 をリリースしました
2023 年 7 月 5 日に Prettier 3.0 をリリースしました。Prettier 2.0 がリリースされたのが 2020 年 3 月 21 日だったので、実に 3 年以上ぶりのメジャーアップデートとなります。 本当はもっと早くこのブログを書きたかったんですが、やる気が出ずだいぶ遅れてしまいました。 この記事では Prettier 3.0 の主要な変更点を紹介します。 Prettier 3.0 の主要な変更点 Prettier 3.0 はメジャーアップデートということもあって大きな変更がいくつか含まれています。ここでは、そのうちユーザーに直接的な影響がありそうなものを紹介します。 ここで紹介する以外にも大きな変更はありますが、プラグイン開発者向けのものとか、Prettier のソースコード自体が全部 ECMAScript Modules で書かれるようになったとか、ユーザーから
How We Made Bracket Pair Colorization 10,000x Faster In Visual Studio Code
Version 1.93 is now available! Read about the new features and fixes from August. Bracket pair colorization 10,000x faster September 29, 2021 by Henning Dieterichs, @hediet_dev When dealing with deeply nested brackets in Visual Studio Code, it can be hard to figure out which brackets match and which do not. To make this easier, in 2016, a user named CoenraadS developed the awesome Bracket Pair Col
私が理解している限り、「良いソフトウェア」を開発するためには「小さいチーム」と「優秀な開発者」が最重要で、それらの欠如をIDEやら静的型言語やらで埋めることはできるというのは幻想。動的型言語は最初からそんな幻想を提供しない
こちらの発表内容です。 https://kaigionrails.org/2021/talks/danimal141/
通常、ReactやTypeScriptを使って開発する場合は、ローカル環境で開発して、ビルドして、ブラウザーで表示するという流れになります。 ただ、昨今のブラウザーの性能はかなり高くなっており、ES Modulesをうまく使うことで、ノーバンドルでReactやTypeScriptをリアルタイムにブラウザー上で反映させることができるのではないかと考えました。 この案をもとに、何番煎じかわかりませんが、ブラウザー上でリアルタイムにReactやTypeScriptをバンドルするライブラリを作成しました。 以下のようにコードを書くだけで、ブラウザーで実行可能なJavaScriptコードが生成されます。 import { browserBundle } from "browser-bundler"; const code = ` import React from "react"; import R
React17におけるJSXの新しい変換を理解する
今日発表された公式ブログの記事によれば、React17では新しいJSXの変換がサポートされます。これはどういうことなのか、我々にどういう影響があるのかをまとめました。 JSXの変換とは ほとんどの人は、Reactを使う際に以下のようなJSX記法を使っているはずです。具体的には次のようなもので、<div>のようなHTMLに近い記法がJSXです。 const Foo = () => { return <div> <p id="a">I am foo</p> <p key="b">I am foo2</p>> </div>; } これらは純粋なJavaScriptではないため、そのままでは実行できません。そのため、何らかの方法でただのJavaScriptに変換する必要があります。現代では、それを担うのはBabelやTypeScriptです。これらによって、上記のJSXを含むコードは次のように変換
VSCodeの拡張開発に入門してみました
こんにちは。GMOアドマーケティングのK.Mです。 最近めっきりVSCode上で過ごすことが多くなりました。 というわけで、今回はVSCodeの拡張の作り方について調べてみました。 もともと便利な拡張がたくさんあるVSCodeですが、自分の作業に特化したかゆいところに手が届くものを自作できるようになることのメリットも大きそうです。 手始めに、エディタの拡張と考えると良い題材かと思われる選択範囲の文字列を見やすく整形して置き換える機能を作成してみたいと思います。 Beautify系の拡張はたくさんありますが、プロジェクト特化なログ文字列とかをサクッと整形したいようなケースで役に立つことを想定します。 プロジェクト準備 ジェネレーターが用意されているため、それを使ってプロジェクトの雛形を生成します。
初めてのTypeScript
TypeScriptの本格的な入門書。TypeScriptは、世界で最もよく使われ、かつ最も好まれているプログラミング言語の1つです。本書では、JavaScriptの基礎的な知識のあるプログラマーを対象に、「型」や「型システム」の基本から、明快かつ包括的にTypeScriptを解説します。TypeScriptはバグやタイプミスを防ぎ、コードを読みやすくするのに有用なだけでなく、JavaScriptがどのように動くべきかを宣言し、それを維持するのに役立つ優れたシステムです。読者は本書を読むことで、TypeScriptの基礎と最も重要な機能をマスターできるでしょう。 賞賛の声 監訳者まえがき まえがき 第I部 TypeScriptの概念 1章 JavaScriptからTypeScriptへ 1.1 JavaScriptの歴史 1.2 バニラJavaScriptの欠陥 1.2.1 コストのかかる
スキーマファースト開発のためのOpenAPI（Swagger）設計規約 | フューチャー技術ブログ
はじめまして。TIG DXユニット 1の亀井です。 はじめに みなさん、Swagger使ってますか？ Swaggerや周辺ツールについては 某先輩の記事 にて丁寧に解説されていますので、 本記事では実際にSwaggerのスキーマ定義を設計していく上で取り決めた規約について書いてみたいと思います。 前提私が在籍しているプロジェクトでは、REST APIは golang でフロントエンドを Vue.js + TypeScript で構築しています。 短期間・高品質での構築を実現するためにSwaggerを設計ドキュメントとしてだけではなく、コード自動生成やモックサーバーに活用させることで徹底したスキーマファーストな開発を行ってきました。 というわけで、今回は下記のツールを利用することを前提として規約を作成しています。 go-swagger: Goアプリケーションのハンドラ、リクエスト/レスポンス
OpenAPI からなるべく生成するフロントエンド開発
こんにちは。 スキーマから何かを生成するのが大好きな seya と申します。 追記 今後は基本お手製スクリプトは書かないで ChatGPT にお願いした方がいいと思います。 ------------- 追記 終わり ------------ 今の会社では REST API のスキーマを OpenAPI で記述しているのですが、それを活用して何かしらを生成するスクリプトをよく書いています。 そんなネタがそれなりに溜まってきたので一挙大放出しようというのがこの記事です。 具体的には次のようなものを作りました。 TypeScript の型と API の生成 by aspida テストのための Factory 関数の生成 msw handlers の生成 API スキーマから生成のデメリット まず初めに、"生成"というのはとても生産的に感じますが、デメリットも存在するので触れておきます。 一番大き
この記事を読むと VSCodeを最適化することで、React開発効率が加速します。 関数コンポーネントの雛形が一瞬で出来る。しかもファイル名がそのままコンポーネント名になる ES6の作法に則った作法で自動でコード整形してくれる。どういう時に関数内の()が省略できるか等を覚えなくて良い useEffectの最適な第二引数を自動で補完してくれる コンポーネントのimport文を自動で挿入してくれる なぜこの記事を書いたのか VSCodeは素晴らしいテキストエディタです。 特に、React開発においてはもはやデファクトスタンダードです(長年愛用しているエディタがある方も、是非一度VSCodeを試してみてください)。 さて、VSCodeはそのままでも素晴らしいエディタです。しかし、使用するフレームワークや用途に応じて拡張機能を入れるとさらにその卓越した機能性を発揮します。VSCodeがなぜ世界中の
TypeScriptプロジェクトのCIでやってること
概要 最近退職に伴いTypeScriptプロジェクトのCI/CDの見直しを行っているので主にプルリクに対するCIを中心に何をやっているのか(やっていた＆やろうとしているもの含む)紹介します。 それぞれはさらっとした紹介のみです。 ちなみに書いてから気づいたんですが殆どTS以外でもできます。 tsc, prettier, eslint 基本です。恐らく殆どのプロジェクトでやっているかと思います。 tscは--noEmitオプションを付けて実行、eslintは--cacheと--quietオプションを付けて実行しています。 prettierは--list-differentオプションを付けると差分があった場合(=prettierが適用されていないファイルがあった場合)にエラーにしてくれます。 CIでWebpack等でバンドルしてる場合はこの辺を明示的に行わなくてもそこでコケるのでやってないケー
カーネルにDBMSを載せた分散OS「DBOS」の特徴と利点は？ サーバレスでTypeScriptとPythonの実行に対応
カーネルにDBMSを載せた分散OS「DBOS」の特徴と利点は？ サーバレスでTypeScriptとPythonの実行に対応 マサチューセッツ工科大学（MIT）とスタンフォード大学の研究者によって考案された分散OS「DBOS」が、TypeScriptに加えてPythonの実行に対応したことが発表されました。 DBOSはOS内部にデータベースが組み込まれており、OSやアプリケーションのすべての処理や状態をデータベースが記録します。そのため、アプリケーションやOSが何らかの原因で終了したとしても、処理や状態を失うことなく終了したところから再開できるなどの利点を備えています。 これによりTypeScriptやPythonで耐久性の高いアプリケーションの構築を容易にしています。 DBOS is coming to #Python! Development of the DBOS Transact f
気になったので調べてみました。 tsconfig.jsonと普通のJSONの大きな違い tsconfig.jsonには、コメントが書けます。 tsc --init した時に生成されるtsconfig.jsonに、大量にコメントが付けられているので、すぐに気付くことと思います。 例) { "compilerOptions": { "target": "es5" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */, "module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd
この記事はTSKaigi2024での以下の私の発表内容を書き下ろしたものです。 なぜAPIに型をつけたいのか 現代のWebのシステム開発において、クライアント・サーバーともに型のある言語で開発されることが増えてきました。静的な型検査はコードの堅牢性やよりよいメンテナンス性の向上をもたらします。 プログラミング内部だけで型検査をするだけでも十分メリットはありますが、外部I/Oに対する型付けが不十分だとそのメリットを最大限に発揮してるとは言えません。外部I/Oとは、例えばWebフロントエンドだとLocalStorageやDOMからの入力値、それからネットワーク通信（今回はこれをAPIと呼びます[1]）などですね。サーバー側でいうとAPIからの入力・レスポンスやデータベースへの読み書きが該当します。 個人的な経験から言うと、Webシステムの開発におけるエラーの多くはAPIやデータベースとのやり取
こんにちは、よしこです。 この記事は 2020年に立ち上げたWebフロントエンド構成の振り返り の「linter/formatter」項の詳細記事です。単体でも読めますが、よければ元記事もあわせてどうぞ！ この記事では、今わたしが 株式会社ナレッジワーク というスタートアップで開発・運用しているプロジェクトにおいて便利だったLint/Format関連の設定についてご紹介していきます。 使っているのは、TSのlintのためにESLint, CSSのlintのためにStylelint, 主なファイルのformatのためにPrettierです。 ESLint pluginsとextendsだけどんなもの入れてるか載せておきます。 "plugins": [ "strict-dependencies", // 後述 "unused-imports", // 後述 ], "extends": [ "a
2020年は、型安全ルーティングが密かに盛り上がりを見せた年でした。この記事では、TypeScript周りのエコシステムで発生した型安全ルーティングという概念とこれまでの流れを振り返ってご紹介します。 ルーティングとは この記事でいうルーティングは、URL（特に/user/uhyoといったパス部分）を見てコンテンツを出し分ける機構のことを指します。ルーティングは、主にSPA (Single Page Application) で必要となります。SPAはどのようなURLでも同じHTMLとJavaScriptが動作し、JavaScriptによってアドレスに対応したコンテンツが表示されます。まさに、ルーティングがSPAの根幹となっています。また、一般のウェブサーバーも、異なるURLに対するリクエストには異なるレスポンスを返しますから、ここでもルーティングが行われていることになります。 従来は、文
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TypeScript 4.5 以降で ESM 対応はどうなるのか？
「Redux よさようなら」最強の React 実装
“Tao of Node - Design, Architecture & Best Practices” 日本語翻訳
Vite + React で新規プロジェクトの開発環境を作ろう
if しか知らないあなたのためのポリモーフィズム入門
Babel が Flow から TypeScript に移行した
Microsoft、プログラミング言語「TypeScript 3.7」を公開
GraphQLとクライアントサイドの実装指針.md
Svelte + TypeScript のベストプラクティスを考える
イベントループとプロミスチェーンで学ぶJavaScriptの非同期処理
ハンズオン：React チュートリアルからはじめる TypeScript と単体テスト
こんなに辛いことになるから、最初にがんばろう / 辛い開発状況をどうにかするためにやった13のこと
たかがRuby頑張れないやつがソフトウェア開発頑張れるハズないだろう - yuiseki
事業に向き合い続けたい私は、それでもRailsを使い続ける
ブラウザー上でReactやTypeScriptのコードをコンパイルして動かすツールを作った
React開発効率を3倍にするVS Code拡張機能&環境設定 - Qiita
tsconfig.jsonはJSONじゃないと言う話 - 焼売飯店
TypeScriptとGraphQLで実現する型安全なAPI実装
React+TSプロジェクトで便利だったLint/Format設定紹介
2021年の密かなトレンド？ “型安全ルーティング”の概観