「react」カテゴリーアーカイブ

すべての新米フロントエンドに読んでほしい50の資料 – Qiita

すべての新米フロントエンドに読んでほしい50の資料 - Qiita

すべての新米フロントエンドに読んでほしい50の資料 - Qiita

はじめに さいきんのWebはSPA技術を中心としたフロントエンドが賑わっていますね 従来サーバーサイドを扱っていた人もフロントを触る機会が増えていたり、これからプログラミングを学んでいく人も、フロントエンド領域に興味を持っているのではと思います。 そこで、フロントエンドの経験が浅い方や初学者向けに、おすす...

はてなブックマーク - すべての新米フロントエンドに読んでほしい50の資料 - Qiita はてなブックマークに追加

JavaScript: フレームワーク React/Vue/Angularについて – DEV Community 👩‍💻👨‍💻

JavaScript: フレームワーク React/Vue/Angularについて - DEV Community 👩‍💻👨‍💻

JavaScript: フレームワーク React/Vue/Angularについて - DEV Community 👩‍💻👨‍💻

フロントエンドの開発に用いられる人気のフレームワーク(ライブラリ)に、ReactとVue.jsおよびAngularがあります。これらフレームワークのフロントエンド開発における役割と、3つの違いについて簡単にご紹介します。 データバインディングとコンポーネント化 フレームワークReactとVue.jsおよびAngularは、いずれもHTMLの...

はてなブックマーク - JavaScript: フレームワーク React/Vue/Angularについて - DEV Community 👩‍💻👨‍💻 はてなブックマークに追加

React Hooks + Redux Hooks + TypeScript で SPA を構築する – 30歳からのプログラミング

React Hooks + Redux Hooks + TypeScript で SPA を構築する - 30歳からのプログラミング

React Hooks + Redux Hooks + TypeScript で SPA を構築する - 30歳からのプログラミング

タイトルに書いた組み合わせで SPA を作るときにどのような設計にするのか、現時点での考えを記録しておく。 チュートリアルの次の一歩というか、現実的なアプリを構築する際の基本となる考え方。 状態管理とどう向き合うかが、主要なテーマになっている。 サンプルアプリ 具体的なコードがないと話を進められないので、...

はてなブックマーク - React Hooks + Redux Hooks + TypeScript で SPA を構築する - 30歳からのプログラミング はてなブックマークに追加

Web App Checklist 〜高品質のWebアプリケーションをつくるために〜 / Web App Checklist 2019 at Inside Frontend – Speaker Deck

Web App Checklist 〜高品質のWebアプリケーションをつくるために〜 / Web App Checklist 2019 at Inside Frontend - Speaker Deck

Web App Checklist 〜高品質のWebアプリケーションをつくるために〜 / Web App Checklist 2019 at Inside Frontend - Speaker Deck

Web App Checklist 〜高品質のWebアプリケーションをつくるために〜 / Web App Checklist 2019 at Inside Frontend #insideFE slide with @tokimariri. Web App Checklist😉: 💡Rendering patterns 💡CDN 💡Perf Budget 💡a11y 💡PWA 💡WASM in Web Worker 💡Monitoring tools 💡DX (including LGTM!) and so on! 🙌

はてなブックマーク - Web App Checklist 〜高品質のWebアプリケーションをつくるために〜 / Web App Checklist 2019 at Inside Frontend - Speaker Deck はてなブックマークに追加

Web App Checklist 〜高品質のWebアプリケーションをつくるために〜 / Web App Checklist 2019 at Inside Frontend – Speaker Deck

Web App Checklist 〜高品質のWebアプリケーションをつくるために〜 / Web App Checklist 2019 at Inside Frontend - Speaker Deck

Web App Checklist 〜高品質のWebアプリケーションをつくるために〜 / Web App Checklist 2019 at Inside Frontend - Speaker Deck

Web App Checklist 〜高品質のWebアプリケーションをつくるために〜 / Web App Checklist 2019 at Inside Frontend #insideFE slide with @tokimariri. Web App Checklist😉: 💡Rendering patterns 💡CDN 💡Perf Budget 💡a11y 💡PWA 💡WASM in Web Worker 💡Monitoring tools 💡DX (including LGTM!) and so on! 🙌

はてなブックマーク - Web App Checklist 〜高品質のWebアプリケーションをつくるために〜 / Web App Checklist 2019 at Inside Frontend - Speaker Deck はてなブックマークに追加

Web App Checklist 〜高品質のWebアプリケーションをつくるために〜 / Web App Checklist 2019 at Inside Frontend – Speaker Deck

Web App Checklist 〜高品質のWebアプリケーションをつくるために〜 / Web App Checklist 2019 at Inside Frontend - Speaker Deck

Web App Checklist 〜高品質のWebアプリケーションをつくるために〜 / Web App Checklist 2019 at Inside Frontend - Speaker Deck

Web App Checklist 〜高品質のWebアプリケーションをつくるために〜 / Web App Checklist 2019 at Inside Frontend #insideFE slide with @tokimariri. Web App Checklist😉: 💡Rendering patterns 💡CDN 💡Perf Budget 💡a11y 💡PWA 💡WASM in Web Worker 💡Monitoring tools 💡DX (including LGTM!) and so on! 🙌

はてなブックマーク - Web App Checklist 〜高品質のWebアプリケーションをつくるために〜 / Web App Checklist 2019 at Inside Frontend - Speaker Deck はてなブックマークに追加

ReactとVueを改善したSvelteというライブラリーについて – Qiita

ReactとVueを改善したSvelteというライブラリーについて - Qiita

ReactとVueを改善したSvelteというライブラリーについて - Qiita

海外のフロントエンド界隈で話題になっているSvelte 最近海外のフロントエンド界隈でSvelteが少し話題になっています。 この記事では、なんでSvelteが話題になってるのか、そしてReactやVueの代わりに、Svelteを使うメリットについて私が感じたことを共有していけたらと思います。 My talk from @YGLF_IL, 'Rethinking R...

はてなブックマーク - ReactとVueを改善したSvelteというライブラリーについて - Qiita はてなブックマークに追加

ReactとVueを改善したSvelteというライブラリーについて – Qiita

ReactとVueを改善したSvelteというライブラリーについて - Qiita

ReactとVueを改善したSvelteというライブラリーについて - Qiita

海外のフロントエンド界隈で話題になっているSvelte 最近海外のフロントエンド界隈でSvelteが少し話題になっています。 この記事では、なんでSvelteが話題になってるのか、そしてReactやVueの代わりに、Svelteを使うメリットについて私が感じたことを共有していけたらと思います。 My talk from @YGLF_IL, 'Rethinking R...

はてなブックマーク - ReactとVueを改善したSvelteというライブラリーについて - Qiita はてなブックマークに追加

ReactとVueを改善したSvelteというライブラリーについて – Qiita

ReactとVueを改善したSvelteというライブラリーについて - Qiita

ReactとVueを改善したSvelteというライブラリーについて - Qiita

海外のフロントエンド界隈で話題になっているSvelte 最近海外のフロントエンド界隈でSvelteが少し話題になっています。 この記事では、なんでSvelteが話題になってるのか、そしてReactやVueの代わりに、Svelteを使うメリットについて私が感じたことを共有していけたらと思います。 My talk from @YGLF_IL, 'Rethinking R...

はてなブックマーク - ReactとVueを改善したSvelteというライブラリーについて - Qiita はてなブックマークに追加

マイクロソフトが「React Native for Windows」を公開 | TechCrunch Japan

マイクロソフトが「React Native for Windows」を公開 | TechCrunch Japan

マイクロソフトが「React Native for Windows」を公開 | TechCrunch Japan

米国時間5月6日、Microsoft(マイクロソフト)は、React NativeのデベロッパーがWindowsをターゲットにするための新しいオープンソースプロジェクトを発表した。「React Native for Windows」と自然に名付けられたそのプロジェクトは、MITライセンスの下でReact Nativeを「性能を重視して」実装することを目指す。 Faceb...

はてなブックマーク - マイクロソフトが「React Native for Windows」を公開 | TechCrunch Japan はてなブックマークに追加

「ネイティブアプリ開発者は絶滅危惧種なのか?」への感想文 – ナカザンドットネット

「ネイティブアプリ開発者は絶滅危惧種なのか?」への感想文 - ナカザンドットネット

「ネイティブアプリ開発者は絶滅危惧種なのか?」への感想文 - ナカザンドットネット

ポジション MSがRNめっちゃ使ってるという話について Brownfield事例は実質的にネイティブの事例 Skypeの事例ならどうなのか ネイティブアプリ開発者の仕事は減るのか まとめ jp.techcrunch.com こちらの記事への雑な感想です。感想は私の主観であり、ポジショントークであり、所属する組織の意見とは無関係であることを...

はてなブックマーク - 「ネイティブアプリ開発者は絶滅危惧種なのか?」への感想文 - ナカザンドットネット はてなブックマークに追加

React Static 公式ドキュメント和訳 「基礎概念」編 – Qiita

React Static 公式ドキュメント和訳 「基礎概念」編 - Qiita

React Static 公式ドキュメント和訳 「基礎概念」編 - Qiita

React Static とは Reactベースの静的サイトジェネレータです。 つまり、ブログのようなCMSベースのサイトが React+αの知識で! DBなしに! サーバーの(大した)設定もせず! 超高速表示に! 作れる優れもの。 その中でもReact Staticは、Mediumで3,000clapを叩き出した記事 「2019年のReactジェネレータ」でもGatsby...

はてなブックマーク - React Static 公式ドキュメント和訳 「基礎概念」編 - Qiita はてなブックマークに追加

2019年版Vue.jsを使ってる人には必ず知っていてほしいVue.jsの武器とドキュメントに書かれていないコンポーネントやメンテナンスの際に役立つTips – Qiita

2019年版Vue.jsを使ってる人には必ず知っていてほしいVue.jsの武器とドキュメントに書かれていないコンポーネントやメンテナンスの際に役立つTips - Qiita

2019年版Vue.jsを使ってる人には必ず知っていてほしいVue.jsの武器とドキュメントに書かれていないコンポーネントやメンテナンスの際に役立つTips - Qiita

2019年版Vue.jsを使ってる人には必ず知っていてほしいVue.jsの武器とドキュメントに書かれていないコンポーネントやメンテナンスの際に役立つTips はじめに 私はVue.js with Vuexを使った業務で1画面30APIを叩く必要のある画面から、たったの数APIしか叩かないけれど、代わりにUIがとても機能的で複雑な画面まで設計し、...

はてなブックマーク - 2019年版Vue.jsを使ってる人には必ず知っていてほしいVue.jsの武器とドキュメントに書かれていないコンポーネントやメンテナンスの際に役立つTips - Qiita はてなブックマークに追加

SPA フルリニューアル計画における技術選定や設計思想(2019年2月版) – 30歳からのプログラミング

SPA フルリニューアル計画における技術選定や設計思想(2019年2月版) - 30歳からのプログラミング

SPA フルリニューアル計画における技術選定や設計思想(2019年2月版) - 30歳からのプログラミング

SPA のフルリニューアルを技術選定や設計からやることになった。 前回の記事も、そのために検討や調査を行っている際に生まれた副産物をまとめたものだ。 目指すべきは変更しやすいシステムであり、そしてそれは、堅牢性を実現することで達成されるはずだという結論に至った。 numb86-tech.hatenablog.com 今回の記事で...

はてなブックマーク - SPA フルリニューアル計画における技術選定や設計思想(2019年2月版) - 30歳からのプログラミング はてなブックマークに追加

正真正銘のReactだけの不純物なしでReact入門

正真正銘のReactだけの不純物なしでReact入門

正真正銘のReactだけの不純物なしでReact入門

Reactのチュートリアル、たくさんありますよね。どれも質が高く、どこから手をつければいいかわからなくなっちゃいます。 ですがやはり巷のチュートリアルには面倒な問題もあります。今回は面倒ごとを全部すっ飛ばしてReactでのウェブアプリ作りに入門してみましょう。 Reactを始めるには、まずあれとこれとそれとどれと...

はてなブックマーク - 正真正銘のReactだけの不純物なしでReact入門 はてなブックマークに追加

React 副作用分割パターン – mizdra

React 副作用分割パターン - mizdra

React 副作用分割パターン - mizdra

#react #React_Hooks React Hooks自体の解説記事はいくつかあるけど, Hooksの登場によってReactがどう変わったのかについて書かれている記事が無かったので書いた 継承, Mixin, HOC, render props, Hooksの登場によって, Reactの副作用分割パターンがどう変遷していったのか分かるようにすることがこの記事の目的 Counte...

はてなブックマーク - React 副作用分割パターン - mizdra はてなブックマークに追加

実践: React Hooks – mizchi’s blog

実践: React Hooks - mizchi's blog

実践: React Hooks - mizchi's blog

hooks が発表されてから趣味でも現場でもずっと hooks を使っています。おかげでだいぶこなれてきて、だいたいなんのライフサイクルでも表現できるようになってきました。 最初は単に useState が state を、 useEffect が componentDidMount/componentDidUpdate を置き換えるもの、と説明を済ますつもりでしたが、 useE...

はてなブックマーク - 実践: React Hooks - mizchi's blog はてなブックマークに追加

2018年の段階で私が知らないこと – Overreacted

2018年の段階で私が知らないこと - Overreacted

2018年の段階で私が知らないこと - Overreacted

December 28, 2018 • ☕️ 2 min read This article was translated by readers into Chinese (Traditional), Korean, Swedish, Spanish, Portuguese (Brazil), and Japanese. This is a community translation into Japanese. You can also read the original in English or improve the translation. 多くの人は、私が実...

はてなブックマーク - 2018年の段階で私が知らないこと - Overreacted はてなブックマークに追加

React.js, Vue.jsが使えない状況でメンテナンス性の高いJavaScriptを書く3つのポイント – エムスリーテックブログ

React.js, Vue.jsが使えない状況でメンテナンス性の高いJavaScriptを書く3つのポイント - エムスリーテックブログ

React.js, Vue.jsが使えない状況でメンテナンス性の高いJavaScriptを書く3つのポイント - エムスリーテックブログ

エムスリー エンジニアの岩本です。 この記事は エムスリー Advent Calendar 2018 の23日目の記事です。 React.jsやVue.jsを使えれば、開発のベストプラクティスなどがあるので、メンテナンス性の高いプログラムはずいぶんと書きやすくなったと思います。本当に仮想DOMの功績は大きいですね。 しかし、世の中にはそうい...

はてなブックマーク - React.js, Vue.jsが使えない状況でメンテナンス性の高いJavaScriptを書く3つのポイント - エムスリーテックブログ はてなブックマークに追加

React/Redux約三年間書き続けたので知見を共有します | Enigmo Life

React/Redux約三年間書き続けたので知見を共有します | Enigmo Life

React/Redux約三年間書き続けたので知見を共有します | Enigmo Life

Enigmo Advent Calendar 2018の4日目の記事です。 この記事の目的 Enigmoが運営しているBUYMAでは古代から運用しているjQueryの他に、2016年頃から一部ページのフロントエンドをReact/Reduxで構築しています。 私自身もEnigmoに入社してからの約三年間でReact/Reduxアプリケーションの開発に多数携わってきましたので、...

はてなブックマーク - React/Redux約三年間書き続けたので知見を共有します | Enigmo Life はてなブックマークに追加

フロントエンドでどうテストを書くか(理論編) – Qiita

フロントエンドでどうテストを書くか(理論編) - Qiita

フロントエンドでどうテストを書くか(理論編) - Qiita

この記事は リクルートライフスタイル Advent Calendar 2018 8日目の記事です。 はじめに 自分のフロントエンドチームでは、TDDでの開発フローを実施することでフロントエンド開発の課題に向き合っていきます。 今回は、一般的に難しいとされるフロントエンドでのテストについて、どんな方針でテストを書けばいいかにつ...

はてなブックマーク - フロントエンドでどうテストを書くか(理論編) - Qiita はてなブックマークに追加

フロントエンドエンジニアは Micro Frontends の夢を見るか – Mercari Engineering Blog

フロントエンドエンジニアは Micro Frontends の夢を見るか - Mercari Engineering Blog

フロントエンドエンジニアは Micro Frontends の夢を見るか - Mercari Engineering Blog

Mercari Advent Calendar 2018 の6日目はフロントエンドチームの @vwxyutarooo がお送りします。 このタイトルが言いたくて Micro Frontends の記事を書きました。皆さんは Micro Frontends という言葉を聞いたことがあるでしょうか? 私は数ヶ月前まで全く知りませんでした。メルカリのフロントエンドチームにて Micro F...

はてなブックマーク - フロントエンドエンジニアは Micro Frontends の夢を見るか - Mercari Engineering Blog はてなブックマークに追加

2万人に聞いた、2018年の最新JavaScript事情 – Qiita

2万人に聞いた、2018年の最新JavaScript事情 - Qiita

2万人に聞いた、2018年の最新JavaScript事情 - Qiita

先日よりThe State of JavaScript 2018というアンケートが行われていたのですが、その集計結果が公開されたのでざっくりと紹介してみます。 回答者数は2万人超としか書かれてなくて正確な数は不明です。 というか全体的に大まかな集計結果しか出てなくて、もっと詳しいデータが欲しければ直接連絡しろという方針らしいで...

はてなブックマーク - 2万人に聞いた、2018年の最新JavaScript事情 - Qiita はてなブックマークに追加

新幹線の移動時間でサービスを作ってリリースするまでの軌跡〜サクッと作るための技術スタックとは〜 – Qiita

新幹線の移動時間でサービスを作ってリリースするまでの軌跡〜サクッと作るための技術スタックとは〜 - Qiita

新幹線の移動時間でサービスを作ってリリースするまでの軌跡〜サクッと作るための技術スタックとは〜 - Qiita

まえがき 先週末、仕事で東京から岡山まで行く機会があり、新幹線の中で一人でハッカソンしてみたら、意外と0から作ってサービスを公開するところぐらいまではできました。当日の経過のログが誰かの助けになればと思い、投稿。TsuyoshiNumano/emojishare にコードは公開してます&要所要所で Pull Request を分けました...

はてなブックマーク - 新幹線の移動時間でサービスを作ってリリースするまでの軌跡〜サクッと作るための技術スタックとは〜 - Qiita はてなブックマークに追加

この DOM がすごい2018: worker-dom – mizchi’s blog

この DOM がすごい2018: worker-dom - mizchi's blog

この DOM がすごい2018: worker-dom - mizchi's blog

おもしろライブラリを見つけて興奮しているので紹介します。 UIスレッド(メインスレッド)からユーザー操作をブロックしてしまうような重い処理を逃がす off-the-main-thread を実践しようとなると、実際に問題になるのは、ほとんどの処理は何らかの形で DOM を参照し、それに連なるものが処理時間の殆どを占めている、と...

はてなブックマーク - この DOM がすごい2018: worker-dom - mizchi's blog はてなブックマークに追加

Re-ducksパターン:React + Redux のディレクトリ構成ベストプラクティス

Re-ducksパターン:React + Redux のディレクトリ構成ベストプラクティス

Re-ducksパターン:React + Redux のディレクトリ構成ベストプラクティス

Re-ducks というディレクトリ構成のベストプラクティスについてまとめる。Re-ducksパターンを使うことで、React + Redux を用いた開発がよりメンテナンスしやすいものになる。 Ducks パターン 名前からもわかるように、Re-ducks は Ducks というパターンをベースにしている。 erikras/ducks-modular-redux Ducks パター...

はてなブックマーク - Re-ducksパターン:React + Redux のディレクトリ構成ベストプラクティス はてなブックマークに追加