JS 状態管理ライブラリ探索記 - Introduction
これから何回かに分けて、Redux に代表される JS の状態管理ライブラリをいくつか見ていきます。 早速本題に入りたいところですが、その前になぜいくつもライブラリを知っていた方がいいのか、当たり前のように思うことをあえて考えてみる必要があります。 なぜなら、状態管理ライブラリがたくさんあるために、次のような疑問が出てくるからです。 どれでも好きなものを使えば開発がうまくいくのか？ 今までうまくいっていたライブラリを使い続ければ今後もうまくいくのか？ 選ぶとしても、何を基準に選べば良いのか？ 今回は少し立ち止ってこういった疑問について考えてみます。 ではそもそも状態管理とは、一体何のために、何をすることなのでしょうか？ 状態管理が目指すもの – 読みやすさの基本定理 状態管理をする目的は様々ですが、最も大切なことはリーダブルコード（読まれて無い方は是非一読を！）の中で「読みやすさの基本定理
Next.js 4年目の知見：SSRはもう古い、VercelにAPIサーバを置くな - Qiita
Next.js by Vercel - The React Framework 画像は Next.js サイコー！っていう顔です。 Webフロントエンドエンジニアであれば、「Reactのフレームワーク」と聞いて真っ先に思いつくであろうNext.js。僕は小規模の趣味開発から中規模の業務まで、4年程度Next.jsを使い続けてきました。触りはじめの当時はバージョン4で、”SSR（Server-side Rendering）を提供するReact製フレームワーク”だったものが、執筆時時点の最新バージョン（10.0.1）ではガラッと異なるフレームワークへと進化しています。 この4年間は実務で利用するだけでなく、新しいものや廃止された機能、RFC止まりになった機能など、Next.jsに関する情報を追いかけており、ある程度の知見をためつつも、Next.js並びに開発元のVercelが目指す方向性を何と
Next.js 10 リリースノート全訳！ 画像の自動最適化、i18n対応、アナリティクス、Eコマースほか - Qiita
Next.js 10 リリースノート全訳！ 画像の自動最適化、i18n対応、アナリティクス、EコマースほかNext.js この記事は Next.js 10 リリースノートの日本語訳です。 10/27、Next.js 10 がリリースされました！ 私はふだん Next.js で個人開発を行ったりしている者です。 Twitter もやっているのでよかったらフォローおねがいします！ @_thesugar_ よかったら Next.js チュートリアル（公式）の翻訳記事もどうぞ。 また、非公式ですが Next.js のドキュメントの翻訳プロジェクト も盛り上がっています！ Next.js 10 の機能をご紹介します: ビルトインの画像コンポーネントと画像の自動最適化: 新しい next/image コンポーネントを使用することで、自動的に画像を最適化します 国際化に対応したルーティング: ビルトイン
Next.js 10
We are excited to introduce Next.js 10, featuring: Built-in Image Component and Automatic Image Optimization: Automatically optimize images using the new next/image component Internationalized Routing: Start internationalizing your Next.js applications with built-in primitives Next.js Analytics: Measure and act on real user performance Next.js Commerce: An all-in-one starter kit for high-performan
MobX作者による、RecoilとMobXについての簡単なまとめ - console.lealog();
http://github.com/facebookexperimental/recoil 先日のReactEuropeで発表されたてホヤホヤの、ExperimentalなReact向けの状態管理ライブラリであるRecoil。 ただAPIとかやりたいことを見てると、「MobXファミリーとの違いってなんぞ・・？」って個人的になってました。 インターネットでも同じような印象を受けた人はいるらしく、なんやろな〜と思っていた矢先。 MobXの作者である `@mwestrate` 氏が、さくっとTweetしてるじゃありませんか！ なのでこの記事では、そのTweetを引用して、翻訳+ざっくりまとめをしておきます。 元Tweetはこちら #MobX or @recoiljs? Saw a lot of questions on whether they're the same, so a quick t
Facebook製の新しいステート管理ライブラリ「Recoil」を最速で理解する - uhyo/blog
昨日、Facebook製のReact用ステート管理ライブラリRecoilが発表されました。Facebook製といってもReact公式のステート管理ライブラリとかそういう位置付けではないようですが、それでも大きな注目を集めているのは間違いありません。 そこで、筆者がRecoilに対して思ったことや、筆者の視点から見たRecoilの特徴を記事にまとめました。 なお、この記事の執筆時点では副作用の扱いなどの点はいまいち情報が揃っていません。この記事では速報性を重視し、コアのステート管理部分に絞って考えています。また、まだexperimentalなライブラリなので、今後この記事の内容からRecoilのAPIが変化したとしても悪しからずご了承ください。 この記事を書くときに筆者が色々試していたCodeSandboxはこちらです。 https://codesandbox.io/s/recoil-san
Next.js 9.3新API getStaticProps と getStaticPaths と getServerSideProps の概要解説 - Qiita
Next.js 9.3新API getStaticProps と getStaticPaths と getServerSideProps の概要解説Reactserver-side-renderingNext.jsJAMstackVercel はじめに この記事ではNext.jsにvesrion 9.3から導入された以下の3つのAPIについて解説します。 getStaticProps getStaticPaths getServerSideProps こちらのissueで議論されてきた機能です。 Static Generation / SSG Improvements · Issue #9524 · zeit/next.js GitHub追っているとGS(S)P methodsと略されているのを見ます。 Next.jsが未経験の方でもReactとSSR(Server Side Render
DenoがJSXに対応した - No Regrets in Bathing
台風がVue Fesを直撃する勢いで向かってきています。 参加者の方にカンファレンスを楽しんで頂きたい気持ちはもちろんですし、スタッフも多大な労力をかけてタフな調整を続けてきた方ばかりなので、報われるような結果になることを祈るばかりです。諸々の事情は公式記事で詳しく書かれています。 私は発注したりなんだりする係の一人なので、色々と気が気ではありませんが、台風が空気を読んでくれると信じて準備を進めています。笑い話で済みそうな感じになったときに詳しく書ければいいなーと思います。 UPDATE: 2019/10/11 中止が発表されました。開催を楽しみにしてくださった皆様に多大なご迷惑、ご心配をおかけしましたことを心より深くお詫び申し上げます。 一方でDenoは明るい話題しかないわけで、癒やしになっています。 DenoでJSXが実行できるようになったよ react勢みて、denoでtsx直接実行
Introducing the New React DevTools – React Blog
We are excited to announce a new release of the React Developer Tools, available today in Chrome, Firefox, and (Chromium) Edge! What’s changed? A lot has changed in version 4! At a high level, this new version should offer significant performance gains and an improved navigation experience. It also offers full support for React Hooks, including inspecting nested objects. Visit the interactive tuto
Redux/react-reduxチートシート - Qiita
Reactからの流れで、組み合わせての運用例の多いReduxを勉強してみました。 Fluxの概念、Reduxの基本機能、Reactとの連携について公式のドキュメントを中心にまとめています。 フロー自体が厳密でありながらも実装上の制約が少ない点が魅力的に思えましたが、 データモデルやUIツリーの設計、ファイル/クラス分割やディレクトリ構成などについても明確な規約が存在せず、(特にスケールを見越しての)運用方針は使い込みながら模索していく必要がありそうです。 概要 Redux = React Communityが開発しているJavaScriptフレームワーク オープンソース, MITライセンス Fluxの考え方/アーキテクチャにもとづいている 単方向にデータや処理をフローさせることで、わかりやすくフロントエンド作りましょう、という考え ユーザの操作 → View → Action → Redu
個人的に便利だと思ったReact hooks 一覧 - Qiita
hooks を含んだ安定リリースが出て早1ヶ月ちょっと、私は先月から hooks を使い始めたのですが、よそ様のライブラリや自分のお手製 hooks で「これ便利やな〜」と感じたものを紹介していきます。 リファレンス リファレンスは最後に書くものな気がしますが、この記事は存在自体がリファレンスのリファレンスって感じの立て付けというくらいリファレンスが主役なので、最初に貼っておきます。 react-use GitHub - streamich/react-use: React Hooks — 👍 hooks の便利関数の寄せ集め系では一番スター数が伸びている気がする。お世話になってるし、色々着想も面白いと思います。 the-platform GitHub - palmerhq/the-platform: Web. Components. 😂 かのFormikの作者である Jared Pa
本当に簡単にできて驚いた！面倒な設定は一切不要、秒速でWeb開発用のサーバーが構築できる -Zero Server
Node.js、React、TypeScriptをはじめ、HTML、CSS、Sass、Markdownなどが利用できるWeb開発用のサーバーが秒速で簡単に構築できるZero Serverを紹介します。 必要な依存関係は自動インストールされ、ReactやSassは置くだけでコンパイル、マークダウンも設定は一切不要です。サーバーを構築する時間が無い人、設定に明るくない人でもすぐに利用できます。 Zero Server Zero Server -GitHub Zero Serverの特徴 Zero Serverのインストール Zero Serverの使い方 Zero Serverの特徴 Zeroは現代のWeb開発をシンプルにするためのNode.jsフレームワークです。パッケージマネージャーやルーティングを気にせずにアプリケーションを構築できます。 Node.js、React、HTML、MDX、静
🎉React 16.8: 正式版となったReact Hooksを今さら総ざらいする - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 来たる 2 月 4 日、ついに React 16.8 の正式版がリリースされます。この React 16.8 には、アルファ版が公開されて以来常に React ユーザーたちの関心をほしいままにしてきたReact Hooksが正式版となって追加されます。 ※追記：アメリカ時間で 2 月 5 日になっても React 16.8 がリリースされませんでした。事前情報で 2 月 4 日と言ってたのに……。いつになったらリリースされるのかはよく分かりません。2 月 6 日に React 16.8 がリリースされました！ 熱心な React ユーザ
Webフロントエンド パフォーマンス改善ハンドブックを公開しました - dwango on GitHub
パフォーマンス改善ハンドブック ウェブページにおけるパフォーマンスに関する問題の見つけ方や考え方の事例をまとめた Webフロントエンド パフォーマンス改善ハンドブックを公開しました。 URL: https://dwango-js.github.io/performance-handbook/ このハンドブックでは過去に行ったWebフロントエンドのパフォーマンス改善の事例を中心に紹介しています。 注意点としてWebフロントエンドは常に変化しているため、現在の最適な解決方法を提案するものではありません。 また、アプリケーションによっても最適な解決方法は異なります。 今回の事例ではViewライブラリにReactを用い、映像再生プレイヤーなどある程度複雑な機能を持ったウェブアプリケーションのWebフロントエンドを扱います。 具体的にはニコニコ生放送（以下「生放送」）で行った事例を中心に書かれていま
Jasper(GitHub用のIssue Reader)を無料にしました - maru source
こんにちは丸山@h13i32maruです。 2年前からJasperというGitHub用のIssue Readerを開発しており、$12で販売しているのですが、v0.6.0から無料で配布することにしました🎉 これまでに有料でお買上げいただいた方々、本当にありがとうございました！！！すごく開発の支えになりましたし、購入してもらえたことを日々嬉しく思っていました。今後とも是非Jasperをよろしくお願いします！ なぜ無料にするのか？ そもそもどうして有料で販売していたのかというと、「自分の作ったものでお金を直接稼ぐってどれくらい難しいんだろうか？」「たくさん購入してもらうために個人でできることって何があるんだろうか？」というのを知りたかったからです。一攫千金とかサラリーマンを辞める、みたいなのは全然考えていませんでした。有料にしていたのはあくまでも現職（プロダクト開発）に活かすためにという感じ
【Reduxに疲れた人のための】Undux入門 - Qiita
巷のフロントエンドではReact+Reduxの技術スタックがどちゃクソ流行ってますね！ とはいえ、Reduxだとやはりどうしてもひとつアプリを作る際のボイラプレートコードの多さや、ステートの更新によってトリガされる副作用処理のハンドリングをredux-sagaやredux-side-effectsなしではうまくやれないケースが多いです。 もし、Reduxとその周辺ライブラリのよせあつめにちょっとでもツラミを感じ始めたら、Unduxを試すチャンスです。 Unduxとは？ Dead simple state management for React Reactのための死ぬほどシンプルなステート管理ライブラリです。 特徴 TypeScriptやFlowなどでの型付けを意識した設計。 ReduxにおけるAction, Reducer, Dispatcher, Containerなどの概念を必要とし
ドラッグ&ドロップでReact製のWEBアプリがつくれるReactStudioがやばい - Qiita
ReactStudioを使ったアプリの作り方はこちら React Studioを使ってQiitaの記事一覧アプリを作成してみる はじめに reactというとJSXの書き方、props、stateの挙動等を覚える必要があるため、 学習コストが割りと高めであったり、環境を構築するのに一手間かかったり等、 まだまだとっつきにくさが否めないライブラリです。 しかし、今回は、そんなReactをドラッグ&ドロップでアプリが 作れてしまうツールがあったので紹介したいと思います。 ※尚、Windowsはなく、Macのみで使用できるツールでございますので、予めご了承下さい。 公式サイト 公式サイトへのURLはこちら。 React Studio https://reactstudio.com/ ツールの使い方 ReactStudioでコンポーネントをデザインします。 その後、コードが自動生成されます。 無料で
Reactサブセット実装の preact で、ライフゲームのアニメーション書いて使い方を確認した
厳密なサブセットかは要確認な気がするが、まあそういうコンセプトのライブラリがある。 で、使ってみた。 preact とは reactのサブセット実装。reactと比較してかなり小さい(圧縮して3kb)。contextとかpropTypesとかはない。いらないと思う。 reactとの互換をもたせるレイヤーは本体を小さくするために外部パッケージに切り出されている。 https://github.com/developit/preact-compat コード量が少ないので、迷ったら元のコード読めるという安心感がある。 個人的にReactは過剰な抽象化の迷宮だと思っていて、あんまり読みたくない。 最初に ライフゲームのアニメーションしたかったわけで、ライフゲームを書きたかったわけではないので、ライフゲームのロジック部分はnpmから適当に持ってきた。 動いてるコードはここ http://mizchi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
すごいReactパッケージ5選 - Qiita
AirbnbがVisxをリリース：Reactを使ったインタラクティブな視覚化のための低レベルでプリミティブなコンポーネントの集合
