React Leaflet + TypeScriptで地図（地理院タイル）を表示する
Webブラウザで地図を表示させる JavaScript のライブラリとして Leaflet がよく使われる。 Leaflet ではブラウザに地図タイルを表示し、移動・拡大・縮小といった基本的な動作を行うとともに、マーカー・画像等を地図と連携して表示させることが可能。あちこちの商用サイトでも使用されているのを見かける。 Leaflet は単なる JavaScript のライブラリなので、これを React で扱うときは、その間を上手いことバインディングしてくれる React Leaflet を使うのが便利。 そこで本記事では、React Leaflet を TypeScript で扱いつつ、国土地理院が公開している地理院タイルを表示するまでの手順を解説する。 （というか、これをやる方法を軽く検索したけど良いサンプルが見付からず、試行錯誤して動くものを作ったので、その経緯をメモとして残しておく
【React+TypeScript】Netflixのクローンを作るチュートリアル
このチュートリアルではNetflixクローンを作る過程で、React・TypeScriptの基礎やAPIを利用したWebサービス開発について学んでいきます。 【学べる事】 - Reactの関数コンポーネントとTypeScriptの基礎理解 - React Hooksによるstate管理 - Reactでの外部APIとの連携方法 - Postmanを使ったAPIテストの方法 - コンポーネント分割の考え方 - Tailwind CSSの基礎理解 - Vercelを使ったデプロイ方法 【余談】 また直接、プロダクトコードには関連しないですが、余談として以下の解説も行なっています。 - APIとは？ - HTTPステータスコードのついて - ReactフレームワークとReact環境の選択肢 - .envについて - 非同期処理について - スプレッド構文とは？ - 三項演算子 VS 条件式(if
TypeScript + React: Component patterns
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 guide I use mainly modern-day React, so function components and – if necessary – hooks. I also focus exc
React/Reduxで学ぶTypeScript応用編 - GA technologies Tech Blog
TL;DR はじめに 本題 課題1. reducerでactionの型推論がされない そもそも Union Type とは? discriminated unionとは? never型とは？ Redux actionをDiscriminated Union化 課題2. actionCreatorと別にActionの型定義をリテラルで行う必要がある step1. actionCreatorの型を定義 step2. actionCreatorの戻り値の型を定義 infer とは? ReturnTypes step3. actionCreatorの戻り値をUnionする 最終型 おわりに 参考 初めまして、11月にGAにJoinしたBlockchain Strategy Centerの中村です。 最近、IMAXレーザー、応援上映と爆音上映で『ボヘミアン・ラプソディ』を3回観ました。ラミ・マレック
React×ReduxにおけるTypeScript入門
昨日01/21に【サポーターズ】React×ReduxにおけるTypeScript入門(https://supporterzcolab.com/event/679/) というイベントで登壇させていただきました。その登壇の際の発表スライドをあげさせていただきます。 内容はTypeScriptの基本的…
会社の納会用にクイズアプリを作りました（React / TypeScript） - Opt Technologies Magazine
先日、オプト社内で納会がありました。 その際の出し物の一つとしてクイズ大会があり、技術検証を兼ねてクイズアプリを作成したので中身についてお話します。 （今回はフロントエンド編です） はじめに クイズアプリ仕様 概要 使った技術 画面設計 回答者：ログイン画面 回答者：待機画面 管理者：管理画面 回答者：回答画面 回答者：正誤確認画面 管理者：ランキング画面 技術的な話 アーキテクチャ サーバー通信について WebSocketについて フロントの開発について テストについて まとめ はじめに こんにちは。uryyyyyyyです。 先日（といっても7月あたりですが）、オプトの納会が行われました。 有志による多くの出し物があったのですが、その中の「クイズ大会」コンテンツにて、 問題の回答＆集計をできるアプリを作れないかと頼まれたため、Webアプリを作ってみました。 せっかくなので会社固有の情報を
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Storybook V5+React+TypeScriptで環境構築 - Qiita