Reactアプリケーションのアーキテクチャの一例として公開されているGitHubリポジトリ「bulletproof-react」が大変勉強になるので、私自身の見解を交えつつシェアします。 ※2022年11月追記 記事リリースから1年ほど経過して、新しく出てきた情報や考え方を盛り込んだ続編記事を書いていただいているので、こちらも併せて読んでいただければと想います（@t_keshiさんありがとうございます！）。 ディレクトリ構造が勉強になる まずはプロジェクトごとにバラつきがちなディレクトリ構造について。 ソースコードはsrc以下に入れる bulletproof-reactでは、Reactに関するソースコードはsrcディレクトリ以下に格納されています。逆に言えば、ルートディレクトリにcomponentsやutilsといったディレクトリはありません。 たとえばCreate Next Appで作成
いまNext.jsで新規サービスを立ち上げるときの観点（Router・CSS・認証・監視など/2023年末）
免責事項 社内向けに展開するように雑にまとめました Next.jsの知見が深くない人がリードしてPoCを立ち上げなきゃいけなくなったが、社内的にはNext.jsを推奨しているみたいな場面を想定しています なので自信ないところも多いですが割と断言するように心がけて書いています PoCの立ち上げ想定なので、jest/Storybookなど内部品質面についてあまり深く書くことを避けています ほぼ自分の知識だけで書いており私見も多いですし、そもそも自分自身がトップクラスの知識や視座を有しているわけでもないので、まずは以下の話を理解はした上で、踏襲するかどうかは別途他記事やGitHub、公式ドキュメントなどを漁って判断することを推奨 App RouterかPages Routerか 2023年末現在まだApp Routerは技術記事が足りてきている印象ではないため、社内でノウハウを積極的に貯めていく
技術記事を書くまでのステップについて順にコツを解説していきます。 特に、技術記事を書きたくてもテーマ選定が難しい、文章が苦手だ、なぜか筆が進まない、うまくまとめられないといった方に読んで欲しい記事です。 一応、エンジニア歴としては数年以内のジュニアレベルの方を想定しています。 以下のように技術記事を企画して、書いて、公開するためのプロセスごとにちょっとしたコツをまとめています。気になるセクションだけでも読んでいただければ幸いです。 テーマを決めよう 対象読者を決めよう 章立てを決めよう 書こう タイトルを決めよう 【余談】技術記事を書く理由とは 筆者について QiitaとZennにて6年以上の記事発信経験があり、 Qiitaでは5,942Contributionsを記録、 Zennでは3,253Likesをいただいています。 テーマを決めよう コツ：テーマのカテゴリによって執筆のポイントや
React Application Architecture for Production〜これ一冊で全てが網羅〜
はじめに この記事は、Alan Alickovicさんの著書「React Application Architecture for Production」をまとめたものになります。Alanさんと言えばZennで最も人気のある記事「bulletproof-react」の作者であり、彼のprojectから学ぶことはとても多い印象です。 今回紹介する本は2023年1月に公開されたため、bulletproof-react以後のReactアプリケーションにおけるベストプラクティスの宝庫となっています。また、本で扱われているアプリケーションのProjectがGitHubで公開されていることから、Projectを眺めるだけでも勉強になる点があるかと思います。 想定読者 Reactのアーキテクチャを模索している方 テスト手法やCI/CDなどのアプリケーション設計に関心がある方 使用される技術と本の構成 言
どうも、sakitoです。 今回は私の推しフロントエンドディレクトリ構成と気をつけたいポイントを紹介します。ちぇけら！ 2023年5月29日 追記 この記事を読みにきていただきありがとうございます。 私が記事を書いた時期はまだNext.jsのApp Routerが発表されたばかりで、App Routerを使用したディレクトリ構成の考慮はされていません。 先日、App Routerがリリースされ、Next.jsのドキュメントにApp Routerのディレクトリ構成について記事が出ているので、Next.jsを使用されている場合は、まず参照することをオススメします。 はじめに 今回、私の紹介する推し構成は、機能単位で設計するパターンです。 Reactのディレクトリ構成のベストプラクティスを集めたBulletproof Reactで紹介されているパターンにかなり似ています。さらに詳細なプロダクト構
今年も GitHub のトレンドで 2021 年の JavaScript/TypeScript を振り返ります。去年の記事はこちらです。 — GitHub のトレンドで振り返る 2020 年の JavaScript | WEB EGG 集計方法 GitHub トレンドは過去の履歴を公式に提供していないため、非公式に集計されたデータを利用しています。 データソースはlarsbijl/trending_archiveを使用 去年はxiaobaiha/github-trending-historyを利用したが今年のデータは無かったので変更 日ごとにまとめた markdown になっており、remark で AST→ データ化しました 集計期間は 2021/01/01 から 2021/12/15 まで 対象言語はJavaScriptとTypeScriptのみ 集計後のデータはこちらのスプレッドシー
はじめに サービス URL GitHub リポジトリ 対象読者 自己紹介 アウトドア般若心経とは ポケモンGO の般若心経バージョン サービス開発のきっかけ サービスの概要 使い方 1. Google アカウントでログイン 2. 般若心経の全文を一覧で管理 3. 写経した写真を取り込む 4. 取り込んだ写真をトリミング 5. 写真の登録 6. 保存した内容の確認 7. メモの登録 8. 全体地図の確認 9. マイページ 技術スタック 技術選定の理由 アーキテクチャ ディレクトリ構成 開発方針とこだわり Getting Real UI / UX レスポンシブデザイン パフォーマンス ロゴ 機能面 コスト面 プロモーション オリジナルグッズ製作 アカウントを開設 ドッグフーディング 旅ログ 開発中に苦労したこと Google ログイン認証 外部ストレージサービスの設定 E2E テスト E2E
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 技術のトレンドと開発テクニックの知見を、無料で公開します！ いかに無駄な努力をせず、効果的にトレンドに沿ったアプリ開発ができるかを研究してきました。 自分が一番知見のある、フロントエンドの分野中心に見解を述べたいと思います。 結論から言うと、 React, Next.js, Typescript, Tailwind, react-query, prettier, Stylelint, auth0, tRPC, Prisma, playwright, vscode, github actions, PostgreSQL, Terrafor
Next.js（App router）における開発しやすいディレクトリ構成の例 - TechDoctor開発者Blog
初めまして、テックドクターでフロントエンド開発を担当している大瀧です。 ディレクトリ構成はコードの可読性やスケーラビリティに関わる重要な要素であると思っています。 しかし、フロントエンドのディレクトリ構成はベストプラクティスが確立されておらず、わりと悩むポイントです。 そこで今回は、Next.jsのApp routerにおいて、弊社で採用しているディレクトリ構成を共有します。この記事がディレクトリ構成に悩む開発者の助けになれば幸いです。 ディレクトリ構成の自由度が高すぎる問題 さきほど「フロントエンドのディレクトリ構成はベストプラクティスが確立されていない」と書きましたが、特にApp routerのディレクトリ構成については、公式ドキュメントで以下のように記載されています。 There is no "right" or "wrong" way when it comes to organi
一年以上温めに温めまくった個人開発サービス Moyuk を Product Hunt でローンチしたので、技術的な知見を書きます🚀 About Me 株式会社ヘンリー でソフトウェアエンジニア & アーキテクト的なことをしつつ、個人開発してます。 Social accounts: kohii on GitHub @kohii00 on Twitter 作ったもの 説明 詳しい説明： サービスの詳しい紹介はこちらに書いたので読んでみてください 🙏 雑な説明： Moyuk は TypeScript で書いた関数を、ブラウザ上で実行、管理、共有できる Web アプリ（”App”）に変換するプラットフォームです。 技術的要素の概要 Moyuk には一般的なアプリケーション（データの出し入れやUIの描画など）としての要素に加えて、以下のような特徴的な要素があります。 ユーザーが書いた TypeS
概要 みなさんこんにちは。フルスタックエンジニアの高瀬 @takasehiromichi です。 今回は、Reactのディレクトリ構成について再考する機会があったので、記事にしようと思います。 なお、技術スタックについては以下の記事を参照してください。 tech.locaop.jp Reactのディレクトリ構成について 現状は、フロントエンドのsrc配下は以下のような感じになってます。 @interfaces/ (55) api/ (88) components/ (50) context/ (3) pages/ (136) utils/ (22) これ、ロカオプMEO側だけ書いているんですが、プロダクトもだいぶ成長してきまして、それぞれのディレクトリ内のファイル数がすごいことになってます。 (かっこ内の数字がファイル数です。) それぞれのmonorepo内のディレクトリが、こんな感じです
React Application Architecture for Production〜これ一冊で全てが網羅〜 - Qiita
はじめに この記事は、Alan Alickovicさんの著書「React Application Architecture for Production」をまとめたものになります。Alanさんと言えばZennで最も人気のある記事「bulletproof-react」の作者であり、彼のprojectから学ぶことはとても多い印象です。 今回紹介する本は2023年1月に公開されたため、bulletproof-react以後のReactアプリケーションにおけるベストプラクティスの宝庫となっています。また、本で扱われているアプリケーションのProjectがGitHubで公開されていることから、Projectを眺めるだけでも勉強になる点があるかと思います。 想定読者 Reactのアーキテクチャを模索している方 テスト手法やCI/CDなどのアプリケーション設計に関心がある方 使用される技術と本の構成 言
JSer.info #643 - Next.js 13.4リリースされました。 Blog - Next.js 13.4 | Next.js App RouterをStableに変更されています。 まだApp Routerについての参考になるリソースは少ないですが、次のドキュメントや記事などが参考になります。 App Router | Next.js 5 Lessons Learned From Taking Next.js App Router to Production - Inngest Blog また、Next.js 13.4ではTurbopackをBetaに変更、実験的な機能としてServer Actionsを追加なども行われています。 Firefox 113.0がリリースされました。 Firefox 113.0, See All New Features, Updates and
1. はじめに この記事はNuco Advent Calendar 2024の20日目の記事です。 この記事では、2024年最新のフロントエンド開発に必要な知識を得られるおすすめ資料を初心者向けにまとめます。 これからフロントエンド開発を始めたい人はもちろん、ベテランエンジニアの方でも役に立つ情報もありますので、ぜひ目を通してもらえると嬉しいです。 2. フロントエンドの基礎 HTML Webページの構造を作る言語で、見出し、段落、画像、リンクなどを配置するために使います。 フロントエンド開発をする以上、ブラウザでHTMLを表示する、という仕組みから離れることはできません。少しでもHTMLの知識に不安がある人は、以下の資料で知識の再確認をすることをお勧めします。 文系大学生のためのHTML／CSS入門 HTMLとCSSの基礎はもちろんのこと、IT用語の注釈など情報系の知識がない人でもとても
こんにちは。2024年新卒エンジニアのhayapo(@hayapo)です。 本記事では4月中旬~7月末の約3ヶ月間受けたドワンゴの2024年新卒エンジニア研修について、その内容と参加した感想について話したいと思います。 なお、今年度のエンジニア研修はサイバー攻撃の影響により、例年とは異なった形式で実施された部分もありますのでご了承ください。 この記事はドワンゴAdventCalendar 2024 10日目の記事です。 エンジニア研修全体を通しての取り組み 研修内容を紹介する前に、研修全体を通して行われた3つの取り組みを紹介しようと思います。 朝読書 朝会・振り返り会 雑談会 朝読書 エンジニア研修を通して毎朝9時から1時間程度、朝読書として課題図書を読んだ後内容について共有する読書会を実施しました。 朝読書の狙いとしては、エンジニアとしての基礎的な知識をつけること、そして、毎日の読書を行
React開発におけるベストプラクティスである、bulletproof-reactを紹介します。 bulletproof-reactはReactアプリ開発のベストプラクティスとして作られたリポジトリです。 Reactには多くのライブラリがあり便利ですが、その反面多過ぎてどのライブラリを利用するのが良いのか選定に悩む場合があります。また、Reactはディレクトリ構造など自由に作ることができ柔軟性があります。しかし、ある程度決められた構成が無いと、コードに一貫性が無くなったり、複雑で読みにくくなる場合があります。bulletproof-reactでは、パフォーマンスや保守性、拡張性を踏まえてどのようなプロジェクト構成が良いかを提案しています。もちろんあくまで参考程度であり、実際に採用するかは個人の判断になります。 プロジェクト構成 bulletproof-reactで勧められている、React
bulletproof-react/docs/project-structure.md at master · alan2207/bulletproof-react
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
JSer.info #592 - Solid 1.4.0がリリースされました。 Release v1.4.0 - Level Up! · solidjs/solid Solid v1.4.0リリース。 createStoreでトップレベルの配列をサポート、deferStreamオプションの追加、createResourceで常に最新の値を取得する.latestプロパティが追加されています。 また、Custom Renderersを複数組み合わせて利用できるようになっています。 playwright v1.22.0リリースされました。 Release v1.22.0 · microsoft/playwright Playwright TestにComponent Testingを試験的に実装されています。 Experimental: components | Playwright WAI-A
「bulletproof-react」からReactのベストプラクティスを勉強していく。 セットアップ 以下のコマンドを実行するだけで、手元で動かして確認することができる。 git clone https://github.com/alan2207/bulletproof-react.git cd bulletproof-react cp .env.example .env yarn install 標準 コードを綺麗に保つツール ESLint Prettier TypeScript Husky Gitフック（コミットやプッシュ等を行う前後に自動的に実行されるスクリプト）を管理するツール 絶対パスによるimport 下記のように設定することでimport { XXX } from '@/components/ui'というようにsrc/からの絶対パスでimportできる。 ※ 設定しないとi
1. はじめに この記事はNuco Advent Calendar 2024の20日目の記事です。 この記事では、2024年最新のフロントエンド開発に必要な知識を得られるおすすめ資料を初心者向けにまとめます。 これからフロントエンド開発を始めたい人はもちろん、ベテランエンジニアの方でも役に立つ情報もありますので、ぜひ目を通してもらえると嬉しいです。 2. フロントエンドの基礎 HTML Webページの構造を作る言語で、見出し、段落、画像、リンクなどを配置するために使います。 フロントエンド開発をする以上、ブラウザでHTMLを表示する、という仕組みから離れることはできません。少しでもHTMLの知識に不安がある人は、以下の資料で知識の再確認をすることをお勧めします。 文系大学生のためのHTML／CSS入門 HTMLとCSSの基礎はもちろんのこと、IT用語の注釈など情報系の知識がない人でもとても
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Reactベストプラクティスの宝庫！「bulletproof-react」が勉強になりすぎる件
なかなかアウトプットできないあなたが技術記事を書くときのコツ
私の推しフロントエンドディレクトリ構成と気をつけたいポイント
GitHubのトレンドで振り返る2021年のJavaScript/TypeScript
アウトドア般若心経が楽しめるWebアプリをリリースしました - Roll With IT
技術のトレンドと開発テクニックの知見を、無料で公開します！ - Qiita
ブラウザ上でTypeScriptでツールを作成・実行できるサービス「Moyuk」を支える技術
Reactのディレクトリ構成について再考する - ロカオプ技術ブログ
2023-05-10のJS: Next.js 13.4(App RouterがStable化)、Firefox 113
【保存版】フロントエンド初心者がまず読むべき資料まとめ【2024年最新】 - Qiita
新卒エンジニアが語る、ドワンゴの2024年エンジニア研修体験記 - dwango on GitHub
技術選定の参考にbulletproof-reactを見てみる | DevelopersIO
2022-05-17のJS: Solid v1.4.0、playwright v1.22.0、Safari 15.5
Reactのベストプラクティス集 bulletproof-react
【保存版】フロントエンド初心者がまず読むべき資料まとめ【2024年最新】 - Qiita