React + TypeScript: コンポーネント間で状態を共有する - Qiita
React公式サイトのドキュメントが2023年3月16日に改訂されました(「Introducing react.dev」参照)。本稿は、基本解説の「Sharing State Between Components」をかいつまんでまとめた記事です。ただし、コードにはTypeScriptを加えました。反面、初心者向けのJavaScriptの基礎的な説明は省いています。 なお、本シリーズ解説の他の記事については「React + TypeScript: React公式ドキュメントの基本解説『Learn React』を学ぶ」をご参照ください。 ふたつのコンポーネントの状態を、つねに一緒に変化させたい場合があるでしょう。そのためには、状態をそれぞれのコンポーネントにもたせるのでなく、もっとも近い共通の親に移すべきです。そのうえで、親から子には値をプロパティで渡します。これは状態の引き上げ(リフトアップ
[TypeScript]二次元配列からundefinedを取り除きつつ、型も除いた情報で定義する | DevelopersIO
t_o_dと申します。 map関数で生成された配列等、配列内にundefinedが入るケースがあります。 その際にfilterで取り除くのですが、単純な条件だと型情報にはundefinedが残ったままです。 そこで今回は型もundefinedを取り除いた情報になるようにfilterする方法を記録いたします。 環境 mac OS Ventura 13.2.1 typescript 4.9.5 修正前 修正前のコードは以下の通りです。 // 型 : ((string | number)[] | undefined)[] const members = [ [1, "takahashi"], [2, "kato"], undefined, [4, "saito"] ] // 型は「((string | number)[] | undefined)[]」のまま const selections =
![[TypeScript]二次元配列からundefinedを取り除きつつ、型も除いた情報で定義する | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/b3e248037db933d91fd7e8223803b92308f955d5/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2020%2F09%2Ftypescript.png)
デコレータ使わない Vue.js + TypeScript で進んだ「LINEのお年玉」キャンペーン
皆さん、こんにちは。LINEでフロントエンド開発を担当しているUIT1室のシュウと申します。 今回、年に一度の企画「LINEのお年玉」キャンペーンにて JavaScript の部分を担当させていただきました。LINEのお年玉は多くのトラフィックが流れる大規模かつ短期間の企画となります。 技術的な挑戦をするためのプロジェクトとしてもちょうど良いサイズ感であったため、今回多くの挑戦を行いましたので、連載形式で紹介していければと思います。 初回である今回は、Vue.js と TypeScript を併用した開発についてです。 なぜ TypeScript を使うのか？ これまで LINE のプロジェクトでは、JavaScript をメインの言語としてフロントエンド開発を行ってきました。ですが、時代の流れもあり、現在では新規プロジェクトの多くが TypeScript を採用しています。 月並みですが
Vue + TS に触れて2週間でシングルページアプリケーションを作ってリリースした話 - GS2 Blog
みなさん、こんにちは。GS2の丹羽です。 本日 Game Server Services は次世代版のベータテストを開始しました。 これまで提供していた GS2 を GS2 Classic と呼び、次世代版 GS2 を単に GS2 と呼びます。 gs2.io GS2 のリリースにあたっては非常に多くの新しいチャレンジを行いました。 それについては少しずつブログや登壇を通じて皆さんにお伝えしていきたいと思います。 今回は、GS2 のマネージメントコンソールをシングルページアプリケーションとして作りました。 しかも、Vue + TypeScript に触れて2週間で。というトピックで振り返ってみようと思います。 なぜ Vue + TypeScript にいたったか GS2 Classic のマネージメントコンソールは Google App Engine を使用していました。 弊社はフルサーバレ
【Vue.js】Vuetify と TypeScript を使用した環境を構築してサンプルプロジェクトを立ち上げるまでの手順 - Qiita
【Vue.js】Vuetify と TypeScript を使用した環境を構築してサンプルプロジェクトを立ち上げるまでの手順JavaScriptTypeScriptVue.jsvue-cliVuetify はじめに Vue.js 用のマテリアルデザインフレームワークであるVuetifyと JavaScript の静的型付けのスーパーセットである TypeScript を使用したプロジェクトの環境を構築しサンプルを立ちあげるまでの手順です。 Vue-CLI のインストール Vue-CLI でひな型を作成するのが簡単なのでインストールします。
Nuxt.js + TypeScript + Vuetify でWebアプリ開発環境を構築する - Qiita
1. はじめに 社内で Nuxt.js + TypeScript + Vuetify の構成で、SPAを開発しました。 その際に開発効率が高くて良いと感じたので、環境構築や開発の方法をご紹介します。 良いなと思ったことは下記の3点です。 Nuxt.jsを使うことで環境構築が簡単に行える TypeScriptを使うことで型の恩恵を受けながら開発を行える Vuetifyを使うことでマテリアルデザインのUIを手軽に扱える 今回は下の画像のようなSPAを作成するところをゴールとします。 現在の時刻から、今年が何％進んでいるかをプログレスバーで表示します。 ※この記事ではSSRは取り扱いません。ご了承ください。 2. 技術紹介 この記事で取り扱う下記の言語やフレームワークについて概要をご紹介します。 Nuxt.js TypeScript Vuetify 2.1. Nuxt.js Nuxt.js は、
TypeScriptを使ってアプリケーションの設定ファイルを書く - その手の平は尻もつかめるさ
アプリケーションの設定ファイルと言えばjsonやyamlなんかで書くことが多いと思うんですが，最近はTypeScriptで設定ファイルを書いております．このような感じ: export interface ApplicationConfig { readonly listenPort: number; readonly timeout: number; readonly apiBaseUrl: string; readonly loggerOptions: LoggerOptions; } こういう感じで設定のinterfaceを定義しておいて export class ProductionConfig implements ApplicationConfig { readonly listenPort = 5963; readonly timeout = 5000; readonly ap
Vue.js＋Vuex＋TypeScriptのWebフロントエンド開発現場を前向きに改善した話 - ZOZO TECH BLOG
こんにちは。Webフロントエンドエンジニアの松井菜穂子です。 ZOZOテクノロジーズに入社して一年ほど経ちます。 あるサービスの立ち上げから運用まで、Webフロントエンドのチームリーダー・開発メンバーとして関わってきました。 当記事では、当社のWebフロントエンド開発現場にあった問題と、それぞれの課題に対して堅実に積み重ねた技術的な改善方法についてご紹介します。 はじめに モダンな技術でも負債は生まれる 負債を何故改善するのか 要因 その1: Vueコンポーネントを綺麗に分割する テンプレート コンポーネントクラス 使用例 解決策 テンプレート コンポーネントクラス 使用例テンプレート 使用例コンポーネントクラス コンポーネントカタログで汎用化を促す コード テンプレート（atoms.vue） コンポーネントクラス（atoms.vue） サンプル その2: Vuexをシンプルにする Sta
TypescriptのInterfaceにはinstanceofは使えない。 - aknow2
Typescriptには、JavaやC＃と同じ様にinterfaceがあります。 が、JavaやC#と同じ様に扱うと怪我をします。 instanceofでinterfaceは使えない。 最初に私がビックリした事です。JavaやC#では'instanceof 'で型をチェックしたり、条件分岐で使えたりします。が、Typescriptでは使えません。 例えば、IActionを定義してActionというクラスで実装して見ます。それをinstaceof IActionでチェックしてみると、、、 interface IAction { dosomething(): void; } class Action implements IAction { dosomething() { console.log('hoge'); } } if (Action instanceof IAction) { //
TypeScriptでJestを使うときの設定（ts-jest, @types/jestなど） - dackdive's blog
メモ。 TypeScript を使ったプロジェクトに Jest を導入する時に必要なパッケージや設定、とくに ts-jest と @types/jest が必ず必要なのかどうかがよくわかってなかったので調べた。 先にまとめ TypeScript -> JavaScript のコンパイルを TypeScript 自身でやるか Babel に任せるかで必要な設定が異なる。 （Babel 7 から TypeScript がサポートされた） @types/jest は（テストファイルも型チェックするなら）両方で必要 TypeScript のコンパイルに Babel を使う場合、@preset/typescript と babel-jest をインストールしておけば ts-jest は不要 TypeScript のコンパイルに TypeScript を使う場合、 ts-jest が必要。jest.c
tsconfig.json で指定できる全 compilerOptions をまとめた (TypeScript v2.5 版) - Corredor
TypeScript実践プログラミング【電子書籍】[ スティーブ・フェントン ] ジャンル: 本・雑誌・コミック > PC・システム開発 > インターネット・WEBデザイン > その他ショップ: 楽天Kobo電子書籍ストア価格: 3,456円 TypeScript v2.5 時点で指定できる、tsconfig.json の compilerOptions をまとめた。主に Angular4 系で使っている tsconfig.json なので、React.js を使いたい場合などはコメントアウトしてあるオプションを使う必要があったりするかも。 // tsconfig.json : https://www.typescriptlang.org/docs/handbook/tsconfig-json.html { // 保存時にビルドする (true) "buildOnSave": true,
がんばれやってけ TypeORM - オイオイオイ書くわアイツ
TypeScript ｱﾖﾖﾝﾖｱﾖﾝﾖｰ のやつ です。 ｱﾖﾝﾖｰつくったひとに 「書いて〜😣」ていわれたので、がんばった。 qiita.com 概要 TypeORM とは もっとがんばってくれ TypeORM DB から安全に Entity を取り出せていない DB に安全に Entity を保存できていない ﾑﾑっ！😣 おまけ 概要 TypeORM は EventListner とかと一緒に使わないと結構厳しい TypeScript の機能上仕方ない感もある TypeORM とは TypeScript で DB とよしなにやるための OR マッパーライブラリ。 デコレータを使って良い感じに DB の構造を指定してあげることができる。 例として、 OkWoman なる以下のクラスのインスタンスの情報を DB に保存することを考える。 名前、年齢、誕生日、そして ok というプロパ
TypeORMでエンティティを定義する際のガイドライン
はじめに はじめまして。エンジニアのDannyです。 今回は TypeORM という O/Rマッパー で、エンティティを定義する際のガイドラインについて書かせていただきます。 TypeORMとは TypeScript製の O/Rマッパー です。 リポジトリ 公式ドキュメント 弊社ではTyepScriptで実装しているサーバアプリケーションがいくつかあるのですが、その一部で採用しています。 TypeScriptで開発する際の O/Rマッパー としてはデファクトになりつつあると思います。 Node.js/TypeScriptの O/Rマッパー 比較や、TypeORM の使用感に関しては弊社suzukiの資料をご参照ください。 本記事では、最新バージョンである 0.2.7 を使用します。 コンストラクタの定義 さっそくですが、まずはコンストラクタについて考えてみます。 ここでは、MySQLで以下
PureScript から TypeScript 用型定義 (.d.ts) を生成するツールを作った | 雑記帳
前置き TypeScript で作っていたプロジェクトに、後付けで PureScript を追加しようとしたらかなり辛かった。 （わざわざ言語を混在させたい理由としては、型クラスや演算子オーバーロードを使いたい＆既存のコードを全部書き直す暇はない、が挙げられる） 辛い理由としてはそもそもモジュールとバンドラーの周辺がまだ成熟していないというのもあるだろうが、 TypeScript 固有の理由として、 TypeScript コードから PureScript モジュールを読み込むための型定義が足りないという問題がある。 Stack Overflow を見ると、同じことで悩んでいる人がいた： node.js – How do I configure a TypeScript project that uses JavaScript modules compiled from PureScript
Nuxt.js (TypeScript) on Netlifyの良さを広めたい | Tamanyan.net | たまにゃんのエンジニアブログ
git clone https://github.com/tamanyan/nuxt-ts-netlify.git <project-name> cd <project-name> yarn or npm install GitHubからNetlifyプロジェクト作成 New site from Gitボタンからプロジェクトを作成。 デプロイしたいWebサイトのレポジトリをGitHubから選択 Githubを選択して、自分がデプロイしたいプロジェクトを選択する。 自分で作成したNuxt TypeScriptのプロジェクトを選択する。 Netlify上にWebサイトをビルド 以下の三点を設定する ビルドするブランチ 静的Webサイトをビルドするコマンドを設定。ここではyarn generate ビルド先のディレクトリを指定。ここではdist 追加のビルド設定だと、環境変数なども組み込めるよう
TypeScript Deep Dive 日本語版 - TypeScript Deep Dive 日本語版
TypeScriptはJavaScriptを拡張して作られたプログラミング言語です。トレンドが示すとおり、TypeScriptはJavaScriptに代わって第一に選択される言語になりました。TypeScriptが提供する静的型システムは、コードの保守性と可読性を大幅に向上させます。またブラウザ等の互換性を心配することなく、モダンで便利なJavaScriptの機能を利用できます。 TypeScript DeepDiveは初心者からベテランまで役立つオープンソースのドキュメントです。JavaScriptのモダンな機能からTypeScriptの様々な魔法に至るまで丁寧に説明されています。多くのコードサンプルがあり、具体的なTypeScriptの使い方を簡単に理解できます。TypeScript DeepDive日本語版は2018年に誕生しました。
VSCodeでTypeScript/Node.jsの開発環境を作る（UT・カバレッジ・ログ出力・リリース手順含む） - Qiita
Visual Studio CodeでTypeScriptの開発環境を作る手順を調べてみました。 Node.jsで動く簡単なCLIツールを作る前提で進めていきますが、他の開発にも応用できるかと思います。 なお、Visual Studio CodeとNode.jsはインストール済みの前提です。 Windows 10環境で以下のバージョンで確認しています。 C:\>node -v v8.10.0 C:\>npm -v 3.10.6 C:\>code -v 1.21.1 79b44aa704ce542d8ca4a3cc44cfca566e7720f1 x64 mkdir ts-sample cd ts-sample npm init -y mkdir .vscode src test config npm i -SEB config log4js npm i -DE typescript ts-
TypeScriptの`Object`型と`object`型と`{}`型の使い分けについて - 角待ちは対空
TypeScriptには似たような型としてObject型とobject型と{}型が存在します。 let o1: Object; let o2: object; let o3: {}; 今回はこの3つの使い分け、あるいはobject型導入の経緯についてです。 JavaScriptのデータ型 JavaScript のデータ型とデータ構造 - JavaScript | MDNを読めば分かるように、 Boolean Null Undefined Number String Symbol の6種のプリミティブ型を持つプリミティブ値とオブジェクトでJavaScriptは成り立っています。 TypeScriptにおけるobject型とはここでいうプリミティブ型以外を表現しています。 object型はいつ使われるのか いつ役に立つかというとObject.create()の定義です。 TypeScript/
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - microsoft/frontend-bootcamp: Frontend Workshop from HTML/CSS/JS to TypeScript/React/Redux
DockerでVue.js+TypeScript開発環境を構築する - Qiita
