Reactを関数型プログラミングの文脈で理解する｜こわくない関数型プログラミング
You Might Not Need an Effect – React
Effects are an escape hatch from the React paradigm. They let you “step outside” of React and synchronize your components with some external system like a non-React widget, network, or the browser DOM. If there is no external system involved (for example, if you want to update a component’s state when some props or state change), you shouldn’t need an Effect. Removing unnecessary Effects will make
ネット上のインフルエンサーを信用しすぎないで - Qiita
この記事はYouTube動画「Don't Put Too Much Trust Into Online Influencers」の翻訳です。 元動画 私自身が大きく共感を得た上、プログラミング初学者含め多くのエンジニアに届けば良いと思い記事にしました。 ※メールで連絡を取り、許諾を得ています。 はじめに この記事ではReact Nativeをはじめ特定の技術を引き合いにした話が続きます。 しかし、決してReact Native含めそれぞれの技術や言語自体の是非を問うものではありません。 また翻訳者自身、React Nativeの開発経験はありません。 ネット上（特にインフルエンサー）の発信を信じ込み過ぎず、技術そのものに興味を持ち楽しむ姿勢が最も大事だということが本記事の主張です。 その点だけご理解頂きお読みください。 以下、翻訳文。 本文 皆さんこんにちは。この動画は予定外のものです。
僕がお金を払ってでも教わりたいこと 2021
追記 一旦締め切りました。 連絡をくださった方、書籍などのアドバイスをくださった方ありがとうございます。 本文 謝礼をお支払いするので、教えて欲しいことがあります。 自習しろと言われそうですが、試行錯誤するには人生が短すぎたり、爆速突破するには能力が足りなかったりで色々辛くなってきたので何卒。 以下、学びたい優先度順です。同時に学べるのは多くて 2 つで、被った場合は優先度順でお願いすることになります。 教えて欲しいこと OCaml で Parser Combinator を 0 から作る 狙い: 関数型プログラミング言語とそれの使い方を学びたい。また、OCaml のエコシステムに詳しくなりたい。 Monadic Parser をゼロから作ることで、関数型プログラミングのテクニックや考え方を学びたいです。 すでに 教科書的な簡単な Monadic Parser を 0 dependenci
Next.jsで整える。デザインとロジックの分離
先日開催されたジャムジャムJamstackで登壇させていただいた時の記事になります。 簡易構成のリポジトリを作成しましたので、参考になればと思います。 経緯 メディアサイトを作成することになった デザイナーコーダー ×1 フロントエンドエンジニア ×1（ワイ） Next.jsとmicroCMSでSSGしてvercelにデプロイ 私的、Jamstack王道構成ですね デザイナーコーダーさん「Jsわからんです」「抵抗感あります」 SSGをする為のpages/配下のファイルにはいろんな処理が記載されます。 getStaticPropsやgetStaticPathsとか ページネーションとかパンクズとか作る為の処理が色々記述されます。 この辺なんらかの方法で・いい感じに・分離できたら・いいですね^^ デザイナーコーダーが触るViewの部分 フロントエンドが触るロジックの部分 これを目指していきます
tree.nathanfriend.io
An online tree-like utility for generating ASCII folder structure diagrams. Written in TypeScript and React.
Reactハンズオンラーニングを読んだので感想
はじめに この記事はこれからReactやJavaScriptを0から学びたいと思う人に向けての記事です。 こちらの本を紹介したいなという、ただの布教記事です。 自分もそれなりにJavaScriptを書いて、Reactを勉強してきたと思っていましたが こちらの本を読んで、まだまだ序の口だったのだなと感じました。 もちろん、何年もJavaScriptを書いてきて、ここに書いてある事は常識だぜ！っていう人もいるかと思います。 ただ、最初にも書いたように、0から学ぼうとしている人に向けてなので そういった人にはとても有益な本になるのではないかと思います。 こちらのスクラップに自分で理解するためにコードのメモなどもとってあるので、参考にしてみてください。 本の構成について ツールの紹介 から始まります。 Github React Dev Tools Node などの説明があります。 JavaScri
Reactのパフォーマンス改善を勉強会で開催しました - JX通信社エンジニアブログ
はじめまして、新卒フロントエンドエンジニアのぺいです。 JX通信社でフロントエンドの開発はReactが主流になっており、React Hooksを使った開発が欠かせません。hooksは便利な反面、適材適所使い所を理解していないと逆にパフォーマンスが悪くなってしまう場合があります。そこで今回は普段フロントエンドを書かない人も勉強会に参加するのを考慮し簡単な改善から応用としてReactで書かれたFASTALERT *1の改善まで行ってもらいました。 前提条件 勉強会の内容 再レンダリングされているコンポーネントを見つける なぜ再レンダリングされてしまうのか 改善方法 コンポーネントのメモ化 関数のメモ化 最終的な変更箇所 毎回コンポーネントや関数をメモ化すべきなのか コストの高い計算 無駄なレンダリング カスタムhooks 最後に 参考 前提条件 react 17.0.1 勉強会の内容 最終的な
React ステート管理 比較考察 - uhyo/blog
こんにちは。Reactの話題の中でもかなりの部分を占めるのがステート管理、さらに言えば各種のステート管理ライブラリです。今さらながら、Reactにおけるステート管理の手法やいくつかのステート管理ライブラリを比較考察して記事にまとめました。 useState + バケツリレーReactにおける基本的なステート管理はuseStateです。ひとつのコンポーネント内で完結するようなステートならばuseStateは非常に適しており、他の選択肢はほぼ無いと言っても構わないでしょう。 ステートをアプリケーションの広範囲で使いたい場合が問題です。次の画像に例示されるように、分岐したコンポーネントツリーの末端のコンポーネント（使用者）で同じステートを参照したい場合を考えます。 useStateと組み合わせる場合、もっとも原始的な方法はpropsのバケツリレーによるものです。propsは親コンポーネントから子
すごいReactフック8選 - Qiita
はじめに React.jsは現在、フロントエンド開発者に最も人気のあるJavaScriptライブラリです。Facebookが開発し、オープンソースのプロジェクトとして提供されているReactは、世界中の開発者や企業が使用しています。 Reactは、シングルページアプリケーションの構築方法を大きく変えました。その最大の特徴の1つがフックです。フックは2019年に導入されたもので、状態処理の時に、クラスコンポーネントの代わりに関数コンポーネントを使用できるようになりました。組み込みのフックに加えて、Reactは独自のカスタムフックを実装する方法を提供しています。 ここでは、アプリケーションやプロジェクトで使用できる、カスタムフックとその実装に関するお気に入りをいくつか紹介します。 1. useTimeout 宣言型アプローチでsetTimeoutを実装できます。まず、コールバックと遅延を受け取
Deno で 学ぶ React のサーバサイドレンダリング - 30歳からのプログラミング
Deno で React のサーバサイドレンダリング（以下、SSR）を実現する方法をハンズオン形式で書いていく。 自分が調べた範囲では、単に JSX で HTML を構築して終わり、という記事が多かった。それではあまり実用的ではないので、この記事ではハイドレーションまで行う。 また、React で SSR する方法を調べたところ、ほとんどの記事が Next.js を前提としていた。確かに Next.js を使わずに SSR するケースはあまりないだろうし、記事としても需要がないのだと思う。 しかし、Next.js のようなフレームワークが裏側で何をやってくれているのかを知ることで、SSR に対する理解を深めることができる。 事実、私は SSR をほとんど使ったことがなかったが、この記事を書くことでかなり考えを整理することができた。 Deno のバージョンは1.11.2で動作確認している。
Next.jsとmicroCMSでカップラーメン食べた回数カウンターを作る
まえがき コロナの影響で食生活がおうち中心になり、どうしても カップラーメン or カップ焼きそば を食べる機会が増えました。 そのなかで、どれぐらい今食べているのかを把握することは大切（健康のために）かと思い、この自分しか得をしないサイトを構築してみました。 こんなことに結構な工数とお金を使った気がしますが、いったん気にしないことにしてます。 これで、栄養や健康について意識するようになっていけると思います。（いいぞ！） アーキテクチャの構想 Next.js（SSG） microCMS（ヘッドレスCMS） MESH（IoT） Github Actions（JAMStack build） Slack（通知用） お名前.com（ドメイン） AWS S3（ファイル配置） CloudFront（ファイルの配置とドメインを紐づけ） Lambda@edge（Edge側にいる JavaScript） A
私が React を好きな理由
何かを好きになるのに、理由なんているかい？ ~セ・ヤ (B.C.2525)~ 出会い あれはおよそ4年前のことでした。 2016年の冬、寒さに震えていた私はフロント未経験の身でありながらフロントの技術選定をしなければならなかったのです。 その頃のフロント界は混迷を極め、 React もまだ枯れておらず、Angular は2系が1系と大きく違うことから叩かれ、Vue が名乗りを上げようとしていました。「フロント界隈は動きが速い」というフレーズも流行語大賞になりそうな勢いでした。 そんな中選択肢・考えることの多さに絶望していた私は React を試しに触ってみました。 そして「思ったより覚えることないし、独自文法とかも少ないからミスってもリカバリー効きそうだな」と直感的に思いました。 はっきり言ってしまえば雰囲気で選んだのですが、今ならこの時の直感は間違っていなかったと自信を持って言えます。
ぼくのかんがえたさいきょうの useState + useContext よりも Redux のほうが大抵勝っている
「Redux は学習コストが高い」などと言って useState（または useReducer）と useContext を組み合わせ 劣化 オレオレ Redux を作ってしまうのを見かけます[1]。よくないことだと思いますが、気持ちは非常にわかります。Redux エコシステムがそういう気持ちにさせてしまう部分は大いにあります。 Redux は それ単体なら 学習コストは useReducer + useContext と同等であることを示してこの気持ち（誤解）を解かしつつ、なぜそういう気持ちになってしまうのか考察してみます。 まず useState と useReducer の違いを押さえておく 知っている方はスキップしてください。 useState と useReducer は本質的には同等で、どちらもコンポーネントにステート（状態）を持たせる役割があります。次のようなカウンターアプリ
まとまったCSSを別のコンポーネントに分けないでほしい話 - uhyo/blog
この記事は、ReactでCSSを書くときに関連したCSSを別々のコンポーネントに分けるのをやめようという記事です。主な理由は、スタイリングという機能が複数コンポーネントに分散するのを防ぐためです。これには修正時に複数コンポーネントにまたがって修正が必要になるのを防ぐという意味もあります。 Flexboxの例関連したCSSが複数の要素に分かれることはよくあります。その代表例がdisplay: flexです。例えばこんなレイアウトを考えてみましょう。左側のボックスの幅が決まっていて右側の幅が可変の2カラムレイアウトです。 左のカラム (100px)右のカラムこのレイアウトはおおよそ次のように実現できます。 /* 親要素 */ display: flex; /* 子要素（左） */ flex: 100px 0 0; /* 子要素（右） */ flex: auto 1 0;では、Reactではどの
Promiseをthrowするのはなぜ天才的デザインなのか - Qiita
ReactのConcurrent Modeが最初に発表されたのはもう1年近くも前のことです（記事執筆時点1）。Concurrent Modeはたいへん奥深い機能で正式版がたいへん待ち遠しいですが、Concurrent Modeの代名詞として多くのReactユーザーに知られているのはPromiseをthrowするというAPIデザインです。Concurrent Modeでは、コンポーネントがレンダリング時にPromiseをthrowすることで、レンダリングをサスペンドした（Promiseが解決されるまでレンダリングできない）ことを表します。 Concurrent Modeに関しては筆者の既存記事Concurrent Mode時代のReact設計論 (1) Concurrent Modeにおける非同期処理などをご参照いただきたいのですが、ここではPromiseをthrowするということ自体に焦点
50 Projects for React & the Static Web
50 Projects for React & the Static WebLearn by doing with this FREE ebook! Get the ebook straight to your inbox. Email AddressGet It Free Not sure what to build?Dive in with 50 projects complete with project briefs and wireframes! Learn by DoingOne of the best ways to learn is by doing the work. Choose from 8 project categories and get started right away.
React + Material-UIで管理画面を作成してみた | DevelopersIO
Reactアプリを作成 Material-UIで管理画面を作るためのベースとなるReactアプリを作成します。 Create React App Create React Appで新しいReactアプリを作成します。 npx create-react-app react-material-ui-sample --typescript プロジェクトのディレクトリへ移動して実行します。 cd react-material-ui-sample npm start ブラウザにReactアプリが表示されます。 ディレクトリ構成 ディレクトリはあまりネストさせすぎずシンプルな構造にしました。コンポーネントの分け方はAtomic Designを参考にしています。 src/ ├ components/ │ └ atoms/ # 原子（個々のパーツ） │ └ molecules/ # 分子（原子の集合体）
package.json の resolutions を使って依存パッケージのバージョンを指定する - 30歳からのプログラミング
package.jsonのresolutionsフィールドを使うことで、依存ツリーの深い部分にあるパッケージのバージョンを固定することが可能になる。 現在のところ Yarn でのみ使える機能だが、サードパーティが公開しているライブラリを使うことで npm でも使えるようになる。 動作確認に使った npm のバージョンは6.14.5。Yarn は1.22.4。 後述するnpm-force-resolutionsについては、0.0.3を使っている。 npm や Yarn でパッケージをインストールすると、指定したパッケージだけでなく、そのパッケージが依存しているパッケージもインストールされる。 そうしてインストールされたパッケージが他のパッケージに依存していれば、そのパッケージもインストールされ、それが繰り返されていく。 この仕組みについては、以下の記事で詳しく触れた。 numb86-tech
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ニート向けソフトウェアエンジニアリング塾
