TypeScript エラー処理パターン - Object.create(null)
M 年前にも N 年後にも人類は同じ話をしている. まとめ エラーの発生方法は throw と return に大別できる throw には簡潔さ, return には明瞭さと型安全性といった特徴がある どちらの方法がより適しているかはプログラムの規模, エラーの種類, ハンドリングの方法などが判断の材料になる 実際にどちらの方法を使うかは上の判断材料と, フレームワークやプロジェクトのコーディング規約なども合わせて複合的に決めるのがよい エラー発生方法の分類 まず前提として, 関数から呼び出し元にエラーを伝える方法は以下の 2 つに大別できます. 逆にこの記事ではこれ以上の具体的な方法についての議論はしません. throw エラーを throw して呼び出し元に伝える方法です. 例えば以下のようなものが当てはまります. throw new Error("...") Promise.rej
TypeScriptで.envを脱却する話
最近では、環境別に.env.development や.env.production などのファイルを作って運用する形態も増えています。 弊社では、TypeScript+Node.js によるバックエンド開発をしていますが、node では process.env で環境変数を参照します。しかし、process.env の型は 以下のように定義されており、型付けが弱く、補完が効かないという難点があります。また、string しか表現できないため、数値などはパースする必要があるのも面倒です。
TypeScriptでコードを書く時に意識していること
なんだかんだでTypeScriptを業務でも個人開発でも使うようになって3年くらいが経過しました。 TypeScriptは便利ですよね☕️ 世の中的にも、もはやTypeScript以外でフロントエンドの開発を行うことが珍しいくらいの雰囲気になってきたのではないかという感じがします。 最近というかTypeScriptを書き始めてしばらくした今、書き始めた当初とは意識することが変わってきたように感じています。 そういうわけで、今、どんなことを意識しているのかを自分の整理をこめて記載しておこうと思います。 🔥🔥🔥 型を先に定義する ここがかなり気持ちの上で変わった部分です。 TypeScriptで型を書くということは、つまるところ自分が今から記述するコードの設計図を書くということだという意識が強くなりました。 TypeScriptの型推論は非常に強力で、自分でほとんど型を定義しなくても、多
JavascriptからTypescriptへ1人で5万行修正し、移行した話 - Qiita
環境 React(CRA) Javascript npm 方針 当たり前の前提として、既に動いている機能は壊さない Javascript -> Typescript へ最短で置き換えて、無事起動するところまでを第一の目標とする any 型を許容する（後の改修や機能追加で型を順次付与していく想定） 作業の概要 コンパイルエラーを解消し、最低限動作するまで ts-migrate を使って全体的に Typescript へ移行する ts-migrate で出力された指摘を手作業で修正し、指摘コメントを削除していく 依存ライブラリに必要な@typesを install していく 型が無くてエラーになっているところに対して any で型を付与していく ※ここまで終わったら この時点で master にマージしても問題はない マージする場合は既存機能が問題なく動作するかしっかり確認する！ 一旦マージし
ここがつらい！ Slack API - Qiita
半分ネタ記事です。あんまり真面目に書きません。 項目数が多いので，気力でなんとか書きます。分類は諦めます。 他にもある！っていうのがあったらコメント欄で教えて下さい。気が向いたら追記します。 公式の TypeScript 型定義がもはや型定義を諦めている 辛い度: ★★★★★ 辛い中でもこれはかなり上位に来るやつ。 こちらに OpenAPI 形式で仕様が定義されていて， https://github.com/slackapi/node-slack-sdk/tree/main/packages/web-api/types ここに仕様に基づいて TypeScript の型定義ファイルが吐かれるようになっています。 Git 管理されていないので，実際のリリースを見てみましょう。 https://unpkg.com/@slack/web-api@6.7.2/dist/response/Reacti
TypeScriptの安全性の穴
TypeScriptの型システムは不完全です。 型システム上しょうが無い所も、どうしてそうなってるのって所もあります。 この記事では共通認識となっているようなものから、あまり認知されていないものも含め、TypeScriptの安全性の穴になり得る所を紹介します。 tsconfig.json 項目が大量にありますが、この記事では型安全性に大きく影響のあるオプションのみ紹介します。 strict このオプションが無効だと型安全性が大幅に失われます。 具体的にはnull | undefinedが無かったことにされたり、暗黙のanyが大量発生したりします。 なんでデフォルトがfalseなんですか？ 詳しくはこの記事を読んでください。 noUncheckedIndexedAccess このオプションがfalseの場合、インデックスシグネチャへのプロパティーアクセスが型安全ではなくなります。 const
はてなリモートインターンシップ2021の講義資料を公開します - Hatena Developer Blog
CTOのid:motemenです。2021年8月から9月にかけて開催した「はてなリモートインターンシップ2021」も無事に終了しました。 今年のインターンシップは下記のエントリーで発表したように、前半の1週間が講義、後半の2週間は開発を実践する2部構成で、ともにオンラインで実施しました。 はてなリモートインターンシップ2021のカリキュラムを発表します！ このうち講義パートは、Web技術に関するエンジニアリング講義とブートキャンプ、そしてエンジニアリング以外の領域をとりまぜて実施しました。この記事では、それぞれの講義で使用したスライド資料を公開するとともに、内容を簡単に紹介します。 エンジニアリング講義で使用したスライド資料 Web API ─ REST GraphQL gRPC Webサービスインフラ入門 コンテナ技術とDocker Kubernetesの仕組みとハンズオン マイクロサー
How I built a modern website in 2021
How I built a modern website in 2021September 29th, 2021 — 34 min read For over half of 2021, I worked on a complete rewrite of kentcdodds.com. You're reading this on the rewrite of this site! Are you using dark mode or light mode? Have you signed in and selected your team yet? Have you tried to call into the Call Kent Podcast? This blog post isn't about these and other features of the new site, b
機能開発を止めずに、6万行の TypeScript 移行を完了させた開発プロセス
スタディスト 開発部 技術支援ユニットの笹木 (@s_sasaki_0529) です。 2021年上半期、およそ6万行の JavaScript コードを TypeScript に置き換える作業を、半年間単独で行いました。 本記事では、機能開発自体を止めずに、どのように走り切ることができたのか、ふりかえりたいと思います。 なお、本記事の内容は、移行開始直後の登壇資料 “大規模 Vue アプリケーションの TypeScript 移行” と、移行完了後の登壇資料 “6万行の TypeScript 移行とその後” と重複する内容を含んでいます。 Teachme Biz と TypeScript弊社が開発している、マニュアル作成・共有システム Teachme Biz は、iOS/Android や Windows など、マルチプラットフォームで提供されています。 その中でも、作成・管理に多く使われて
named exportは有害だと考えられます
TypeScriptの話です。default exportを使うことが有害であるかのような言説に異議を唱えるためにこの記事を書きました。 あらかじめ断っておきますが、この記事はTypeScriptを使っているプロジェクトのモジュール構成に関する話です。npmに上げられているようなNode.jsパッケージ間でのimport/exportはまた別のエコシステムが関わってくる話なので、分けて考えてください。Denoにおけるimport/exportに関しては、この記事での議論がそのまま通用します。 基本的にdefault exportのみを使うべき 筆者の考えでは、named exportの方が、あなたのプロジェクトに対する害が大きいです。むしろ、「基本的にdefault exportのみを使う」ことを考えた方が良いと思います。それは以下のような理由からです。 named exportを積極的に
JestでTypeScriptを高速化する | miyauci.me
JestでTypeScriptを高速化するJestでテストの高速化させる方法を紹介します。トランスフォーマーとしてesbuildやswcを紹介し、TypeScriptで遅くなりがちなトランスパイルを高速化させることで、テストを自体を高速化します。 はじめにesbuild の登場により、フロントエンドの世界は、開発環境により速度を求めるようになりました。vite の隆盛はその最たるものといってもいいでしょう。 esbuild や swc は高速な Go や Rust によって書かれ、更に多くの場合、Typescript の型チェックを省略しています。 tsc の型チェックは、大抵 IDE やワークフローで行われているので、これらを削ぎ落とすことで、純粋なコンパイラとして JavaScript への変換に特化しているということですね。 さて、Typescript コードをテストする際、多くの場
Next.js + SvelteによるnoteのフロントエンドApp分割｜note株式会社
※ この記事は2021年6月21日に行われた「進化するフロントエンド2021 − 4プロダクトから学ぶSPA/PWAの技術と実践−」の登壇を文字起こししたものになります noteのフロントエンドの歴史 ではまず自己紹介をさせていただきます。フロントエンドエンジニアの山形と申します。よろしくお願いします。 去年の3月に入社したので、noteには1年3ヶ月くらいいます。趣味でコーヒーの焙煎とかやっています。 今回はnoteが抱えているフロントエンドの課題をどう解決していったのかを話していきたいと思います。 最初にnoteが今までどうやって実装されていたのか、その歴史を説明していきます。 初期のnoteはRuby on Railsのアセット上に構築されたSPAサイトで、フロントはAngularJSとCoffeeScriptで書かれていました。 この構成はかなりの問題を含んでいました。 1つ目はS
「がんばらないTypeScript」のための現実的な設定を考える ─ 4レベルの厳しさを使い分けてTypeScript疲れを克服しよう！｜ハイクラス転職・求人情報サイト AMBI（アンビ）
ハイクラス求人TOPIT記事一覧「がんばらないTypeScript」のための現実的な設定を考える ─ 4レベルの厳しさを使い分けてTypeScript疲れを克服しよう！ 「がんばらないTypeScript」のための現実的な設定を考える ─ 4レベルの厳しさを使い分けてTypeScript疲れを克服しよう！ エンジニアHubでは2019年に「がんばらないTypeScript」を紹介しました。JavaScriptに静的型付けなどを提供するTypeScriptは、今では実プロジェクトに採用されるプログラミング言語になっています。そこで現実的なTypeScriptの設定を、藤吾郎（gfx）さんに解説してもらいました。 2021年の現在、TypeScriptの価値はますます広く認められるところとなり、多くのJavaScriptプロジェクトがTypeScriptで開発されるようになってきました。またT
実践！ Typescript で DDD - マイクロサービス設計のすすめ - Leverages Tech Blog
対象読者 マイクロサービス化を検討しており、実際に作る場合の構成を参考にしたい。 ドメイン駆動設計について、基本的な用語の知識がある。 TypeScript を多少触ったことがある。理解がある。 はじめに こんにちは。エンジニアの吉村です。 現在、弊社が運営する teratail というサービスに携わっており、CakePHP で動作しているモノリシックな既存サービスをマイクロサービスに移行するというプロジェクトを進行中です。 この記事では、実務を通して得た知見として、マイクロサービス化によりどんな恩恵があるのか、具体的にどのような構成で実装をしているのかについてご紹介します。 TL;DR マイクロサービスのバックエンドサービスの実装に焦点を絞って、ドメイン駆動設計 + オニオンアーキテクチャをベースに設計をしました。 本記事では、具体的に「ユーザ新規登録処理」の実装をする場合を例にとり、実
「Vue.js」入門～JavaScriptフレームワークをTypeScriptで学ぼう
本連載では、JavaScriptフレームワーク「Vue.js」を、型定義が利用できるようJavaScriptを拡張した言語「TypeScript」で活用する方法を、順を追って説明していきます。初回となる今回は、簡単なサンプルを通して、Vue.jsとTypeScriptの概要と機能を紹介していきます。 はじめに Webフロントエンド開発の分野では、JavaScriptを利用して動的なWebページを構築できるライブラリーやフレームワークがいくつかあります。Googleが中心となって開発しているAngularやその前身であるAngularJS、Facebookが中心となって開発しているReactなどが有名です。 本連載で取り上げるVue.jsも、そのようなフレームワークの一つです。JavaScriptを利用して、データとWebページの内容を結び付けて（バインディングして）表示したり、Webページ
jQueryからTypeScript・Reactまで - Viteで始めるモダンで高速な開発環境構築 - ICS MEDIA
Vite（ヴィート＝フランス語で「速い」の意味）は2020年に発表された新しいフロントエンドのビルドツールです。 開発者がVue.jsの作者であるEvan You氏であるため、Vue.jsのツールであると誤解されることもありますが、プレーンなJavaScript（バニラJS）からVue.js・React・Svelteといった流行のフレームワークまで、さまざまな環境で利用できる汎用的なツールです。 位置付けとしてはwebpackのようなバンドラーと呼ばれるものに近い存在ですが、それだけではありません。この記事では、Viteを導入してプレーンなJavaScriptから、TypeScript+Vue.js・Reactといったフレームワークまで、快適な開発環境を手に入れる方法を紹介します。 この記事で紹介すること： Viteの特徴と基本の仕組み 基本の使い方 Vite + SCSS Vite +
【初心者】React × TypeScript 基本の型定義
はじめに ここ最近TypeScriptの学習をしていまして、その学習記録をZennに投稿し続けていました。 その中で、TypeScriptの基礎学習の最後として投稿した以下の記事では、TypeScriptを用いてReact開発をする際に最低限必要となるであろうTypeScriptの型について簡単にまとめました。 TypeScript 学習記録 #8（Reactに関わる型定義） 先述の記事を書いている際、TypeScriptを用いたReactの基本的な型定義について網羅的にまとめている記事がまだまだ多くないように感じたため、今回「React × TypeScriptの基本の型定義」について改めてまとめ直してみることにしました。 TypeScriptの基礎学習を終え、これからTypeScriptを利用してReactやNext.jsでの開発をしてみようという方の参考になれば幸いです。 そこそこ長
TypeScriptとOpenAPIスキーマで型安全に READYFORが語る“スキーマファースト”で効率的な開発方法
「実践！フロントエンド分離戦略」はREADYFOR 株式会社主催のエンジニア向けLT勉強会です。ここで、菅原氏が「OpenAPI GeneratorとTypeScriptによる型安全なスキーマ駆動開発」のタイトルで登壇。スキーマ駆動開発とそのメリット、活用しているツールについて話します。 READYFORのフロントエンジニア 菅原弘太郎氏（以下、菅原）：それでは「OpenAPI GeneratorとTypeScriptによる型安全なスキーマ駆動開発」と題して、発表します。自己紹介します。2020年11月に、フロントエンドエンジニアとしてREADYFORに入社しました。岩手県在住で、フルリモートで勤務しています。ReactとTypeScriptが好きで、React Hook Formのメンバーなので、もしフォローしてくれる方がいれば、フォローしてください。 フロントエンドとバックエンドの分離
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - google/intermock: Mocking library to create mock objects with fake data for TypeScript interfaces
Effective Deno
