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を用いることで
TypeScriptでGPT-3.5を使ってChatGPTクローンを作る1 - GPTで検索エージェント
OpenAI が提供している ChatGPT は非常に面白いですね。今年以後、GPTやChatGPT周りがさらに流行ると思います。 この記事は、TypeScriptでChatGPTクローンを作る第一弾です。長くなりすぎるため、この記事では、GPTを使った検索エージェントを実行するまでを取り上げます。 検索エージェントは「ぼっち・ざ・ろっくの作者は？」と尋ねたら検索エンジンとGPTを使って「はまじあき」という結果を生成できる技術です。 またこの記事や、続く記事でLangChainのプロンプトをあれこれ読み解いていこうと考えています。 筆者は機械学習の初心者であるため、間違ったことが書かれている可能性があります。間違いがあった場合は、ぜひご指摘いただけると幸いです。 なお、この記事では添削にChatGPTおよびGPT-3.5を使っています[1]。 どうやってTypeScriptでChatGPT
「React Native 0.71」ではTypeScriptが事実上の標準言語に──Metaの新機能解説より
米Meta Platformsは、モバイルアプリフレームワークReact Nativeの次世代版となる、「React Native 0.71」に加わった新機能について公式ブログの1月3日（現地時間）付け投稿で解説している。本稿公開時点で、React Nativeの最新安定版はバージョン0.70。次世代版のバージョン0.71については、リリース候補版（RC：Release Candidate）5が登場している。React Nativeは、MITライセンスで公開しているオープンソース・ソフトウェア。 React Nativeのバージョン0.71では、標準言語が事実上TypeScriptに代わる。新機能も、TypeScriptに関係するものが中心になっている。1つ目は、新しいアプリケーションを作成し始めるときに、コマンドでテンプレートを作成させると、TypeScriptのファイルを出力するように
Storybook 7 を Vue 3 + TypeScript ではじめよう！
想定読者や使い方などについては「はじめに」の章をご覧ください。
NestJS x TypeScript x Mongoose で、インスタンス生成時に Type Check が行われるようにする - Qiita
// cats.schema.ts import { Prop, Schema, SchemaFactory } from '@nestjs/mongoose'; import { HydratedDocument } from 'mongoose'; @Schema() export class Cat { @Prop({ type: String, required: true, }) name: string; @Prop({ type: Number, required: true, }) age: number; } export type CatDocument = HydratedDocument<Cat>; export const CatSchema = SchemaFactory.createForClass(Cat); // cats.repository.ts im
2023-01-06のJS: Vue 2のEOLは2023年末、NextAuthはAuth.jsに、React NativeのFirst-class Support for TypeScript
JSer.info #625 - 2022 Year In Review | The Vue Pointという記事では、Vue 2のEnd of Life (EOL)が改めて周知されています。 Vue.js - Vue 2 LTS, EOL & Extended Support Vue.js 2は2023年12月31日にEOLとなり、サポートが終了されます。 サポート終了後はセキュリティリリースも行われなくなる予定です。 NextAuth.jsがAuth.jsの一部という扱いに変更されました。 これによって、SvelteKitやSolidStartでもNextAuthが実装していた認証、認可の仕組みが利用できるようになっています。 React NativeがTypeScriptをFirst-classとしてサポートすることが発表されました。 First-class Support for
AWS SDK for JavaScript（Version 3） と TypeScript を用いて S3 バケットの一覧を取得するサンプルコードを試してみた | DevelopersIO
こんにちは、アノテーションの及川です。 AWS SDK for JavaScript（Version 3）と TypeScript を用いて、自分が所有している S3 バケットの一覧を取得するサンプルコードを試していきたいと思います。 環境構築 Node.js のインストール 本検証ではローカルの PC（Mac） から行います。 検証には、Node.js の環境が必要になるため、まだインストールされていなければ、こちらから、インストールを行ってください。 % node -v v16.13.1 % npm -v 8.1.2 作業用ディレクトリの作成 プログラムを作成／実行する作業用ディレクトリを作成します。 コードエディターは Visual Studio Code を使用します。 そのため、作成した作業用ディレクトリに移動したら、下記のように code .コマンドを入力して、Visual S
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
爆速React+TypeScript+Viteの環境構築 - Qiita
JavaScript / TypeScript の豆知識 10 選 - Qiita
TypeScript: satisfiesオペレーターの使い所のひとつとして - Qiita
TypeScript: ESモジュールのTypeScriptをNodeで直接動かす方法 - Qiita
