【フルスタックエンジニアへの道！】ReactとTypeScriptの修行をした話 - Findy Tech Blog
こんにちは、ファインディでFindy Team+（以下Team+）を開発しているEND（@aiandrox）です。 普段はバックエンドの開発をメインで担当しているのですが、3ヶ月間フロントエンドの開発に挑戦する機会がありました。短い期間でしたが、フロントエンドテックリードから直接指導してもらいながら実装をすることで、フロントエンドの開発を一人でできるくらいに慣れることができました。 今回は、その経験と学びについて書いていきます。 フロントエンドに挑戦する前の自分について フロントエンドに挑戦することになった経緯 フロントエンドを学ぶ上で助けられたこと フロントエンドのノウハウが溜まった記事の充実 開発ツールが揃っている テックリードとマンツーマンでタスクをやっていく react.devの輪読会 つまづいた点 タスク粒度を適切に分割すること Team+のフロントエンドの責務の考え方 Type
先日 続・URLシェアを支える技術 CompressionStream という記事をZennに投稿しました。 この記事のためにlz-stringとCompressionStreamの圧縮率を比較できるサイト(以下比較サイト)をVite+Reactで作りました。 このサイトでは、入力してもらったテキストをURLに反映して、入力状態をそのままシェアできる機能を実装しています。TypeScript PlaygroundやReact Compiler Playgroundのような感じです。 例えば次のようなURLをシェアすることができます。 https://stinbox.github.io/lz-string-vs-compression-stream?source=eJx73Nj0uHHV48b5jxvXKxSXZObpJuXkpys8blz3uHnV4-bNj5vWP26a9GJH_-Omy
Reactのコアアーキテクチャは、与えられた関数（すなわちコンポーネント）を繰り返し呼び出します。この仕組みはReactのメンタルモデルを単純化し、その人気に一役を買いましたが、同時にパフォーマンスの問題が生じる原因にもなりました。関数のパフォーマンスコストが高いと、アプリの動作は総じて遅くなります。 開発者はReactにどの関数をいつ再実行するか手動で指示しなくてはならなかったため、パフォーマンスチューニングが悩みの種になっていました。Reactチームが最近リリースしたReact Compilerというツールは、コードを書き直すことにより、開発者が手動で行っていたパフォーマンスチューニングの作業を自動化します。 React Compilerはコードに何をするのでしょうか？裏ではどのような処理が行われるのでしょうか？使った方がいいのでしょうか？こうした疑問について詳しく見ていきたいと思いま
自分でコードを書かずにどこまでやれるか？「GitHub Copilot」をフル活用してReact＋ExpressのWebページ実装に挑戦
本連載ではコーディング支援AIツール「GitHub Copilot」のさまざまな機能や活用例を紹介しています。前回はGitHub Copilotのより詳細な操作方法とシーン別の活用法を説明しました。最終回となる今回は、クライアント側にReact、サーバー側にExpressを利用したWebページを、GitHub Coplotに全面的に頼り、できるだけ自分でコードを書かずに実装する事例を紹介します。 はじめに 「GitHub Copilot」は、プログラムのコーディング支援を想定したAIツールです。本連載では、GitHub Copilotの便利な機能や利用法を、複数回にわたって紹介しています。 図1 GitHub CopilotのWebページ 前回記事では、ショートカットキーやコマンドといった、GitHub Copilotのより詳細な操作方法と、学習時や開発作業時といったシーン別の活用事例を紹
自分でコードを書かずにどこまでやれるか？「GitHub Copilot」をフル活用してReact＋ExpressのWebページ実装に挑戦
プロジェクトの生成 最初に、実装のもととなるプロジェクトを作成していきます。 Reactプロジェクト 「TypeScriptを利用したReactプロジェクトの生成方法」をCopilot Chatに質問すると、図2の通り、Create React Appを利用する方法を提案してきました。 図2 Copilot Chatが提案したReactプロジェクトの生成方法 しかし、Create React Appを利用する方法は、Reactの古いページには記述があるものの、現在の公式ページには記述がなく、方法として古い点が気になります。そこで「create-react-appは古いのでは」とCopilot Chatに質問すると、図3の通りViteを利用した方法を提案してきました。 図3 「create-react-appは古いのでは」と質問した様子 本記事ではこの提案に基づき、Viteを利用して、リスト
今回は認証・認可サービスであるClerkのSDKについて解説をします。Clerkといえば基本的な認証・認可機能はもちろんのこと提供されているReact Componentを配置するだけで認証フローが完結する特徴があります。 https://clerk.com/ しかし、React Componentを配置するだけで認証が完結するというのはあまりにも簡単でブラックボックス化しているため、内部の実装を確認してその詳細を見ていきたいと思います。 はじめに 本記事ではClerkの提供するSDKに着目して解説をするため、具体的なClerkの使用方法や個別の認証方法については触れません。 また、Next.jsやRemix、TanStack StartなどさまざまなFrameworkに対応していますが、今回はReact + Viteの構成を前提とします。 SDKのGithub Repositoryは下記
React(next.js)とかで開発してる時に深い階層のObjectデータをデバッグ用に吐き出すならconsole.log()ではなく、console.dir() - Qiita
React(next.js)とかで開発してる時に深い階層のObjectデータをデバッグ用に吐き出すならconsole.log()ではなく、console.dir()JavaScriptTypeScriptReact なんてことはない話なのかもしれないですが…こんな書き方知らなかったよ！ということで。 普通にフロントエンドのjavascriptならconsole.log()でいいんですよ。 ただ、reactなどのバックエンドjavascriptでは普通にconsole.log()を使うと多段の階層では表示されない問題が起きます。 結論で言うとこのように書けばOK。
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React useで非同期処理を簡単に扱う | stin's Blog
React Compilerについて理解する | POSTD
ClerkのReact Componentが便利すぎるので覗いてみる