TypeScript 型レベル関数型プログラミング in 2023 - Object.create(null)
ちょっと前に話題になった hotscript の技法の紹介やら, ラムダ計算を TypeScript の型にコンパイルする話やらなんやら. 通常の型レベル関数 TypeScript の型エイリアスはパラメータを取れるので, これは型レベルの関数であるとみなせます. type IsNumber<X> = X extends number ? true : false; type A = IsNumber<42>; // = true 一方でこのようにして定義された関数は第一級ではない, つまり関数そのものを他の関数の引数として渡したりすることができません. type FilterUnion<F, X> = X extends unknown ? (F<X> extends true ? X : never) : never; // ~~~~ // ^ Error: Type 'F' is n
TypeScriptの型を指定してJSONダミーデータを出力させる｜INOUT
ChatGPTにJSONの型をTypeScriptで指定すればそのフォーマットでダミーのJSONデータを作成してくれるのではと思い、試してみました。 作成したJSONファイルをそのままコピーするだけで使えるので便利かも? INPUT 日本にある会社10社のダミーデータのJSONファイルを作成してください。 フォーマット: {id: number, name: string, address: string, foundedIn: Date}[] AIへのインプットをコピーする 以下は、日本にある会社10社のダミーデータのJSONファイルです。実際の企業情報ではないことに注意してください。 ```json [ { "id": 1, "name": "株式会社サクラ", "address": "東京都港区六本木1-1-1", "foundedIn": "2000-04-01" }, { "id
TypeScriptの型情報を使って、サポート対象のブラウザが実装してないメソッドの利用をエラーにするESLintルール
TypeScriptの型情報を使って、サポート対象のブラウザが実装してないメソッドの利用をエラーにするESLintルール eslint-plugin-typescript-compatはTypeScriptプロジェクト向けのESLintルールです。 このESLintではサポートしているブラウザが、実装していないメソッドを検知してLintエラーにしてくれます。 JavaScriptではメソッドの静的解析は難しい(メソッド名が同じでも独自実装の可能性があるため)ですが、TypeScriptの型情報を使って静的解析をしています。 サポートしている機能 [ ] JavaScriptのビルトインオブジェクト [x] プロトタイプメソッド Array.prototype.find [x] 静的メソッド Array.from [ ] オブジェクト Promise [ ] DOM API 基本的にメソッド
AWS CDK v2でOACってどうやってやるの？CloudFront+S3+OAC構築（コード付き-Typescript） - Qiita
はじめに AWS CDKでリソース作ってますか？？ 最近、AWS CDKを見ること、触ることが多く、少しずつ仲良くなってきました。そんな中、AWS CDKでAmazon CloudFront オリジンアクセスコントロールをどうやってやるのか、困ったのでご紹介です。 アーキテクチャ 以下の通り、利用者からアクセスされ、オリジンサーバとなるS3から表示用HTMLを利用者に返却するアーキテクチャです。よくあるやつですね。 上記のCloudFrontとS3のアクセス部分でオリジンアクセスコントロール（OAC）を利用します。OACを利用することでS3自体をパブリックにする必要がなくなり、S3への直接的な意図しないアクセスをできない様にします。 下記の赤枠部分です。 従来は、オリジンアクセスアイデンティティ（OAI）を利用していましたが、OACが登場してからはOACが推奨されています。 OACは、S3
リセットCSSのTypeScript版「ts-reset」を使用してみる - Qiita
TypeScriptを使用しているとき、型の推論が意図通りではない部分があります。 そのような場合に役立つアプリケーションコードとして、ts-resetが挙げられます。 ts-resetとは ライブラリではなく、アプリケーションコードで使用するように設計されているようです。 インポートするだけで、TypeScriptの組み込み型付けを補正してくれます。 どういった推論になるのか、代表的なメソッドに絞って検証していきます。 .filter(Boolean) 配列の各要素に対して実行するテスト関数で、falseを返した要素を取り除きます。 実装前 推論結果にundefinedが含まれています。 以下のコードでundefinedは入らないことが決まっていますので、falsyな値を除いた型を返して欲しいです。 const filteredArray = [1, 'a', null, undefin
React + TypeScript: Storybookを使ってみる - Qiita
つぎに、Storybookをインストールします(「Install Storybook」)。つくられたプロジェクト(react-typescript-storybookディレクトリ)のルートで、つぎのコマンドを打ち込んでください。 Storybookの初期画面は、npm run storybookで開きます(Reactプロジェクトを起動する必要はありません)。URLはhttp://localhost:6006/です。 サンプルのstoryモジュール(stories.tsx)やそれらの用いるコンポーネント(tsx)がつくられ、src/storiesに収められています。実際には、storyモジュールと分けるため、Reactコンポーネントはsrc下の別フォルダに加えることになるでしょう。 今回は、Reactコンポーネントとしてsrc/stories/Button.tsxを使います(コードはつぎのと
React v18 + TypeScript と ASP.NET Core (C#) でホロジュール Web アプリを作り直した - Qiita
React v18 + TypeScript と ASP.NET Core (C#) でホロジュール Web アプリを作り直したC#TypeScriptReactASP.NET_Corechakra-ui はじめに 1年ほど前、React + ASP.NET Core を使用して、個人用のホロジュール Web アプリを作りました。 React と ASP.NET Core (C#) でホロジュール Web アプリをつくってみた 当時は React v17 でクラスコンポーネントを利用し、更新や状態を力技で制御した感じでしたので、あらためて React を学習し直し、React v18 + TypeScript と ASP.NET Core でこんな感じに作り直してみました。 学習方法 Udemy で下記講座を受講しつつ、TypeScript や React のドキュメントやチュートリアルを
【第2回】TypeScriptもウェブも仕様や原理から楽しむ | GeeklyMedia(ギークリーメディア) | Geekly（ギークリー） IT・Web・ゲーム業界専門の人材紹介会社
2022年4月に著書『プロを目指す人のためのTypeScript入門』が発売された鈴木僚太さん(https://twitter.com/uhyo_)。QiitaやTwitterでは「うひょ（uhyo）」さんとして、TypeScriptやフロントエンドの話題を中心にウェブ技術に対する踏み込んだ解説でも知られています。 著書ではあえて触れられなかったという「TypeScriptでウェブアプリケーションをどう書くか」という観点へのヒント、なぜそれを書かなかったのか、そして仕様や原理に立ち返って自ら考えることの楽しさについて、株式会社一休CTOの伊藤直也さん(https://twitter.com/naoya_ito)が聞き出します。 ・伊藤 直也さん / 株式会社 一休 執行役員 CTO 新卒入社したニフティ株式会社でブログサービス「ココログ」を立ち上げ、CTOを務めた株式会社はてなでは「はてな
【お詫び】サバイバルTypeScriptにおける、コントリビューションの横取りについて
この度、わたくしsuinが、サバイバルTypeScriptプロジェクトにおいて、コントリビューター様の貢献の横取りともとられかねない失態を犯し、大変なご迷惑をおかけしたことを深くお詫び申し上げます。このお詫びは、私の失態に対して、誠意を持って向き合い、改善に努めるとともに、本件に関わる全ての方々にお詫びを申し上げるものです。 背景 サバイバルTypeScriptは、TypeScriptの入門書であり、ウェブサイトとして公開されており、無料で閲覧できます。このサイトは、月間7万人以上のユニークユーザーが訪れ、多くの方々にご利用いただく書籍となっています。 さらに、サバイバルTypeScriptはオープンソースプロジェクトであり、2019年にわたくしsuinの発案で発足し、現在は3年目になります。プロジェクトはGitHub上で管理され、これまで50名を超えるコントリビューターにご参加いただきま
TypeScriptでのタイプタグによる分岐 - 檜山正幸のキマイラ飼育記 (はてなBlog)
JSON形式で表現されるデータがあったとして、データの型付け〈typing〉をTypeScriptで記述するとしましょう。インターフェイスやクラスを使わずに、次のように型定義するとお手軽です。 type A = { "type" : "a", // A specific } type B = { "type" : "b", // B specific } type C = { "type" : "c", // C specific } 型定義の見た目もJSONっぽいです。 ここで、A, B, C は“お仲間”とみなしていい型達だとします。だとすると、「A, B, C はお仲間である」という情報が欠けています。インターフェイス／クラスなら、お仲間であることは共通の親からextendsして示せます。上の書き方だとextendsは書けません*1。 型のグループに名前を付けてあげればいいでしょう*
えっ？Browser内でNode.jsアプリが動く？？ WebContainerAPIをTypeScriptで動かしてみた
概要 StackBlitzのサービスを支えるWebContainerという素晴らしい技術のAPIが公開されたので、実際に気になっている方に向けて、体験した所感を紹介しようと思います。一見サーバサイドのNode.jsでやっているように見えることが、実際にはブラウザ内部で動いているので、めちゃくちゃすごいです。 対象読者 StackBlitzにお世話になっていて、その裏側の仕組に興味がある方 ブラウザ内で、Node.jsを動かしたいなぁと思っている方 WebContainerに興味がある方 はじめに フロントエンド界隈では、有名なplayground環境と思われるStackBlitz(このZennの挿入もできるサービスなので、見たことある方も多いかもしれません)が提供している、サービスを支える重要な技術である、WebContainer(Webブラウザ上で実現されるWebAssemblyベースの
ついに来る! TypeScript 5.0の新機能を全紹介 @uhyo
本記事は、TechFeed Experts Night#11 〜 JavaScript/TypeScript最前線のセッション書き起こし記事になります。 イベントページのタイムテーブルから、その他のセッションに関する記事もお読み頂けますので、一度アクセスしてみてください。 本セッションの登壇者 セッション動画 皆さまこんにちは、株式会社バベルにてプリンシパルエンジニアをしておりますuhyoです。まもなくリリースされる予定のTypeScript 5.0の新機能が、この発表ですべてわかるように用意しましたのでぜひお聞きください。 TypeScriptのリリースサイクル まずはTypeScriptのリリースサイクルをおさらいしておきましょう。TypeScriptは3カ月に1回のリリースサイクルを採用しており、TypeScript 5.0もそのサイクルに則り、2023年3月に公開される予定です(3
【Next.js,microCMS,AWS】 ポートフォリオサイトを作ってAWS サーバーレスアーキテクチャでデプロイ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに エンジニアを目指し始めて初のポートフォリオサイトを作成しました。 背景としてはインターンを始めて実務につく機会をいただき、本格的な制作物を作れるようになってきたので、形に残したいと思いポートフォリオサイトを作成することを決意しました。 また今後お仕事を自分で獲得したいと考えており、そのために本格的に準備を進めたいと思いました。 まだまだ未熟ですが見て頂けると幸いです。 使用した技術 Next.js TypeScript tailwindcss microCMS AWS S3 AWS CloudFront GitHub Acti
React + TypeScript: Next入門04 動的ルートを定める - Qiita
Next.jsチュートリアルの公式作例を、TypeScriptも加えて、一からつくってみるシリーズの最終回です。プログ投稿ごとのパスをデータから動的につくり、静的に生成した投稿ページにトップページからリンクします。でき上がりがこのNext.js公式作例です。 ブログ投稿ページごとの動的ルートを定める 作例におけるブログ投稿ページごとの動的ルート(Dynamic Routes)のつくり方は、つぎのとおりです。 各投稿のパスは/posts/<id>とします。 <id>はトップレベルのpostsディレクトリに収めたマークダウンファイル名です(拡張子.mdは削除)。 マークダウンファイル名からパスは、つぎのように決まります。 ssg-ssr.mdのパス: /posts/ssg-ssr pre-rendering.mdのパス: /posts/pre-rendering まずつくるのは、つぎのような各
EmacsでTypeScript/React開発する2023 - たごもりすメモ
世間に死ぬほど色々な方法があるのはわかっているがとにかくまっさらな状態から最短手順でEmacsでJSX/TSXが書けるようになりたい! という話。VSCodeとかそういう話には目を背ける。 tsxファイルはweb-modeで起動するようにすればシンタックスハイライトとインデントはうまくいくので、あとはlspを起動するようにすれば快適です！— つかもとたけし (@itometeam) 2023年1月23日 自分で調べつつ試行錯誤したんだけど、最終的にはこのtweetで教えてもらった通りになった。メジャーモードとしてweb-modeを使いつつflycheckとLSPで開発支援。 macOSにインストールしたEmacs*1、およびMELPAにあるパッケージだけで、以下のようになった。 (require 'web-mode) (add-to-list 'auto-mode-alist '("\\.
React + TypeScript: Next入門01 チュートリアルの作例を一からつくってみる - Qiita
Next.jsの公式サイトにはチュートリアル解説があります。その作例https://next-learn-starter.vercel.appをTypeScriptも加え、一からつくってみようというのがこのチュートリアルシリーズの目的です。 Next.js公式チュートリアルは、なかばでき上がったプロジェクトのコピーにコードを書き加えるかたちで進められます。手っ取り早いものの、Next.jsを使った開発の流れがよくわかりません。また、TypeScriptについては、完成したJavaScriptの作例にあとから型づけを与える説明です(next-learn/basics/typescript-final/)。 本チュートリアルシリーズは、プロジェクトにはじめからTypeScriptを加えます。そのうえで、一から公式作例と同じアプリケーションをつくってみましょう。 React + TypeScri
React + TypeScript: Next入門03 プリレンダリングとデータ取得 - Qiita
Next.jsチュートリアルの公式作例を、TypeScriptも加えて、一からつくってみるシリーズの第3回です。アプリケーション内のディレクトリに収めたマークダウンファイルからデータを読み込んで、トップページに表示してみます。 プリレンダリングとは プリレンダリングはNext.jsのデフォルトで、各ページはあらかじめレンダリングされます。ページのHTMLをクライアント側のJavaScriptにすべてつくらせるのでなく、Next.jsが静的な処理は先に済ませておくということです。プリレンダリングは、パフォーマンスとSEOを高めるのに役立つでしょう。 生成されたページそれぞれに関連づけられているのは、必要最小限のJavaScriptコードです。ブラウザがページを読み込むと、そのJavaScriptコードが実行され、完全にインタラクティブになります(「ハイドレーション」と呼ばれます)。 Next
React + TypeScript: Next入門02 イメージとメタデータおよびCSSを扱う - Qiita
Next.jsチュートリアルの公式作例を、TypeScriptも加えて、一からつくってみようというシリーズの第2回です。前回は、トップページを書き替えて、新たに追加した別ページとリンクしてみたというくらいでした。今回から、公式作例に少しずつ近づけてゆきましょう。 Imageコンポーネントでイメージを差し込む Next.jsはイメージなどの静的素材も扱えます。素材ファイルを置くトップレベルは、publicディレクトリです。Reactコンポーネントを収めるpagesと同じく、アプリケーションのルートから参照できます。 ページに表示するプロフィール画像を用意しましょう。ディレクトリpublicにimagesをつくってください。 画像をpublic/images/profile.pngとして収めます。 next-learn/basics/basics-final/public/images/pro
スクリプト言語TypeScriptでWebAssembly――「AssemblyScript」を体験する
JavaScriptとWebAssembly 連載第1回では、WebAssemblyの概要を紹介し、さまざまなプログラミング言語の選択肢に触れました。静的な型付け言語であるC++やRustは、WebAssemblyのための開発言語として最適なのですが、学習コストの点で問題があります。できれば、フロントエンド開発でなじみ深いJavaScriptなどの言語を用いて、WebAssemblyアプリケーションを開発したいと思う人も少なくないはずです。 残念ながら、本稿作成時点において、JavaScriptのコードをWebAssemblyに直接コンパイルする手段は用意されていません。しかし、AltJS（JavaScriptを置き換える言語）であるTypeScriptには、WebAssembly開発のためのツールとしてAssemblyScriptがあります。このAssemblyScriptを用いることで
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
爆速React+TypeScript+Viteの環境構築 - Qiita
