【初学者向け】具体例で学ぶTypeScript練習問題集
TypeScript を学習中の方に勧められる練習問題集として手頃なものがないなと思い、作ってみました。 TS の問題集としてはtype-challenges がよく話題に上がりますが、実用上あそこまでの型パズルを使うことはあまりないため、最初に取り組むにはハードルが高いです（もちろん知っていたら便利ではありますが、初学者向けではない）。 想定読者 JavaScript を書くことには慣れている TypeScript はこれから・まだ慣れていない TypeScript の基本的な型についてはすでに知っている はじめに JavaScript の機能に関する問題は扱いません。TypeScript の型システムに関する問題のみ扱います。 そもそも TypeScript についてよくわかっていない場合、サバイバル TypeScriptなどで学習から始めてみてください。 「型がつけられると何が嬉しい
TypeScriptでどこまで「関数型プログラミング」するか ─ 「手続き Haskell」から考察する - 一休.com Developers Blog
この記事は 一休.comのカレンダー | Advent Calendar 2023 - Qiita 10日目の記事です。 昨今は Web アプリケーション開発の世界でも、関数型プログラミングのエッセンスを取り入れるような機会が増えてきました。 とはいえ、一つのアプリケーションを 1 から 10 までがっちり関数型プログラミングで構成するというわけではなく、そのように書くこともあればそうでない従来からの手続き的スタイルで書くところもあるというのが現状で、どこまで関数型プログラミング的な手法を取り入れるかその塩梅もまちまちだと思います。まだ今はその過渡期という印象も受けます。 本稿ではこの辺りを少々考察してみたいと思います。 先日、Qiita Conference 2023 Autumn で以下のテーマで発表を行いました。 この発表では「関数型プログラミング最強!」という話をしたわけではなく、
「型システム入門」の先へ：TypeScriptの型システムのいくつかの側面 | 雑記帳
この記事は TypeScript Advent Calendar 2023 の8日目の記事です。言語実装勢にも役立つ内容を含んでいるかもしれないので、 言語実装 Advent Calendar 2023 にも登録しています。 TypeScriptで型システムに興味を持った人が「型システム入門」を読んだという話を時々聞きます。「型システム入門」は、Types and Programming Languages (TAPL) という本の邦訳で、型システムに興味を持った人が読むのは自然なことです。 型システム入門 プログラミング言語と型の理論 | Ohmsha 型システム入門 サポートページ ですが、この本の原著は2002年出版で、最近の話題がカバーされていなかったり、邦題に「入門」とあるように発展的な話題は扱っていなかったりします。一応続編的な感じのAdvanced Topics in Typ
TypeScriptのモノレポ構成を考える
はじめにlink あまりモノレポの構成について語られている記事が多くないなと感じたので、現時点で自分が考えている設計をまとめてみる。 以前にTwitterでディレクトリ構成と内容については言及したが、実際に利用する技術についてはあまり触れなかったので改めて検証してみた。 https://twitter.com/koh110/status/1617510034266808322 クライアントサイドとサーバーサイドのコード共有については下記の記事がよくまとまっていた。 https://capelski.medium.com/effective-code-sharing-in-typescript-monorepos-475f9600f6b4 上記の記事の構成も参考にしつつ、自分の考えも加えて検証していく。 相対パスを利用する方法 npmのローカルパス指定（file:xx）を利用する方法 シンボ
TypeScript 本体のコードを読んでみよう
みんなお世話になっている TypeScript のコードを読みたいと思ったことはないだろうか。読んだ。 一週間ぐらいかかった。完全に読み切ったとは言えないが、概要は掴んだ。 なかなかに複雑でドメイン知識を得るのが難しかったので、これから読む人向けに、登場人物や概念を整理して紹介したい。 読んだのは 2023/6/8 時点で git clone したコード。 最初に: 自分のゴール設定 複数ファイルにまたがった参照を、 TypeScript の Language Service が提供する findReferences() や findRenameLocations(), goToDefinitions() を使って、インクリメンタルに書き換えたかった。 Terser を使うと、今触ってるオブジェクトが何で、何のメンバを書き換えたかの情報が残らない。これを TypeScript のレイヤーで
はじめに - NestJSの強化書 βversion
本書の目標は、本読者がNestJSをすぐに実務で利用できる(具体的に言えばNestJSで簡単なプロダクトを開発できる)ように、最短ルートに読者を導く一冊になることです。本書は、NestJSの網羅的なドキュメントではありません。取り扱う内容は頻出する機能に絞って、「実務でNestJSを扱うなら、最低限ここだけは理解しておこう」「これさえ押さえておけば実務でも安心できる」という観点で執筆しています。 本書はNestJSを中心に取り扱いますが、実務上、必要になる知識としてJavaScriptやTypeScriptの仕様やフロントエンドフレームワークのReactやVueについても扱います。
ハンズオン：React チュートリアルからはじめる TypeScript と単体テスト
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
フロントエンド開発の準備
開発の前に決めておくこと 後から変更するのが難しいこと、大きな手戻りが発生する可能性のあることをできる限り開発のはじめに決めておきます。 多言語対応の有無 URLに依存する可能性が高い多言語対応は、後から対応すると制限がかかったり破壊的な変更が必要になる場合があるので、はじめに決めておきます。 多言語対応する予定はなかったけど、後から必要になってしまった場合は仕方ないと思います。 OGPの必要性 動的ルーティングに対するOGPの必要性によってレンダリング方法の選定やCDN周りの選定が変わってきます。 SEOのニーズ こちらもOGP同様レンダリング方法に影響します。 OGPに関しては後からなんとかなることもありますが、SEOが重要なサイトの場合、そもそもSPAを選択しない方が適している可能性もあるので重要です。 対応ブラウザ/バージョン これを明確にしないと、一部のブラウザで使用できないCS
React/Jestでのユニットテストに少し慣れてきたら役に立つtips
スペースマーケット所属の711fumiです。 北欧へのあこがれが高まっています☃️ ReactでのWebアプリケーション開発をはじめる中で、ユニットテストを書き始めたときに知って役立ったtipsをまとめてみました。 テスト環境 テスティングフレームワークはJest、UIテストのためにTesting Libraryを使用しています typescript@4.9.4 React@18.2.0 jest@28.1.0 @testing-library/react@13.3.0 ①アサーション 特定の要素内に絞って要素検索を行う - within getBy、findByなどで「要素A内にある要素Bを取得する」場合にwithinを使って要素Aを指定することができます。 const formElement = screen.getByRole('form') expect( within(formE
TypeScript 10年の歩み - Qiita
TypeScriptは、2022/10/01に10周年を迎えました。 ということで、それを記念してMicrosoftの中の人が振り返りのエントリーを書いていました。 以下は該当の記事、Ten Years of TypeScriptの紹介です。 Ten Years of TypeScript 2022年10月1日は、TypeScript10歳の誕生日です。 10年前の今日、2012年10月1日に、TypeScriptは初めて公にされました。 The Early Days 初めてTypeScriptが表に現れたとき、それももっともなことでしたが、多くの否定的な意見がありました。 一部のJavaScriptユーザにとって、JavaScriptに型を強制する試みは冗談か邪悪な陰謀のように見えたかもしれません。 しかし、その試みには、多くのメリットがありました。 型チェックのおかげで、ファイルを保存
TypeScriptにおける配列の共変性
const animal: Animal = { animal: "string", }; const dog: Dog = { animal: "string", dog: "string", }; いま，Dog <: Animalです． <:という記号は2つの型のあいだに書いて，「左の型が右の型のサブタイプである」と読みます． TypeScriptの型システムは構造的なので，2つのオブジェクトがサブタイプ関係にあるには，それらに共通するプロパティについてもまた，サブタイプ関係が必要1です． 今回の例では，DogとAnimalに共通するanimalプロパティについてstring <: stringなのでOKです． TSでは，S <: TならばT型の変数にS型の値を代入できます． つまり，Dog <: Animalなので Animal型の変数にDog型の値を代入できます．
TypeScript エラー処理パターン - Object.create(null)
M 年前にも N 年後にも人類は同じ話をしている. まとめ エラーの発生方法は throw と return に大別できる throw には簡潔さ, return には明瞭さと型安全性といった特徴がある どちらの方法がより適しているかはプログラムの規模, エラーの種類, ハンドリングの方法などが判断の材料になる 実際にどちらの方法を使うかは上の判断材料と, フレームワークやプロジェクトのコーディング規約なども合わせて複合的に決めるのがよい エラー発生方法の分類 まず前提として, 関数から呼び出し元にエラーを伝える方法は以下の 2 つに大別できます. 逆にこの記事ではこれ以上の具体的な方法についての議論はしません. throw エラーを throw して呼び出し元に伝える方法です. 例えば以下のようなものが当てはまります. throw new Error("...") Promise.rej
書評『TypeScriptとReact/Next.jsでつくる 実践Webアプリケーション開発』 - uhyo/blog
皆さんこんにちは。今回は、2022年7月25発売の『TypeScriptとReact/Next.jsでつくる 実践Webアプリケーション開発』を読み終わったので、書評という形で感想と紹介を述べたいと思います。筆者はもともと技術書を読まず「ネットでいいやん」派だったのですが、このたびTypeScript入門書を出版したこともあり、それを過去の話として葬り去るべく技術書を読んでいくことにしました。せっかくなので、読んだ技術書の感想等を紹介します。 おことわり: この記事では、「筆者」とはこの書評を書いた人を指し、『TypeScriptとReact/Next.jsでつくる 実践Webアプリケーション開発』を書いた人たちのことは「著者ら」と呼びます。また、この記事の内容はすべて筆者の個人的な見解であり、本の内容や本を読んで得られる知識について何らかの保証をするものではありません。 筆者について筆者
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
x.com
x.com
TypeScript 関数型スタイルでバックエンド開発のリアル
子育てエンジニア on X: "あーはいはい知ってるわーと思って読み進めてたらここエグすぎてワロタ ちょうど最近地雷踏みましたわ https://t.co/3NIGurlMpQ"
https://x.com/msy__78/status/1759532644491264164?s=12&t=suYC6B2IhN7jv0qU5zDxmQ
https://twitter.com/mizchi/status/1645283143619055616?s=12&t=suYC6B2IhN7jv0qU5zDxmQ
TypeScript による GraphQL バックエンド開発
