React + TypeScript: 入力を状態に反応させる - Qiita
React公式サイトのドキュメントが2023年3月16日に改訂されました(「Introducing react.dev」参照)。本稿は、基本解説の「Reacting to Input with State」をかいつまんでまとめた記事です。ただし、コードにはTypeScriptを加えました。反面、初心者向けのJavaScriptの基礎的な説明は省いています。 なお、本シリーズ解説の他の記事については「React + TypeScript: React公式ドキュメントの基本解説『Learn React』を学ぶ」をご参照ください。 Reactが用いるUIの操作方法は宣言的です。それぞれのUI部分は直接いじりません。コンポーネントが取り得るさまざまな状態を記述し、ユーザー入力に応じて切り替えるのです。デザイナーがUIを考えるのと似ているかもしれません。 UIは宣言型と命令型でどう異なるか UIのイ
TypeScript, React について +α - Qiita
概要 会社の業務で TypeScript を扱う機会が増えることが予想されるため、技術をキャッチアップする目的で TypeScript 周りの知識をインプットする。 ※自分用のメモであり、備忘録でもあります😭 MEMO TypeScript とは TypeScriptで書かれたコードをコンパイルするとJavaScriptのコードに変換される JavaScriptは動的型付け、TypeScriptは静的型付け 動的型付け：実行時に変数の型が決まる Python、JavaScript、Ruby など 静的型付け：コンパイルの時に変数の型が決まる（宣言時に型を指定する） ※大規模開発をするときはコーディングミスを減らせる Java、C など JavaScriptのフレームワークの種類 AngularJS（Google） 様々な動作端末で動く 管理画面系のアプリケーション React（Faceb
React + TypeScriptで一意のIDを生成 - Qiita
結論 「Math.random()ではなくuuidを使用して一意の ID を生成しましょう」 Introduction React でアプリケーションを開発する際に、一意の ID が必要になることがあります。 例えばMath.random()で生成した文字列を ID として使用できそうです。 ただ、この文字列は疑似乱数のため重複する懸念があり、一意の ID としては推奨されません。 業務で使っているmlflowではuuidが使われていることを思い出し、調べてみました。 React でも使えそうです。 本記事が少しでも読者様の学びに繋がれば幸いです！ 「いいね」をしていただけると今後の励みになるので、是非お願いします！ uuid ライブラリを使用した ID の生成方法 一意の ID を生成する場合はuuidライブラリが推奨されています。 こちらはRFC4122に従っており、衝突の可能性が限り
React + TypeScript: Storybookを使ってみる - Qiita
つぎに、Storybookをインストールします(「Install Storybook」)。つくられたプロジェクト(react-typescript-storybookディレクトリ)のルートで、つぎのコマンドを打ち込んでください。 Storybookの初期画面は、npm run storybookで開きます(Reactプロジェクトを起動する必要はありません)。URLはhttp://localhost:6006/です。 サンプルのstoryモジュール(stories.tsx)やそれらの用いるコンポーネント(tsx)がつくられ、src/storiesに収められています。実際には、storyモジュールと分けるため、Reactコンポーネントはsrc下の別フォルダに加えることになるでしょう。 今回は、Reactコンポーネントとしてsrc/stories/Button.tsxを使います(コードはつぎのと
React v18 + TypeScript と ASP.NET Core (C#) でホロジュール Web アプリを作り直した - Qiita
React v18 + TypeScript と ASP.NET Core (C#) でホロジュール Web アプリを作り直したC#TypeScriptReactASP.NET_Corechakra-ui はじめに 1年ほど前、React + ASP.NET Core を使用して、個人用のホロジュール Web アプリを作りました。 React と ASP.NET Core (C#) でホロジュール Web アプリをつくってみた 当時は React v17 でクラスコンポーネントを利用し、更新や状態を力技で制御した感じでしたので、あらためて React を学習し直し、React v18 + TypeScript と ASP.NET Core でこんな感じに作り直してみました。 学習方法 Udemy で下記講座を受講しつつ、TypeScript や React のドキュメントやチュートリアルを
【Next.js,microCMS,AWS】 ポートフォリオサイトを作ってAWS サーバーレスアーキテクチャでデプロイ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに エンジニアを目指し始めて初のポートフォリオサイトを作成しました。 背景としてはインターンを始めて実務につく機会をいただき、本格的な制作物を作れるようになってきたので、形に残したいと思いポートフォリオサイトを作成することを決意しました。 また今後お仕事を自分で獲得したいと考えており、そのために本格的に準備を進めたいと思いました。 まだまだ未熟ですが見て頂けると幸いです。 使用した技術 Next.js TypeScript tailwindcss microCMS AWS S3 AWS CloudFront GitHub Acti
React + TypeScript: Next入門04 動的ルートを定める - Qiita
Next.jsチュートリアルの公式作例を、TypeScriptも加えて、一からつくってみるシリーズの最終回です。プログ投稿ごとのパスをデータから動的につくり、静的に生成した投稿ページにトップページからリンクします。でき上がりがこのNext.js公式作例です。 ブログ投稿ページごとの動的ルートを定める 作例におけるブログ投稿ページごとの動的ルート(Dynamic Routes)のつくり方は、つぎのとおりです。 各投稿のパスは/posts/<id>とします。 <id>はトップレベルのpostsディレクトリに収めたマークダウンファイル名です(拡張子.mdは削除)。 マークダウンファイル名からパスは、つぎのように決まります。 ssg-ssr.mdのパス: /posts/ssg-ssr pre-rendering.mdのパス: /posts/pre-rendering まずつくるのは、つぎのような各
EmacsでTypeScript/React開発する2023 - たごもりすメモ
世間に死ぬほど色々な方法があるのはわかっているがとにかくまっさらな状態から最短手順でEmacsでJSX/TSXが書けるようになりたい! という話。VSCodeとかそういう話には目を背ける。 tsxファイルはweb-modeで起動するようにすればシンタックスハイライトとインデントはうまくいくので、あとはlspを起動するようにすれば快適です！— つかもとたけし (@itometeam) 2023年1月23日 自分で調べつつ試行錯誤したんだけど、最終的にはこのtweetで教えてもらった通りになった。メジャーモードとしてweb-modeを使いつつflycheckとLSPで開発支援。 macOSにインストールしたEmacs*1、およびMELPAにあるパッケージだけで、以下のようになった。 (require 'web-mode) (add-to-list 'auto-mode-alist '("\\.
React + TypeScript: Next入門01 チュートリアルの作例を一からつくってみる - Qiita
Next.jsの公式サイトにはチュートリアル解説があります。その作例https://next-learn-starter.vercel.appをTypeScriptも加え、一からつくってみようというのがこのチュートリアルシリーズの目的です。 Next.js公式チュートリアルは、なかばでき上がったプロジェクトのコピーにコードを書き加えるかたちで進められます。手っ取り早いものの、Next.jsを使った開発の流れがよくわかりません。また、TypeScriptについては、完成したJavaScriptの作例にあとから型づけを与える説明です(next-learn/basics/typescript-final/)。 本チュートリアルシリーズは、プロジェクトにはじめからTypeScriptを加えます。そのうえで、一から公式作例と同じアプリケーションをつくってみましょう。 React + TypeScri
React + TypeScript: Next入門03 プリレンダリングとデータ取得 - Qiita
Next.jsチュートリアルの公式作例を、TypeScriptも加えて、一からつくってみるシリーズの第3回です。アプリケーション内のディレクトリに収めたマークダウンファイルからデータを読み込んで、トップページに表示してみます。 プリレンダリングとは プリレンダリングはNext.jsのデフォルトで、各ページはあらかじめレンダリングされます。ページのHTMLをクライアント側のJavaScriptにすべてつくらせるのでなく、Next.jsが静的な処理は先に済ませておくということです。プリレンダリングは、パフォーマンスとSEOを高めるのに役立つでしょう。 生成されたページそれぞれに関連づけられているのは、必要最小限のJavaScriptコードです。ブラウザがページを読み込むと、そのJavaScriptコードが実行され、完全にインタラクティブになります(「ハイドレーション」と呼ばれます)。 Next
React + TypeScript: Next入門02 イメージとメタデータおよびCSSを扱う - Qiita
Next.jsチュートリアルの公式作例を、TypeScriptも加えて、一からつくってみようというシリーズの第2回です。前回は、トップページを書き替えて、新たに追加した別ページとリンクしてみたというくらいでした。今回から、公式作例に少しずつ近づけてゆきましょう。 Imageコンポーネントでイメージを差し込む Next.jsはイメージなどの静的素材も扱えます。素材ファイルを置くトップレベルは、publicディレクトリです。Reactコンポーネントを収めるpagesと同じく、アプリケーションのルートから参照できます。 ページに表示するプロフィール画像を用意しましょう。ディレクトリpublicにimagesをつくってください。 画像をpublic/images/profile.pngとして収めます。 next-learn/basics/basics-final/public/images/pro
「React Native 0.71」ではTypeScriptが事実上の標準言語に──Metaの新機能解説より
米Meta Platformsは、モバイルアプリフレームワークReact Nativeの次世代版となる、「React Native 0.71」に加わった新機能について公式ブログの1月3日（現地時間）付け投稿で解説している。本稿公開時点で、React Nativeの最新安定版はバージョン0.70。次世代版のバージョン0.71については、リリース候補版（RC：Release Candidate）5が登場している。React Nativeは、MITライセンスで公開しているオープンソース・ソフトウェア。 React Nativeのバージョン0.71では、標準言語が事実上TypeScriptに代わる。新機能も、TypeScriptに関係するものが中心になっている。1つ目は、新しいアプリケーションを作成し始めるときに、コマンドでテンプレートを作成させると、TypeScriptのファイルを出力するように
2023-01-06のJS: Vue 2のEOLは2023年末、NextAuthはAuth.jsに、React NativeのFirst-class Support for TypeScript
JSer.info #625 - 2022 Year In Review | The Vue Pointという記事では、Vue 2のEnd of Life (EOL)が改めて周知されています。 Vue.js - Vue 2 LTS, EOL & Extended Support Vue.js 2は2023年12月31日にEOLとなり、サポートが終了されます。 サポート終了後はセキュリティリリースも行われなくなる予定です。 NextAuth.jsがAuth.jsの一部という扱いに変更されました。 これによって、SvelteKitやSolidStartでもNextAuthが実装していた認証、認可の仕組みが利用できるようになっています。 React NativeがTypeScriptをFirst-classとしてサポートすることが発表されました。 First-class Support for
Reactでの広告配信プラットフォーム開発！フロントエンドエンジニア募集！
Reactでの広告配信プラットフォーム開発！フロントエンドエンジニア募集！ 株式会社フクロウラボ @fukurou I want to hear a detailed なにをやっているのか フクロウラボは、アプリ向けの広告配信プラットフォームを企画・開発・提供している広告スタートアップです。事業は売上成長前年比125%超え、取引顧客数も300社に近づき、シェアを拡大しています。 ◆アプリに特化した広告配信プラットフォーム「Circuit X（サーキットエックス）」 アプリユーザーを獲得したい広告主と広告収益を最大化したいメディアをつなぎ、「成果型Web広告」を通じて、顧客の商品・サービスの効果的なプロモーションを支援しています。 ────「Circuit X（サーキットエックス）」3つの強み ・動画を活用した広告を導入できる ・審査を通過した高品質なメディアに特化している ・高度な技術力に
JavaScriptからReact、Next.js、TypeScriptを学んでPFに取り掛かれるレベルになるまでのロードマップ - Qiita
JavaScriptからReact、Next.js、TypeScriptを学んでPFに取り掛かれるレベルになるまでのロードマップJavaScriptRailsTypeScriptReactNext.js この記事は自作のポートフォリオ、ProadMapsで作成しました。 ProadMapsのサービス紹介、作成までの学習記録は別途記事を作成したので、チェックいただけると大変ありがたいです！ 概要 Next.jsでポートフォリオを作成できるようになるまでの学習記録になります。今だったらこの順番でやればよかったなぁと思う順番に並び替えています。 タグ Next.js,React,TyepScript,JavaScript,Ruby,Rails 開始時スキル Railsの学習経験あり 終了時スキル ポートフォリオに取り掛かれる 総ステップ数 7 ステップ1 【Progate】 Progate(プロ
【React / TypeScript】ローディングを実装する方法 - Qiita
画面を読み込むときにAPIを呼び出してデータが取得されるまでローディングマーク(丸がぐるぐるするやつ)を表示したい、という場面は多いでしょう。 今回はReact + TypeScript + react-loadingを使って実装します。 また、APIを実装するのは手間なので以下のAPIを叩いてデータを取得します。 https://api.thecatapi.com/api/images/get?format=json&results_per_page=10&type=gif (可愛い猫ちゃんの画像が取得されます。) react-loadingとは？ ローディングアイコンを実装するためのサードパーティ製ライブラリです。 npmのページ GitHubのリポジトリ 最新のコミットが2年前なので開発はほぼ止まっているようです。 以下サンプルコードのようにpropsで色やアイコンの大きさを調整する
SWCとRelease Pleaseで始めるReact TypeScriptライブラリ開発と公開 - BASEプロダクトチームブログ
こんにちは。Pay ID Devの大木 (@roothybrid7)です。 今回外部スクリプトとして読み込み利用する外部SDKを、Reactに組み込むためのラッパーライブラリを作ったので、その開発事例を紹介します。 今回、SWC(Speedy Web Compiler)やRelease Pleaseを利用して開発したので、主にそれらをどう使ったのかを紹介いたします。 背景 去年12/16に開催しましたオンラインイベント「BASE Tech Talk #1 〜Next.jsを使ったカート大規模リプレイスPJの裏側〜」の通り、BASEカートシステムのFrontendアプリケーションは、Next.jsで動作してます。 さて、アプリケーションでは、Amazon PayやPayPalなど様々な外部の決済サービスを利用しており、それらのJavaScript SDKをいくつか利用しています。 これらのS
りあクト！ TypeScriptで始めるつらくないReact開発 第4版【① 言語・環境編】：くるみ割り書房
💡 紙本+電子版セットは BOOTH にて。 https://oukayuka.booth.pm/items/2368045 ―――― シリーズ累計 2.5 万部を突破、仕事で使える React 本と評価の高い『りあクト！ TypeScriptで始めるつらくないReact開発』の最新 4 版。全 3 巻構成となっている第 1 巻「言語・環境編」です。 最新のフロントエンド環境構築ツール Vite の使い方に始まり、JavaScript（ES2022）、関数型プログラミング、TypeScript までをカバー。JS のパワーをフル活用する React を使いこなすための基礎力を固めます。 「フロントエンドの開発になぜ Node.js が必要なの？」「使っている各種のツールは何をしてくれてるの？」「import はどうやってファイルを読み込んでるの？」のような、学習者が抱く根本的な疑問にまで
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
爆速React+TypeScript+Viteの環境構築 - Qiita
Dependent Props In React Typescript