1 - 40 件 / 80件
Reactアプリケーションのアーキテクチャの一例として公開されているGitHubリポジトリ「bulletproof-react」が大変勉強になるので、私自身の見解を交えつつシェアします。 ※(注記)2022年11月追記 記事リリースから1年ほど経過して、新しく出てきた情報や考え方を盛り込んだ続編記事を書いていただいているので、こちらも併せて読んでいただければと想います(@t_keshiさんありがとうございます!)。 ディレクトリ構造が勉強になる まずはプロジェクトごとにバラつきがちなディレクトリ構造について。 ソースコードはsrc以下に入れる bulletproof-reactでは、Reactに関するソースコードはsrcディレクトリ以下に格納されています。逆に言えば、ルートディレクトリにcomponentsやutilsといったディレクトリはありません。 たとえばCreate Next Appで作成
去年末に Facebook の人達が出した React Server Components というものが、React 界隈に激震を及ぼしていますが、速報以外でこの技術について言及している国内のブログが見当たらないため、この記事で解説してみます。間違いや分かりづらい部分があればぜひツッコミをお願いします。 React Server Components は、ただのサーバーサイドレンダリングではありません。クライアントサイドレンダリング(SPA)とサーバーサイドレンダリングを、ギアを切り替えずにいいとこ取りする仕組みです。これまでに存在した様々な技術よりも踏み込んで、フロントエンドとバックエンドの境目を曖昧にしてしまうユニバーサルな技術です。 勝手な造語としていうなら「コンポーネント指向ユニバーサルウェブ開発」とでも呼ぶべきものでしょう。 そして、これはただのユニバーサルなだけの仕組みではあり
Reactを取り巻く状態管理の潮流を学ぼう。HooksやServer Componentsなどの登場で何が変わるか Reactを取り巻く状態管理のアプローチは変化を続けていますが、いま知っておくべき手法とはどのようなものでしょうか。小林 徹(@koba04)さんに、現在、そしてこの先の状態管理について執筆いただきました。 こんにちは、小林(@koba04)です。 2019年5月に『SPAにおける状態管理:関数型のアプローチも取り入れるフロントエンド系アーキテクチャの変遷』という記事を書きましたが、そこから2年以上が経過し、Reactを用いた状態管理は大きく変わりました。本記事ではReactを取り巻く状態管理の変遷について解説します。 広がるReduxの採用 Hooksの登場 コンポーネントツリーから独立した状態管理 Concurrent Featuresによる新しいユーザー体験 状態とキャ
こんにちは、よしこです。 株式会社ナレッジワーク というスタートアップで、2020年4月の創業時から一人目のフロントエンドエンジニアをしています。 初期に考えて組み上げたスタックで1年半ほど開発・運用してみて、なかなか快適に日々開発ができているので 新規開発のプロダクト立ち上げ時にどのようにフロントエンドを構築したのか? 立ち上げから1年以上開発・運用を続けてきた今、それらの選択はどうだったのか? を記事にして振り返り、公開したいなと思いました。 (プロダクトの内容はステルスで進めていてあまり対外的な発信ができないので、かわりに技術的なところはどんどんオープンにしていきたいなという気持ちがあります) いろいろな項目ごとに振り返りたいので、この記事は各項目を横断するindexとして項目ごとの概要を簡単に説明し、深堀りは項目ごとに追って詳細な記事を書いていく予定です! 前提 プロダクトとしての
近日連投していた Next.js 記事のサンプルコードを公開しました。このサンプルコードを元に、私のフロントエンドディレクトリ構成・テスト観点を紹介します(あくまで執筆現在の脳内アウトプットになりますのでご了承ください) フロントエンドディレクトリ構成の事情 タイトルの「フロントエンドディレクトリ構成」をさす「Components」のディレクトリ構成は、いつも悩みのタネです。このモジュールシステムは「デザインシステム観点・アクセシビリティ観点・フロントエンド実装観点」の 3 つの観点が混在するため事情が複雑です。どうせ作るのなら「デザイナー・フロントエンド」どちらの開発基盤にもなりえる、盤石なモジュールシステムを目指したいですよね。 "AtomicDesign やめました"という声をたまに聞くのですが「デザインシステム的に捨てていいの?」と思うこともあるので、とくに要望がなければ、筆者は「
Wantedly でバックエンドのテックリード的なやつをやってる @izumin5210 です。半年くらい前から取り組んでいた、UI デザインシステムの React 実装について紹介します。ソフトウェアの設計としても非常にエキサイティングだったので、ライブラリ作ったりするのが好きな人なども楽しんでもらえると思います。 TL;DRWantedly の UI デザインシステムは「WantedlyのUIをデザインする上での共通の考え方とツール&アセット」でありエンジニアとデザイナが効率よくコミュニケーションするための共通言語となるデザインシステムを (Web) Frontend に持ち込む際は、単なるコンポーネントカタログではなく、システムが定義するものと同じレベルの抽象を持つライブラリ・フレームワークとして実装することで、より有効性を発揮するこの話が気になった(Web・モバイル問わず)フロント
こんにちは、よしこです。 この記事は 2020年に立ち上げたWebフロントエンド構成の振り返り の「Componentのディレクトリ構成」項の詳細記事です。単体でも読めますが、よければ元記事もあわせてどうぞ! この記事では、今わたしが 株式会社ナレッジワーク というスタートアップで開発・運用しているプロジェクトにおいてうまくいっていると感じているComponentのディレクトリ構成についてご紹介していきます。 ディレクトリ構成 Componentは src/components の中にまとめていて、その下に以下の4種類の分類ディレクトリを切っています。 src/components/page src/components/model src/components/ui src/components/functional 分類ディレクトリを考えるにあたって重視したポイントは以下。 新しくco
はじめに 新年早々に面白そうな記事を見つけました。ReactでのAPI呼出しを最適化するために「部分的にサーバサイドで実行するコンポーネントを作る」というもののようです。 あるいは去年の記事ですが気になってたものとしてBlitz.jsでReactベースのFWであるnext.jsに永続化層を持たせてRailsのようなFWにしようというアプローチもあります。 どちらの記事も書かれてる内容自体は分かる気がするものの 「それをフロントエンドでやる意味あるの?」 というのが拭えずイマイチ腑に落ちなかったんですが、単純に 「私と最前線でやられてる方々で期待してるものがたぶん違う」 という気がしてきたので、その辺を整理のために書いてみます。 注意書き Vue.js/Nuxt.jsは少し触ったことがありますが、React Server ComponentsやBlitz.jsを触ったことは無いです 「なんで
import { useState } from 'react'; import { IconGripVertical } from '@tabler/icons-react'; import { clamp, useMove } from '@mantine/hooks'; import classes from './Demo.module.css'; function Demo() { const [value, setValue] = useState(0.3); const { ref } = useMove(({ x }) => setValue(clamp(x, 0.1, 0.9))); const labelFloating = value < 0.2 || value > 0.8; return ( <div className={classes.root}> <div
格安PCボード「Raspberry Pi」(ラズパイ)の主要な販売元だった英RS Components(以下、RS)が、ラズパイの製造・販売から2022年6月末で撤退したことが明らかになった。 これまでラズパイは、RS(製造は関連会社のOKdoが担当)、element14(英Premier Farnellの子会社)、英Raspberry Pi財団の3つの製造元(ブランド)が供給していた。このうち、RS(OKdo)のブランドがなくなり、今後は残り2つのブランドだけになる。 ただし、ラズパイの日本の一次代理店であるケイエスワイ(KSY)代表取締役の山下慎二氏は、「今回の件はラズパイの生産量全体には特に影響しないだろう」と語る。ラズパイはどのブランドも、ほぼ全量をソニーが委託を受けて生産しているためだ。 ラズパイは世界での需要が高まっているのに対し、半導体不足などから製造が追いつかず、品薄の状態
React Server Components(RSC)は、ページの読み込みパフォーマンスやバンドルサイズのほか、Reactアプリケーションの書き方に近い将来大きな影響を与えることになる、素晴らしい新機能です。 Plasmicでは、Reactのビジュアルビルダーを開発しており、Reactのパフォーマンスには大きな関心を持もっています。 当社のクライアントの多くは、Plasmicを使用して高いパフォーマンスが求められるマーケティングサイトやECサイトを構築しています。 したがって、RSCはまだReact 18の初期実験機能ですが、Plasmicではその仕組みを詳しく調べています。 このブログ記事では、これまでに分かったことを紹介したいと思います。 Plasmicのメンバーによるツイートまとめもご覧ください。 React Server Componentsとは何か サーバサイドレンダリングとの
ハイクラス求人TOPIT記事一覧React 18とSuspenseの基本 ─ フレームワークの選択やReact Server Componentsなど新しいベストプラクティスを学ぶ React 18とSuspenseの基本 ─ フレームワークの選択やReact Server Componentsなど新しいベストプラクティスを学ぶ 群雄割拠のフロントエンドフレームワーク界でも、一歩抜きん出た存在として常に注目を集めてきたReact。2022年3月にリリースされたバージョン18では、Suspenseの安定化やStreaming SSRのサポートなど数々の新機能を取り入れて話題になりました。本記事では、React/TypeScriptのスペシャリストとして幅広く活躍されているuhyoさんが、現時点におけるReactのベストプラクティスについて解説します。 Reactは、Meta社により開発・公開
AWSは、マネジメントコンソールなど同社が提供する製品やサービスのWebアプリケーション画面を構築するために開発したデザインシステム「Cloudscape」をオープンソースで公開しました。 Cloudscape Design System, an AWS solution for building intuitive user experiences, is now open source! Cloudscape consists of guidelines to create web applications, along with the design resources and front-end components to streamline implementation.https://t.co/M8wKGqzH5E pic.twitter.com/9JOtkMF8Bi — A
AI & MLLearn about artificial intelligence and machine learning across the GitHub ecosystem and the wider industry. Generative AILearn how to build with generative AI. GitHub CopilotChange how you work with GitHub Copilot. LLMsEverything developers need to know about LLMs. Machine learningMachine learning tips, tricks, and best practices. How AI code generation worksExplore the capabilities and be
2023年05月05日 追記 v13.4.0 をもって App Router は安定版になりました! https://nextjs.org/blog/next-13-4 公式ドキュメントもベータ→正式版にマージされました。 内容が充実してきている様子ので、そちらを確認してください。 https://nextjs.org/docs 加えて、公式ドキュメントの改善で分かったポイントもいくつか修正しています。 Next.js v13 から App Router 機能 (app ディレクトリ) が新しく追加されました。 (v13.3.0 現在はベータ版です。 v13.4.0 をもって安定版になりました!) ファイルベースの Layout 機能 処理の一部を Server Component に移しバンドルサイズを削減できる 例: remark を利用した Markdown のパース が有名なところだ
Powerful, programmable open source CI/CD engine that runs your pipelines in containers — pre-push on your local machine and/or post-push in CI Powerful, programmable open source CI/CD engine that runs your pipelines in containers — pre-push on your local machine and/or post-push in CI Powerful, programmable open source CI/CD engine that runs your pipelines in containers — pre-push on your local ma
インフラ構成ツールの「Pulumi 3.0」正式リリース。APIでPulumiを呼び出し可能、クラウドのアップデートに即時対応など コードを用いてクラウドをはじめとするITインフラの構成を定義できる、いわゆるInfrastructure as Codeツールの「Pulumi」が、最新版となる「Pulumi 3.0」として正式リリースされました。 Announcing our new #CloudEngineering Platform (Pulumi 3.0)! Native providers with 100% API coverage Pulumi Packages to share #cloud components Automation API for programmatically deploying infrastructure from code Enterprise-g
こんにちは。READYFOR でフロントエンドエンジニアとして働いている菅原(@kotarella1110)です! 嬉しいことに、READYFOR のプロダクト開発組織は急拡大中で、正社員の人数は 2019年7月時点では8名でしたが2021年4月現在は29名になりました 🎉 その反面、組織が大きくなってくると「我々はどこに向かってるんだっけ?」「あの人、最近はどんなことに取り組んでいるんだろう?」といった「見えないこと」が増えてきます🤔 この「見えないこと」を減らすために、READYFOR では毎月「プロダクト開発本部会」を開催しています。 プロダクト開発本部会では、必要な全体周知(組織やプロダクトの方針等)や月替わりプレゼンテーションを行っています。 本記事はこのプロダクト開発本部会の月替わりプレゼンテーションで発表した内容になります。 はじめに 以前 READYFOR で初主催とな
The Component Gallery is an up-to-date repository of interface components based on examples from the world of design systems, designed to be a reference for anyone building user interfaces.
🌿 This post is still growing and might be updated.A growing collection of code smells in React components. The smells 💩Too many propsIncompatible propsCopying props into stateReturning JSX from functionsMultiple booleans for stateToo many useState in a componentLarge useEffect Too many propsPassing too many props into a single component may be a sign that the component should be split up. How ma
基盤チームの右京です。 BASE ではショップのデザインを誰でも簡単にできるような、いわゆるノーコードな機能を提供しています。 デザイン | BASE (ベイス) ネットショップを無料で簡単に作成 この記事では、そんなノーコードなシステムの裏側について、簡単にですが解説しています。 ショップページ配信の基盤システム ノーコードの前にまず BASE のショップページ(ShopFront と呼んでいます)がどのようなシステムかを知っておく必要があります。BASE のショップページは特定の URL にアクセスすると必要なデータをデータベースから取得し、テンプレートエンジンを使ってサーバーのプログラムで HTML を生成して返す、よくある伝統的な Web ページとして実装されています。ただし、ショップ毎にページのデザインは全く異なるため、1 つの固定のテンプレートを利用しているわけではなく、ショッ
支出管理開発本部で事業部横断テックリードをしている @ogugu です。 広く複雑で大規模になりつつある支出管理のアーキテクチャについて、以下の連載形式でご紹介していきます。 (本記事) 支出管理におけるTypeSpecを中心にしたスキーマ駆動開発 ソフトウェアアーキテクチャに基づいた自動テスト戦略と実装ガイドライン 支出管理におけるマイクロサービスアーキテクチャの知見 今回は、TypeSpec を中心にしたスキーマ駆動開発をご紹介します。 結論からいうと、筆者は TypeSpec について「OpenAPI からの移行コストや技術的ロックインリスクを伴わず、開発体験を向上する最高のツール」と評価しています。その理由を順にご紹介します。 TypeSpec とは OpenAPI とのスキーマの比較 導入の意思決定 TypeSpec を取り入れた開発フロー カスタム Linter / Decor
React Server Components に感じたフロントエンドの消失という記事に端を発する一連の議論だが、実際この記事で書かれていることはそうだろうなと思う。話の流れとして誤ってる部分はないと思うし同意する。 この記事ではフロントエンドエンジニアとして、この件についての僕の見解を書く。もちろんフロントエンド(とは?)の総意ではない。 元記事と重複する部分多いが、そこは同じ問題を取り扱う以上避けて通れないため、ご容赦いただきたい。 同じ領域を取り扱ってる以上、開発戦争は激しくなる 様々な理由によりユニバーサルが求められている ※(注記)この記事でいう「戦争」とは、お互いの領域を食い合う開発が、活発化することを「戦争」と称しているだけです。それ以上の意図は全くございません 領域がかぶっている 最近のフロントエンド系ユニバーサルエコシステムは、たしかに PHP や Rails の領分を侵そうとし
一行要約 はじめに Readable OpenAPIとは? 既存ルールの不満点 不満点1: 標準仕様外の分割を行っている 不満点2: ディレクトリ階層が深い 不満点3: 1つのAPI定義を参照する際にたくさんのファイルを参照する必要がある 不満点4: コンポーネントスキーマの同一性が不明瞭 新ルールで工夫した点 工夫1: operationIdと対応したパス定義のファイル名を採用し、フラットなディレクトリ構造を実現した 工夫2: パス定義ファイルに含まれる情報量を増やした 工夫3: 再利用性を重視したcomponent定義 できなかったこと、やらなかったこと、やりたいこと 定義ファイルのhttpメソッドごとの分割ができなかった ルートの定義ファイルにcomponentディレクティブを置かなかった exampleの定義は余力があればやりたい おわりに We are hiring! 脚注 一行
こんにちは、クレイの阪本です。 もともと外部委託パートナーとしてクレイ案件のお手伝いをしていましたが、気づけば中の人となっていました。 よろしくお願いいたします。 先日、DocBaseはフロン...
leerob i teach developers how to build the future things i'm proud of being a husband & father graduated with honors in computer engineering built vercel devrel during 1 → 200ドルM+ ARR helped grow next.js community to 1.3+ million active devs smol investor in startups like bun, supabase, and linear can play guitar, piano, and drums (not at the same time) won a guitar hero (yes the video game) compet
Tao of React - Software Design, Architecture & Best Practices25 minute read I’ve been working with React since 2016 and still there isn’t a single best practice when it comes to application structure and design. While there are best practices on the micro level, most teams build their own "thing" when it comes to architecture. Of course, there isn’t a universal best practice that can be applied to
まずは長いものに巻かれたいときもある Offers を運営している株式会社 overflow の あほむ でございます。 先日 コードベースのディレクトリ構成にフォーカスした記事 を公開した関連記事として、Next.js App Router をどのように取り扱っているかについてご紹介します。 【AD?】今回の記事の内容を含んだり含まなかったりすると思いますが、来週 2024年01月17日(水) 19:20 〜 オンライン開催の PWA Night vol.59 で発表予定なので興味のある方はぜひ。(終了済み) 下記は本記事の内容を含むイベント発表資料です。ご参考までに。 今回の前提 前回記事 の引用ですが今回も同様です。 最終目標は単体事業でありつつ実質マルチプロダクトな画面群のリプレース クライアントサイドでヘビーなビジネスロジックを持つ必要がない アプリケーション特性としては SaaS
Cloudscape offers user interface guidelines, front-end components, design resources, and development tools for building intuitive, engaging, and inclusive user experiences at scale.
Beautiful UI components built with Tailwind CSS and React.A collection of copy-and-paste components for quickly build application UIs. Quick search...
書き始める とりあえずチュートリアルを一周しました。 https://github.com/k1LoW/ndiag/blob/main/docs/tutorial.ja.md チュートリアルの順に、nodesを書いてみてndiag doc --rm-dist、networksを書いてndiag ...、relationsを書いて以下略、とするのが良さそうです。 アイコンのキーはndiag list iconsで表示できるので、これを見ながらndiag.ymlに書き込んでいきます。 VSCode ExtensionsでMarkdown Preview Enhancedをインストール。 Previewを見ながらndiag.ymlを書いては生成、書いては生成します。 とりあえず --- name: Sample AWS web service docPath: docs/arch views:
Last fall we announced Headless UI, a library of completely unstyled, fully accessible UI components, designed to pair perfectly with Tailwind CSS. Today we’re super excited to release Headless UI v1.0, which more than doubles the amount of included components for both React and Vue. What’s new We’ve added four new components to the React library, and five new components for Vue. Dialog (modal) He
HyperUI is a collection of free Tailwind CSS components that can be used in your next project. With a range of components, you can build your next marketing website, admin dashboard, eCommerce store and much more. ✅No install✅No config✅No setup
【Next.js 12 コラム追加版】2021年からReactを始めるなら React Server Components 一択ではないか? VTeacher所属の Masaki Suzuki です。 この記事では、私が在職する SUZUKI SOFTWARE LABO, LLC というスタートアップにて、 VTeacher のプロジェクトで得た知見を紹介していきます。 前回の記事 にコラム(Next.js 12)を追加した記事です。 Next.js 12 から!正式に React Server Components が発表されましたね。 さすが 約113億円を資金調達 したVercel。Rust製コンパイラ(swc)を採用してビルドを高速化したり、ミドルウェア(エッジ関数等)導入でIaaSらしいことをしたりと目が離せません。「おまえたちはフロントに集中しろ!それ以外は俺たちがやってやる」
フロントエンド連載2日目のエントリーです。 あまり話題になっていないような気がしますが、Web Componentsを実装するためのフレームワークのLit-Element v3がバージョンアップして、ついでにリブランディングしてLit v2.0となりました。ロゴも変わり、ウェブサイトも新しくなりました。 Introducing "Lit" for Web Components 本当はこのLitの紹介をこの連載でしようとしたのですが、上記のウェブサイトがすごく詳しいので、単に紹介するだけの記事だとあまり価値がないので、この中のコントローラ機能のみをとりあげようと思いますが、まずはWeb Componentsとは、というところを説明します。 n回目のWeb Components元年以前次のような記事を書きました。最初のPolymerというフレームワークが推進していたころよりも、ブラウザ対応も進
こんにちは。データアナリティクス事業本部 サービスソリューション部の北川です。 React Developer Toolsは、React用開発ツールです。Reactの開発元であるMetaが提供しています。 結構有名ですが、まだ使ったことがない人に向け、簡単に書いていきます。 React Developer Toolsの使い方 拡張機能を追加します。 https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi アイコンが追加されていることを確認します。通常のReactページで使用する場合、アイコンは青いですが、開発環境ではアイコンの色が赤くなります。 ローカル環境で使用するために、拡張機能の一覧から、React Developer Toolsの「拡張機能を管理
SmartHRのアプリケーションをつくるためのコンポーネント集です。 SmartHR UI はこの Figma ファイルを元に React で実装されています。 コンポーネントの使い方などは SmartHR Design System にまとめています。 https://smarthr.design https://github.com/kufu/smarthr-ui This is a collection of components for creating a SmartHR web application. SmartHR UI is implemented in Reac...
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く