JavaScript ベスト・オブ・ザ・イヤー 2020 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 2021 / 2020 / 2019 JavaScriptライブラリのトレンドを紹介しているbestofjs.orgが、2020年に最もホットであったJavaScriptライブラリのランキングを発表しました。 選考基準は現在のスター数ではなく、『2020年の一年間で増えたスターの数』です。 過去流行っていたけど落ち目となった技術は出てこないので、最近注目されている技術がわかります。 ちなみに2016年の総合ランキング1位はVue.js、2017年の総合ランキング1位はVue.js、2018年の総合ランキング1位はVue.js、2019年
JavaScript ベスト・オブ・ザ・イヤー 2020 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 2021 / 2020 / 2019 JavaScriptライブラリのトレンドを紹介しているbestofjs.orgが、2020年に最もホットであったJavaScriptライブラリのランキングを発表しました。 選考基準は現在のスター数ではなく、『2020年の一年間で増えたスターの数』です。 過去流行っていたけど落ち目となった技術は出てこないので、最近注目されている技術がわかります。 ちなみに2016年の総合ランキング1位はVue.js、2017年の総合ランキング1位はVue.js、2018年の総合ランキング1位はVue.js、2019年
Uncontrolled Components でシンプル且つ高パフォーマンスなフォームの実装 - React Hook Form - Qiita
この記事は READYFOR Advent Calendar 2020の13日目の記事です。 はじめに こんにちは。今年の11月から READYFOR でフロントエンドエンジニアとして働いている菅原（@kotarella1110）です！ React と TypeScript が好きで、React Hook Form のメンバーだったりもします。React Hook Form は TypeScript で記述されているのですが、型の改善を中心にコントリビュートしております。 そこで、本記事では React Hook Form に関連した内容をお話しできればと思います。 React でフォームを実装する際のデザインパターン React でフォームを実装する際のデザインパターンは以下の二パターンです。 Controlled Components を使用する Uncontrolled Compon
Next.jsでトークン設定済みのAxiosを使えるようにしてみた - Qiita
経緯 Axiosに認証トークンを設定する処理を共通化したい 何ならAxiosを使用する際にトークン設定済みの状態にしたい 方法 Axiosのインスタンスを生成→ヘッダーの設定→そのインスタンスの返却、を行うラッパー?ソースファイルを用意する。 各ソースファイルでAxiosを使用したいときは、そのラッパーファイルから呼ぶようにする。 実装 ラッパーファイル（例：customAxios.ts） import axios from 'axios'; // Axios本体をインポート const instance = axios.create(); // Axiosインスタンスを生成 instance.interceptors.request.use( (config) => { // 認証トークンをヘッダーに付与 config.headers.common['Authorization'] =
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するということ自体に焦点
React v17 何が変わった？ - Qiita
先日、React v17リリース候補がリリースされましたね! 前回のメジャーリリースからなんと2.5年もかかったようです。 ほとんどが公式の意訳になりますが、何が変わったのか重要そうなところをピックアップして自分メモとしてまとめておきます。 全てを網羅しているわけではないので、より詳しく知りたい方は下記の公式リリースノートを参照ください。 公式リリースノート 公式リリースノート日本語版 新しい機能はないよ React開発者は現在新しい機能追加に向けて取り組んでいますが、今回のv17には実は新機能は追加されていません。 v17は言わば、これからリリース予定の大規模アップデートのための踏み石になっています。 段階的アップデート 今までのアップデートには必ず破壊的変更が含まれていました。v15 -> v16の破壊的変更は皆さんの記憶にも新しいかと思います。そのような破壊的変更は、メンテされてない
Reactのレンダリングに関する完全ガイド - Qiita
この記事はComplete Guide to React Rendering Behaviorの翻訳記事になっています。 ご本人(Markさん)にも許可を頂いて翻訳しております。 こちらの記事がReactのレンダリングを理解する上で今までで一番体系的で一番分かりやすかったので、ぜひ紹介したく翻訳させて頂きました。 翻訳ツールにもたくさん助けてもらいながら行い、意訳が出来ていない部分が多々あるかと思いますので修正依頼を出して頂けると幸いです！ Twitterでも、フロントエンドに関する事や、アメリカでのエンジニア経験に関してツイートしているので、よかったらフォローお願いします。 Twitter: @hellokenta_ja 下記から本文です。 Complete Guide to React Rendering Behavior この記事は、Reactレンダリングがどのように振る舞うか、Co
React.memo / useCallback / useMemo の使い方、使い所を理解してパフォーマンス最適化をする - Qiita
はじめに React（v16.12.0）のReact.memo、useCallback、useMemoの基本的な使い方、使い所に関しての備忘録です。 「React でのパフォーマンス最適化の手段を知りたい」 「なぜReact.memo、useCallback、useMemoを利用するのかわからない」 といった人達向けに書いた記事です。 デモは CodeSandbox 上に置いてあります。編集して動作を確認してみると理解が深まると思います。 本記事で用いている用語 メモ化 計算結果 メモ化 計算結果を保持し、それを再利用する手法のこと。 キャッシュのようなものだとイメージすれば良いと思う。 そのため、以下の言葉の意味は大体同じ。 「メモ化された値」=「計算結果が保持された値」 「メモ化する」=「計算結果を再利用できるように保持する」 メモ化によって都度計算する必要がなくなるため、パフォーマン
iOSリバーシリファクタリングチャレンジ w/ Redux - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? リバーシリファクタリングチャレンジ koherさんが公開された、このFat View Controller、あなたはリファクタリングできますか？チャレンジに参加しました。 本チャレンジは、 Fat View Controller として実装されたリバーシアプリをリファクタリングし、どれだけクリーンな設計とコードを実現できるかというコンペティションです（ジャッジが優劣を判定するわけではなく、設計の技を競い合うのが目的です）。 GitHubのソースコード Qiitaの解説記事 Swift Zoomin' チャレンジ #1 チャレンジ Swi
Theme UI で Theme Driven な快適 React スタイリング生活 - Qiita
こんにちは。YAMAP でフロントエンドエンジニアをしている @SotaSuzuki と申します。 この記事は YAMAP エンジニア Advent Calendar 2019 の 9日目の記事となります。 拙い文章で恐縮ですが何卒よろしくお願いいたします。 tl;dr Styled System の Theming は Emotion の Theming と比べて 3倍便利 Theme UI の Theming はさらにその 2倍高機能 Styled System の Style Prop API と TypeScript の併せ技で 3倍高速なマークアップ Theme UI はいいぞ Styled System とは 本題の Theme UI に入る前に、Theme UI のベースとなるライブラリ Styled System について簡単に説明します。 Styled System は
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を使ったアプリケーションをひとつ試作してみました。この記
Next.js 9.3新API getStaticProps と getStaticPaths と getServerSideProps の概要解説 - Qiita
はじめに この記事ではNext.jsにvesrion 9.3から導入された以下の3つのAPIについて解説します。 getStaticProps getStaticPaths getServerSideProps こちらのissueで議論されてきた機能です。 Static Generation / SSG Improvements · Issue #9524 · zeit/next.js GitHub追っているとGS(S)P methodsと略されているのを見ます。 Next.jsが未経験の方でもReactとSSR(Server Side Rendering)の基本的な知識があれば理解できると思います。 Next.jsを「SSRを簡単に実現できるフレームワーク」と捉えてる方は是非読んでみてください。 注意事項 現在の最新安定版v9.2.2では使用できません。v9.2.3-canary.16か
2020年初頭における Next.js をベースとしたフロントエンドの環境構築 - Qiita
アップデート版の記事を以下に用意しています。 2020年師走における Next.js をベースとしたフロントエンドの環境構築 さて、今年に入って既に２ヶ月が経ちました。ということは３月に突入しているってことで、それは僕が東京で働き初めて２年が過ぎ去り、SPA なフロントエンドの環境をプロジェクトとして初めて構築して１年あまりということです。そして、冬も過ぎ去り春が来ようかというようなこの時期に、小さくはあるけれど新たな挑戦として Next.js を使うことになりました。 こんな記事を読んでいる方なら分かるとは思いますが、Next.js とは JavaScript のライブラリである React のフレームワーク です。Next.js といえば、同くフレームワークである Gatsby になんとなく押され気味なイメージを感じていましたが、v9 以降のアップデートがよい感じで、さらにごく最近の
ReactはウェブやHTMLとは特に関係のないライブラリです - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? みなさんReactやってますか。やってますよね。最近React Native流行ってるし。 んでいきなりなんですが、あのReactとかいうやつ、実は 特にウェブとは関係ないライブラリ なんですよね。ええぇ……。なのでこの記事ではそれについてだらだらと説明したいと思います。 この記事の背景 最近のReact Nativeブームで「React is 何」「React Nativeについて3行で教えてくれ」みたいなアレコレがよく発生するんですが、その際に「Reactはウェブ向けライブラリである」という先入観がだいぶ素直な理解を阻害しているなー
Snowpack で実現する未来のフロントエンド開発 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Web アプリケーション開発において TypeScript で型付けをして、 React, Vue, Angular などのフレームワークでビューを作り、 Webpack でバンドルする、という構成が当たり前のようになってから久しいですね。 フロントエンドアプリケーションの設計は洗練され、我々はまあまあ安全かつ開発しやすい環境でアプリケーションを作れるようになりました。 ところでみなさんはその開発環境の構築にどれだけのコストをかけていますか？ 新規プロダクトを作るたびに最適な Webpack の設定ファイルを作るために苦心して、気づけば
useReducerの本質：良いパフォーマンスのためのロジックとコンポーネント設計 - Qiita
React Hooksの正式リリース（2019年2月）からそろそろ一年が経とうとしています。Hooksの登場によってReactのコンポーネントは関数コンポーネントが一気に主流になり、クラスコンポーネントが新規に作られる機会は激減しました。 また、React 17.x系ではConcurrent Modeの導入とともにさらに2種類の新フックが追加される見込みであり、いよいよ関数コンポーネントの能力がクラスコンポーネントを真に上回る時代が来ることになります。 この記事では、フックの一種であるuseReducerに焦点を当てて、どのようなときにuseReducerが適しているのかを説明します。究極的には、useReducerによって達成できるパフォーマンス改善があり、ときにはそれがコンポーネント設計にまで影響を与えることを指摘します。 useStateの影に隠れたり、なぜかReduxと比較されたり
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
VSCode + ESLint + Prettier + React + TypeScript （自分用メモ Fall, 2020） - Qiita
Reactのstate更新におけるバッチ処理と「関数型のstate更新」がなぜ必要なのか？について - Qiita
Vue.js/Blazor/Angularの文法比較サンプル集 - Qiita
react-redux の Hooks API に Generics は要らない - Qiita
