React Fiber現状確認
F8でもReact Fiberについての発表もあったので、気になっている人も多いReact Fiberの現状について簡単に書きたいと思います。 Reactの完全な書き換えということで、使い方も変わってしまうと思っている人もいると思いますが、内部実装の書き換えであり、利用者から見える部分ではほとんど変更はありません。 もちろん、react-fiberというパッケージをインストールするというわけでもありません。 むしろ、v16の時点では現在の実装と互換性を保たれているので、v16がリリースされた時に、v15.5を使っていればほとんどそのままv16に更新できると思います。 そして、言われなければ内部実装が変わっていることに気づかないのではないかと思います。 とりあえずどうなるのか知りたい人向けのまとめ v16では、基本的にはv15の時と同じように動作します。逆に言うとパフォーマンスもそんなに変わ
趣味で作ったwebサービスのリポジトリをgithubに公開して2ヶ月くらい フロントエンドのソースが雑だったので、リファクタリング中にした対応を紹介 前記事：Go + react + ansibleでサービスを作ってOSSにしてみた http://qiita.com/wheatandcat/items/66d72445ad0c5df2a8be github 記載している内容は、下記のリポジトリに取り込み済みの内容です。 うまく動かなかったら、こちらから動きを見てもらえたらと思います。 ■dotstamp_client https://github.com/wheatandcat/dotstamp_client flow javascriptでも型が使えるようになるライブラリ。 ファイル単位で実装していけるから、稼働中のプロジェクトでも柔軟に導入していけるのが魅力。 導入的にはファイルの頭に
モダンフロントエンドで始めるつらくないReactディレクトリ構成 - RAKUS Developers Blog | ラクス エンジニアブログ
はじめに こんにちは、ラクスフロントエンド開発課の斉藤です。 記事タイトルはReact開発者なら知る人ぞ知るりあクト！ TypeScriptで始めるつらくないReact開発のパロディです。とてもわかりやすい入門書なのでReact初学者の方には学びの第一歩として自信を持ってオススメできます！ さて今回は、モダンなフロントエンド技術を採用したうえで、極力シンプルで開発体験を損なわないようなディレクトリ構成を考えてみたので共有したく記事にしました。現在実際に運用しているのですが、今のところ大きな問題も無くチームからの不満も上がっていません。しかし、個人的に微妙な部分もあるのでそちらの紹介も行いたいと思います。 今回、構成を考えるにあたって重視したポイントは以下の3点です。 新しく参入するメンバーでもすぐに理解できるシンプルな構成にしたい テストやリファクタしやすい構成にしたい できればルールが厳
【React/Vue.js】コンポーネント設計の（個人的）ベストプラクティス | Offers Tech Blog
概要 こんにちは、Offers を運営している株式会社 overflow の Software Engineer（主戦場はフロントエンド）の Kazuya です。今回は、React や Vue.js などの SPA フレームワークにおけるコンポーネント設計について紹介します。 昨今のフロントエンド開発では、コンポーネント指向での開発がスタンダート化しつつありますが、コンポーネント設計には厳格なルールが無く、どのように設計すればいいか悩む方も多いのではないでしょうか？（筆者は沼にはまりました） コンポーネントの単位はどの程度に分割すべきなのか、状態管理はどうすればいいのか、API 通信はどこですべきなのかなど、一言にコンポーネント設計と言っても考えるべき項目が多いです。チーム開発では、認識があっていないとコードが魔境になることもしばしばあると思います。（筆者の経験談より） そこで今回は、数々
伊藤直也氏が語る、モダンなWebテクノロジーに共通する傾向とは？（後編） Chef、Docker、MicroservicesからReact、FRPまで。QCon TOkyo 2015
伊藤直也氏が語る、モダンなWebテクノロジーに共通する傾向とは？（後編） Chef、Docker、MicroservicesからReact、FRPまで。QCon TOkyo 2015 最新のITと関連技術をエンジニアの視点で掘り下げるイベント「QCon Tokyo 2015 Conference」が4月21日に都内で開催されました。 そのセッションの1つとしてKAIZEN platform Inc.の伊藤直也氏が行ったのが、「モダンWebシステム開発」と題して、最近のWebアプリケーションに関する技術に共通する傾向を探った講演です。 （本記事は「伊藤直也氏が語る、モダンなWebテクノロジーに共通する傾向とは？（前編） Chef、Docker、MicroservicesからReact、FRPまで。QCon TOkyo 2015」の続きです） いわゆるAjaxが登場してから、動的にWebアプリ
React Native has come a long way since it was open-sourced in 2015. Fewer than two years later, it’s being used not only in Facebook and Facebook Ads Manager, but also in many other companies, from Fortune 500 companies to hot new startups. Developer velocity is a defining value of Instagram’s mobile engineering. In early 2016, we started exploring using React Native to allow product teams to ship
React と Vue.js におけるエスケープ機構と XSS について、簡単なハンズオンを交えて説明していきます。無料で読めますが、お気に召されたらご購入いただけると嬉しいです。
私が好むと好まざるとに関わらず、誰もが私のWebアプリをiOS9の搭載されたiPhone 6SやNexus 6Pで、超高速Wifiに接続して使っているわけではありません。 現実は甘くありません。3Gでの接続や、古いハードウェアも珍しくありません。Googleのレポートによれば、 Androidのアクティブユーザは14億人 だそうです。彼らの多くは間違いなく、最先端ではないハードウェアを使っていることでしょう。 Androidのパフォーマンスについての Jeff Atwood氏の最近の記事 などを読んだことがあるなら、モバイルWebには希望がないように感じるかもしれませんね。 その記事からいくつか注目すべき文を引用します。 端的に言えば、今日最も高速なAndroidデバイスとして知られているものでも、新しいiPhone 6Sよりも5倍遅く、2012年代のiPhone 5上のEmberに比べて
D3 フロントエンド技術勉強会 2016.1.22 - 1年間まじめにSPA開発やってきた経験について - その中で、ぶつかった課題と対策 - SPA開発の全体像 - Web/JS界隈の激しい変化の波に溺れないためのTips - AngularJS と SPA の設計について - TypeScript と ES6 - Gulp タスク
【Atomic Designに懐疑的なあなたへ】改めて考えたい React / Next.js のデザインパターン
フロントエンド開発は一般的に複雑性との戦いです。放ったらかしにしておくとますます複雑になり、変更するのが難しくなります。これまでにも、このような複雑さをどうにかして制御しようとして、Atomic Designをはじめとした様々な設計手法（デザインパターン）が考えられてきました。 しかし、React / Next.js を使ってチーム開発を行う際に、現状のデザインパターンでの運用では「どうもうまくいかないな」と思う場面に多々遭遇しました。そのような経験を踏まえて、「コンポーネントをどのように設計するか」「どのようにディレクトリを分けるか」を徹底的に考え、新しいデザインパターン「Tree Design」にまとめました。 Tree Design はまだまだ仮説段階です。今後弊社チームで運用していく中でブラッシュアップする予定です。しかし、他のフロントエンド開発チームがデザインパターンを再考する際
こんにちは、 フロントエンドエンジニアの @nabeliwo です。 弊社には SmartHR というプロダクトの他に SmartHR の従業員 DB を利用して開発・提供される SmartHR Plus アプリ (以下、 Plus アプリ)というものがあります。 SmartHR CTOが語る中長期戦略。徹底的なアプリ開発とAPI対応で「プラットフォーム化」促進へ - SmartHR ガイド 既に多くの Plus アプリがリリースされており、そのほとんどのプロダクトのフロントエンドは React x Redux という技術スタックで構成されています。 オンライン雇用契約 カスタム社員名簿 ラクラク人事レポート etc Plus アプリは毎回新規でプロジェクトを立ち上げて開発していくことになります。 とはいえブランディングの観点から見ると、基本的なトンマナや UI パーツは SmartHR
Atomic Design でいう Atoms に相当する、汎用コンポーネントについての小話です。次の様に Props 型定義を用意し、解説している記事をよく見かけます。<input />タグを使わずコンポーネント化している理由は style を施すためかと思いますが、このコンポーネントが受け取れる Props は限定的で、メンテナンスコストが高いためお勧めできません。 type Props = { value: string; onChange?: React.ChangeEventHandler<HTMLInputElement> onBlur?: React.FocusEventHandler<HTMLInputElement> } export const Input = ({ value, onChange, onBlur }: Props) => ( <input value=
HTMXのCEOに就任したので[1]、記念に記事を書きたいと思います。 HTMXサイトのエッセイ[2]はどれも珠玉の出来で評判ですが、それらを読んでもわかるとおり、HTMXは「Webはこうあるべき」という主義主張のあるライブラリです。その主義主張のかなり初歩的な前提を書きたいと思います。 Reactはなぜだめか、という話です。 21日追記 ちょっと誤解が生じているために書き足しますが、Reactのパフォーマンス(及びそれ以外のこと)への批判というのはHTMX固有のものではありません。SvelteやSolidJSといった新興JSフレームワークやRails等の非JS WEBフレームワーク、SSG開発者たち、それからReact開発者たち自身といった多様なWEB開発者たちに共有されている見方です。この記事の最後の方でReact批判記事のリンク集を引用していますが、そういった多様なバックボーンの人た
React使い必見！ Immutable.jsでReactはもっと良くなる | Wantedly Engineer Blog
Reactを導入して半年近くが経ちましたWantedlyでは、今年の初めからReact(+Redux)の導入に取り組み始めたので、気付けば半年近く立っていることになります。今自分がこの記事を書いているエディタから、Wantedly Adminのチケット画面まで、ある程度大きなアプリケーションを開発してきました。 そこで今回は、チームで継続的に開発していく過程で遭遇した問題と、それを解決するために導入したImmutable.jsについて紹介します。 増え続けるCallbackとAction、肥大化するStoreReactとセットで語られることが多いFluxアーキテクチャ。ここでは詳しい説明は省略しますが、とてもシンプルな考え方なので、チュートリアルなどで簡単に学ぶことができます。しかし、実際にチームで開発していくと、たしかに動いてはいるけど、綺麗とは言い難いコードが増えてしまいました。 Ac
[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기 https://github.com/ncsoft/Unreal.js https://github.com/ncsoft/React-UMG Demo Link - https://youtu.be/3F0TGGqedkQ https://youtu.be/kawyH68OB_g https://youtu.be/EG99YW6P3rg
Reactにおける状態管理の動向を追ってみた
こんにちは、@nerusanです。 皆さんは、状態管理ツールなどは使っておられますでしょうか。 例えば、有名なところでは、Redux, Recoilなどがあります。 今回は、Reactにおける状態管理についての動向を知ることで、なぜ、Reduxが使われるようになったのか？何をReduxなどのグローバルな状態管理ライブラリで扱えばいいのか？現状どうなっているのか？を調べたので、記事にしたいと思います！ 自身の解釈なので、もしかしたら、誤ったことを言っている可能性もあるので、その際はご指摘いただければと思います m(- -)m SPAの流行り SPAとはSingle Page Applicationの略であり、新しいページに移動する際、サーバからページを再読み込みするのではなく、JavaScriptを使って、クライアント側のブラウザで動的にページを書き換えるアプリケーションを指します。ページご
乗るしかない！Reactのビッグウェーブに！─isomorphic tokyo meetupに参加してきた 白石 俊平（HTML5 Experts.jp編集長） おはようございます。編集長の白石です。 昨日（2015年4月30日）、isomorphic tokyo meetupに参加してきました。 というのも実は近々、HTML5 Experts.jpでは「Webアプリケーション・アーキテクチャ」に関する特集を行う予定なのですが、そこでキーワードとして挙げられていたのがisomorphic。 サーバサイドとクライアントサイドでコードの共有を促進するのが主な目的の一つ、というところまでは理解できたのですが、実際のところ、アーキテクチャはどう変わるのか？ それを探りたいと思っていたところ、ちょうどよくイベントの開催がアナウンスされていたので、急遽取材させていただきました。 取材を快く受け入れてく
SvelteはなぜReactよりも優れているのか
Svelte は比較的新しいフレームワークです。主に、仮想 DOM の課題が浮き彫りになってきた後で、それを解消しようというモチベーションで開発されています。なぜ Svelte が React や Vue などのように仮想 DOM を採用していにないのかについて、この記事でまとめてみようと思います。 読み書きしやすい：リアクティブなコンポーネントを実装するための"高級言語" 高速：仮想 DOM を利用しない 1. 読み書きしやすい：リアクティブなコンポーネントを実装するための"高級言語[1]" Svelte はリアクティブなコンポーネントを実装するためのコードを記述する上で一般的な UI フレームワークよりも人間が扱いやすい設計になっています。具体的に言うと、記述量が少なく、理解しやすい構文を実現しています。 例えば、React で以下のようなコンポーネントがあった場合を想定します。 im
この記事は Recruit Engineers Advent Calendar 2019 の 23日目の記事です。 TypeScript のプロジェクトで React コンポーネントを書いていると、コンパイラに怒られることがたびたびあります。ネット上にあるサンプルコンポーネントが JavaScript で書かれていると、プロジェクトにもってきたときにコンパイルできないということはよくあるんじゃないでしょうか。any でコンパイラを黙らせることもできますが、せっかく TypeScript を使っているので、安全に解決したいよねってことでこのような記事を書きました。 型定義は @types/react@16.9.17 にしたがっています。目次をみて、この程度のことはもう知っているよという方は react-typescript-cheatsheet をみてください。React + TypeScr
この記事はReact Native Advent Calendar 2017の5日目の記事です。 こんにちは。モバイルエンジニアの@hotchemiです。 今回はQuipperにおけるReact Native活用事例に関して紹介したいと思います。 目次 導入の背景/効能 開発におけるメリット/デメリット リリースサイクル 技術スタック おわりに 導入の背景/効能 Quipperが開発しているスタディサプリでは合格特訓プランという現役大学生コーチによる学習伴走サービスを提供しており、コーチとユーザーのコミュニケーションをより円滑にする為にメッセージ機能をベースとした業務補助iOSアプリの開発を実施する事になりました。 最初のバージョンこそSwiftで開発を進めていたものの以下の組織的・技術的な課題に直面した為、React Nativeを用いた開発に方針転換し現在では運用が軌道に乗っています。
When does react component re-render? What can cause the re-render, and how to prevent unnecessary renders? Here is a quick cheat sheet you can refer to whenever you find yourself asking these questions. This article serves as a table of contents for a Visual Guide to React Rendering series. Every section of the cheat sheet links to the correspondent chapter of the guide that explores a topic in de
なぜグローバルな Store を作るのか React アプリの設計論では、複数のコンポーネントで利用する値をどのように管理するか、というテーマがよく話題になる。 前提として、コンポーネントは小さく分割すべき、という考え方がまずある。 これは React に特有のものではなく、プログラミングの一般論として、ひとつひとつの関数は小さくするのがベストプラクティスだとされる。それには様々な理由があるが、単一責任の原則、疎結合、テスタブル、などがよく理由として挙げられる。 React のコンポーネントも同じで、肥大化しないように管理することが、保守しやすいアプリへの道だ。いかに適切な粒度でコンポーネントを分割できるかが、React を使いこなす上で重要となる。 だがコンポーネントを分割していくと、複数のコンポーネントで共通の値を扱う、という状況が発生しうる。 それにどのように対処するか、というのが、
よく来たな。おれは毎日すごい量のコードを書いているが、誰にも読ませる気はない。しかし今回はReact hooks という真の男のためのAPIを発見したのでいてもたってもいられずQIITAに記事を書くことにした。 （この記事の文体は、逆噴射聡一郎先生のパロディです。） お前は毎日VUEだとかREACTだとかPWAだとかBBBFFだとかそういう流行に常に振り回されながらフロントエンドというメキシコを生きている。フロントエンドで生まれてくる技術のほとんどは、マッチの火より儚くすぐ消えてなくなるものだ。しかし、流行に乗り遅れるのを恐れているおまえはそういった技術にとびつき、チュートリアルをよみ、すべてを理解したと息巻いてプロダクトに導入し・・・やがてそれの流行がおわり・・・メンテをするのが辛くなり・・・しぬ。フロントエンド界隈ではへなちょこな技術がもてはやされ、しばらく経ってそれが全く使い物になら
React.jsではなくRiot.jsを採用した話、運用中サービス『GAMY』でリニューアル - Qiita
今回、ゲーム攻略コミュニティ『GAMY』というサービスでRiot.jsを採用しました。 知る限りでRiot.jsで実装されたサイトの中でも最大規模のサービスだと思います。 これまではjQueryとjQueryプラグインを使っていましたが、デザインのリニューアルを機に、全部書き換えることにしました。 ドキュメントも兼ねてアウトプットしていきます。 Riot.jsとは Riot.jsは今流行りのReact.jsに似た仕組みを持っている、それで非常に軽量なJavaScriptライブラリーです。 最近GitHubのリポジトリが/muut/riotjsから/riot/riotにお引っ越しして、これからがより注目なライブラリーです。 詳しくはこちら↓ Riot公式 Riot.js 2.0 情報まとめ GitHub 捨てることを前提としたライブラリー選定 最初は今ブームの２大フレームワークとなっている『
はじめに 新年早々に面白そうな記事を見つけました。ReactでのAPI呼出しを最適化するために「部分的にサーバサイドで実行するコンポーネントを作る」というもののようです。 あるいは去年の記事ですが気になってたものとしてBlitz.jsでReactベースのFWであるnext.jsに永続化層を持たせてRailsのようなFWにしようというアプローチもあります。 どちらの記事も書かれてる内容自体は分かる気がするものの 「それをフロントエンドでやる意味あるの？」 というのが拭えずイマイチ腑に落ちなかったんですが、単純に 「私と最前線でやられてる方々で期待してるものがたぶん違う」 という気がしてきたので、その辺を整理のために書いてみます。 注意書き Vue.js/Nuxt.jsは少し触ったことがありますが、React Server ComponentsやBlitz.jsを触ったことは無いです 「なんで
改めて覗いてみよう 1) CheckboxWithLabel changes the text after click: AssertionError: # /path/to/test/components/CheckboxWithLabel_test.jsx:21 assert(label.getDOMNode().textContent === 'On') | | | | | | "Off" false | HTMLLabelElement{htmlFor:"",form:null,accessKey:"",control:HTMLInputElement{src:"",valueAsNumber:NaN,incremental:false,defaultChecked:false,form:null,multiple:false,list:null,size:20,checked:f
React Conf 2017 現地レポート (1日目) - Akatsuki Hackers Lab | 株式会社アカツキ（Akatsuki Inc.)
ライブエクスペリエンス事業部 エンジニアの高松(@shimpeiws)です。 2017/3/13 ~ 14の期間で開催中のReact Conf 2017に参加するためにサンノゼに来ています。 React Conf 2017 つい数時間前に終わったばかりの1日目のレポートを現地からお送りします! 会場の様子 1日目の感想 Keynote (Tom Occhino, Jing Chen, Sebastian Markbage) 概要 Tom Occhino Jing Chen Sebastian Markbage A Cartoon Intro to Fiber (Lin Clark) 概要 メモ Next.js: Universal React Made Easy and Simple (Guillermo Rauch) 概要 メモ React + ES.next = ♥ (Ben Ileg
JavaScriptでClean Architectureを導入してみた - Vue.js・Reactのサンプルつき - Qiita
事の発端 始まりはこちらのツイートから。 Usecasesレイヤーを充実させていったらVuex Actionsほとんど使わなくなるな笑 — Andy (@andoshin11) 2018年6月15日 それはどういうことだよ・・・ フロントでどう使うんだ・・・？ と疑問に思い、自分なりに検証・実装してみたいと思ったのが事の発端です。 Clean Architectureとは？ まず根本の理解がほぼなかったので調べることにしました。 こことか https://qiita.com/koutalou/items/07a4f9cf51a2d13e4cdc こことか https://blog.tai2.net/the_clean_architecture.html こことか https://qiita.com/Tueno@github/items/705360b357c2a00c9532 こことか h
React Native+Expoではじめるスマホアプリ開発 ~JavaScriptによるアプリ構築の実際~ 作者: 松澤太郎出版社/メーカー: マイナビ出版発売日: 2018/08/29メディア: 単行本（ソフトカバー）この商品を含むブログを見る ここ2週間ちょっとReact NativeでiOSアプリ書いてました。 サーバサイドをメインでやってきた自分にとって面白い技術で、今後も趣味で使ってみたいなと思えているのでTipsや所感を残しておきます。 目次 選定理由 Tips エラーハンドリング・状態管理 入力欄をキーボードの出現に合わせて動かすアニメーション 今回使ったライブラリ react-native-focus-scroll react-navigation react-native-vector-icons react-native-camera react-native-vid
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>
Spring BootによるAPIバックエンド構築実践ガイド 第2版 何千人もの開発者が、InfoQのミニブック「Practical Guide to Building an API Back End with Spring Boot」から、Spring Bootを使ったREST API構築の基礎を学んだ。この本では、出版時に新しくリリースされたバージョンである Spring Boot 2 を使用している。しかし、Spring Boot3が最近リリースされ、重要な変...
DMM meetupは、多種多様な生命が彩るジャングルのように毎回個性豊かなさまざまなテーマを題材に、共に学び、遊び、楽しめるイベントです。今回はオンラインサロン事業に焦点をあて、事業部メンバーが課題と取り組みについて話しました。大門弘明氏からは、React NativeからSwiftへの移行について発表がありました。 React Nativeの負債化でアプリのSwift化が決定 大門弘明氏：それでは「React Nativeで書かれたアプリをSwiftで書き直しています」の発表を始めます。 まずは自己紹介をします。名前は大門と申します。2014年に新卒で合同会社DMM.comに入社して、iOSエンジニアとしてオンラインサロン事業部でお仕事をしています。 本日お話しすることですが、つらい気持ちの話と、アプリ設計の紹介を少ししようと思っています。僕にとってReact Nativeはつらい。
export const FirstVideoConfig: VideoConfig = { sections: [ { title: 'イントロダクション', bgmSrc: '/audio/bgm/honobono-wartz.wav', backgroundVideo: '/video/cyber-bg.mp4', afterMovie: '/video/yukkuri-opening.mp4', talks: [ { text: 'ねえねえ魔理沙', speaker: 'reimu', id: '59f8c2cd81334be5ab5cdc7899fad286', audioDurationFrames: 25, }, { text: 'なんだ霊夢', speaker: 'marisa', id: '0ba332a465c3404a870de15cad021407', audioD
この記事はReact公式の内容を翻訳・紹介するものではありません。筆者の解釈や理解を伝えるものであり、Reactの公式見解と一致しているとは限りません。あらかじめご了承ください。 皆さんこんにちは。最近Next.js 13.4がリリースされ、App Routerがstable扱いになりました。App RouterはReact Server Component (RSC) をふんだんに用いて構築されています。 React本体でServer Componentがずっとalpha版なのにNext.jsでbetaとかstableとか言ってるのは何で？ という問題も、React Canaryのアナウンスにより無事に解消されました。 React Canaryってなに？ 先日React公式ブログでアナウンスされた、新しいリリースチャネルです。 筆者の理解による概要をお伝えすると、Canary版のReac
そうです。わたしがReactをシンプルにするSWRです。
この記事について SWR について色々と学んだので、その知見をここで共有したいと思います 💪 ※ 基本的に以下の公式サイトの情報を参考にしています 📖 そのため、この記事で出すサンプルコードなどは主に上記の公式サイトから引用させてもらっています。予めご了承ください 🙏 SWR とは何か？ SWR は、Next.js を作っているVercel 社が開発しているデータフェッチのための React Hooks ライブラリです。"SWR"と言う名前は、 stale-while-revalidate の頭文字をとって名付けられています。そのため、SWR はstale-while-revalidateに基づいた処理と設計になっています。 stale-while-revalidateについて解説したい所ですが、解説するとすごく長くなってしまうため、ここでは「 キャッシュをなるべく最新に保つ機能 」
まずはじめ React に焦点を置き、昨今のフロントエンドでどのようなフレームワークが選択肢にあげられるのかについて紹介します。続いて、技術選定を行う際に、どのようなことを考えるべきかについて話します。最後にこれまで話した点を踏まえて、私が実際に技術選定を行った際にどのような選択をしたのか実践的な内容について触れたいと思います。
1年以上にわたる初めての技術書の商業執筆活動を終えての感想と今後挑戦したいという方へ -TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発 -｜たまにゃん📘 Next.js実践本7/25発売
1年以上にわたる初めての技術書の商業執筆活動を終えての感想と今後挑戦したいという方へ -TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発 - 2022年7月25日より「TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発」が技術評論社より発売されました。3人の著者（@tejitak, @Kourin1996, @tamanyan55）、編集者（@nodawep）、レビュワーの方々が1年以上にわたり執筆に携わった本で紆余曲折しながらもゴールした技術書となっています。本を手にとっていただいた皆様のおかげで非常に好調な滑り出しとなり、早くも増刷が決定となりました。Amazonでの評価もよくソフトウェア開発・言語のカテゴリーで1位を取ることができました。 私自身初めての商業執筆という事で勝手が分からないながらも最後までやり遂げ
Vue.jsやReactなど、JavaScriptライブラリのコードスニペットを利用できるVS Codeの拡張機能 -Snipsnap
サポートしているJavaScriptライブラリの一覧（上記以外にもたくさんあります） Snipsnapは現在のプロジェクトで使用している言語やパッケージに基づいて、ライブラリで使用可能なスニペットをナビゲートし、必要なスニペットを選択します。 Snipsnapのインストール Snipsnapのインストールは、VS Code Marketplaceから。 VS Codeで開いたら、「Install」をクリック Snipsnapの使い方 Snipsnapは、手動でアクティブ化する必要はありません。ワークスペースフォルダにpackage.jsonファイルが含まれ、すぐに使用できます。トリガーが必要な場合は、コマンドパレットのReload Windowを使用します。 設定 利用可能な設定オプションは、スニペットのリクエストから特定のライブラリを除外することだけです。Snipsnapはロックファイル
図で分かるReact18のしくみ
これは何? この記事はReact18がどのように動いているのかをまとめた記事です。なるべくコードの記載はせず、図を使用して読みやすさを重視しています。また、これからReactの内部のコードを読む予定の方のために、各セクションの終わりにアコーディオン形式でGitHubのリンクを貼っています。 ※ この記事はnote株式会社 Advent Calendar 2022 の17日目の記事です。 対象読者 Reactの内部コードを読む気は無いが、裏で何をしているのか把握しておきたい方 これからReactの内部コードを読もうと思っている方 暇な方 Fiberについて まず最初に、Reactのドキュメントを漁っていると度々出現する「Fiber」についてお伝えします。 そもそもFiberとは何か 一部例外はありますが、1個のFiberは1個のコンポーネント（<MyComponent>や<div>など）管理
Reactコンポーネントをnpmパッケージとして開発する - Hatena Developer Blog
こんにちは！ブログチームの id:amagitakayosi です。 今回は、業務で書いた小さなReactコンポーネントをnpmパッケージとして分離した話をします。 今回公開するパッケージ 実装方針 なぜnpmパッケージにするのか 他のコンポーネントの影響で壊れることを防げる アドホックな修正の積み重ねで複雑になることを防げる 本体プロジェクトのコードを削減できる デメリット Babelなパッケージのディレクトリ構成 実装 npmの注意点 reactはpeerDependenciesに入れる npm link を用いてローカル開発する場合、npmはpeerDependenciesを解決できない browserify-shimを利用する場合 npm publish 次回予告 追記 今回公開するパッケージ www.npmjs.com 今回は「無限スクロール」のためのReactコンポーネントを作
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
今、Reactでリポジトリ公開するなら、これくらいは対応しておきたい - Qiita
React Native at Instagram
React と Vue に関する XSS アンチパターン
モバイル上のJSフレームワークの実行可能性 – ReactとRedux | POSTD
Flux react現状確認会
プロダクト間共通の React コンポーネントライブラリを運用する話 - SmartHR Tech Blog
React.ComponentProps 型を積極的に使おう
Reactは悪い意味でも現在のjQueryだし、それを受け止めないと前に進めないということ
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
乗るしかない！Reactのビッグウェーブに！─isomorphic tokyo meetupに参加してきた
TypeScript で書く React コンポーネントを基礎から理解する - Qiita
QuipperにおけるReact Native活用事例 - スタディサプリ Product Team Blog
A Visual Guide to React Rendering - Cheat Sheet
React の状態管理についての論点整理 - 30歳からのプログラミング
おまえはReact hooksを知っているか - Qiita
React Server Componentsに感じたフロントエンドの消失
「React / Flux を実案件で使ってみた」その後
2週間半のReact Nativeアプリ開発を振り返る - c-bata web
小さいReactアプリケーションのためのライブラリ書いた - Qiita
TwitterによるReactベースのモバイルWebスタックはネイティブのパフォーマンスに匹敵する
僕にとってReact Nativeは“つらい” DMMが負債脱却のために取り組んだSwift化
React で作るゆっくり解説 feat. Remotion
一言で理解するReact Server Components
React フレームワークの 動向と選定基準