タグ

reactに関するt1mvverrのブックマーク (12)

  • Reactである「Hydrate」って何でしょうか?

    回答: SSR(Server Side Rendeing)におけるある処理のことです。以下で解説している段階のステップ4の処理です。 https://jp.quora.com/SSR%E3%81%A7%E8%BF%94%E3%81%99html%E3%81%A8%E5%BE%93%E6%9D%A5%E3%81%AEphp%E3%81%AA%E3%81%A9%E3%81%A7%E8%BF%94%E3%81%99html%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AE%E9%81%95%E3%81%84-%E3%81%BE%E3%81%9F%E3%...

    Reactである「Hydrate」って何でしょうか?
    t1mvverr
    t1mvverr 2022/07/02
    reactを使ったSSRの仕組みの説明記事で一番分かりやすかった。「急速真空乾燥したインスタント麺を、熱湯三分でもとどおりの味と香りにするようなものです」っていう例えもしっくりくる
  • Reactベストプラクティスの宝庫!「bulletproof-react」が勉強になりすぎる件

    Reactアプリケーションのアーキテクチャの一例として公開されているGitHubリポジトリ「bulletproof-react」が大変勉強になるので、私自身の見解を交えつつシェアします。 ※2022年11月追記 記事リリースから1年ほど経過して、新しく出てきた情報や考え方を盛り込んだ続編記事を書いていただいているので、こちらも併せて読んでいただければと想います(@t_keshiさんありがとうございます!)。 ディレクトリ構造が勉強になる まずはプロジェクトごとにバラつきがちなディレクトリ構造について。 ソースコードはsrc以下に入れる bulletproof-reactでは、Reactに関するソースコードはsrcディレクトリ以下に格納されています。逆に言えば、ルートディレクトリにcomponentsやutilsといったディレクトリはありません。 たとえばCreate Next Appで作成

    Reactベストプラクティスの宝庫!「bulletproof-react」が勉強になりすぎる件
    t1mvverr
    t1mvverr 2021/11/08
    ブクマ検索して使いそう
  • 2021年現在Vueを選択すべきでないと思う理由

    使ってわかる、Vueへの恨み、つらつらと(随時更新) コンポーネントのローカルスコープでコンポーネントを定義しようとするとJSXが必要 JSXが嫌でReactを使わないならSvelteがあり、SvelteはゼロオーバーヘッドでVueより速い React+JSXと違って、マークアップをJavaScriptの式として扱えないせいで、TypeScriptとの相性も悪い 後述するが、コンポーネントのプロパティの型をジェネリックにできないところなどは、これの例にあたる Vueの新しい機能が出て、新しい構文を必要とするたびにIDEのプラグインの対応が必要になる JSXも構文拡張だが、JS関数呼び出しのシンタックスシュガーでしかないので、関数と同じだけの表現力(汎用性)を持ち、ReactAPI拡張のためにいちいちJSXまで拡張する必要はない JSX無しだと、マークアップ内でアクセスしたいコンポーネント

    2021年現在Vueを選択すべきでないと思う理由
    t1mvverr
    t1mvverr 2021/09/23
    reactやsvelteよりも早々にシェア率が落ちてエコシステムも衰退しそうだから、今から使いたいとは思わない。
  • ⚓ T241180 RFC: Adopt a modern JavaScript framework for use with MediaWiki

    "Love" token, awarded by Prototyperspective."Pterodactyl" token, awarded by Ash_Crow."Like" token, awarded by Peb."Orange Medal" token, awarded by Pablo-WMDE."Like" token, awarded by eranroz."Party Time" token, awarded by Mvolz."Mountain of Wealth" token, awarded by WMDE-leszek."Party Time" token, awarded by Osnard."Party Time" token, awarded by Addshore."Love" token, awarded by Jakob_WMDE."Like"

    t1mvverr
    t1mvverr 2020/03/23
    Wikipediaのフロントのフレームワーク選定の話。Vue作者がReactとの違いを記述しているので参考になりそう。
  • フックに関するよくある質問 – React

    この記事は古くなっており、今後更新されません。新しい React語ドキュメントである ja.react.dev をご利用ください。 新しいドキュメントではフックを使って React が学べます。 フック (hook) は React 16.8 で追加された新機能です。state などの React の機能を、クラスを書かずに使えるようになります。 このページではフックに関するよくある質問にいくつかお答えします。 導入の指針 フックが使える React のバージョンはどれですか? クラスコンポーネントを全部書き換える必要があるのですか? クラスではできず、フックでできるようになることは何ですか? これまでの React の知識はどの程度使えますか? フック、クラスのいずれを使うべきですか、あるいはその両方でしょうか? フックはクラスのユースケースのすべてをカバーしていますか? フックは

    フックに関するよくある質問 – React
    t1mvverr
    t1mvverr 2020/01/08
    "Q:クラスコンポーネントを全部書き換える必要があるのですか? A:いいえ。我々はみなプロダクトを世に出し続ける必要があり、クラスを書き換えてる余裕はありません。” 公式が強気で言うと安心するわ。
  • 宣言的UIはReact Hooksで完成に至り、現代的設計論が必須の時代になる - Qiita

    この記事は、ある程度以上の規模のGUI開発において、React Hooks以後の宣言的UIにより、大規模開発に用いられる設計論に完全に対応できるようになり「ビジネスロジックの変更や追加」に対応するコストを低く保つこと(技術的負債の抑制)ができるようになったことを解説するものです。 技術的負債の抑制には、技術的負債の原因となりがちな「広範囲の密結合」と「適切な疎結合を保つ仕組みの欠如」が欠かせません。それをカバーするのが、大規模開発をクリーンに行える設計論(ここでは「現代的な設計論」とよぶもの)です。クリーンアーキテクチャなんかでGUIによく適用されるHumble Object Patternのようにプレゼンテーションとビューを分離する必然性が無くなるでしょう。 ポイントは ある程度以上の規模で開発するなら設計論をうまく使い設計しないと、技術的負債を抱え込む(ビジネスロジックの変更や追加に対

    宣言的UIはReact Hooksで完成に至り、現代的設計論が必須の時代になる - Qiita
    t1mvverr
    t1mvverr 2019/09/07
    テーブルやボタンなどの汎用コンポーネントを実装したらstorybookで管理し、flux系ライブラリと組み合わせてページをさくっと作る、みたいな流れになるのだろうか。
  • 副作用 (プログラム) - Wikipedia

    この記事は検証可能な参考文献や出典が全く示されていないか、不十分です。出典を追加して記事の信頼性向上にご協力ください。(このテンプレートの使い方) 出典検索?: "副作用" プログラム – ニュース · 書籍 · スカラー · CiNii · J-STAGE · NDL · dlib.jp · ジャパンサーチ · TWL(2016年3月) プログラミングにおいて、式の評価による作用には、主たる作用とそれ以外の副作用(side effect)とがある[1][2]。 式は、評価値を得ること(※関数では「引数を受け取り値を返す」と表現する)が主たる作用とされ、それ以外のコンピュータの論理的状態(ローカル環境以外の状態変数の値)を変化させる作用を副作用という[3][4][5]。 副作用の例としては、グローバル変数や静的ローカル変数の変更、ファイルの読み書きなどのI/O実行、などがある。 一方、高水

    t1mvverr
    t1mvverr 2019/08/30
    JavaScriptのReactだと、副作用が無い宣言型プログラミングで実装を前提にしてフレームワークとかが設計されていて、破壊的代入をするコードを書くと後々バグの原因になるからほとんど書かなくなった。
  • 1日一つ強くなる戦略としての UCDDD (Udemy Course Development Driven Development)

    Udemy React Redux Course 割引適用のリンク Udemy React + Redux コース 私は「1日一つ強くなる」ということをスローガンとして掲げ、活動しています。 1日一つ強くなれば、昨日の自分よりも今日の自分の方が強いので、結果今日が最強です。そしてこれが死ぬまで続けば、死ぬ瞬間が、自分の人生において最強な訳です。最強になってどうするんだ…という問題は置いておくとして…非常にいい考え方だと思います。 これは私の尊敬する梅原大吾さん (プロゲーマーで特に格闘ゲームのストリートファイターとして有名な方です) の提言する最強になるための理論で、梅原さんの新書のタイトルにもなっています。 さて、1日一つ強くなれば最強になれるのはわかったので、次にどうやって強くなるか、ということについて考えてみると、一般的に以下のような方法が有効だと言われています。 アウトプット 自分

    1日一つ強くなる戦略としての UCDDD (Udemy Course Development Driven Development)
    t1mvverr
    t1mvverr 2019/04/15
    ”React と jQuery の間にあるのは、仮想DOMやJSX等のReact の理解よりも、 Babel 等を使ってトランスコンパイルする必要がある「新しい JavaScript 環境」による開発だと思っていました”
  • React Kawaii - React用の可愛いコンポーネント

    Webコンポーネントの考え方を取り入れることで、Webサイトのデザインを再利用しやすくなります。実用的なコンポーネントもすでに出てきていたり、複雑な機能を可能にするコンポーネントを導入することでWebサイトを作りやすくなります。 そんな中、今回はちょっと変わり種のコンポーネントReact Kawaiiを紹介します。Reactで可愛いコンポーネントを実現します。 React Kawaiiの使い方 Backpackタグです。 表情はパラメータで変更できます。 koにすると目がバッテンに。 Browserタグ。 Catタグ。 CreditCardタグ。 Ghostタグ。 IceCreamタグ。 Mugタグ。 Planetタグ。 SpeechBubbleタグ。 アニメーションも実現できます。 React Kawaiiは実用性という意味では難しいですが、Slackのようなツールのドキュメントにありそ

    React Kawaii - React用の可愛いコンポーネント
  • Reactの次期機能のSuspenseが凄くって、非同期処理がどんどん簡単になってた! - Qiita

    React17の次期新機能のSuspenseが凄い! と思ったので少し学習していました! Suspense自体の説明は下の動画がわかりやすいかも。 13:15ぐらいからプログラムのDemo 29:30ぐらいからSuspenseとはなんぞや、という説明をしてくれています。 Githubにdemoもあったので、実際に動かしてみたい方はこちらも是非是非 つまりSuspenseって何? Suspenseっていう機能があるわけじゃないんです、すみません 概念というかなんといいますか 自分の意訳・解釈なので間違っていたら土下座しに行きます 外部APIからデータを取得・表示するような処理で使えるんですね。 読み込みを開始したらLoadingを出して、APIが戻ってきたらデータを表示してローディングを消して……っていう、reduxやsagaを使って今まで頑張ってきているものがあると思うんですね。 API

    Reactの次期機能のSuspenseが凄くって、非同期処理がどんどん簡単になってた! - Qiita
    t1mvverr
    t1mvverr 2019/01/15
    returnでPromiseを返す安直な方法はダメだったのだろうか。
  • React製 SPA における パフォーマンスチューニング - SSSSLIDE

    nodefest@2018.11.23 html5j@2018.11.25

    React製 SPA における パフォーマンスチューニング - SSSSLIDE
    t1mvverr
    t1mvverr 2018/11/24
    今作っているSPAサイトが、ReactReduxの知識不足によってできたクソコードと大量のコピペコンポーネントにより、メモリ8GB積んだPCでも重くなる代物になってしまったから、後々役立ちそう。
  • reactをプロジェクトで使ってみた感想 - Qiita

    書こうと思った気持ち react+reduxを使る機会があったので、その辺で感じた事を書き連ねます。この記事では主にreact使ってみての感想なので、reduxと絡めた話はまた別記事で。 react使おうかなー、どうしよっかなー、という人の参考になれば幸いです。 reactの深い技術についての話は他のみなさんが書いてくれていると思うので、ここが良かったとか、ここではまった、みたいな実体験話がメインです。 ベストプラクティスとは思っていませんが、とりあえずそういうやり方もあるんだなぁ、くらいな気持ちで読んでもらえれば。 使おうと思った理由 BackboneとjQueryでメンテされているUIを変えるチャンスが来たのが発端。現状だとviewにロジック書いてたりmodelにview寄りの処理が書いてあったりとだいぶ宇宙の法則が乱れていて辛かったので、UI変えるなら下回りの技術も変えよう、と思った

    reactをプロジェクトで使ってみた感想 - Qiita
    t1mvverr
    t1mvverr 2018/08/25
    再利用よりも、まとめれる共通処理をHighOrderComponentに書き、痩せたコンポーネントをラップする方が、良いってどこかで聞いた。
  • 1