生成AI時代のフロントエンド開発術
2022年11月にChatGPTがリリースされて、1年と約半年が経過しました。私はChatGPTが話題になった頃から、継続して利用しています。ChatGPTを使い続けていると、Webアプリケーションのフロントエンド開発に役立つことがありました。 そこで、本記事ではフロントエンド開発でChatGPTを活用して効率よく進める3つのパターンにまとめました。これらのパターンを紹介し、読者の皆さんの開発に役立ててもらえればと思います。 以下は、本記事で紹介するFigma、ソースコード、デプロイ先URLです。 Wireframing photo - Figma silverbirder/figma-photo-sample-app-for-ai - GitHub https://figma-photo-sample-app-for-ai.vercel.app ChatGPTを使う前に ChatGPTに
Reactを使ってプロダクト開発している開発者だけでなく、マネージャにも読んでほしい「Fluent React」 - ROUTE06 Tech Blog
チームでReactを使って開発していると、コードレビューをする際に、「この書き方はしない方がいいが、それを説明するには800文字くらい必要。図も描きたい。でもそれらを準備する時間はない。」ということが度々ありました。 また、フレームワークやライブラリの技術選定をする際、マネージャに「どうして技術選定が必要なのか」を説明する必要がありました。ROUTE06のマネージャはエンジニアリングへの造詣が深い方が多いので、対立構造になることはありませんが、説明するためには1000文字くらい必要で、やはり図も描きたい。時間はない。と同じ気持ちになることがありました。 参考情報として紹介できる情報がないか探してみると、「とりあえずこうすればOK」というベストプラクティスについては検索エンジンやSNSですぐに見つかります。ただ、どうしてその方法がベストプラクティスなのか、仕組みや原理を説明している情報は少な
CSS から React コンポーネントを生成する MistCSS
CSS から React コンポーネントを生成する MistCSS 2024.03.23 MistCSS は CSS in JS になぞらえた JS from CSS というコンセプトで、CSS から React コンポーネントを生成するツールです。ピュアな CSS を記述できるので、学習コストが低い、パフォーマンスに影響がないといったメリットがあります。 昨今のフロントエンド開発では、CSS の手法が多様化しています。特に React での開発では以下のような手法があげられます。 グローバル CSS（エントリーポイントで 1 つの CSS ファイルを読み込む） CSS Modules CSS in JS Tailwind CSS CSS の手法に新たな選択肢が加わりました。それが MistCSS です。MistCSS は CSS in JS になぞらえた JS from CSS というコ
Page Speed Insightsの改善 「CLSで満点を取る」 - Hello Tech
大変ご無沙汰しております、今年度もあと少しです。この記事ではAutoReserveでのCLS改善についてお話します。 Web高速化シリーズ第2弾となります、第1弾「メンバーを巻き込み、分析基盤を整える」も併せてご覧ください。 CLSはきちんと改善を行えば必ず満点の25点を取ることができる、Page Speed Insightsの中でもある意味特別な指標です。CLS以外の指標は「~するまでの”時間”」を示しますが、CLSだけは「1画面のなかでコンテンツがずれた”総量”」を示しているためです。秒数を削るのはある程度限界がありますが、「コンテンツがずれないようにする」のはほぼ完璧に対応することができます。 Page Speed Insightsが登場してすぐの頃はCLSは5点しか持っていませんでした。 5点にしてはUXへの影響が大きいなあと思っていたら、バージョン8で15点、現在のバージョン10
HonoでAPI付き雑React SPA最小
laisoさんが書いてたのほぼなんだけど Honoは文字列でもStreamでもなんでも返せるからサーバーサイドもReactで書けるし、tsconfig.jsonで適切に設定すればJSXなんでもいけるし、Viteのdev-serverがあるから、サーバーもクライントも同時に開発、ビルドできて、もちろんAPIを生やすのが得意で、雑React SPA環境（API付き！）作るのに向いてるよ。 作り方解説します。めんどい人はここにプロジェクト作ってるからclone、ダウンロードしてください。 まず、create-honoして、cloudflare-pagesのテンプレートを選ぶ。bunをパッケージマネージャーに使ってる。
雑にReactアプリを作りたい時に使ってるもの
import "./App.css"; import { Link, Route, Switch } from "wouter"; function Nav() { return ( <nav> <Link to="/">Home</Link> <br /> <Link to="/about">About</Link> </nav> ); } function Home() { return ( <div className="App"> <h2>Home</h2> <Nav /> </div> ); } function About() { return ( <div className="App"> <h2>About</h2> <Nav /> </div> ); } function App() { return ( <> <Switch> <Route path="/" compo
ssig33: "最近最小限のReactアプリを作るのに使ってるもの についてとりあえずメモしとく。 ##..."
新人声優 +81-9014502501 mail@ssig33.com 0088-7709-7529 it/it. my opinion may be not my own. but my fate is my own. 最近最小限のReactアプリを作るのに使ってるもの についてとりあえずメモしとく。 前提: デカいフレームワークは使わない next.js, Astro, Remixは使わない。next.jsとAstroは大好きなのだが、社内向けとか個人用とか小さいアプリに使うにはあきらかに恐竜であると思う。Remixは大好きではない。 前提: SSRしない SSRもSSGもISGもしない。CSRでいい。SSRしたいならReactをそもそもぶん投げたほうが(個人レベルなら)いいと思ってる。それがほしいならPHPやRails でええ。今更RailsでView書きたくないとか思うかもしれない
フロントエンドを Vue.js から React にリプレイスしたお話 (前編) - NTT Communications Engineers' Blog
はじめての方、はじめまして。久しぶりの方、お久しぶりです。 イノベーションセンターの何縫ねの。(@nenoMake)です。 普段の業務ではソフトウェアエンジニアとして Node-AI という WEB アプリケーションの開発をしています。 パブリックな活動としては、好きな言語である C# 関係の OSS 開発や技術ブログの投稿、登壇などをしています。 ですが、今回は C# ではなくフロントエンドのお話をします...! この記事では今まで Vue.js 2.x で開発されていた Node-AI の WEB フロントを完全に捨て去り、React にリプレイスしたお話をつらつらとしていきます。 まずは前編ということで、リプレイスプロジェクト発足時の課題感からはじめ、プロジェクトの進め方や選定技術などについてお話しします。 後編には内部の設計などのより技術的なお話をしたいと思います。では前編スタート
Reactの気持ちになって理解するWebパフォーマンスチューニング
WebアプリケーションのUIの表現はどんどんリッチになってきています。しかしその一方でブラウザ上での描画の負荷は増大し、時としてスムーズに動かず体験を損ねることもあります。ユーザーにとって使い心地の良いUI体験はフロントエンドのパフォーマンスチューニングに大きく委ねられていると言えるでしょう。 スタートアップ開発を支援する株式会社Gaji-Laboでは、サービスの価値に直結するエンドユーザーの体験向上のため、快適なUIを提供する事をとても大切にしています。 この記事では、快適に動くUIを作るため、フロントエンドフレームワークのマジョリティであるReactとどう付き合っていくべきかを考えていきましょう。 Reactの仕事を理解するまず、Reactがどんな仕事をしているのかを理解するところからはじめましょう。Reactの主な仕事はUIを描画すること、そして必要に応じてそれを再描画することです。
Webフロントエンド入門
まずはじめに HTML、CSS、JSを学んだ後にモダンなweb制作を行う上でこれから何を学べばいいだろうと手探り状態だった過去があるので、今同じ悩みを抱えている方に向けてこの記事を書こうと思いました。また、自分自身が2023年に多くのことを学んだのでそれの整理になればという思いもあります。 あと、いいね、コメントいただけると記事作成の励みになります😇 この記事の対象者 HTML, CSS, JSはある程度理解した モダンなWeb制作を行いたい これから学ぶべき技術 React, Next.js 一度は聞いたことある人も多いと思います。これは、Webサイトを効率的に開発することを目的に作られたJSのフレームワーク(正確にいうとReactはライブラリ)です。 ReactはFacebook社が開発したもので、それをVercel社がより使いやすくしたものがNext.jsです。 作成するものによっ
Open Interpreterを使ってReactプロジェクトを自動生成してみた - Taste of Tech Topics
こんにちは、最近アニメ「葬送のフリーレン」を観て、漫画を全巻購入してしまった安部です。 今回は、Open Interpreterを使ってみます。 Open Interpreterは、ChatGPTのAdvanced Data Analysis（旧Code Interpreter）のように、プロンプトから判断して自動で処理を実行するという動きを、ローカル環境で実現してくれます。 ローカル環境で動くため、ディレクトリに置いてあるファイルを読み込ませたり、ファイルを特定の場所に出力させたりできます。 今回は、OpenAI のAPIで、gpt-3.5-turboを利用していますが、API Keyを持っていない場合は、Metaが公開した大規模言語モデル（LLM）である「Code-Llama」が自動でダウンロードされて利用できるようになります。 Open InterpreterのChatGPTとの一番
爆速React+TypeScript+Viteの環境構築 - Qiita
どうも、初めまして。 面識のある方は、お久しぶりです。みつくまです🐻 今日は、DockerにおけるReactの環境構築方法についてお話することができればと思います。 最初からクライマックス まず、Docker Desktopを起動します。 Dockerを動かしたいディレクトリで コマンドプロンプトを召喚します。 そして以下のコマンドを入力します。 % git clone https://github.com/sprout2000/docker-react-ts.git % cd docker-react-ts % docker-compose up 以上で、React + TypeScript + Viteの環境構築は終了です！ それでは、また次回！🐻 と流石に私自身なんのプラスにもなっていないので内部のファイルについて 理解したことをお話していこうと思います。 中身はどうなってるの？
React for Web/React Native両対応のUIフレームワーク「Tamagui 1.0」正式リリース。最適化コンパイラで高速なレンダリングなど実現
React for Web/React Native両対応のUIフレームワーク「Tamagui 1.0」正式リリース。最適化コンパイラで高速なレンダリングなど実現 React for WebとReact Nativeの両方に対応しオープンソースで開発されているクロスプラットフォーム対応のUIフレームワーク「Tamagui 1.0」が正式にリリースされました。 Tamaguiを用いると、レスポンシブデザインに対応し高速にレンダリングされるアプリケーションのルック＆フィールやUIをシンプルなコードで記述できるなどの利点が得られます。 Glad to finally get 1.0 out the door, definitely the hardest thing I’ve shipped. Proud!!https://t.co/d6M9KUWJYD — Nate (@natebirdman
フロントエンドのパラダイムを参考にバックエンド開発を再考する / TypeScript による GraphQL バックエンド開発
2022年10月1日に開催された #postdev での発表です
[React🐣 ]宣言的UIの構築をシンプルなプロセスで理解する
この記事で話すこと この記事ではReact入門者の方、UIの状態管理についてよく悩んでしまう人を対象に書いています。 いきなり複雑な状態管理を考え出すのではなく、そもそも宣言的UIの構築プロセスを頭の中に置いてそのコンポーネントの状態を特定し、整理することで管理する状態を明確にします☺️ 宣言的UIの構築プロセスを通し、react入門・初心者がいきなり状態管理を考え出して手が動かなくなる状態を脱却することを目的にしています。 宣言的UIの構築をフォームコンポーネントを例に４STEPで理解する 今回は「入力値を送信するテキスト入力フォーム」を例にとって4stepでプロセスを理解する コンポーネントの状態を列挙してみる 状態変化のきっかけのトリガーを特定して、フローを作る useStateを使って状態を宣言する 状態のリファクタリング（今回は不要・重要でない状態変数を削除する） 目標：最初から
![[React🐣 ]宣言的UIの構築をシンプルなプロセスで理解する](https://cdn-ak-scissors.b.st-hatena.com/image/square/ca8a34389f7b742c50cd7f4e6f6447ed51b037e0/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--gjocjZe1--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%25255BReact%252520%252520%25255D%2525E5%2525AE%2525A3%2525E8%2525A8%252580%2525E7%25259A%252584UI%2525E3%252581%2525AE%2525E6%2525A7%25258B%2525E7%2525AF%252589%2525E3%252582%252592%2525E3%252582%2525B7%2525E3%252583%2525B3%2525E3%252583%252597%2525E3%252583%2525AB%2525E3%252581%2525AA%2525E3%252583%252597%2525E3%252583%2525AD%2525E3%252582%2525BB%2525E3%252582%2525B9%2525E3%252581%2525A7%2525E7%252590%252586%2525E8%2525A7%2525A3%2525E3%252581%252599%2525E3%252582%25258B%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Aaratasss%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzEyNDBiNTg1NTcuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
React 18リリース候補版が公開。Automatic BatchingやServer-Side Renderingのストリーミング対応による速度向上、IE対応の終了など
React 18リリース候補版が公開。Automatic BatchingやServer-Side Renderingのストリーミング対応による速度向上、IE対応の終了など JavaScript対応のUIライブラリである「React」の最新版、「React 18」のリリース候補版が公開されました。 Our next major version, React 18, is available as a Release Candidate. If you’d like to help us prepare for the stable release, follow this upgrade guide and let us know if you find any issues! https://t.co/PrgSEgNq3L — React (@reactjs) March 8, 2022
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
DockerでReact, TypeScript環境を構築する - Qiita
React フレームワークの 動向と選定基準
mosya React - React入門から周辺知識の習得にも活用できるプログラミング学習サービス
https://getwaitlist.com/blog/%5Bid%5D