動機と目的 普段、Next.jsでアプリケーションを開発しています。当初は Next.js にも TypeScript にも慣れていなかったため、ページのパスを定数で定義し、Link コンポーネントで呼び出していました。 // constants/path.ts export const TOP_PATH = '/' export const USERS_PATH = '/users' // ...
Next.jsのルーティングにTypeScriptで型をつけたい
動機と目的 普段、Next.jsでアプリケーションを開発しています。当初は Next.js にも TypeScript にも慣れていなかったため、ページのパスを定数で定義し、Link コンポーネントで呼び出していました。 // constants/path.ts export const TOP_PATH = '/' export const USERS_PATH = '/users' // ...
【React も AWS CDK も】何も考えず VS Code に全任せして TypeScript コードをステップ実行デバッグする【できるよ！】 | DevelopersIO
環境構築 「何もしてないのにできた」を実現するため、この記事ではインストール直後の Visual Studio Code と Node.js を使用しています。皆さんは今まで通りの環境で大丈夫です。 各ツール類のバージョンは執筆時点で最新のものを使用しています。 Visual Studio Code 1.52.1 Japanese Language Pack（任意） Node.js v14.15.3 プロジェクト作成 任意のディレクトリを作成し、初期化して必要なモジュールをインストールします。そして VS Code で開きましょう。 mkdir ts cd ts npm init -y npm install typescript ts-node -y code . ここまでいたって普通。特別なことは何もしていません。 コーディング それではステップ実行するためにプログラムを書きましょう。
Presentations: Intro to React, Redux, and TypeScript (2020)
Random musings on React, Redux, and more, by Redux maintainer Mark "acemarke" Erikson This is a post in the Presentations series. An updated introduction to React, Redux, and TypeScript for 2020 I've done several previous iterations of an "Intro to React + Redux" presentation. The last one I did was back in 2018, and a lot has changed for both React and Redux since then. In particular, React Hooks
Amplify + Nx (React + Typescript) で爆速で monorepo 環境を構築する - Techtouch Developers Blog
この記事はテックタッチアドベントカレンダー9 日目の記事です。 8 日目は ポエマー masaru 氏による 少女に何が起ったか ～少女が他人のウェブサーバー構成を知るまでにやったいくつかのこと、そしてその結末～ でした。 ただのポエムかと思いきやかなりコアなセキュリティの話だったのでとても勉強になりました。 テックタッチのフロントエンドエンジニアの taka です。 最近テックタッチでは、品質を更に向上させるため、また今後開発を加速できるようにするためにコードを一新しました。 そこで Amplify と Nx を使って monorepo の開発環境を構築したので、その手順を記しておこうと思います。 ざっくり言うとこれらを使うことで、 monorepo の環境を簡単にセットアップしたい React + Typescript で開発したい ESLint や Jest などの開発ツールを使いた
TypeScript＋Reactで安全に動かし続けるために LINE証券のフロントエンドにおける型安全性への取り組み | ログミーBusiness
TypeScript＋Reactで安全に動かし続けるために LINE証券のフロントエンドにおける型安全性への取り組み提供：LINE株式会社 2020年11月25〜27日の3日間、LINE株式会社が主催するエンジニア向け技術カンファレンス「LINE DEVELOPER DAY 2020」がオンラインで開催されました。そこでLINEのフィナンシャル開発センターFront-endチームのフロントエンドエンジニアである鈴木僚太氏が、「LINE証券フロントエンドにおける型安全性への取り組み」というテーマで、TypeScript＋Reactで安全に開発を続ける方法について共有。前半は「LINE証券」のフロントエンドがどのように作られているかについて紹介しました。 LINE証券フロントエンドにおける型安全性への取り組み鈴木僚太氏（以下、鈴木）：このセッションでは『LINE証券フロントエンドにおける型安全
Testing UI - Next JS, Typescript, Jest and React Testing Library
Testing UI - Next JS, Typescript, Jest and React Testing Library Intro As you know, React is just JavaScript. That means it can be tested just like any other JS application. There are lots of testing libraries and test runners out there, but I find that the best setup is Jest + React Testing Library. I use it on a daily basis at work and on my side projects. Worth mentioning that this is also a st
【React+TypeScript】GETエラーを感知して、404ページに遷移させる - Qiita
めちゃめちゃ久しぶりの投稿です。 先日までコミットしていたプロジェクトの中で自分のリサーチとスキルではどうにもできなかった404ページへのリダイレクトの処理について。 先輩に教えていただいたので備忘録として書いておきます。 今回実現させたかったこと 今回実現させたかったのは、大きく分けて2つです。 /hogehoge/tokenのようなURLが叩かれたときにtokenが正規のものか判断する 正規のものである場合、tokenが合致するデータをデータベースからGETする 正規のものでない場合、404ページへリダイレクトさせる これらをReact+TypeScriptのプロジェクト内で実現させるというタスクでした。 行き詰まった点 「tokenが正しいかどうかとか、どうやって判断したらいいん。。。」 大きくいってこの点でした。 今までHTMLとCSSでやってきたので、もう何を使えばいいんかもわか
Using Vue 3 with JSX and TypeScript | paul shen
My friend and I are building a multiplayer drawing game with Vue. I used it as an excuse to learn and get familiar with Vue. We started with Vue 2 and templates but found that they don't scale well for complicated components. I migrated the codebase to Vue 3 and now we're writing Vue components with JSX with TypeScript. There's relatively little documentation in the Vue 3 docs on JSX and TypeScrip
りあクト！ TypeScriptで始めるつらくないReact開発 第3.1版【Ⅲ.React応用編】：くるみ割り書房
🔔「紙+電子セット」は BOOTH にて販売中！ https://oukayuka.booth.pm/items/2367992 📅 2021年 10月に第 3 刷を発行。内容を最新にアップデートしました。 ―― 実践的な React 本として評判の『りあクト！』シリーズ、三部作の第三部「React応用編」です。 第 3.1 版は React 17.0 と TypeScript 4.2、および Create React App 4.0 に対応した最新の内容となっています。 第三部ではまずルーティングを紹介した後、React の難関である副作用処理について本格的に学んでいきます。Redux とその公式スタイルガイド、Effect Hook と組み合わせた非同期処理の書き方、Redux の代替技術、さらに最新の Suspense までを紹介。 なお第一部ではフロントエンドのための Java
Reactの環境構築 — 仕事ですぐに使えるTypeScript ドキュメント
TypeScriptの世界を知る 前書き Node.jsエコシステムを体験しよう TypeScriptの書き方 変数 プリミティブ型 複合型 基本的な構文 基本的な型付け 関数 その他の組み込み型・関数 クラス 非同期処理 例外処理 モジュール console.logによるログ出力 中級のテクニック ジェネリクス 関数型指向のプログラミング クラス上級編 リアクティブ 高度なテクニック 環境ごとのTips（共通環境・ブラウザ以外） ソフトウェア開発の環境を考える 基本の環境構築 ライブラリ開発のための環境設定 CLIツール・ウェブサーバー作成のための環境設定 CI（継続的インテグレーション）環境の構築 成果物のデプロイ 使用ライブラリのバージョン管理 環境ごとのTips（ブラウザ環境） ブラウザ環境 ブラウザ関連の組み込み型 Reactの環境構築 create-react-appによる環境
組織でナレッジを共有できる新プロダクト「Strap」 その開発技術に「TypeScript」「Firebase」「PixiJS」「React」を選んだ理由 | ログミーBusiness
Goodpatchのエンジニアマネージャー西山雄也氏：先日Goodpatchの新しいプロダクトとしてβ版をリリースしたStrapの紹介と、あとはそれにまつわるナレッジの紹介をもう1人の黄から発表します。 僕はGoodpatchのProduct Div.という自社プロダクト開発の部署でエンジニアマネージャーをやっています。プロトタイピングツール『Prott』とクラウドワークスペースツール『Strap』の開発責任者です。フルスタックエンジニアからフロントエンドエンジニアになり、今はGoodpatchに入ってマネージャーをやっているという経歴です。 僕はいわゆる日本のインターネット普及期の2000年以降に情報系の大学に行っていて、インターネットにすごくワクワクした世代なんですね。在学中に個人でいろいろなWebサービスを発信したり、Webアプリケーションを作ってブラウザだけでいろいろなことができて
【旧版】りあクト！ TypeScriptで始めるつらくないReact開発 第2版 - くるみ割り書房 ft. React - BOOTH
⚠️ この本には最新の第3版が出ています。三部構成です。 ・ https://oukayuka.booth.pm/items/2368045 ・ https://oukayuka.booth.pm/items/2368019 ・ https://oukayuka.booth.pm/items/2367992 BOOTH 技術書カテゴリ（約 3,500 タイトル）にて現在ランキング 1 位！ 技術書典5 にて初頒布、その後もクチコミによって広がり続け、シリーズ累計売上 5,000 部を突破した React の本格的入門書。現場のエンジニアたちから絶大な支持を受け、Chatwork の 2020 年インターン用教材としても採用されました。 本書はほとんど全てのコードが TypeScript で書かれているのが大きな特徴です。React を使う際に必要となる言語の知識や関数型プログラミングの考え
Redux made easy with Redux Toolkit and Typescript
Using Redux with React can be incredibly challenging for people to get their head around; while the core principles of Redux itself are fairly straightforward and don’t take too long to grasp, a lot of people struggle with using Redux in React apps. Partly because there are so many damn things to integrate: Redux React Redux Redux Thunk Typescript (getting more common in recent years) Redux Saga /
Svelteとは？Reactの比較 / TypeScriptと Sassの導入方法｜sumi｜note
Svelteとは最近フロントエンドの技術で、ReactやVue.jsに変わって注目を集めているのが Svelte です。下記のような特徴があります。 ・仮想DOMがない ・ファイル拡張子.svelteになる ・svelteファイルに記述されたstyleはスコープ付きになる ・Store管理も内包している（ReduxやVuexのようにインストールしなくてよい） Svelteは何が良いのか？ Vue.js やReactと違って仮想DOMがありません。ビルド時に純粋なJavaScriptにコンパイルして表示します。つまりSvelteはコンパイラーです。 そもそも仮想DOMのメリットとして、アプリ全体を再レンダリングせず、変更箇所（実際のDOMと仮想DOMの差分）もしくは Contextでトリガーされたとき を検知して、局所的にレンダリングすることで高速化を図っています。 Svelteの公式ブログ
大学院生がReactとTypeScriptでポートフォリオを作ってみた - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 概要 タイトルの通り、この度（少し前の話ですが）ReactとTypeScriptでポートフォリオサイトを作成したので、使用した技術と学習方法についてまとめようと思います。 これからポートフォリオを作ってみたいという人にとって少しでもお役に立てば幸いです。 動機 Qiitaでポートフォリオを作成したという旨の記事をよく目にするようになり、自分もやってみようという気持ちになりました。 特に「フロント未学習の大学生が1週間でVue.jsを使ったポートフォリオを作った話」という記事には大きな刺激をもらいました。 完成品 ポートフォリオサイト ソ
React TypeScript Cheatsheets | React TypeScript Cheatsheets
React TypeScript CheatsheetsCheatsheets for experienced React developers getting started with TypeScript
TypeScriptでReactをやるときは、小さいアプリでもReduxを最初から使ってもいいかもねというお話 | フューチャー技術ブログ
TypeScriptでReactをやるときは、小さいアプリでもReduxを最初から使ってもいいかもねというお話 前日の丸野さんがReduxを分かりやすく解説してみたというReduxの基本的な紹介を行いました。Reduxはコンパクトなライブラリながらよく考えられた仕組みです。Jetpack ComposeやらFlutterやら、ReactインスパイアなGUIフレームワークも増えているので、JavaScript（TypeScriptではなく） + Reduxをやってみるのは、ウェブに限らず、今後のユーザーインタフェース関連のコードを触るための理解力向上には良いと思います。 本エントリーは、プロダクションコードでたくさんRedux周りにもreducerなどを実装しなくてはいけなくなったときの次のステップとして、Redux Toolkitの紹介をします。 たいてい、Reduxは導入コストが大きく、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React Compound Component using TypeScript
React Context API with hooks and TypeScript
React, TypeScript & Mobx