React大好き侍が、「もうSolidJSでいいじゃん...//」ってなったワケ。 - QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
React 18に備えるにはどうすればいいの？ 5分で理解する - Qiita
React 18はReactの次期メジャーバージョンで、2021年の6月にalpha版が、11月にbeta版が出ました。また、Next.js 12でもReact 18のサポートが実験的機能として追加されました。React 18の足音がだんだんと我々に近づき、アーリーアダプターではない皆さんの視界にもいよいよReact 18が入ってきたところです。 特に、React 18ではServer-Side Rendering (SSR) のストリーミングサポートが追加されます。現在ReactでSSRを行いたい人の強い味方としてNext.jsが存在しているわけですが、Next.js 12でもReact 18を通してストリーミングの恩恵を受けることができます（Next.jsではSSR Streamingと呼んでいるようです）。また、厳密にはReact 18とは別ですが、React Server Comp
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するということ自体に焦点
Concurrent Mode時代のReact設計論 (1) Concurrent Modeにおける非同期処理 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Concurrent Modeは、現在（2020年3月）実験的機能として公開されているReactの新しいバージョンです。Reactの次のメジャーバージョン（17.x）で正式リリースされるのではないかと思っていますが、確証はありません。なお、React公式からもすでに結構詳細なドキュメントが出ています。 並列モードの導入（実験的機能） Concurrent Modeに適応したアプリケーションを作るためには、従来とは異なる新しい設計が必要となります。筆者はConcurrent Modeを使ったアプリケーションをひとつ試作してみました。この記
styled-components（CSS in JS）をやめた理由と、不完全なCSS Modulesを愛する方法 - Qiita
styled-components 画像は styled-components ツライっていう顔です。 Angularのようにスタイリングまで面倒を見てくれるUIフレームワークならまだしも、Reactの場合はコンポーネントのスタイリング方法も自身で選択しなければいけません。CSSのスタイリング方法/設計はいくつか存在しますが、どれも一長一短で、やはり銀の弾丸は存在しません。スタイリング方法を選択可能なUIフレームワークは、この混沌とした選択肢の中から価値を見出す必要があるわけです。 僕はBEMによる人力CSS管理（Sass/Less/Stylus）から、 { fontSize: 14 } のようなJSオブジェクト形式のCSS in JS、 styled-components のようなTemplate Stringsを利用したCSS in JS、そしてCSS Modulesまで幅広く公私とも
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が目指す方向性を何と
Reactを使って本気でアンケートシステムをつくった - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? この記事は エムスリー Advent Calendar 2017 の25日目の記事です。 普段はDB・サーバサイド・クライアントサイドまでの設計・実装・運用を扱っていますが、この記事ではReactを使って開発したシステムについてを紹介しようと思います。 作ったもの アンケートシステム(survey-designer-js)を作り、社内で使っていました。またOSSとしてレポジトリに公開もしています。 GitHub DEMO なお公開しているのはクライアントサイドのみで、サーバサイドの実装は公開していません。なお、エムスリー社内で使用してい
Reactで管理画面をつくるときに便利だったライブラリ集と所感 - Qiita
主に未来の自分用 material-ui Material DesignをReactでコンポーネント化したもの UIパーツになっているのでパパっと使えるし、あとでカスタマイズするときもけっこう融通が効く 現在1.0.0がbetaでアップデートが激しく破壊的変更も多いので、場面に合わせてStableとどちらを採用するか決めるのがよい。 v1がStableになった react-admin REST API（やGraphQL）を叩くクライアントとして最適化された感じの管理画面コンポーネント集 インデックスがあって、閲覧ページがあって、登録ページがあって、みたいなよくある画面が素早くつくれる Material UIを内部で使っていて、さらに管理画面用に高レベルなコンポーネント（テーブルとか新規作成フォームとか）が実装されている カスタマイズ性もまぁまぁ高い。CRUDではないエンドポイントでも拡張可
Redux不要論と、グローバル状態管理ライブラリReactNの紹介 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Redux不要論 若干強めのタイトルです。あらゆるケースでReduxが不要と主張するつもりはありません。 しかし、Reduxが不要と思われるケースでもReduxが使われることを避けるため、「Reduxは必ず採用しなければならないものではない」ということを意識していただきたく、刺激的なタイトルで始めました。 （個人的にはむしろ、積極的に採用すべき理由がなければ採用しない方が良いくらいに思っています） （MobXとか他のライブラリについては一旦置いておきます） Reduxのメリット Redux's motivation 曰く、SPAに於ける
TypeScript で書く React コンポーネントを基礎から理解する - Qiita
この記事は Recruit Engineers Advent Calendar 2019 の 23日目の記事です。 TypeScript のプロジェクトで React コンポーネントを書いていると、コンパイラに怒られることがたびたびあります。ネット上にあるサンプルコンポーネントが JavaScript で書かれていると、プロジェクトにもってきたときにコンパイルできないということはよくあるんじゃないでしょうか。any でコンパイラを黙らせることもできますが、せっかく TypeScript を使っているので、安全に解決したいよねってことでこのような記事を書きました。 型定義は @types/react@16.9.17 にしたがっています。目次をみて、この程度のことはもう知っているよという方は react-typescript-cheatsheet をみてください。React + TypeScr
FacebookのHermesというJSエンジンがエロい - Qiita
FacebookがHermesという組み込みのJSエンジンを公開したようです。 ReactNative用の組み込み用のJSエンジン（最新版だとオプション切り替えで使えるっぽい） MITライセンス プロプラなものとの組み合わせが発生しうる組み込みにおいては正義しかない ES2015をサポート(予定） 現時点ではクラスとかlet/constのブロックスコープは実装途中 Map/Setとかの組み込みクラス系は実装済み サイズの小ささをうたった処理系はES2015への対応はまだまだなのが多いので（Duktapeとか）良い 事前にJavaScriptのソースコードをパースして中間表現（LLVM IRをそのまま利用？）にしておいてロードする モバイルのCPUやバッテリー、メモリーにも優しい なお、エロいというのは強く感情が揺さぶられた結果が出てきたワードであってセクシャルな内容は一切含まれておりません
TypeScript教育用コンテンツ公開のお知らせ | フューチャー技術ブログ
2019年頭より少しずつ書いていたTypeScriptの教育コンテンツをクリエイティブ・コモンズ4.0の表示 - 継承 （CC BY-SA 4.0）で公開します。といっても完成版ではなく、アーリーアクセス版のような品質であることをご了承ください。 仕事ですぐに使えるTypeScript Web版に加えてPDF版もダウンロード可能です。 そもそもこの資料を書き始めたきっかけですが、フューチャーのようなB2Bな会社であっても、最近はフロントエンドの比重が高まっているところから出発しています。僕もフューチャーに転職後からReactでがっつり1年以上の案件をやったり、半年ぐらいのAngular案件をやったりしています。会社としてはVue.jsを推しています。グループ会社の東京カレンダーはReactを使っていたりもします。要件に合わせていろいろですね。B2B2Cな案件も多いですし、お客様の求めるUX
React Redux の難しかった点をできるだけシンプルに図解 - Qiita
はじめに この記事はだいぶ古くなっており、現在はReact Hooksを使ったReduxとComponentの繋ぎこみ方法があるようです。この記事ではそのあたり触れられてないので注意です。（Reduxの基本的な記事としてはまだ使えると思います、、、思いたい。） React-Reduxを人に教える機会があるのですが、中々キャッチアップが難しいFWです。 自分自身もReact自体未経験のところから、それなりに規模のある開発に参画したので、 その時に「ここが難しかったなあ」というところを自分なりに図解してみたいと思います。 前提 ReactとReduxの接続にはreact-reduxのconnectを使うこととします。 この記事で伝えたいところ 自分が難しく感じたのはこのあたりでした。 （ソースが色々あって）全体の流れがよくわからない actionを起こすとreducerが反応する仕組みがよくわ
🎉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 ユーザ
Vue.jsのmixinをslotで代用する - Qiita
Vueにはmixinという機能がある。 同一の機能を複数のコンポーネントに適応させるというものだ。 共通の機能を提供する便利なものだが、あまり楽観的に使えるものではない。 例えばReactでも過去には存在していたが、既に廃止されている。 なぜ廃止されたかは理由を読めばmixinのどのような点が危険な点かが見えてくるだろう。 https://reactjs.org/blog/2016/07/13/mixins-considered-harmful.html https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750 ざっくりと要約するとこのへんが上げられている 暗黙の依存関係を導入してしまう 名前の衝突を起こす 複数のmixinがあり、それらがプロパティを上書きす
VuePressはコーダーの夢を見るか。 - Qiita
Webサービス界隈の優秀な人たちが、フロントエンドの新しいツールを「最高！」と日々謳っている中、 底辺コーダーの我々はクライアントからの修正横目に 「ほーん。どうせ僕らの業務じゃ使えないんでしょ？」という冷淡な姿勢を貫き通していた。 しかし、興味がないわけではなかった。ReactやVueといったコンポーネント思考のフレームワークを駆使すればクライアントからの無理難題をスマートに解決し、家で有意義にダラダラする時間を手に入れる事が出来るかもしれない。そのような考えはいつも心の片隅にあったが目を背け続けてきた。 でもついにその時がきたかもしれない。VuePressがその夢を叶えてくれるかもしれない。 (タイトルはかっこつけただけで特に意味はないです。) 夢と苦悩 夢その1 Nuxt 夢その2 Gatsbyjs 夢その3 VuePressを使えるレベルにする。 開発のディレクトリ構成をいい感じに
オンラインWYSIWYGエディタリンク集 - Qiita
以下はAwesome text editingからリンクされているオンラインエディタのリンク集です。 昔はCKEditorとTinyMCEの二択だったような気がするけど、いつの間にかずいぶん増えていた。 最近はどれを選んでも十分な機能を持ってるし、脆弱性さえ無ければどれを選んでもまあ問題ないでしょう。 そういやWYSIWYGって聞かなくなったよね。 エディタ Trix サンプル。 一般的な機能。ドキュメントがわかりやすい。 CKEditor 2003年から存在する老舗中の老舗だが古くささは全くない。 インラインエディタとかすごい。 Squire サンプル。 昔のCKEditorっぽい見た目。 デザイン目的ではなくドキュメントを書くことを重視しているようだ。 ProseMirror 複数人でのリアルタイム同時編集に対応している。すごい。 Scribe サンプル。 正直見た目が一番わかりやすい
Reduxのmiddlewareを積極的に使っていく - Qiita
最初はちょっととっつきにくいけど、責務がはっきり分かれていて比較的コードがごちゃごちゃになりにくい（と思っている）Reduxですが、やはり実戦投入するとどうにも扱いにくい部分が出てきます。 特にそう感じるのは通信系の処理、ユーザーとのインタラクションです。これってつまるところ非同期処理なんですが、処理を依頼する側、つまりActionを投げる側としては「あとのことはまかせた！」と言いたい。Actionを投げる部分ってのはだいたい何かのイベントハンドラだったりしますが、そういう場所に通信やインタラクションの処理をダラダラと書きたくない。 本稿ではそれらの面倒な部分を責務が分離されたメンテナンスのしやすいコードになるようにmiddlewareを活用する例をいくつか紹介します。 その前にmiddlewareについて Reduxの公式ドキュメントではログ出力を例に取り、アプリケーション本体から分離し
小さいReactアプリケーションのためのライブラリ書いた - Qiita
EventEmitterバケツリレースタイル/フレームワークなしで小さくFluxする - Qiita これ見て最近は大体自分も同じような感じのことをしているので共通化できる最小限のコードをライブラリにしてみた。 元記事でも言ってるようにやることはとても少ないのでライブラリ使わないでもいいんだけどそのへんは好み。 Usage まず普通のステートレスなReactコンポーネントを作る。dispatchというpropsを受け取ってそれを通してイベントを発火するというのが唯一の規約。 import React from 'react'; // Stateless component export default class Counter extends React.Component { render() { return ( <div> <div>{this.props.count}</div>
HaxeとReact - Qiita
HaxeからJavaScriptを出力するというのは、静的型付き言語が好きだとか、JavaScriptはそれほど好きではないがWebコンテンツは作りたいという人にはとても良い選択肢だと思います。 とはいえ、HaxeはTypeScriptほどJavaScriptに近くないので、HaxeとJavaScriptライブラリの相性というのはとても悩ましい問題です。jQueryを使うとHaxeを使ううまみが減るとか、変数名に"$"が使えないのでAngularJSが使えないだとか、そういったことです。 悩んだ結果、Dynamic型やuntypedキーワードを使って動的言語的な書き方をしてライブラリを使うか、もうJS製のライブラリを使うのをあきらめてgetElementByIdべた書きで頑張るとか、そういった選択を迫られてきました。 では今、流行りのReactの場合はどうでしょう？ 実際につかってみた感想
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
