HTML to React & Figma by Magic Patterns - Chrome Web Store
Convert HTML from any page to React and/or Figma. Edit with AI. Convert a page or a section of a page to React code or an editable Figma design. What you can do with HTML to React/Figma: - Grab an existing design that you like and instantly get React code you can use in your own project - Import existing designs to edit and work off instead of starting from scratch - Use AI to customize and modify
Claudeの「computer use」で試作アプリを爆速自動生成してみた💨 - Qiita
こんにちは、とまだです。 最近、AIの進化がすごいですよね！ 今日は、Anthropic社が新しく発表した「Claude computer use」という機能を試してみたので、その様子をお届けしたいと思います。 Claude computer use って何？ 簡単に言うと、「AIがパソコンを人間のように操作できる」機能です。 1. 基本的な操作が可能 マウスを動かしてクリックする キーボードでテキストを入力する 画面を見て情報を読み取る フォームに情報を入力する 2. 日常的なタスクの例 フォームに必要な情報を入力する スプレッドシートからデータを確認する ウェブブラウザで情報を探す データを集めてまとめる 3. 実際の使用例 例えば、こんなことができます。
【図解ハンズオン】たった60分でReactを使った音楽プレイヤーを作ろう！【TypeScript/Shadcn/TailwindCSS】 - Qiita
はじめに こんにちは、Watanabe Jin(@Sicut_study)です。 普段はReactを使った実践的なハンズオンを投稿しています。 今回はApple Musicのようなかっこいい音楽プレイヤーを作成したいと思います。 実際にデプロイすればオンラインで音楽を聞くことができる実用的なものになっているので、ぜひハンズオンをして学んでみてください。 動画で解説 この記事よりももっと細かいところまで知りたい方は動画教材もあります。 もしReactやTypeScriptに不安がある方、やったことがない方は以下の動画をみてください！ 対象者 Reactを初めてやる HTMLの経験がある JavaScriptをもっと学びたい TypeScirptを学んでみたい 今回のハンズオンはReactの基本が学べるので、Reactを全くやったことがない人におすすめです。 1. Reactの環境構築 Rea
Next.js 15にアップデートした | stin's Blog
このサイトで使っているNext.jsをv15にアップデートしました。 所詮ブログサイトなのでほとんど大きな変更はないですが、変更した内容を残しておきます。 内容パッケージのアップデート使っているNext.js関連のパッケージを一気にアップデートします。 npm i next@latest react@rc react-dom@rc @types/react@latest @types/react-dom@latest @next/bundle-analyzer@latest @next/third-parties@latest 注意点は、Next.js自体はv15が正式リリースされていますが、React v19はまだRC版です。なのでインストール時は @rc をつけてインストールします。 Async Request APIsNext.js 15からpage.tsxやlayout.tsxのp
小規模プロダクトにおける React 状態管理ライブラリ選定 in 2024 - バイセル Tech Blog
はじめに こんにちは！ テクノロジー戦略本部24年新卒の高橋です。 2023年の10月から内定者インターンを経験し、現在は開発3部CRMチームでフロントエンド(以後、FE)エンジニアとして働いております。 チーム内でFEの状態管理ライブラリを選定する機会があり、調査していく中で得た知見を共有したく、執筆に至りました。 少しでも状態管理ライブラリの選定に困っているFEエンジニアの参考になればと考えています。 はじめに 概要 前提 課題感 Context APIの思想とのズレ Context APIの記述量の多さ 状態管理ライブラリに求める要素 小さい単位で取り扱い可能 ボイラーテンプレートが少なく、APIが直感的で書き方の自由度が高くない 軽量 Reactアプリケーション内外での状態管理が可能 最終決定 検討候補 Redux Zustand Jotai Valtio 評価表 移行設計 既存C
Next.js 15 のリリースなど: Cybozu Frontend Weekly (2024-10-22号)
はじめまして！ サイボウズ株式会社 フロントエンドエンジニア（内定者バイト）の mehm8128 (@mehm8128) です。 はじめに サイボウズ社内では毎週火曜日に Frontend Weekly と題し「一週間の間にあったフロントエンドニュースを共有する会」を開催しています。 今回は、2024/10/22 の Frontend Weekly で取り上げた記事や話題を紹介します。 取り上げた記事・話題 Announcing Deno 2 Deno v2.0 がリリースされました。 v2.0 には次の内容が含まれます。 Node.js および npm との後方互換性 package.jsonとnode_modulesをネイティブでサポート Next.js、Astro、Remix、SvelteKit など多くのフレームワークをサポート deno fmtで HTML、CSS、YAML をフ
DuckDB-Wasm + 生成AI on Next.js で、どなたでも、いますぐ、地理空間情報の分析ができましてよ
本日のデモ 本日のソースコード タイトルには、文字数の限界で、DuckDB-Spatialという言葉を入れられなかったですわ。 もちろん、今回も、DuckDB-Wasmに加えて、DuckDB-Spatialも活用していますわよ。 はじめに わたくしは、学術的研究として、生成AIによるSQLクエリ生成、そして、生成AIによる地理空間情報の分析と可視化、といった事例が既に多数あることは知っていますわ。 しかしながら、いったい、どれだけの研究者が、そうした研究を、実際にどなたでもが触ることのできるWebアプリケーションやスマートフォンアプリケーションなどのソフトウェアプロダクトとしてデプロイして、本気で世界を変えたいという情熱を持っているのでしょうかしら？ わたくしは、どのようなアイデアも、ソフトウェアプロダクトとして、どなたでも試せるようにデプロイしてこそ、ようやく世界を変える第一歩目だと考え
React Nativeがアーキテクチャを刷新 — React 18の機能を全て備え、大幅なパフォーマンスアップを実現
10月24日、React Nativeチームは、バージョン0.76をリリースした。 本バージョンではアーキテクチャが刷新されており、React Nativeの今後にとって重要なアップデートとなっている。 新しいアーキテクチャの主な改善点 今回のアップデートでは、以下の4つの重要な要素が導入されている。 新しいネイティブモジュールシステム JavaScriptとネイティブ層が直接通信できる「JSI（JavaScript Interface）」を利用することで、ブリッジを介さずに同期的な関数呼び出しが可能となった。この変更により、ネイティブモジュールとのやり取りがより効率的かつ高速になった。 const value = nativeModule.getValue(); nativeModule.doSomething(value); 旧アーキテクチャでは、ネイティブ関数の呼び出しに非同期のコー
Next.jsと比較しながらHotwireを理解するサイト: "Hotwire for Frontend Developers"
ここ３ヶ月間ほど、"Hotwire for Frontend Developers"「フロントエンドエンジニアのためのHotwire入門」というウェブサイトを作っていました。（ベータ版として公開していました） HotwireとNext.jsをちゃんと見てから比較してもらいたいというのが最大の目的で、同じUIをHotwireのとNext.jsで作成し、デモを動かしたり、コードを見たりしながら比較してもらおうというのが主旨です。同じUIをNext.jsのPages RouterとApp Routerで作っているものもありますので、この比較もできます。 結構コンテンツが多いので、Zennではこれから少しずつ内容も紹介していきたいと思います。 まずはご覧ください！ "Hotwire for Frontend Developers"
世界最大級の「完全栄養食サブスク」をともに創るフロントエンドエンジニア募集！
世界最大級の「完全栄養食サブスク」をともに創るフロントエンドエンジニア募集！ ベースフード株式会社 @basefood TypeScript JavaScript Vue.js React Angular I want to hear a detailed 何をどうやって実現する仕事か？ ベースフードが独自開発するECシステムの開発・運用に携わっていただき、よりユーザ体験を向上させるようなシステムを目指していきたいと思っています。 https://shop.basefood.co.jp/ なぜやるのか ベースフードはこれまで、一食に必要な栄養素を全て含む完全栄養食を独自開発の自社Webサイトを通じて販売してきました。 これからは「健康をあたりまえにするWell-Beingサービス」を目指し、ユーザーのヘルスケアデータを活用したアプリやサービスも開発していきます。 「人生を楽しみ尽くす基盤の
Cloudflare WorkersとNext.jsインテグレーションの問題にOpenNext実装が加わった - laiso
Cloudflareが@opennextjs/cloudflareを発表 2024年9月末に開催された「Builder Day 2024」でNext.jsアプリをCloudflare Workersにデプロイする新たな方法が公開された。 この方法は、@opennextjs/cloudflareを使ってビルドする。既存の@cloudflare/next-on-pages方式を置き換える可能性があり、現在は実験的な段階だ。 以下に新旧の開発手順のドキュメントがある。 新(opennextjs): Next.js | Cloudflare Workers docs 旧(next-on-pages): Get started | Full-stack (SSR) | Next.js apps OpenNextの概要 OpenNextは、Next.jsアプリをVercel以外のインフラにデプロイでき
Reactのプロジェクトを構築する際に「create-react-app」から脱却して、より軽量で高速なビルドツールを使う方法 - Python転職初心者向けエンジニアリングブログ
こんにちは、皆さん！今日は、Reactのプロジェクトを構築する際に「create-react-app」から脱却して、より軽量で高速なビルドツールを使う方法についてお話しします。具体的には、pnpm、Vite、React、そしてテストフレームワークのVitestを組み合わせて、シンプルかつ効果的な開発環境を構築していきます。 最近では、create-react-appが非常に人気ですが、プロジェクトが大きくなるにつれて、ビルド時間や初期設定の重さが気になることがあります。そこで、Viteの登場です。Viteは、開発者体験を向上させるために設計された新しいビルドツールで、非常に高速です。そして、pnpmは依存関係管理を効率化するためのパッケージマネージャーです。 このブログでは、これらのツールを使って、Reactプロジェクトを作成し、テストを設定する方法を具体的なコード例を交えながら説明します
Next.jsで簡単なCRUDアプリを作りながら気になったセキュリティ: Railsの視点から
先日、Kamal 2でNext.jsを安価なVPSにデプロイする勉強をしながら、Next.js App Router/Server ActionでCRUDのデモアプリを作成しました（コードはGitHub）。そのときにセキュリティについて気になって点がいくつかあり、勉強しながら対策をしましたので紹介したいと思います。 私自身は業務でNext.jsを書いた経験が限定的です。的外れな議論をしているかもしれません。あくまでもRuby on Railsアプリを書くときと同じ気持ちでNext.jsのアプリを書いたとき、セキュリティ上で気になった点を挙げているだけです。私が見落としている点や誤っている点等ありましたら、コメントやX等で教えていただけると大変ありがたいです。 その１：データ漏洩の危険性 この問題についてはムーザルちゃんねるが紹介しています。またNext.jsの公式ブログでも対策が紹介されて
【海外記事紹介】React、そしてReact Nativeは、Meta社自身にどう使われているのか？
10月3日、Engineering at Metaで「Meta Connect 2024 でのReact(React at Meta Connect 2024)」と題した記事が公開された。この記事では、MetaにおけるReactとReact Nativeの深い活用方法、さらにはこれらの技術がどのようにしてMetaの大規模な製品開発に革新をもたらしているかについて、詳しく紹介されている。 ReactとReact Nativeは、Metaにとって単なるツール以上の存在であり、これらの技術は製品開発の根幹を成すものだという。毎月5,000人以上のエンジニアがこれらを駆使して、新しい製品やエクスペリエンスを作り上げている。Metaが開発する製品の品質と、凄まじいリリース頻度の背景には、ReactとReact Nativeの強力な基盤がある。 InstagramとFacebookのMeta Ques
Kamal 2 を使い、インフラに詳しくない人でもNext.jsを296円のVPSにデプロイできるよう、説明してみる
9月26, 27日に開催され、めちゃくちゃ盛り上がったRails World 2024でKamal 2が発表されました。Kamal 2はRuby on Railsを作った37signals社が、自社の人気サービスをデプロイするのに使用しているツールです。 37signals社はAWS等のクラウドに年間で$3,201,564を使った(2022年: 日本円で4.5億円ほど)らしく、一方でAWSを使ってもインフラ系人員の削減もほとんどできなかったので、全然割に合わないからもうクラウドはやめて自分たちのサーバを使うと宣言しています。Kamal 2はそのために作られた、本格的なデプロイツールです。 （ちなみに自分たちのサーバを使うと言ってもオンプレミスでサーバを運用するというのではなく、さくらの専用サーバに近いイメージです） Dockerベース Docker化されたアプリなら何にでも対応 (Rail
【フルスタックエンジニアへの道！】ReactとTypeScriptの修行をした話 - Findy Tech Blog
こんにちは、ファインディでFindy Team+（以下Team+）を開発しているEND（@aiandrox）です。 普段はバックエンドの開発をメインで担当しているのですが、3ヶ月間フロントエンドの開発に挑戦する機会がありました。短い期間でしたが、フロントエンドテックリードから直接指導してもらいながら実装をすることで、フロントエンドの開発を一人でできるくらいに慣れることができました。 今回は、その経験と学びについて書いていきます。 フロントエンドに挑戦する前の自分について フロントエンドに挑戦することになった経緯 フロントエンドを学ぶ上で助けられたこと フロントエンドのノウハウが溜まった記事の充実 開発ツールが揃っている テックリードとマンツーマンでタスクをやっていく react.devの輪読会 つまづいた点 タスク粒度を適切に分割すること Team+のフロントエンドの責務の考え方 Type
Next.jsのPPR + StreamingがVercelで実行されるときの全体像を掴む
こんにちは。sumirenです。 イントロダクション 先日、Next.js 15 RCが出ました。App RouterでPartial Prerenderingが広く使われ始める日も近いのではないでしょうか。 Partial Prerenderingは、特にStreamingと一緒に利用し、Vercelにデプロイした場合、強力に最適化が行われます。最適化は非常に高度で、部分的な静的レンダリングといったアプリレイヤから、エッジとオリジンの使い分けといったインフラの構成まで絡む複雑な設計です。最終的にVercelにデプロイされた後の全体の動作イメージが頭に入っている方は少ないのではないでしょうか。 この記事ではPartial PrerenderingとStreamingについて、Vercelデプロイ後の動作イメージがついている状態を目指します。静的ルートやサーバーサイドフェッチなど単純な例から
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Front-end libraries (React, Vue, Angular) and the basic principles of how they work, all in a single file using pure JavaScript (VanillaJS).
react-to-web-component を使って React コンポーネントを Web Components に変換する
Rules of React を経典に React を書いて心の安寧を保つべし - Qiita
