Vite ってよく聞くけど何なんですか？ あれは
初めに Vue.js の学習をしているとよく「Vite」という単語を目にすると思います。 一体全体あれはなんなのでしょうか？？ なんだかよく分からないコマンドを打つと、いつの間にかプロジェクトが作成されていたり、 ファイルを編集するだけでブラウザで動くようになっていたりします。 そもそも読み方も良くわかりません 😵💫 (ヴィテ...？ ヴァイト...？) この記事では、Vite についての基本的な情報をまとめてみます。 発音？ 発音の仕方は「ヴィート」です。こちらは公式ドキュメントにも書かれています。 Vite（フランス語で「素早い」という意味の単語で /vit/ ヴィートのように発音）は、 しかし、実はこれにはやや表記揺れがあって、「ヴィット」と表記されているところもあります。 例えば、話題になった Kawaii ロゴではそのように表記されています。 まぁこれらはカタカナ表記の限界
TypeScript の条件型と分配法則、あるいはユニオン型の写像
TypeScript の Extract について調べていたら、自分がユニオン型の分配法則について何も理解していなかったことに気づいたので、記事にまとめておく。 Extract の基本的な使い方 // https://typescriptbook.jp/reference/type-reuse/utility-types/extract type Grade = "A" | "B" | "C" | "D" | "E"; type FailGrade = Extract<Grade, "D" | "E">; //=> "D" | "E" これは単に ("A" | "B" | "C" | "D" | "E") & ("D" | "E") のインターセクションを取ってるだけなのでは？ と今まで考えていたが、全然違った。 Extract 型の TypeScript 上の定義はこうなっている。
デザインパターンを TypeScript で
複雑なオブジェクトを段階的に構築できます。 このパターンを使用すると、 同じ構築コードを使用して異なる型と表現のオブジェクトを生成することが可能です。
Next.jsの静的サイト生成(SSG)について確認 - わくわくBank
Next.jsのサンプルプロジェクトとして登録されているコードを活用して、静的サイトの生成方法(SSG)について動作確認します。その後、Next.jsの主な機能( ルーティングシステム提供コンポーネントビルド時にデータを取得する方法 )について取り上げます。 サンプルプロジェクトを構築して動作確認 プロジェクト構築 ( create-next-appコマンド ) Next.jsのプロジェクト構築用に create-next-appコマンド が提供されています。 create-next-app --help で主な利用方法を確認できます。 $ npx create-next-app --help Usage: create-next-app <project-directory> [options] Options: -V, --version output the version numb
TypeScript wayでReactを書く - Qiita
TypeScriptはJavaScriptに静的型による型チェックを加えた言語で、Microsoftによって開発されています。TypeScriptの登場以降その人気上昇は留まるところを知らず、Webアプリの開発に採用される例も増えているようです。TypeScriptはJavaScriptと同じ構文・言語機能を持ち、唯一の違いは型がある点、つまり型が書けて型チェックがあるというところです1。 また、ReactはJavaScript向けのUIライブラリで、HTML要素やコンポーネントを第1級オブジェクトとして扱いUIを構築するスタイルが特徴的です。こちらはFacebookが開発しています。 この最高のプログラミング言語（個人の感想です。）に最高のライブラリ（個人の感想です。）を組み合わせるのがWebアプリ開発におけるまさに唯一無二の解であることはかけらも疑う余地が無いのですが（個人の感想です。
TypeScriptの"型"を学びたいあなたへ。type-challengesのすゝめ - Qiita
先日以下ツイートをしたら思いの外良い反応もらえたので、より詳細な紹介記事を書いてみました。 これは必見だわ!! TypeScriptの型についての問題集 想定に従って独自のユーティリティ型を作っていく感じの問題がレベル別に提供されてる Playgroundのリンクから手を動かしながらチャレンジできるので凄くやりやすい （自分はeasyの問題でも分からんのあった。頑張ろ😅）https://t.co/tkEFe7VrBQ — Kawamata Ryo (@KawamataRyo) September 3, 2020 type-challengesとは type-challenges/type-challenges: Collection of TypeScript type challenges with online judge VueUseやVueDemiの開発者である @antfu7さ
フロントエンドメンバーのTS型力向上を狙ったtype-challenges活用術 - HRBrain Blog
どうも、こんにちは。HRBrain でフロントエンドエンジニアをやってます。ちゃんかつです。 この前初めて代々木公園に行ったのですが、めちゃくちゃ広いですね。自然がいっぱいで気持ちが良かったです。 さて、HRBrain では今年の 6 月から、毎週月曜日に「type-challenges」を用いて社員の TypeScript （以下 TS） の型表現の向上を図っています。 この記事では、HRBrain ではなぜ type-challenges を解く時間を設けているのか、また、type-challenges への取り組み方を紹介します。 なぜ type-challenges を利用するのか いろいろ理由があるのですが、「解答がなるべく簡単にできる」が一番大きな理由です。 Typescript Playgroundで解答することが出来て環境構築の手間は不要、そして、type-challeng
Modern TypeScript and React Development in Vim
When I started working in TypeScript and React, I found it challenging to continue using vim. I switched to Visual Studio Code because it was better suited for the task at hand. But what made it better boiled down to the language server integration which provided all the common code actions you would expect from an IDE such as automatic importing, symbol renaming, tool tip display of compiler and
React Hooks と TypeScript で簡単 TODO アプリ
1. はじめに 対象とする読者 以下のような人を読者として想定しています。 ある程度 JavaScript を習得している人 React 公式チュートリアルを終えたものの、次のステップを探しているような人 Node.js をインストール済みである人 Git Bash もしくは何らかの UNIX シェルの操作をある程度習得している人 コードエディタには、 Visual Studio Code（以下、VSCode）を利用します。VSCode に備わる機能の利用を前提とした記述もありますので、インストールしておくことをおすすめします。 目標とする Todo アプリ タスク (Todo) を既済・未済・削除済みなどの状態によってフィルタリングできる 登録済みタスクを編集できる 削除済みアイテムを「ごみ箱」フィルタから完全に削除できる 他のおすすめのドキュメント 2. 開発環境の準備 Vite.js
Prisma: Node.js & TypeScript向けの完璧なORM
本記事は、@nikolasburk氏による「The Complete ORM for Node.js & TypeScript」（2021年4月21日公開）の日本語翻訳を、著者の許可を得て掲載しているものです。今後Prismaの公式ブログの日本語翻訳の許可をいただいたので、このアカウントで継続して翻訳していきます。※画像やリンクは公式のBlogからお借りしています。 Prismaは、Node.jsとTypeScriptのための次世代ORMです。2年以上の開発期間を経て、すべてのPrismaツールが製品化の準備が整ったことをお伝えできることに興奮しています! コンテンツ オブジェクト-リレーショナルマッピングの新しいパラダイム あらゆるスタックに対応するPrisma ミッションクリティカルなアプリケーションでの運用に対応 オープンソースを超えて お手伝いできることは？ Prismaを始めよう
Documentation - TypeScript for Java/C# Programmers
TypeScript is a popular choice for programmers accustomed to other languages with static typing, such as C# and Java. TypeScript’s type system offers many of the same benefits, such as better code completion, earlier detection of errors, and clearer communication between parts of your program. While TypeScript provides many familiar features for these developers, it’s worth stepping back to see ho
TypeScript 3.7の`asserts x is T`型はどのように危険なのか - Qiita
TypeScirptの動向を少し熱心に追っている方ならば、8月頭にAnders HejlsbergさんがTypeScriptリポジトリに次のプルリクエストを出したことは記憶に新しいでしょう。 Assertions in control flow analysis これはTypeScript 3.7で導入される予定の機能で、関数の返り値の型宣言においてasserts x is T （xは引数名でTは型）という構文を書くことが可能になるというものです。 この機能はたいへん面白いのですが、誤った使い方をするととても危険です。そこで、この記事では、assertsという新しい型述語1を正しく使いこなせるように皆さんをガイドします。 3行でまとめると assertsによる宣言はTypeScriptにより正しさがチェックされるわけではありません。 よって、assertsを使う場合安全性を保証する責任はコ
TypeScriptで | を使わずにユニオン型を得る方法大全 - Qiita
ユニオン型は、string | numberのような記法で「stringまたはnumber」のような意味の型を作る方法です。TypeScriptプログラミングではユニオン型は非常に便利で、様々なインターフェースを的確に型で表現するためには欠かせない道具です。 ユニオン型を得るためには上の例のように|記法を使いますが、この記事では|と書かずに型推論を用いてユニオン型を得る方法を集めてみました。 構文系 JavaScriptの構文の意味から型推論でユニオン型が推論される系です。 条件分岐 条件分岐の構文では、ランタイムの条件によって結果が変わるため、コンパイル時には結果がどちらに分岐するか分かりません。そのため、TypeScriptコンパイラはどちらでも対処できるようにユニオン型を推論します。 条件演算子
TypeScriptで最低一つは必須なオプションオブジェクトの型を作る - Qiita
document.addEventListener('touchend', handler, { once: false, passive: true, }); この例では第3引数でオプションたちをオブジェクトにまとめて渡しています。 オプションたちは往々にして省略可能です。 さて、TypeScriptでもこのようなオブジェクトに型をつけることは容易です。TypeScriptにはオブジェクトの省略可能なプロパティを意味する?が備わっているからです。 この例では、Options型の3つのプロパティは全て省略可能です。そのため、{capture: false, once: true, passive: false}や{passive: true}、あるいは{}などは全てOptions型がつきます。 この記事ではもう少し複雑な場合を考えます。オプションのうち、「どれか一つは必須でほかは省略可能」
TypeScriptのreadonlyプロパティを使いこなす - Qiita
TypeScriptでは、オブジェクト型のプロパティをreadonlyにできる機能があります。型でreadonlyと宣言されているプロパティを書き換えようとするとコンパイルエラーとなります。 type MyObj = { readonly foo: string; }; const obj: MyObj = { foo: "Do not change me!" }; // これは MyObjのfooプロパティがreadonlyなのでコンパイルエラー obj.foo = "hi";
東京大学の講義「AWSによるクラウド入門」をTypeScriptで写経した - dackdive's blog
AWSによるクラウド入門 少し前に話題になっていた東京大学の講義資料をやってみたので、内容、感想などメモ。 講義で使用するソースコードはすべて Python で書かれていますが、自分が実際に使うとしたら TypeScript で書くだろうなと思ったので TypeScript で写経しました。 が、CDK のコードはすべて TypeScript で書けましたが、Lambda 関数や動作確認用のスクリプトなどを全て置き換えるところまでは至らず、Python のままです。 写経したリポジトリは https://github.com/zaki-yama-labs/intro-aws に。 学べること 本講義資料には全部で5つのハンズオンがあります。 各ハンズオンで利用する AWS のサービスについては以下の通り。 全般 AWS CDK: Cloud Development Kit CloudFor
部分写像 - Wikipedia
単射な部分写像の例 単射でない全域写像の例 数学において部分写像（ぶぶんしゃぞう、英: partial mapping）あるいは部分函数（英: partial function）は適当な部分集合上で定義された写像である。即ち、集合 X から Y への部分写像 f は X の任意の元に Y の元を割り当てることが求められる写像 f: X → Y の概念を一般化して、X の適当な部分集合 X' の元に対してのみそれを要求する。X′ = X となる場合には f は全域写像 (total function) と呼ばれ、これは写像と同じ概念を意味する。部分写像を考えるときには、その定義域 X' がはっきりとは分かっていないという場合もよくある。 基本概念[編集] 部分写像 f に対し f(x) が定義される値 x 全体の成す集合（上記の X'）を f の定義域と呼び、D(f) や Def(f) のよ
TypeScript + React: Component patterns
Published on July 28, 2020 Stefan on Mastodon Reading time: 10 minutes More on TypeScript, React, Preact This list is a collection of component patterns for React when working with TypeScript. See them as an extension to the TypeScript + React Guide that deals with overall concepts and types. This list has been heavily inspired by chantastic’s original React patterns list. Contrary to chantastic’s
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
How to unwrap the type of a Promise?
TypeScript 練習問題集
