宣言的UIはReact Hooksで完成に至り、現代的設計論が必須の時代になる - Qiita
この記事は、ある程度以上の規模のGUI開発において、React Hooks以後の宣言的UIにより、大規模開発に用いられる設計論に完全に対応できるようになり「ビジネスロジックの変更や追加」に対応するコストを低く保つこと（技術的負債の抑制）ができるようになったことを解説するものです。 技術的負債の抑制には、技術的負債の原因となりがちな「広範囲の密結合」と「適切な疎結合を保つ仕組みの欠如」が欠かせません。それをカバーするのが、大規模開発をクリーンに行える設計論（ここでは「現代的な設計論」とよぶもの）です。クリーンアーキテクチャなんかでGUIによく適用されるHumble Object Patternのようにプレゼンテーションとビューを分離する必然性が無くなるでしょう。 ポイントは ある程度以上の規模で開発するなら設計論をうまく使い設計しないと、技術的負債を抱え込む（ビジネスロジックの変更や追加に対
React Hooksとカスタムフックが実現する世界 - ロジックの分離と再利用性の向上 - Qiita
はじめに React HooksはReact 16.8 で追加された新機能であり、state などの React の機能をクラスを書かずに使えるようになります。 React Hooks以前は、ロジックの再利用がコンポーネントに依存してしまいロジック単独でのモジュール化が難しいという問題がありました。 しかしReact Hooksのカスタムフックという独自のフックを作成する機能を使うことで、Viewに依存することなくロジックだけを再利用することができるようになります。 この記事では、v1からv6まで改善していく様子を見て頂くことでReact Hooksの利用方法を紹介します。 今回の実例ではコンポーネントのコード量は以下のように削減されます。 実例紹介 コンポーネント間のページネーションを実装するuseLocalHistoryカスタムフックを作成します。 ブラウザのhistory APIのよ
[React] Component と PureComponentの違い - Qiita
1. 前書き React は Component を Update するか決定する過程で、 Component の shouldComponentUpdate を実行し、Update する必要があるか判断する。 Reactは shouldComponentUpdate で true を返すと Update する必要があると判断し、 false を返すと Update をする必要がないと判断する。 2. PureComponentとは React PureComponent はデフォルトの shouldComponentUpdate を変更した Component である。 浅い比較(shallow-Equal)によって Update するかしないかを決定する。 React.PureComponentのイメージ class PureComponent extends React.Compon
![[React] Component と PureComponentの違い - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/c008b625ed99e95b8d7a5ec32c3151f32abfa1e0/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCUmVhY3QlNUQlMjBDb21wb25lbnQlMjAlRTMlODElQTglMjBQdXJlQ29tcG9uZW50JUUzJTgxJUFFJUU5JTgxJTk1JUUzJTgxJTg0JnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz04NTE1OWE2NzA1OTU3NGVhZmVmOWE4YWI1ZTk3NmU5Mg%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwd2lmZWNvb2t5JnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz05YzA4NGE4Y2QwMTZhZjFhMTJjNDYxZWM4MDliODc0Mw%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D3db9c51b52e9533ab1d8290e0d341baa)
React NativeをWebに持ってくることの意味 - ナカザンドットネット
ブラウザはGUIアプリケーションプラットフォームではない Flexboxについて React DOMはGUIアプリケーションフレームワークではない React NativeはGUIアプリケーションプラットフォームの抽象である React Native for Webがブラウザに持ち込んだもの コンポーネントが便利 スタイル周りも良い感じ TouchableOpacityでタップ表現もラクラク 他にもいろいろあるけど プロダクション事例が強すぎる 作者のnecolasも語ってた まとめ 余談：React系のアプリケーションフレームワーク React Native for Webは、React NativeをWebに持ち込む試みです。 しばしば、こういった試みに対して「わけがわからない」「本末転倒である」といった意見を見かけますが、筆者は妥当な試みであるという印象を持っています。ちょっと頭の中
仮想スクロールのすヽめ - Qiita
平日の早朝に道玄坂を下るアベックに破滅と滅亡を。どうも、@neer_chanです。 皆さん、仮想スクロールしてますか？ 概要 仮想スクロールとは 仮想スクロールの仕組み 仮想スクロールの魅力 前提として、縦スクロールの話をします。 仮想スクロールとは GIFの通り、見えている範囲(+α)のみレンダリングするもの。 要は、ロケット鉛筆みたいなものです。（絶対に違う） 仮想スクロールの仕組み イカれたメンバーを紹介するぜ！ 見える範囲を指定するためのDiv スクロールする高さを指定するDiv ListItemを置くUnorderdList いつかの、いくつかのきみとListItem 以上の4つが登場するメンバーだ！ ちなみに、通常のスクロールの場合は2の役割を3が行う感じになります。 また、以下の要素をあらかじめ指定する必要があります。 見える範囲に表示する4のListItemの個数（あるいは
JUXT Blog: What React Hooks mean for ClojureScript
When I first heard about ClojureScript, I looked at it through the lens of my JavaScript experience. I assumed it would be like CoffeeScript, you pretty much know the JavaScript you are generating, but now you get to type less. With ClojureScript there’s a gap between the code I write and the code that’s generated, and this gap provides powerful leverage. I’ve often felt the ClojureScript communit
React の Hooks で state に Object を使う - Diary
React の Hooks で state に Object を使う const [obj, setObj] = useState({}); const [value, setValue] = useState(1); みたいなことをしているときに useEffect(()=>{ obj.hoge = value; setObj(obj); }, [value]); としても、コンポーネントはレンダリングされない。なぜかというと、オブジェクトが変わってるかどうかを React は表面的にしか確認しない(これは利点でもある、不必要な変更の走査やレンダリングがはしらない)。 明示的にレンダリングをさせたい場合、以下のようにすればよい。 setObj(Object.assign({}, obj)) 新しいオブジェクトをメモリにつくって乗せてしまえば、オブジェクトのなかにあるデータが全く同じもので
実践: React Hooks - mizchi's blog
hooks が発表されてから趣味でも現場でもずっと hooks を使っています。おかげでだいぶこなれてきて、だいたいなんのライフサイクルでも表現できるようになってきました。 最初は単に useState が state を、 useEffect が componentDidMount/componentDidUpdate を置き換えるもの、と説明を済ますつもりでしたが、 useEffect についてはライフサイクルのモデルがぜんぜん違うので、別の説明をする必要があるように感じていました。 で、その結果 React Hooks を理解するには、関数のメモ化を理解するのが最も簡単だと思ったので、その説明をしつつ、イディオムを解説していこうと思います。 最初に: React Hooks は何であり、何ではないか 関数コンポーネントが状態を持てるようにするもので、関数のメモ化のテクニックを多用しま
Reactベース静的サイトジェネレータGatsbyの真の力をお見せします - Qiita
NTTテクノクロスの上原です。 業務では、社内情報のReact製自前キュレーションサイトの構築を担当しています。 この記事はNTTテクノクロスAdvent Calendar24日目の記事であり、社内の勉強会で発表した内容をQiita記事として書きなおしたものです。タイトルは釣りです。 (2018/12/28追記あり) 導入 記事を書いた理由 Gatsby.js(以降、Gatsbyと表記)はさまざまな高速化テクニックを用いた「爆速サイト生成」で有名なツールですが、そのリッチな機能性は、たとえばイントラ内サイト、業務システム開発、ツール開発などでも十分に活用できるものだと思い、その可能性を紹介するために書きました。 「静的サイトジェネレータ」って何？ いわゆる「静的サイトジェネレータ(Static Site Generator, SSG)」は、CMS(コンテンツ管理システム)の一種です。代表的
GitHub - rjsf-team/react-jsonschema-form: A React component for building Web forms from JSON Schema.
React Conf 2018のKeynoteで発表されたHooks、Concurrent Reactのまとめ - Cybozu Inside Out | サイボウズエンジニアのブログ
フロントエンドエキスパートチームの@koba04です。 10/25,26の2日間、ネバダで開催されたReact Conf 2018に参加して来ました。 今回は、気になっている人も多いKeynoteで発表されたHooksとConcurrent Reactについて紹介したいと思います。 今回紹介された内容は、2014年後半くらいからReactを見てきた中でも、最も大きな変更であると言えます。 React Conf 2018 React Conf 2018のストラップ カンファレンスのトーク自体はすでにYouTubeで公開されているので、全トーク観ることが出来ます。 https://www.youtube.com/playlist?list=PLPxbbTqCLbGE5AihOSExAa4wUM-P42EIJ Hooks Hooksは、GitHub上でも一切公開されておらず、React Conf
React Hooksの概要 - Qiita
Hooksは、classを記述せずにstateやその他のReactの機能を使えるようにしたもので、今は提案段階です。RFCはこちら 現在はReact v16.7.0-alphaで試せます。 Hooks導入の動機はこちら https://qiita.com/tatane616/items/9d667e32b6f82f9f7a9f State Hook よくあるボタンを押すとカウントが増えていくサンプルです。 import { useState } from 'react'; function Example() { // Declare a new state variable, which we'll call "count" const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times
meguro.css#3 でstyled-components + CSS Gridに感じる無限の可能性についての話をしました
styled-componentsとCSS-Grid組み合わせるとなんかいろいろ出来るぞ！みたいな事に気付いて、meguro.cssの枠に空きがあったので「ここで話すしかない！」みたいな感じで参加しました。前回はゴリッとJSなdart-sassの話をしてしまったのですが、今回はかなり趣旨に使い話ができた気がします。 ちょっと前から「もうちょっとUI（UXではなくあくまでUI）についてもう少し素振りしたいなー」みたいなことを思っててDaily UIをCollect UI 見たりしながらチマチマやっていた所でいろいろ脱線したのが今回の産物になります（電卓とかの例はまさにそれです） 元がデザイン素振りのためのものだったりするので、パフォーマンスだったりブラウザ依存とかは考慮してない夢の世界の話ですが、一部は真面目に使えるケースもあるんじゃないか？と思ったりもしています。 画的に地味ですが、タイム
Vueを昔触った後Reactをどっぷり触ってもう一回Vueを触ってReactに戻って得た感想
最近ReactとVueをどっちも触る機会があったり、「ReactとVueどう選定するの？」という問いを投げられ、スッと答えられなかったな、と後悔があったりしていたので、Vueを触って得られた感想をまとめてみる。 結論としてなにか新しいことを発見したというものではなく、世間で言われている事を自分なりに再構築しただけの結論になったと思う。 TL; DRVueからは全体的に優しさ（Gentleさ）を感じる事が多く、良い点だと感じた大規模になるときReactの堅牢さは魅力的。Vueが大きくなった時に支えられ設計が出来るかは個人的には懐疑的。「こうだったらVue、こうだったらReact」みたいな分岐点があるというわけではないので、最終的には好みになってくると思う。ぞうさんが好きかきりんさんが好きか。これまでのフレームワーク遍歴今回の話をするにあたって、僕と各フレームワークの付き合いをまとめておくと、
ドラッグ&ドロップでReact製のWEBアプリがつくれるReactStudioがやばい - Qiita
ReactStudioを使ったアプリの作り方はこちら React Studioを使ってQiitaの記事一覧アプリを作成してみる はじめに reactというとJSXの書き方、props、stateの挙動等を覚える必要があるため、 学習コストが割りと高めであったり、環境を構築するのに一手間かかったり等、 まだまだとっつきにくさが否めないライブラリです。 しかし、今回は、そんなReactをドラッグ&ドロップでアプリが 作れてしまうツールがあったので紹介したいと思います。 ※尚、Windowsはなく、Macのみで使用できるツールでございますので、予めご了承下さい。 公式サイト 公式サイトへのURLはこちら。 React Studio https://reactstudio.com/ ツールの使い方 ReactStudioでコンポーネントをデザインします。 その後、コードが自動生成されます。 無料で
Grails&React CRUDビュー生成2017 〜Reactベースの管理画面構築ライブラリAdmin-On-Restの紹介〜 - uehaj's blog
これはG*Advent callender 2017の24日の記事です。 昨日23日の記事は mshimomuさん、明日25日の記事は未定です。 完全に一年ぶりの記事です。みなさん、いかがお過しでしたでしょうか。今年Qiitaとかに書いた記事を別にまとめましたが、わたしはReactを良く書いてた一年でした。 本記事のテーマは以下の2つです。 GrailsのWeb APIサーバのCRUDビューをいかに簡単に作るか RESTfulサーバ/任意のサーバに対する強力なダッシュボード・管理コンソール開発用ReactコンポーネントライブラリであるAdmin-On-Restの紹介、使い方 もくじ もくじ 去年までのあらすじと今年の方針 Admin-On-Restとは何か Admin-On-Restのデモ動画 Admin-On-Restの特記すべき点 REST Clientによるデータソースの抽象化 Ad
KotlinのReact用ライブラリの実装を読む - Qiita
概要 この記事では、KotlinでReactアプリを書くときに使うライブラリの実装についてみていきます。Reactについては詳しく説明しません。 実装を読む気持ちとしては、React用のKotlinDSLがどのように実装されているか気になる、Kotlinのコードを読んでKotlinに関する知見を深めるといったことがあります。 はじめに はじめてKotlinでReactアプリを書く場合、create-react-kotlin-appというnodeモジュールを利用することで簡単にサンプルプロジェクトを作成できます。 kotlin-wrappersの中にある、kotlin-reactとkotlin-react-domというKotlinのライブラリを使うことで、Kotlinらしい書き方ができます。 以下は、create-react-kotlin-appで作成したサンプルプロジェクトのソースコードの
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
How to Write PureScript React Components to Replace JavaScript
GitHub - psibi/yesod-rest: Yesod Rest Scaffolding with React
GitHub - vercel/next.js: The React Framework
