ミニマムな React Web アプリケーションの技術スタックを大公開！ - inSmartBank
はじめに こんにちは。サーバーサイドエンジニアの mokuo です。 最近、ミニマムな React アプリを実装する機会がありました。 社内のメンバーにアドバイスをもらいながら、今（2024年前半） React アプリをミニマムに作るならこんな感じかな、という構成になった気がするので、ご紹介したいと思います。 実例の1つとして参考にしていただけますと、幸いです。 はじめに 本文 📝 機能要件 ⚒️ 採用したツール (npm モジュール) 📁 ディレクトリ構成 👨💻 プロトタイピングの実施 🍩 おまけ コンポーネント設計について フロントエンドに DDD のエッセンスを取り入れてみたい おわりに 本文 📝 機能要件 社内の限られた CS メンバーのみが利用する、管理画面を開発しました。 バックエンドは Golang で実装される API サーバーで、認証機能以外だと、2つの機能
PythonでWebアプリ作れるやつのまとめ(11選)
概要 最近、pythonでUI部分も含めたWebアプリ作成ツールがいろいろ出てきているので、知っている限りでまとめてみようと思います。 (solara追加(2023/5/15), reactpy追加(2023/11/6), taipy追加(2023/12/2), fastui追加(2023/12/11)) FastUI Taipy ReactPy Solara Reflex Flet Streamlit Dash Panel NiceGUI Gradio 各ツールの紹介 FastUI FastAPIのエンドポイントを定義する関数内にUIを定義する感じで書く Taipy 書き方としてはマークダウンっぽいテンプレート用いてUIを作成する感じ DAGツールを簡単に作れるScenarioという機能がある ReactPy その名の通りReactをPythonに移植したような感じのフレームワーク サー
巷の「ReactとNext.jsの比較」はここがおかしい、というか比較すること自体が微妙 - honey32
(WIP まとまったら Qiita とかに上げるかも) TLDR; 「React と Next.js を比較」という記事で、 Next.js と比較できるのは「フレームワークなしで React を使うという選択肢」であって、「React そのもの」ではない。 ✅️ React を使うのに 「フレームワークあり」 vs 「フレームワークなし」 ❌️「React」 vs 「Next.js」 それはそうと、「create-react-app の機能・特徴」のことを、「React の機能・特徴」であるかのように書いてしまっている記事が多い create-react-app 自体が擬似的なフレームワーク（といえそう） そもそも、create-react-app は今は更新されてないので create-vite-app を使うべき フレームワークあり or フレームワークなし 【フレームワークあり】
なぜ <div> に onClick がダメなのか？
■ はじめに <div>要素にonClickを渡すべきではない、ということ聞いたことはないでしょうか？ ただ、なぜ渡すべきでないのか？ 理解してなかったので今回調べてみました。 サンプルコード 今回動作確認に利用したサンプルリポジトリのコードはReactで書いています。 ■ 結論：<div>にonClickを定義するのがなぜダメなのか？ ユーザーにとって操作性の低いボタンになってしまうから、です！ 要するに UX が悪くなってしまうから！ その理由を解説していきます！ ■ 操作性の低いボタンになってしまう理由 大きく３つあると考えています。 div要素は focus を持たないから returnキー, spaceキーをonClickに変換しないから スクリーンリーダーが認識しない要素だから ◎ focus を持たないから <div>要素はfocusを持ちません。 なので、tabキーで要素に
バックエンドエンジニアのための「React の仕組み」の理解方法 - めもめも
何の話かと言うと 普段、UI に関わらないバックエンドのコンポーネントを作っているエンジニアがフロントエンドのコーディングを理解しようとすると、色々と異次元な世界で混乱する（というか何をやっているのかをすぐに忘れる）ので、バックエンドエンジニアにわかりやすい形で React の仕組み（メンタルモデル）をまとめてみました*1。 ブラウザの画面に描画される個々の要素を「コンポーネント」と呼ぶ。 自分で定義したコンポーネントを HTML タグを使って表示することができる。 コンポーネントは関数として定義する。この関数は、HTML タグで指定された時の属性値を受け取って、コンポーネントを実際に描画する HTML の塊（React 要素）を返す。（つまり、コンポーネントを指定した HTML タグが、コンポーネントからの返り値の React 要素で置換される。） Javascript の関数はクロージ
React.js開発当初、「そんなものが使えるはずがない」とFacebook社内で評価されていた。React.jsの開発経緯を振り返る「React.js: The Documentary」YouTube公開
React.js開発当初、「そんなものが使えるはずがない」とFacebook社内で評価されていた。React.jsの開発経緯を振り返る「React.js: The Documentary」YouTube公開 代表的なJavaScriptのフレームワークの1つであるReact.jsがどのように生まれ、発展してきたのかが、React開発当時の関係者やメンテナーなどへのインタビューによって語られる動画「React.js: The Documentary」がYouTubeで公開されています。 動画の作成と公開を行ったのは、ITエンジニア向けの転職紹介などキャリアサービスを提供しているHoneypot社。同社は以前にもKubernetesの歴史を紹介したドキュメンタリー動画「Kubernetes: The Documentary」を公開しています。 参考：KubernetesをGoogleが開発し、
その処理、 setInterval じゃなくてブラウザが暇な時にやっちゃえば？
こんにちは。ぬこすけです。 setInterval などで定期的にブラウザで実行させている処理があったりするでしょう。 例えば、定期的にアクセストークンが有効かチェックし、無効だったら新しいトークンを取得するなど。 ブラウザはページのコンテンツを表示するために JavaScript の実行や UI の更新で忙しいです。 もし定期実行している処理がコンテンツ表示にかかわらない優先度の低い処理なのであれば、 できるだけブラウザの重要なタスクに影響を与えないようにしたい ものです。 この記事では できるだけブラウザの重要なタスクに影響を与えずに定期的に処理を実行させる方法を、アクセストークンのローテーションを例に紹介 します。 実装する機能 この記事で実装する機能は次の通りです。 React の hooks を使って実装します。 ブラウザのアイドル中(暇なとき)にアクセストークンを有効かチェック
`*.d.ts` ファイルをコミットする前に知ってほしい4つのこと
export type Bookmark = { id: number; url: string; comment: string; }; このファイルには型しか書いてありませんね。ということは、「型定義ファイル」として bookmark.d.ts という名前にするべきでしょうか。実はそうではなく、この場合は bookmark.ts とするべきです。 「型定義ファイル」とは、「どこか別の場所にある実装に型をつけるためのファイル」です。たとえば、以下のファイルは「どこか別の場所にある実装」に型をつけているから、 *.d.ts にするのは自然です。 いっぽう、 type Bookmark は別のどこかにある *.js の型を与えているわけではないので、 *.ts でよいです。 このように本来 *.ts であるべきものを *.d.ts にしてしまうことには問題があります。代表的な問題として型エラ
HTMLのa要素にはhref属性を指定しなくてもよい: Days on the Moon
HTMLのa要素はハイパーリンクを表す要素であり、リンク先のURLをhref属性に指定します。しかし、a要素の役割はそれだけではありません。HTML標準によれば、a要素は「リンクとなりうる箇所のプレースホルダー」として使うこともできます。この場合はhref属性を指定しません。 リンクとなりうる箇所の例として、ナビゲーションやタブUI、パンくずリストなどでの「現在の項目」があります。 <nav> <ul> <li><a href="/">ホーム</a></li> <li><a>最新記事</a></li> <li><a href="/archives">アーカイブ</a></li> <li><a href="/settings">設定</a></li> </ul> </nav> ReactなどJSXでa要素を生成する場合、href属性を指定しないためにはhrefプロパティにundefinedを
Web ページの背景を動く星空にした話 (with react-three-fiber)
TL;DR モチベーション ウェブページの背景に星空を見せたかった。それがちゃんと実際の星空の、リアルタイムの状況を反映していたら面白いよねと思った。 スタート時の状況 主に愛情のこもった手打ち HTML5 と 手打ち CSS でシンプルな Web ページを作っていた https://web.archive.org/web/20210212085818/celestian.io この前にどうやら React が世間では流行ってるらしいということで React と TypeScript を使った小さい 1 ページアプリを作った https://web.archive.org/web/20201202100627/https://celestian.io/ssr/ 今の https://celestian.io/sushi の前身 C# で WPF のデスクトップアプリとか作ってたことがあった
Next.jsはどうやってスクロール位置を復元するのか
Next.jsにはexperimental(実験的機能)でscrollRestorationというフラグが存在します。 // next.config.js const nextConfig = { // ... experimental: { scrollRestoration: true, }, } module.exports = nextConfig デフォルトでもブラウザ側でスクロール位置を復元してくれることもありますが、Safariでは復元されなかったり、ChromeでもgetServerSideProps利用時にはこのフラグを有効にしないとスクロール位置が復元されないなど不安定な状態です。最近この辺りについて識者の方々から色々ご教示いただき、自分では気付けないような部分の知見も多く得られたので、備忘録兼ねてscrollRestorationが何を解決しようとして、どう実装されて
Reactに有利なベンチマークを Vue.js で試したところ大差なく、そして…
みなさんこんにちは。 現在、フロントエンドでは宣言的UIが大流行しており、そのためのフレームワークも Vue.js をはじめ複数存在しています。 （React はフレームワークではなくライブラリです） 同種のソフトウェアや言語があれば、自分の好みを巡って意見を出し合うのはエンジニアの常でして。 それがパフォーマンスに関することであれば、無関心ではいられなかったりするわけです。 とはいえ Evan You もいうように特定のフレームワークやライブラリが現実世界のパフォーマンスの問題を銀の弾丸のように解決できるわけではありません。 フレームワークの開発者が数10ミリ秒単位でパフォーマンス改善に勤しむなか、利用する企業が（数100ミリ秒要するような）広告会社のスクリプトを迷いなく追加したりするのですから。 それでも僕たちは、パフォーマンスの話題をせずにはいられません。 だって、それがエンジニアで
私のフロントエンドディレクトリ構成・テスト観点 2022
近日連投していた Next.js 記事のサンプルコードを公開しました。このサンプルコードを元に、私のフロントエンドディレクトリ構成・テスト観点を紹介します（あくまで執筆現在の脳内アウトプットになりますのでご了承ください） フロントエンドディレクトリ構成の事情 タイトルの「フロントエンドディレクトリ構成」をさす「Components」のディレクトリ構成は、いつも悩みのタネです。このモジュールシステムは「デザインシステム観点・アクセシビリティ観点・フロントエンド実装観点」の 3 つの観点が混在するため事情が複雑です。どうせ作るのなら「デザイナー・フロントエンド」どちらの開発基盤にもなりえる、盤石なモジュールシステムを目指したいですよね。 "AtomicDesign やめました"という声をたまに聞くのですが「デザインシステム的に捨てていいの？」と思うこともあるので、とくに要望がなければ、筆者は「
ライブラリゼロの20行でReduxもどきを実装して、Reduxを完全掌握しよう！！
はじめに Reduxは遠い昔に誕生したものなので、いまReduxを使っていない人も多いかもしれません。 Reduxは、出現当時はそれほど大きなソフトウェアではなかったのですが、ときが経つにつれて、いろいろな便利関数たちが現れてきて、そのせいで今からReduxを調べる人は、何が本質なのかを調べるのが難しくなっていると思います。 そこで3分でReduxもどきを実装しました。こちらです。20行！！ じゃーん！ JavaScriptでうごきます！！ // 実装 const createStore = (reducer) => { let state = 0; const listeners = []; const dispatch = (action) => { const newState = reducer(state, action); state = newState; listeners
【個人開発】「作りたいものがない」を少し解決するWEBサービスを作りました
概要 「夢色水車」という Twitter API v2 を使用した Twitter の市場調査サービスを作りました。 2023/02/09 追記 Twitter API の仕様変更に伴い本サービス「夢色水車」の更新を停止しました。 リリースからこれまでたくさんのアクセス本当にありがとうございました 🙇 サービスの更新は停止しましたが最後に Github にソースコードを公開しました。 これから Twitter API を使い始める方、Go や Next.js を学習している方に少しでも助けになればと思います。 使い方や詳細は各 README.md に記載しています。ライセンスの範囲でご自由にお使いください。 フロントエンド: バックエンド: 開発のきっかけ みなさんは今、作りたいものはありますか？ Twitterを見ていると、「ポートフォリオ作成や個人開発をしたいけれど作りたいものがない
SPA開発とセキュリティ - DOM based XSSを引き起こすインジェクションのVue, React, Angularにおける解説と対策 - Flatt Security Blog
Vue.js logo: ©︎ Evan You (CC BY-NC-SA 4.0 with extra conditions(It’s OK to use logo in technical articles for educational purposes)) / React logo: ©︎ Meta Platforms, Inc. (CC BY 4.0) / Angular logo: ©︎ Google (CC BY 4.0) はじめに こんにちは。株式会社Flatt Securityセキュリティエンジニアの森(@ei01241)です。 最近のJavaScriptフレームワークの進化は著しく、VueやReactやAngularは様々なWebサービスに採用されています。そのため、多くのWebサービスがSPAを実装するようになりました。JavaScriptフレームワークは便利な一方で
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
AIUI.me - Screenshot to code
Cloudscape - Cloudscape Design System
ushironoko.me
React Three Fiberでシンプルなパーティクルアニメーションを実装してみた | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
