何故くそややこしいReactを勉強しないといけないのか？ - Qiita
逃げるプログラマー、避けられない壁 Web系アプリケーション開発をするとなると、React, Angular, Vueといったフレームワークの話題は避けて通れないのだけど、面倒にかまけてみて見ぬふりをしているデヴェロッパー諸君は多いと思う。 自分もそういうダメグラマーの一人でした。 だが、Nodeベースでバックエンドを開発していると、どうしてもフロント側が必要だし、使いたいライブラリーや機能、操作性を組み込むためには、フロント側のフレームワークからは逃げられず、立派なフルスタックデベロッパーになる為に、重いけつを上げ、学習することにしたのであります。 React, Angular, Vueの３大フレームワークをざっと調べてみた際に、一番取っつきやすそうだったReactをチョイス。 しょせんはHTMLとCSSとJavascript で、結局Reactは何をやっているかというと、しょせんはHT
Blitz.js、Next.js辞めるってよ - Qiita
Blitzは、ざっくり言うとReact版Ruby on Railsです。 Reactの面倒なところを全てすっ飛ばし、技術選定なんてどうでもいいから今すぐアプリを動かしたいんだよ、という要望を叶えるのに適したフルスタックフレームワークです。 概要はBlitz.js - React on Rails、実際の使い方はBlitz.jsチュートリアル：投票サービスを15分で作ってみるあたりを見てもらうとして、とにかくチュートリアルに従ってコマンド打てばとりあえず動くものが一瞬でできるとかそんなかんじです。 技術的にはReact + Next.jsで動いています。 ということだったのですが、先日どうも雲行きの怪しいRFCが提出されました。 以下は[RFC] Time to maintain a fork of Next.js?の紹介です。 なお提案者のBrandon BayerはBlitz.jsの作者
Blitz.jsの議論から学ぶ，formik vs react-final-form vs react-hook-form - Qiita
const { register, handleSubmit } = useForm(); const firstNameRef = useRef(); const onSubmit = data => console.log(data); return ( <form onSubmit={handleSubmit(onSubmit)}> <input name="firstName" ref={(e) => { register(e) // hook-form register firstNameRef.current = e // manually assign your ref }} /> ref={ref}で渡したいのに…。 react-final-formのデメリット render propsが初心者には難しいのではないか？というコメントがいくつかあった。 基本的にrender
Gatsby + GitHub Pages でポートフォリオページを無料でシュッと作る - Qiita
エンジニアたるもの、自分のポートフォリオページは持っておきたいですよね。 Gatsby + GitHub Pages を利用したポートフォリオページ作成手順をまとめましたのでご活用ください。 こんなページをシュッと作れます。維持費もかかりません。 GitHubでポートフォリオ用リポジトリ作成 まずはポートフォリオ用のリポジトリを作成していきます。 GitHub右上のメニューから 「New repository」をクリック Repository name に <ユーザ名>.github.io を入力し、 「Initialize this repository with a README」にチェックつけて「Create repository」をクリック リポジトリ作成完了。Clone with SSH をコピーしておきます ターミナルで作成したリポジトリをチェックアウト # <user>を置き
Next.js+TypeScript+AWS Amplify+RecoilでToDoリストを作る - Qiita
本記事ではNext.js+TypeScript+AWS Amplify+Recoilを使って、モダンなToDoリストを作る方法を紹介します。 Githubリポジトリを公開しますので、不具合や不適切な実装を見つけた場合はドシドシIssueかPull-Requestいただけると幸いです。 背景 私自身普段はRuby on Railsを使って開発しています。JavaScriptは正直まだ苦手です。 Railsは爆速でアプリを開発出来る点が魅力的ですが、一方でモバイルアプリとの連携やリッチなUIが求められる案件では、フロントエンドとバックエンドを分離した構成にせざるをえないケースがあります。 そのような構成だと、かえってRailsがリッチ過ぎるとも感じており、AWS Amplifyのようにバックエンドをスピーディーに構築してくれるサービスを一度使ってみたいと思っていました。 そのため、Next.j
Reactの状態管理はReduxの独走状態、2位は大きく離れてswrとreact-queryが競り合い中・・ - Qiita
Reactの状態管理はReduxの独走状態、2位は大きく離れてswrとreact-queryが競り合い中・・ReactreduxSWRRecoilreact-query 2021/09/24 追記 これまでは状態管理にReduxやVuexなどの状態管理用ライブラリを使いますが、Graphqlを採用した場合にApollo Clientを利用することでフロントエンドの状態管理の実装がかなり楽になります。 追記終了 2021/01/17 追記 2020年版 満足度ランキング State of JS 2020: JavaScript Flavors https://2020.stateofjs.com/ 最近よく聞く状態管理 pmndrs/jotai: 👻 Primitive, flexible state management for React https://github.com/pmnd
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が目指す方向性を何と
reselectでReact Reduxにvalidationの仕組みを実装する 1/2 - Qiita
※ 2019/06/12追記: React Hooksのなかった時代の投稿です。2019/06/12 現在のスタンダードが他にないかよく調べてから読んでください。 本記事はSupership株式会社 Advent Calendar 2016の7日目の記事になります。 株式会社Socketの @notsunohito です。 株式会社SocketはSupership株式会社と同じSyn.グループのメンバーであり Web接客と呼ばれるサービスのひとつであるFlipdeskを展開しています。 今回はFlipdeskの管理画面の一部をReact Reduxで書き直したときに validationを実装するのに利用したライブラリreselect について本日7日目と8日目を2回にわけて書きます。 TL;DR reselectでvalidationを作ってみたら割りと良かった。 本記事で扱うサンプル全
Reduxのreselectとは - Qiita
Reduxにおけるreducer分割とcombineReducersについて - Qiita こちらの記事を読んで、私も（Redux は勉強し始めたばかりだけど）似たような感想を持っていて 最後のコメントに書かれていた reselect というライブラリが気になったので、調べてみました。 取り急ぎ、こちらの公式ドキュメントおよび YouTube にあった動画を見ておおざっぱに理解したつもりでいるので、自分なりに整理してみます。 (公式ドキュメント) Computing Derived Data | Redux (動画) [React/Redux] Logicless Components with Reselect - YouTube 解決したい課題 ドキュメントに書いてあったのと同じく、Redux の basics チュートリアル を例に考えてみる。 このチュートリアルを通して作成したの
Reduxの個人的チュートリアル(redux-toolkitあり) - Qiita
はじめに Reduxのチュートリアル用のプレゼンテーションをほぼそのまま乗っけます。間違っているところとかあるかもですのでご承知ください。 比較用のTodoアプリをどうぞ 1.Reduxの基本 Reduxの基本構造 単方向データフロー 純粋な関数の多用 Action Actionは起こったイベントを表す interface PayloadAction<P, T extends string, M, E> { type: T; payload: P; meta: M; error: E; } action.type - Actionを識別する文字列 アクションの名前はシステムが行うことではなく実際に起こったことを書く 例) (x) 'CREATE_COMMENT' (o)'POST_COMMENT' action.payload - Actionに必要なデータ action.meta - a
Next.js 10 リリースノート全訳！ 画像の自動最適化、i18n対応、アナリティクス、Eコマースほか - Qiita
Next.js 10 リリースノート全訳！ 画像の自動最適化、i18n対応、アナリティクス、EコマースほかNext.js この記事は Next.js 10 リリースノートの日本語訳です。 10/27、Next.js 10 がリリースされました！ 私はふだん Next.js で個人開発を行ったりしている者です。 Twitter もやっているのでよかったらフォローおねがいします！ @_thesugar_ よかったら Next.js チュートリアル（公式）の翻訳記事もどうぞ。 また、非公式ですが Next.js のドキュメントの翻訳プロジェクト も盛り上がっています！ Next.js 10 の機能をご紹介します: ビルトインの画像コンポーネントと画像の自動最適化: 新しい next/image コンポーネントを使用することで、自動的に画像を最適化します 国際化に対応したルーティング: ビルトイン
React-Reduxのメモ化が分からない人のためにメモ化が分かるまで説明を辞めない - Qiita
背景:React-Reduxを使うときに、メモ化が重要だと理解したので情報発信することにした 開発現場にReact-Reduxを導入しておきながら、チームメンバーから「 俺の実装したコンポーネントの描画遅いんだけどどうにかしてくれ 」と言われたので、「どうにかするのはお前の仕事だぞ♡」、と思いつつ、そうも言ってはいられない状況になったので、本腰入れてドキュメント読みました。React-Reduxのパフォーマンス改善にはどうやらメモ化が重要であると思ったので説明します。色々なサイトやドキュメントは明らかに冗長な説明が多いので、極限までエッセンシャルを絞って説明することで、ゼロ知識からでもある程度、理解できるレベルの説明に落とし込むことに挑戦しました。うちの開発チームで知見として残すために作成したものですが、需要がありそうかなと思ったので、公開します。需要がなければすみませんでした。おかしな点
FormikでReactのformを簡単に扱おう！ - Qiita
はじめに この記事はPOL AdventCalenderの8日目の記事です。 こんにちは！株式会社POLでフロントエンドエンジニアをしております、橋本ことブリボンと申します！ 弊社では、フロントエンドはReactを用いて開発をしております。 みなさんは、Reactでformを作る際、どのように実装しますか？ ライブラリーを使わずに実装する、Formikを使う、redux-formを使うなどなど…… 弊社では、Formikを使ってformの実装しております。 また、formのバリデーションを実装するために、 Yup というライブラリーを使っているのですが、Formikの説明だけに注力したいため、詳細な説明は致しません。 別の記事で、Yupを使ったformのバリデーションの解説をしようと思っております。 Formikとは何か？ Formikとは、 Reactでformをより簡単で簡潔に実装でき
Formikが使いたい！ - Qiita
React.jsのバリデーションライブラリ「Formik」がかなり人気を博しているようなので、早速勉強することにしました！ 今回参考にさせて頂いた動画＆記事はこちらです♫ Youtbe: Better React Forms with Formik 2020/02/26 追記 Formikの別記事を書きました。 → Formikを導入する 何もライブラリを使用しなかったときのコード シンプルですが記事タイトルと本文に入力文字数に関するバリデーションを設けたフォームを作成してみました。 ▼ 出来上がり ▼ ソースコード 元になるソースコードも載せます。 あえて、かなり冗長的に作ってます。 import React, { Component } from 'react' class Form extends Component { constructor(props) { super(prop
styled-componentsを使ったCSS設計 - Qiita
はじめに 自分は普段フロントエンドエンジニアとして、React Reduxなアーキテクチャのアプリを作ることが多いのですが、stylingにstyled-componentsを導入しています。今回は、styled-componentsでのCSS設計について書いてみたいと思います。 styled-componentsとは JSでstyleを記述するCSS in JSのライブラリで、2019年8月現在最も人気のあるライブラリです。タグ付きテンプレートリテラルをうまく使った独自性と、明快なAPIでCSS in JSの火付け役にもなり、同じ思想を持った亜種ライブラリ(paypal/glamorous, zeit/styled-jsx等)が続々と出て来るなどある種のブームを巻き起こしました。 そもそも、Reactの登場でフロントエンド開発が「jQueryによるhtmlへの振る舞いの後付け」というスク
Next.jsチュートリアル翻訳 - Qiita
Next.jsでは公式が提供するチュートリアルがあります。 GitHubアカウントがあれば始められて、ところどころクイズ形式になっていて、正解するとpointが貯まるちょっと楽しい仕様になっています。 ただ、英語が苦手な方や、ざっと全容を把握したい、という方もいらっしゃると思うので、チュートリアルを自分なりにまとめてみます。 Vue.jsやNuxt.jsが日本で普及しているのは翻訳を提供しているのが大きいと思う（コミュニティとして巻き込んでいくのももちろん大きいと思う）ので、微力ながらNext.jsの普及に貢献したいと思って記事を書きます。 意訳や情報の歯抜けがあるかとは思いますが、ご指摘もしくはご容赦下さい。 この記事はNext.jsチュートリアル https://nextjs.org/learn/ の翻訳です。 はじめてみる 環境構築 Windows, MacやLinuxでも、Node
Next.js - Qiita
https://zeit.co/blog/next の翻訳です。 > Naoyuki Kanezawa (@nkzawa), Guillermo Rauch (@rauchg) and Tony Kovanen (@tonykovanen) > 2016年10月26日 私たちは、サーバレンダリングされるユニバーサルなJavaScriptウェブアプリのための小さなフレームワークであり、ReactやWebpack、Babel上に構築され、このサイト（訳注: https://zeit.co ）を動作させているNext.jsをオープンソース化することをとても嬉しく思います！ (Next.jsの"Hello World") Next.jsを使い始めるには、package.jsonを含む新しいディレクトリ内で次のように実行してください。
Next.jsをはじめる - Qiita
Next.jsアドベントカレンダー2018の1日目です。 Reactを使ってSPAで開発したい事情がある、でもSEOとユーザビリティのためにSSRが最適解。 そういった場合、Reactを用いたシンプルなIsomorphic JavascriptフレームワークであるNext.jsがあります。 使ってみると案外簡単でフレキシブルで、非常に良いです。 世間ではNuxt.jsが大流行ですが、Next.jsを少しでも使ってもらえるように、はじめるにあたってのガイドを共有したいと思います。 特徴を知る Next.js公式サイトの中にある、チュートリアルの冒頭に下記特徴が書かれています。 Server-rendered by default デフォルトでサーバーサイドレンダリングされる Automatic code splitting for faster page loads 高速ページローディングの
Next.js 9.4 Fast RefreshとIncremental Static Regeneration等のアップデート - Qiita
Next.js 9.4 Fast RefreshとIncremental Static Regeneration等のアップデートJavaScriptReactNext.js Hot ReloadがReact Refreshを用いたFast Refreshに置き換えられました。 これで編集したファイル内のコードのみが更新され、コンポーネントの状態を失うことなく再レンダリングを行ってくれます。 これに伴いエラーのオーバーレイも再設計され、ページ上ですぐにエラーを確認できるようになっています。 Incremental Static Regeneration (beta) 段階的な静的ページ再生成がサポートされました。 Next.js 9.3でサポートされたStatic Generationでは、ビルド時に生成したページでなくてもfallback: trueオプションを利用することで実行時に新しい
redux-sagaで非同期処理と戦う - Qiita
はじめに ReduxはSingle Store、immutableなState、副作用のないReducerという３つの原則を掲げたFluxフレームワークです。しかし他のフレームワークと違って提供しているものは最小限で、とてもフルスタックとは言えない薄さです。そのためすべてにおいて定番と言える書き方が定まっているわけでもなく、どうしようか迷ってしまうことも少なくありません。その筆頭とも言えるのが 非同期処理 の扱いです。コミュニティでは今でもさまざまな方向に模索が続いていますが、よく使われているものだとredux-thunk、redux-promiseあたりでしょうか。Reduxに限定しないのであればreact-side-effectというものもあります。こちらはTwitterのモバイルウェブ版で使われていますね。どれを使っても非同期処理が可能になりますが、それはあくまで道具であって、設計の
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
