VIRTUAL ART BOOK FAIR 2020のWebGL開発を担当した - マルシテイア
2020-11-16〜2020-11-23 に開催された VIRTUAL ART BOOK FAIR の Web サイト開発を担当した。 また、イベントの一環として、開発の裏側についてYoutube Liveで話したりした。 https://2020.virtualartbookfair.com/ www.youtube.com この記事では、プロジェクト参加の経緯や開発のすすめ方、僕が技術的に頑張ったことについて振り返る。 VIRTUAL ART BOOK FAIR とは 世界観ができるまで 開発の体制 技術的な構成 技術的に頑張ったこと 文字表示 パフォーマンス調整 ロード時間短縮 並列ロード 画像を GLB にまとめる やってないこと GPU インスタンシング Tree Shaking 感想 VIRTUAL ART BOOK FAIR とは 毎年開催されている TOKYO ART B
2020/07/28 時点の Vue 2.x + TypeScript について言える確かなこと - potato4d
できる・できないをまとめておく。 なお、 Class Component の記法は Vue 3 の仕様から Drop されたので、そこについて言及する場合はその旨を明確にする。 this の型について 基本的に全て有効化できる。 Vue 2.5 より this の型が正しく使えるようになっている。しかし、いくつかの条件がある tsconfig.json において、 noImplicitThis が true である必要がある 既存プロジェクトからの移行でない限りは strict: true であるはずなので、問題ない 逆に、既存プロジェクトの TS 化については、 noImplicitThis を false として Vue Template 以外の純粋な JavaScript 部分から段階的に移行できる。 computed などについて、戻り値を明示的に指定する必要がある これは Vet
TypeScriptのInterfaceでstaticが使えない件について - sudow
Typescriptで初めてジェネリックをちゃんと使って、プロジェクトの共通部分をモジュールとして作るというのをやっていた。
TypeScript で型レベル Brainfuck - Object.create(null)
2024-04-15 追記: 内容をアップデートした記事を書きました. susisu.hatenablog.com TypeScript の型システムはチューリング完全ということが知られていますが, 同じくチューリング完全な言語である Brainfuck のインタプリタを実装することで, その計算能力を確認することができます. この記事のコードは TypeScript 3.8.3 で動作確認しています. ゴール 型レベルで Brainfuck のインタプリタを実装します. type Program = [ ",", ">", ",", "<", "[", ">", "[", ">", "+", ">", "+", "<", "<", "-", "]", ">", "[", "<", "+", ">", "-", "]", "<", "<", "-", "]", ">", ">", ">",
2019年版: JavaScriptのループの考察 - Qiita
JavaScript いつの間にかずいぶん違う言語になったなぁ、と思うけど、 for(let i = 0; i < 100; i++) { /.../ } これはまだこう書くしかないのかな？const使えない？ — Takuo Kihira (@tkihira) June 6, 2019 このツイートを起点に、パフォーマンスの話が出て、紀平さんも計測されていたんですが自分でも思うところがあって計測して考察してみました。 実測前の僕の予想（というか過去の経験）は 普通のforが最速 for-inは速度以前に使ってはいけない for-ofとforEachは関数呼び出しがループごとに挟まるのでどちらも遅いが同じ水準 for ofは言語標準なので最適化が行われる期待！ でした。さて、結果はいかに？ それぞれのループの解説 伝統的なfor 伝統的なループが一番軽いというのはみんなが認めるところです。
Phantom property pattern - Ryusei’s Notes (a.k.a. M59のブログ)
TypeScriptは、JavaScriptエンジンの動的セマンティクス上に、静的な型システムのセマンティクスが重なっているものです。ここで、JavaScriptとしては正しく実行できても、TypeScriptの型システム上ではちゃんと型が付かないという場合もあります。ときには、TypeScriptで型がつくように大幅に書き換えないといけない場合も出てきたりして、そうなると大変です。それでも、TypeScriptの型システムは高度な機能を持っているので、大体の場合は、うまく表現してやると、JavaScriptらしい書き方のままで型をつけることができてしまいます。今回は、JavaScriptでよくある、プリミティブ値をそのまま取り回すパターンに型を付けたいと思います。 プリミティブ型を扱うプログラミングは、素朴でわかりやすいですが、型の考えからするとかなり悪いものです。こういうプログラミング
Redux はもう辛くない。redux-aggregate - Qiita
書き味の悪さは致命的なレベルだと思っています。この課題を解決するべく、ヒントを求めて様々な状態管理ライブラリを試しました。unistore や parket、Vuex、いずれもイベント駆動ですが、そこには書き味醸成のための共通点があることに気づきます。 それは、状態を変更する手続きが少ないということです。それらにインスパイアされた Reduxヘルパーが redux-aggregate です。考案にあたり気をつけたのは以下の点です。 既存のエコシステムを侵害しない 関数型で完結させる TypeScript による推論 0 dependencies で薄いこと なお、これは Redux を扱う上でのヘルパー（非middleware）のため、Redux の基本的な理解は予め必要です。 📝 コードの紹介 【Before】今までは「+1」のために、これだけのコードが必要でした。 const ini
TypeScript 2.8 の Conditional Types について - Qiita
今日はTypeScript2.8で導入されたConditional typesについて書きます。 TypeScriptの型システムへの機能追加という意味では、keyofやMapped Types以来の変更と言ってよいでしょう。 お察しのとおり、こういう機能追加をぶち込んでくるのはAnders Hejlsberg御大です1。
Announcing TypeScript 3.0 | TypeScript
TypeScript 3.0 is here! Today marks a new milestone in the TypeScript journey, serving JavaScript users everywhere.If you’re unfamiliar with TypeScript, it’s not too late to learn about it now! TypeScript is an extension of JavaScript that aims to bring static types to modern JavaScript. The TypeScript compiler reads in TypeScript code, which has things like type declarations and type annotations,
TypeScriptのasync functionに戻り値の型を明記すると，Promiseの型パラメータの推論が効かなくなる (場合がある) - 職質アンチパターン
前提． $ $(yarn bin)/tsc --version Version 2.8.3 async を付けない場合，以下のコードはコンパイルが通る． function foo(): Promise<string> { return new Promise((resolve) => resolve('foo')); } async を付与すると上記コードはコンパイルが通らなくなる． // NG! async function foo(): Promise<string> { return new Promise((resolve) => resolve('foo')); } 以下のように，戻り値側にも型パラメータを付与するとコンパイルが通る． async function foo(): Promise<string> { return new Promise<string>((resol
Pattern Matching with TypeScript | Manuel Alabor
by Manuel Alabor TypeScript does not have any pattern matching functionality built in. This article shows several ways how you can replicate the core of a simple pattern matcher using a few simple structures and functions within TypeScript. Resulting code will have improved maintainability and better runtime type safety when done right. What is Pattern Matching? Pattern matching is a fundamental a
なぜ TypeScript の型システムが健全性を諦めているか - Qiita
class Animal { kind: string } class Dog extends Animal { dog_type: string } function showDogType(dog: Dog) { console.log(dog.dog_type) } // 代入不可のコンパイルエラーになってほしい const someAnimalFunc: (animal: Animal) => void = showDogType // 実際はここでランタイムエラー someAnimalFunc(new Animal()) このコードがコンパイルエラーにならず, 実行時エラーになってしまうことについて. TL;DR 型システムの健全性 (型の矛盾が生じないこと) vs 利便性のトレードオフから, 現在の TypeScript は健全性を諦めている 関数型はパラメータについて biv
Vue + TypeScriptなプロジェクトにESLintを導入する - Please Drive Faster
TypeScript + VueなプロジェクトでESLintを使ってみて、現状必要なモジュールが複数あって少し複雑だったのでまとめておきます。 サンプルは以下です。 github.com 内容はどうでも良いんですが、こんな感じのすごく簡単なTODO風のアプリケーションです。 なぜEslintを使うか JavaScriptのためのLintingツールはたくさんありますが、Vueのroadmapにもある通り、Vueの公式スタイルガイドをサポートするESLintプラグインがESLintのメンテナによる公式プラグインとして作られています。 GitHub - vuejs/roadmap: Roadmap for the Vue.js project これからもVueの公式としてサポートされていくと思うので、特にこだわりがなければESLintを使うのが良いかと思います。 ESLint for Type
Type-level TypeScript - ryota-ka's blog
この記事は以下のページに移転しました． blog.ryota-ka.me この記事は CAMPHOR- Advent Calendar 2017 の21日目の記事です． @ryota-ka です．普段は HERP という会社でリードエンジニアとして働いています．一昨日19日にサービスのティザーサイトを公開したばかりなので見てください． herp.cloud さて，12月といえば，万人受けしなさそうなネタでブログを書いては「はてブが付かねえ」と文句を言う季節ですが，今年もそういう方針で，TypeScript での型レベル計算について書きます．型レベルでの自然数などが定義できると，リストに型レベルで長さを付けることができて，空リストの先頭の要素を取ろうとしてランタイムで落ちる，という悲劇が生じる可能性をコンパイル時に排除できてとても嬉しいですね． なお，使用している TypeScript のバ
世界がEnumから隠した秘密をひとつひとつ見つけていこうな #TypeScript - 角待ちは対空
qiita.com はてなエンジニア Advent Calendar 2017 5日目の記事です。 前回はid:chris4403によるAmazon Pollyを試してみた - memo logでした。いやぁ社長さすがです！！ さて今日はEnumについての話題です。 TypeScriptは実行時に影響を及ぼすような独自機能は積極的に導入しない傾向にありますが、ぱっと思いつく例外がEnumとNamespace(旧Internal module)です。 今日はそのEnumについての話です。 Enumのコンパイル結果 TypeScriptを書く上でJavaScriptへのコンパイル結果を意識することは少ないと思いますが、Enumについてはコンパイル結果を知っていたほうが理解が早いと思われます。 例えば以下のコードは enum IdolAttr { cute, cool, passion, } 以
今年一書いてよかった関数と型 - Qiita
function modify<T extends object, K extends keyof T>(key: K, f: (old: T[K]) => T[K], struct: T): T function modifyC<K extends string, T>(key: K, f: (old: T) => T): <U extends {[P in K]: T}>(x: U) => U { return function <U extends {[P in K]: T}>(struct: U): U { const newStruct: U = Object.assign({}, struct); newStruct[key] = f(struct[key]); return newStruct; } }
TypeScriptのカレンダー | Advent Calendar 2017 - Qiita
The Qiita Advent Calendar 2017 is supported by the following companies, organizations, and services.
あなたはどこまで潜れるか？TypeScriptの世界にディープ・ダイブ！
こんにちは、編集長の白石です。 この記事は、9月24日に開催されたHTML5 Conference 2017に登壇したエキスパートに、お話されたセッションのトピックを中心に語っていただこうとういものです。セッションの内容をより深く理解する手助けになるだけでなく、本記事単体でも面白く読んでいただけることを目指しています。 今回お話を伺ったのは、株式会社サイバーエージェントの青野健利さんです。 青野さんのセッション「Deep dive into TypeScript」に関するスライド資料は、こちらで公開されています。 なお本稿のサンプルコードは、ほとんどが上記スライドから引用したものになります（一部説明を簡略化するため、青野さんの許可を得て筆者が書き換えた部分もあります）。 筆者からのお詫び: 今回のインタビュー、および対象セッションは大変内容が濃く、記事にすると長大になりすぎる＆スライド資料
type of typing typescript type - hiroqn NW's project
https://pbs.twimg.com/profile_images/888409029436817408/zgYun8V5_400x400.jpg
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ResizeObserver API declarations missing · Issue #28502 · microsoft/TypeScript
