Writable Computed を活用して読みやすいVueコードを書くためのTips - ANDPAD Tech Blog
こんにちは、ANDPADフロントエンドエンジニアの小泉（@ykoizumi0903）です。 ANDPADでは入社当初からずっとVueでの開発を行っており、特に直近2年はComposition APIで開発しています。 今回は、Vueでの開発を続けている中で、個人的に最近気に入って積極的に使っている、Writable Computedの話をしたいと思います。 このWritable Computed、一応ドキュメントには必ず書いてあるのですがどうにも影が薄く、バージョン3に合わせて刷新された英語版ドキュメントでは「書き込み可能なcomputedが必要なのはレアケース」と書かれているくらいなので、経験の長いVueエンジニアであっても、ほとんど使ったことがないという方も多いのではないでしょうか。 私自身も、このsetter関数について、存在は以前から知っていたものの、どういう使い道があるのかよくわ
TypeScriptのunsafeな操作まとめ - Qiita
初めに TypeScript(以下TS)はJSに静的型システムを取り入れた言語です。 しかしTSの型システムには多くの穴があり、知らないと型の整合性を壊してしまいます。(型システムが健全でないという) そこで今回はそのような操作をまとめてみました。 間違え、不足等があればコメントで指摘してくださると助かります。 この記事の目的 この記事は「TSの型システムの穴」を批判することが目的ではありません。 実行時のオーバーヘッドを無くすことや利便性などとのトレードオフであることは理解しています。 TSを書く多くの人が「このような操作をすると型の整合性が壊れることがある」ということを理解した上で使ってほしいというのがこの記事の目的です。 型システムの健全性とは 静的言語に限ると、「コンパイルが通ったなら実行時に型情報と値が矛盾しない事が保証されている」事を言います。 例えば「number型の変数に"
敗北者のTypeScript - Qiita
TypeScriptはJavaScriptに静的型を導入したプログラミング言語で、登場から現在までその人気を増し続けています。 動的型付き言語であるJavaScriptに静的型の安全性（コンパイル時にバグ・間違いを発見することができる能力）を与えることで、TypeScriptはJavaScriptによる開発の効率を上げてくれます。 裏にJavaScriptがあるという特性もあり、TypeScriptは「部分的に静的型チェックをする」というような挙動をサポートしています1。詳しくは後述しますが、これによりJavaScriptからTypeScriptへの移行が可能となっています。TypeScriptは@ts-check（あるいは@ts-ignore）などを通じてこのようなユースケースも手厚くサポートしています。 このことの裏返しとして、TypeScriptを利用するときは注意すべき点があります
never型 | TypeScript入門『サバイバルTypeScript』
never型は「値を持たない」を意味するTypeScriptの特別な型です。 neverの特性何も代入できないnever型には何も代入できません。
Documentation - Creating Types from Types
TypeScript’s type system is very powerful because it allows expressing types in terms of other types. The simplest form of this idea is generics. Additionally, we have a wide variety of type operators available to use. It’s also possible to express types in terms of values that we already have. By combining various type operators, we can express complex operations and values in a succinct, maintai
型定義ファイル (.d.ts) | TypeScript入門『サバイバルTypeScript』
自身のプロジェクトでTypeScriptでコーディングする場合は型を宣言することにより、IDEやエディターの補完機能やコードチェックを行えます。しかし外部のパッケージ(npm)を利用する場合は型定義ファイルが含まれているとは限りません。 型定義ファイルとは型定義ファイルとはアクセス可能な宣言を記述したファイルです。拡張子は.d.tsです。 型定義ファイルは主にパッケージを配布するために作成されます。TypeScriptはJavaScriptにコンパイルされるときに型情報は無くなってしまいます。そのままJavaScriptパッケージを利用すると型定義の恩恵を得ることができません。しかし型定義ファイルを同梱することにより補完やコードチェックとして利用することができます。 残念なことにnpmに公開されているすべてのパッケージに必ずしも定義ファイルが存在するとは限りません。こちらに関しては型定義
【vue2 / vue3 】書き方の変更点まとめ(TypeScript) - Qiita
TypeScriptで書く、vue2とvue3の変更点 詳しい説明は割愛した書き方の変更点の備忘録です。 ※他の変更点等もあると思いますが、現時点で自分が使ったもののみを挙げています。 ここにない情報やご指摘などぜひ教えてください！ まずは同じコードのvue2とvue3の比較です。 ↓表示させたい画面はこちら インプットタグに入力した文字をv-modelで表示させるシンプルな挙動です。 クリアボタンを押下すると入力した文字が消えます。 vue2での書き方 <template> <div> <h3>名前を入力してください</h3> <span>名前：</span> <input type="text" v-model="name" /> <br /><br /> <div> 私の名前は「{{ name }}」です。 <button type="button" v-on:click="clea
簡単な例で始めるVue3でTypeScript入門 | アールエフェクト
以前はVueのプロジェクトの作成する際はVue CLIを利用することが推奨されていましたが2022年2月からVue3がデフォルトのバージョンとなりVue CLIはメンテナンスモードに入りました。新規にプロジェクトを作成する場合はViteを元にしたnpm install vute@latestコマンドを利用することが推奨されています。 本文書では現在推奨されているViteベースのプロジェクト作成ツールとVue CLIを利用した手順について説明を行っています。 環境構築(Viteベース) Vue.jsプロジェクトを作成するためにnpm init vue@latestコマンドを実行します。npm init vue@latestを実行すると裏側ではcreate-vueが実行されます。 % npm init vue@latest create-vueではプロジェクト名とプロジェクトに追加する機能を聞
TypeScript入門『サバイバルTypeScript』〜実務で使うなら最低限ここだけはおさえておきたいこと〜
本書『サバイバルTypeScript』は実務でTypeScriptを使う開発者のための入門書です。そして、このページはTypeScriptの特徴を最速で把握できるよう、数百ページからなる本書のコンテンツをつまみ食いした要約です。 » 本書ついて詳しく知る » とにかく今すぐTypeScriptを書いてみたい TypeScriptとはJavaScriptのスーパーセットとなるプログラミング言語。静的型付け言語であり、プログラムの正しさが静的に検査できる。ライブラリやIDEなどの開発環境が充実しており、大きなエコシステムを持っている。Microsoftが2012年に開発し、オープンソースで公開した。» TypeScriptの特徴について詳しく知る » TypeScript誕生の背景について詳しく知る TypeScriptはJavaScriptのスーパーセットスーパーセットとは、元の言語との
バックエンドエンジニアが Next.js でモダンなフロントエンド開発を始めるにあたり学習したこと
2021年秋ごろ、副業のような形で Next.js による新規フロントエンド開発のお手伝いをさせていただくことになりました。プライベートの空き時間でフロントエンドの学習をし、今はひとまず開発できるようになってきた気がするので、これまで学んできたことをご紹介します。 基本の TypeScript, React, Next.js だけでなく、GraphQL の周辺ツールやテストについても学習しました。 これまで 当時、Web 系の受託開発会社にて主に Ruby on Rails でバックエンドの開発をしていました。TypeScript, React は学生の頃から趣味で書いていました。 テストは、Rails での開発なら RSpec や Capybara で書いていましたが、JS ではほぼやったことがありませんでした。GraphQL は全くの未経験でした。 やったこと React チュートリア
TypeScript: <T>の書く位置チートシート - Qiita
この投稿はTypeScriptのジェネリクスの型変数(type parameter)をどこに書くのかのチートシートです。 <T>の書く位置まとめ 関数宣言 関数式 アロー関数 メソッド宣言 関数型 コンストラクタ型 関数シグネチャ コンストラクタシグネチャ: 引数リスト()の直前 クラス宣言 インターフェース宣言 型エイリアス: 識別子の直後 <T>の書く位置チートシート 関数宣言
any禁止 絶対に型付けを諦めないための便利なユーティリティ関数 / techstand6
2021/11/10 TECH STAND #6 TypeScriptにて発表した資料です。
TypeScriptのJSDocサポートでできること、できないこと
TypeScriptの主要な入力ファイルは .ts, .tsx, .mts, .cts ですが、JavaScriptファイル (.js, .jsx, .mjs, .cjs) も読み込んで処理することができます。JSDocによる型アノテーションを認識するため、生のJavaScriptでもそれなりに型をつけることができます。 本稿ではタイトル通り、TypeScriptのJSDocサポートでできることとできないこと (.ts でしかできないこと) をまとめます。 おことわり 本記事はTypeScript 4.4時点での実装状況に基づいています。なるべくソースコード中の関係する箇所を参照するようにしたので、今後の変更はご自分で検証してください。 (TypeScript Playgroundで試すだけでも有用です JavaScriptモードで開始できるリンク) JSDocの機能一覧・TypeScri
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
型の互換性 | TypeScript Deep Dive 日本語版
Vite | 次世代フロントエンドツール
Pinia | The intuitive store for Vue.js