[B! React][react] kikuchi1201のブックマーク

フロントエンドの新規開発でNext.jsの採用を見送った話 - バイセル Tech Blog

※こちらはバイセルテクノロジーズ Advent Calendar 2023の10日目の記事です。前回の記事は、金澤さんのAuth0とEntra IDを扱うプロダクト同士を繋げるためのIstio設定あれこれでした。はじめにこんにちは、開発3部の神保です。バイセルでは、お客様宅への出張訪問による買取が買取チャネルの主力となっています。現在開発3部の弊チームでは、この出張訪問買取で使用されるWebアプリケーション﹁Visit﹂の新規開発を進めています。 VisitのフロントエンドにはReactを採用しましたが、Next.js等のフレームワークは使用せず、Vite + ReactによるSPA (Single Page Application)構成を選択しました。技術選定の過程では、社内での採用事例などからNext.jsも検討の対象となりましたが、最終的にはその採用を見送る結論に至りました

kikuchi1201 2023/12/10

リンク

個人開発で参考になるNext.jsリポジトリ10選

OpenStatus - ステータスページ App Router Turborepo Drizzle Clerk tRPC Tailwind shadcn/ui LLM Report - OpenAI モニタリング App Router Prisma NextAuth shadcn/ui Stripe Dub - URL 短縮 App Router Turborepo Prisma NextAuth Tailwind Stripe slug - URL 短縮 Prisma NextAuth tRPC Tailwind Cal.com - 日程調整 Turborepo Prisma NextAuth tRPC Tailwind Taxonomy - ブログ App Router Prisma NextAuth Tailwind Rowy - ローコード GUI Firebase Dorf -

kikuchi1201 2023/10/15

開発
React

リンク

Next.js

2023年度リクルートエンジニアコース新人研修の講義資料です

kikuchi1201 2023/08/11

React

リンク

過激派が教える！　useEffectの正しい使い方

ReactのuseEffectは、フックの中でも使い方が難しいものの一つです。そこで、この記事では筆者が考えるuseEffectの望ましい使い方を皆さんに伝授します。基本原則技術やその要素の使い方を考えるにあたって、筆者が好んでいるのは基本原則を置いてそれに基づいて判断することです。ということで、この記事ではまず筆者が考えるReactの基本原則を紹介します。筆者がもっとも重要視する原則は、ReactはUIライブラリであるということです。つまり、ReactにはUIの管理をさせるべきであって、その他のことはReactの役目ではないということです。Reactが難しいと思う人がいる場合、何でもかんでもReactにやらせようとするから余計に難しくなっているのだと思います。例えばアプリケーションのロジックの管理やそれに付随するステートの管理はReactの役目ではないので、Reactの外部で処理

kikuchi1201 2023/05/04

リンク

Quick Start – React

Welcome to the React documentation! This page will give you an introduction to the 80% of React concepts that you will use on a daily basis. You will learn How to create and nest components How to add markup and styles How to display data How to render conditions and lists How to respond to events and update the screen How to share data between components Creating and nesting components React apps

kikuchi1201 2023/03/25

React

リンク

デザイナーでも分かる範囲のReact、その書き方と学び方 - Qiita

これは何「デザイナーもReact書いてくださいよ」って空気になったときに読むと役立つかもしれない記事です基本的に筆者が学んだ流れを記載していますそのため、世間一般のベストプラクティスではないと思いますエンジニアの方から見ると邪道な流れ・説明の仕方かもしれませんが、デザイナーに教える上での分かりやすさを重視していますのでご了承くださいこの記事の中で使っているコードはこちらのリポジトリで公開していますコミットを辿ってもらえれば、各セクションの内容が全て見れます ※言い訳がましいですが、筆者もReactに精通している程ではなく「デザイナーにしては割と知ってる」レベルですもし説明に間違いや不足があれば編集リクエストをお願いします対象読者 Web or UIデザイナー HTMLとCSSは普通に書けるけど、Reactはほぼ全く触ったことがない人 1人で完全に実装したいってほどではないけ

kikuchi1201 2021/04/10

React
html

リンク

今からでも遅くない！誰も教えてくれなかった React とアクセシビリティーの世界

この記事は Front-End Study #3 で発表されたライブコーディングの内容を記事にしたものです。記事中のソースコードは GitHub でご覧いただけます。この記事は、これまで一般的なフロントエンドエンジニアだった私が一年ほどアクセシビリティーについて勉強する上で﹁最初に教えてくれればよかったのに〜！﹂と思った内容を React と Next.js を用いて紹介するものとなっています。読み終わった後に次にコードを書く際にふと意識できるようなアクセシビリティーの普遍的な事実を紹介し、最後に今後の React の動きについて軽く触れるものになっています。目次は次のとおりです‥ 基本事項 SPA のルーティングによる問題リッチなコンポーネントでの例 Jest + React Testing Library でのテスト Reactとアクセシビリティーの今後の動き役に立つweb

kikuchi1201 2021/01/14

React

リンク

チーム個々人のテックブログをRSSで集約するサイトを作った（Next.js）

先日、こんな記事を見かけました。テックブログは続かない - note.com 採用目的でテックブログを始めたものの、時間の経過とともに古い記事ばかりになるorすでに退職している社員の記事ばかりになる…というのはよく見かける光景です。目の前のタスクが積み上がっている状況で、業務時間内にブログを書く時間を取るのはなかなか難しいと思います。そうは言っても業務時間外に無償で会社のブログに書くのもなかなか気乗りしません。﹁数年以内に転職するかもしれない﹂という気持ちがあればなおさらです。記事が転職しても自分のものとして残るのであれば、書くモチベーションは上がるのかもしれません。その後、こんなツイートを見かけました。企業のテックブログと言えば﹁会社がひとつブログを作って、みんなでそこに投稿する﹂という形が当たり前になっていますが、たしかに個々人の投稿を集約する場所を用意するだけでも良いの

kikuchi1201 2020/10/25

リンク

iOS NativeからReact Native に乗り換えた Shopify の話聞いてきた - tomoima525's blog

"最も使われているサービスのひとつを iOS Native から React Native に作り変えた" というアナウンスメントを出し話題となった Shopify で、まさにその内容を扱った React Native の meetup があり、参加してきたので内容と所感をまとめました。 React Native is the Future of Mobile at Shopify 発表内容検証/導入フェーズ技術スタック React Native がもたらした効果途中でやめたこと追加で登壇者に聞いたことその他の発表 React Native for Web @twitter その他もろもろ React Native is the Future of Mobile at Shopify React Native で書き換えた話はしばらく前にアナウンスしていたのですが、Shopify

kikuchi1201 2020/01/31

React
iOS

リンク

ReactとVueの比較、全く同じアプリを作成してみて分かった相違点 2019年Edition

日常的にVueを使用している開発者が、ReactとVueで全く同じアプリを作成した時のそれぞれの工程を比較して分かった相違点を紹介します。特に、Reactのフックについて具体的な使い方が解説されています。Icreated the exact same app in React and Vue. Here are the differences. [2019 Edition] by Sunil Sandhu 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。本記事は以前翻訳した記事の2019年Editionで、Reactのフックが追加されています。以前の記事は下記をご覧ください。 ReactとVueってどう違う？全く同じアプリをReactとVueで作成してみて分かった相違点隣の家の芝生は青く見える ReactとVueで作成し

kikuchi1201 2019/10/17

ほぉ

React
Vue

リンク

Reactを使って本気でアンケートシステムをつくった - Qiita

この記事はエムスリー Advent Calendar 2017 の25日目の記事です。普段はDB・サーバサイド・クライアントサイドまでの設計・実装・運用を扱っていますが、この記事ではReactを使って開発したシステムについてを紹介しようと思います。作ったものアンケートシステム(survey-designer-js)を作り、社内で使っていました。またOSSとしてレポジトリに公開もしています。 GitHub DEMO なお公開しているのはクライアントサイドのみで、サーバサイドの実装は公開していません。なお、エムスリー社内で使用しているものはこのレポジトリからフォークしたものとなっています。下記のような機能を備えています。ページの作成ページ内への設問の作成複数選択肢単一選択肢(ラジオボタン) 単一選択肢(プルダウン) 数値記入 1行テキスト複数行テキスト表形式都道府県説

kikuchi1201 2017/12/26

jQuery
React

リンク

GitBook – Knowledge management for technical teams

Centralize your team’s knowledge, sync with your codebase, and create beautiful documentation your customers and teams will love

kikuchi1201 2017/11/05

React
UX

リンク

ReactはなぜFiberで書き直されたのか？Reactの課題と将来像を探る

先日行われたFacebookの開発者向けイベント﹁F8﹂で、React Fiberの発表が行われていました。といっても、React関連の新しいプロダクトが発表されたというわけではなく、Reactが一から書き直されたということのようです。 ReactはなぜFiberで書き直されねばならなかったのか？Fiberが解決しようとした課題は何なのか？その答えを聞くために、React Fiber現状確認というブログエントリで大変詳細にFiberの事を解説されていた小林徹 (Twitter: @koba04)さんに、実際のところを詳しく伺ってきました。 React Fiberとはなんなのか、そしてReactの将来像を探ってみます。 React Fiberとは？白石 React Fiberってなんですか？まずは概要を教えてください。小林 Facebookが先日のF8カンファレンスで発表した、Rea

kikuchi1201 2017/05/30

リンク

TechCrunch | Startup and Technology News

Hello and welcome back to TechCrunch Space. What a week! In the same seven-day period, we watched Boeing’s Starliner launch astronauts to space for the first time, and then we…

kikuchi1201 2017/04/19

リンク

React Nativeはクロスプラットフォームモバイルアプリ開発の夢を見るか #DroidKaigi

This document summarizes a presentation about React Native given at DroidKaigi 2017. It discusses how React Native allows building native Android and iOS apps using React by rendering UI components to native platform views. It describes how React Native maps React components to native platform views, implements native modules to access platform features, and uses the JavaScript bridge to allow cal

kikuchi1201 2017/03/14

React
ios

リンク

ReactとAngularのいいとこ取り？ 2017年こそ学びたいVue.jsの始め方

Angular、Reactと並んで海外で人気が高まっている﹁Vue.js﹂。ReactとAngularの開発経験がある著者がVue.jsをチュートリアルを通じて特徴をまとめました。2017年、新しく学び始めるきっかけにどうぞ。 2016年9月、人気のJavaScriptフレームワークVue.jsがv2をリリースしました。それ以来ぜひ使ってみたい、どのようなものか知りたいと思っていました。AngularとReactを使い慣れた者の1人としては、Vueが似ているところや違うところも知りたかったのです。 Vue.js 2.0はすばらしいパフォーマンスを誇ります。データサイズが比較的小さく︵バンドルされるVueのランタイム版は一度最小化してgzip圧縮したら16KBしかありません︶、Vueのvuexや、vue-routerのような付属の状態管理ライブラリーもアップデートされました。1つの記事ではと

kikuchi1201 2017/01/19

やろう

vue.js
React

リンク

React、Angularになじめなかった僕に手を差し伸べてくれたVue.js - Qiita

ギークハウス Advent Calendar 2016の12月22日の記事です。他の方とは、全然違う雰囲気になってしまいましたが、読んでいただけると幸いです。なぜVue.js？？普段の仕事では、Ruby/Railsなので、フロントエンド周りは、jQueryにCoffeeScriptで片手間感覚... ↓ しかし最近のフロントエンド界隈は、良くも悪くも盛り上がっていて楽しそうだなあと思う日々。 ↓ いろいろ、ググって調べてみると、ES6、Babel、Reactふむふむ...🤔 ん？？ Webpack? JSX?? Flux?? Redux??﹁落ち着け！とりあえず日本語でOK﹂状態。。正にこの記事で書かれている状態そのものでした。 ↓ Reactとかでイケてるフロントエンド開発をちょっと試したいと思っても、BabelやWebpackの設定など環境構築でつまづき、肝心のアプリケーショ

kikuchi1201 2017/01/01

vue.js
React

リンク

2016年、サーバーサイドエンジニアがゼロからReact/Reduxを学習したときの方法を振り返る

こんにちは。スタジオ・アルカナのサーバーサイドエンジニアなっちゃん(@natsumican63)です。この記事はReact Advent Calendar 2016の13日目の記事です。それは2016年も後半へ差し掛かったある日のことでした… 上司﹁次の案件、この辺の技術使うから軽く勉強しておいてー﹂つ React.js + Redux.js + redux-saga + Cordova + ES6 + Babel + OnsenUI + Gulp + Webpack (　ﾟдﾟ) (つд⊂)ゴシゴシ (‥ﾟ Дﾟ) !?!? (; ﾟдﾟ)﹁…わ、わかりました﹂ ※﹁何でもやります！やらせてください！﹂が私の口癖なので、決して無茶振りしてくる弊社ではありませんよ！ほんとだよ！！斯くして2016年、サーバーサイドエンジニアがはじめてフロントエンドへの門戸を開くこととなった際の学