Reactの状態を理解して適切にHooksを利用する

2024/02/03 89 users hooks React UIライブラリ 状態 フック

Reactと状態は切っても切れない関係です。なぜなら、Reactは状態に基づいて画面を更新するコンポーネントベースのUIライブラリだからです🤝🏻 そんなReactの状態を管理・操作しやすくしてくれているのが、React 16.8から登場したフックです。それゆえ、フックを正しく利用するにあたってReactの状態の理解は非常に重要であ... 続きを読む

コンポーネントベースで開発する時の CSS の書き方とコンポーネントの分類 (自己流)

2023/06/02 106 users Twitter React Svelte コンポーネント 反響

React や Svelte でコンポーネントベースで開発するとき特有の CSS ノウハウってあんまり効かない気がする Twitter に書いたら反響があったので、自己流だけどまとめておく React Component の管理単位と、CSS としてのレイアウトの管理ポリシーは違うよね、みたいな話をマークアップエンジニアに時折されるが、そんな話... 続きを読む

React で h1-h6 を正しく使い分ける

2022/10/26 110 users React ライブラリ SEO HTML 要素

Web の基礎を支える HTML の最も重要な要素の一つである h1-h6 要素ですが、 React を始めとするコンポーネントベースのライブラリを特に意識せずに利用すると、SEOやアクセシビリティー上の意図せぬ問題を生むことがあります。 この記事では、 React を例に取り h1-h6 を使うことで生じる問題と、その解決策を３つずつ... 続きを読む

CSS設計における、すべてがコンポーネントであるという誤謬

2022/06/11 74 users 誤謬 コンポーネント CSS設計 BEM すべて

BEMによってもたらされた、コンポーネントベースのアプローチでは、「ページはコンポーネントの集合によって表現されるべきであり、ページに含まれるのはすべてがコンポーネントである」と考える。しかしこれまでCSSを書いてきた経験から、これではデザイン意図を的確に表現することができないと感じるようになってきた... 続きを読む

フロントエンドの制作者が知っておきたい、Atomic Designを使用したコンポーネントベースのUI設計が分かる良書 | コリス

2018/05/11 52 users コリス 良書 Atomic Design 実務 実装

ここ数年で、WebページやスマホアプリのUIを開発する際に、コンポーネントベースの実装が増えてきました。元々はソフトウェア開発で一般的な考え方でしたが、メンテナンス性に優れ、再利用性も高く、UIもより効率的に実装できます。 Atomic Designを使用したコンポーネントベースのUI設計が実務レベルで詳しく解説されたオススメの本を紹介します。 今よりもっと効率的にUIに取り組みたい、メンテナンス... 続きを読む

最近のフロントエンドのコンポーネント設計に立ち向かう - Qiita

2018/04/01 250 users Qiita コンポーネント設計 フロントエンド React

ReactやVueなどコンポーネントベースで作っていくViewのライブラリが普及したことで、コンポーネント指向での開発が一般化してきた昨今のフロントエンドですが、このコンポーネントの設計に悩まれる方も多いのではないでしょうか。 コンポーネントをどの粒度、どんな状態で分割するのが良いのか、などなど、特にチームで開発する時に認識が揃っていないとカオスになりがちな部分であると思うので、自分なりの設計をす... 続きを読む

デザインが異なるランディングページも簡単に作成！WordPressの高性能な無料フレームワーク -TypeRocket | コリス

2017/09/21 50 users コリス WordPress ランディングページ 高性能 作成

コンポーネントベースで、Webサイトやアプリを制作するために設計されたWordPressのフレームワークを紹介します。 レイアウトやコンポーネントを管理して、デザインが異なるランディングページをカスタマイズして作成することができます。 オープンソースで、完全に無料 TypeRocketはGPLライセンスで、すべての機能が無料で利用できます。Pro版はありません。 リピーターフィールド リピーター、... 続きを読む

O'Reilly Japan - Reactビギナーズガイド

2017/02/24 85 users Reactビギナーズガイド O'Reilly Japan

Reactビギナーズガイド ――コンポーネントベースのフロントエンド開発入門 Stoyan Stefanov　著、牧野 聡　訳 2017年03月11日 発売予定 248 ページ ISBN 978-4-87311-788-1 フォーマット Print PDF ePub mobi 原書: React: Up & Running ReactによるコンポーネントベースのWebフロントエンド開発の入門書。R... 続きを読む

O'Reilly Japan - 入門 React

2015/03/18 253 users O'Reilly Japan 入門 React Devel

入門 React――コンポーネントベースのWebフロントエンド開発 Frankie Bagnardi、Jonathan Beebe、Richard Feldman、Tom Hallett、Simon Højberg、Karl Mikkelsen　著、宮崎 空　訳 2015年03月27日 発売予定 280ページ ISBN978-4-87311-719-5 フォーマット Print 原書: Devel... 続きを読む

Reactを実際に使ってみた話が増えてきた - ワザノバ | wazanova

2014/10/09 135 users React wazanova ワザノバ points Flux

http://youtu.be/uwnjDXtJufs 1 comment | 0 points | by WazanovaNews ■ comment by Jshiike | 44分前 コンポーネントベースのviewレイヤのライブラリであるReactを、実際に使ってみた感想についての発信が増えてきているので、まとめてみました。（4)はFluxの話も入ってます。） 1) Reactとは？ E4E... 続きを読む

JAX-RSはHTML Webアプリケーションを開発するのに充分なフレームワークであるか？ - AOEの日記

2013/03/17 118 users AoE JAX-RS フレームワーク JSF Struts

JavaEE, JAX-RSJavaEEでのWebアプリケーション開発フレームワークと言えばJSFですが、JSFはデスクトップGUIの開発スタイルに似せた、コンポーネントベース、イベントドリブンなフレームワークであるため、拒否反応を示す人も多いようです。 で、フロントコントローラー型のフレームワーク (StrutsやRuby on Railsなど) が必要な人への選択肢をJavaEEは提供していな... 続きを読む

Twitter製。大型Webアプリケーション開発にぜひ「Flight」|オープンソース・ソフトウェア、ITニュースを毎日紹介するエンジニア、デザイナー向けブログ

2013/02/11 81 users Flight Twitter製 ソフトウェア エンジニア デモ

FlightはTwitter社の開発した軽量なコンポーネントベースのJavaScriptフレームワークです。BootstrapのリリースでWebサービス開発のデザインに革命的なインパクトを与えたTwitterから次いで登場したのがFlightです。コンポーネントベースのJavaScriptフレームワークです。 デモのメーラー風アプリケーションです。 メニューが出たりメールの選択ができます。 新しい... 続きを読む

Twitterが自社製JavaScriptフレームワーク「Flight」をオープンソースで公開 － Publickey

2013/02/03 485 users Twitter Publickey Flight デバッグ

Twitterは自社サービスで利用しているJavaScriptフレームワーク「Flight」をオープンソースで公開しました。 Flightはコンポーネントベースの軽量フレームワーク。開発者に対して非同期で独立性の高いコンポーネントを定義する機能を提供することで、デバッグ、テスト、イベントハンドリングなどを容易にするフレームワークのようです。 Githubのページでは以下のように説明されています。 ... 続きを読む