バックエンドエンジニアが Next.js でモダンなフロントエンド開発を始めるにあたり学習したこと
2021年秋ごろ、副業のような形で Next.js による新規フロントエンド開発のお手伝いをさせていただくことになりました。プライベートの空き時間でフロントエンドの学習をし、今はひとまず開発できるようになってきた気がするので、これまで学んできたことをご紹介します。 基本の TypeScript, React, Next.js だけでなく、GraphQL の周辺ツールやテストについても学習しました。 これまで 当時、Web 系の受託開発会社にて主に Ruby on Rails でバックエンドの開発をしていました。TypeScript, React は学生の頃から趣味で書いていました。 テストは、Rails での開発なら RSpec や Capybara で書いていましたが、JS ではほぼやったことがありませんでした。GraphQL は全くの未経験でした。 やったこと React チュートリア
React基礎 · GitBook
React基礎 レッスン Lesson 01: 環境構築 Lesson 02: ES2015について Lesson 03: 関数型の書き方 Lesson 04: 初めてのコンポーネント Lesson 05: 初めてのinline style Lesson 06: 初めてのprops Lesson 07: 配列からの展開 Lesson 08: フォームの定義 Lesson 09: フォームによるデータ追加 Lesson 10: 総合課題「目的特化型電卓を作ってみよう」 おまけ Appendix 01: 様々なコンポーネントの書き方 Appendix 02: コンポーネントのstate Appendix 03: コンポーネントのライフサイクルメソッド Appendix 04: JSX vs. createElement Appendix 05: PropTypes Appendix 06: p
たぶんこれが一番分かりやすいと思います React + Redux のフロー図解 - Qiita
【追記】 もうこれ古いから参考にしないでください https://t.co/mXtcc73Orf — もし Laravel が流行しなくなってこられてきてたとしたら、絶対に捨てられてこられてたと思うか (@mpyw) January 26, 2021 Redux にはその昔 connect()() とかいうクソ API と， Redux-Saga とかいう宗教がありました という考古学です — もし Laravel が流行しなくなってこられてきてたとしたら、絶対に捨てられてこられてたと思うか (@mpyw) January 26, 2021 読者対象 Tutorial: Intro To React - React Example: Todo List · Redux 「チュートリアルそれぞれ一周した！Reactは何とか理解できたが，Reduxがさっぱりわかんねぇ！」 ぐらいの人向け。自分
Ruby on Rails on React on SSR on SPA - ✘╹◡╹✘
amakan での設計を例に、RailsでSingle-Page Applicationをつくるときの自分のやり方をまとめてみます。 Gem 「JavaScriptで書かれたReactのコンポーネントからHTMLを生成する」というのをRubyでやるために、RubyのV8エンジン実装であるmini_racerというGemを使う。この処理を楽に実行するために、react_on_railsというGemも使う。 gem "mini_racer" gem "react_on_rails" View body要素内のHTMLは全てReactで生成するので、layout以外にviewのテンプレートは存在しない。 Controller 初回リクエストの場合はHTMLを返す ページ遷移時に呼ばれるリクエストの場合はJSONを返す 外部サイトからブラウザバックで戻ってきたときにJSONを見せない という要求に
React Storybook で変わるUI開発フロー (Redux Flavor) - Qiita
SPAを考える会 (D3勉強会 2016.10.06) by @kitaly (twitter: @kita_ly) 自己紹介 @kitaly Twitter: @kita_ly ソフトウェアエンジニア REST API開発 (Scala/Play) SPA開発 (TypeScript, Angular.js, React.js) ビズリーチ HRMOS プロダクト開発部 採用管理 (2016年6月リリース) 勤怠管理, 評価管理, その他HR系サービス (Coming Soon..) 過去の発表資料 サーバサイドエンジニアが 1年間まじめにSPAやってみた ビズリーチではDBFluteハンズオンやってます はじめに React / Redux / Webpack 前提の話ですが 他のコンポーネント志向FWなどでも、ユースケースやワークフローは応用可能だと思っています 新しいツール
ReactとAngular2の選択で迷ったときに考えたいこと - Qiita
まえがき 最近社内でLT大会がありまして、Angular2について発表したのですが（正式リリース直前でしたが）、結構内容的には、React vs Angular2みたいな内容になってたので、『（私が）ReactとAngular2の選択で迷ったときに考えたいこと』としてちょっと記事にしてみました。 ※1 この記事はあくまで両者を触ってみた『個人的な感想』になりますのであしからず。 ※2 そして、この記事は2016-09-18の時点での内容になります。 Reactはライブラリ、Angularはフレームワーク Reactが出始めた頃にはよく比較されることの多かったAngularですが、それは両者が似たような時期に盛り上がってきており、それでいてDOM周りの問題解決で謳っている機能がそれぞれちょっとずつちがっていたからかなと思っています。（それぞれDOMの構築とデータバインディングについての機能を
自社サービス採用へ。本気で作るReact+Reduxのプロジェクト構成 - Qiita
サイバー・バズの@yuinchirnです。 弊社で最近リリースした「Cloud-F」というアパレルのクラウド展示会サービスは、フロントサイドはReact + Redux + Webpack、サーバサイドはScala + Akka HTTPで作られています。 今回は、フロント側のReact + Reduxを使ったプロジェクトの構成について紹介していきます。 React + Reduxプロジェクトを作る上で参考になればと思っております。 下記記事を読んで基本を押さえておくと読みやすいと思います。 React+Redux入門 全体のディレクトリ構成 今回はバイヤー向け管理画面、ブランド向け管理画面という二つの画面を作るため、 両方のプロジェクトで共通で利用する部分は/common バイヤー向け管理画面は/buyer ブランド向け管理画面は/brand という３つのReact ＋ Reduxプロジ
新規Railsアプリに小さく導入するReact - Speaker Deck
dotsで開催されたReactの導入を検討されてる方向けの勉強会でお話しました https://eventdots.jp/event/597088
ReactでもDOMの木構造はつらいよ問題 - しゅみは人間の分析です
nippo.wikihub.io r7kamura Commented on 2016-09-01 何も考えずにReact, Redux使うような気はするのだけど、Reduxを使わない場合は各位どうやってState管理してるんでしょうか？ 親コンポーネントがstateとメンバ関数を持っており、子コンポーネントはpropsかcontext経由でその値を参照しながら描画とイベントバインディングを行っています。 日報で疑問を書いたら、id:r7kamuraさんが答えてくれた。 immutable.Recordに状態とロジック押し込んでそいつをContainer Componentのthis.stateに入れておく設計とか。 — 下京区 (@non_117) 2016年9月1日 facebookが想定してるのはこの用途かな。 DOMサブツリー間で状態の共有が発生するか、設計段階で予見するの難しそう
React Server
Getting Started with React Server The easiest way to get started is with our yeoman generator. Open your terminal and type: # install yeoman npm install -g yo # install the react-server generator npm install -g generator-react-server # make a new react-server project in the CURRENT directory yo react-server # run the new app npm run start # go to http://localhost:3000 That hooks you up with react-
今からでも読んでおきたいReact.js入門資料12選
Facebookが提供しているJavaScriptライブラリ・React.jsは「Yahoo!」「Airbnb」「Reddit」「Netflix」などで採用されています。 日本でも注目され始めているので、React.jsを使ってみたい方は多いのではないでしょうか。 これからReact.jsを学ぶ方の参考になるReact.jsの入門資料（サイト・記事・スライド）を12個ご紹介します。 他のJavaScriptフレームワークからReact.jsに乗り換えようか迷っている方の参考になる資料も紹介しています。 React.jsの学習の参考になるサイト・記事 今話題のReact.jsはどのようなWebアプリケーションに適しているか？ Introduction To React─ Frontrend Conference / HTML5 Expert.jp https://html5experts.j
Facebook公式のcreate-react-appコマンドを使ってReact.jsアプリを爆速で作成する - Qiita
新規に作るReact.jsプロジェクトの、新しい始め方について書きます。スターターキットの代わりにどうぞ。 React.jsのひな形を簡単に作れるcreate-react-appが公開されました (2016/07/22) Launching create-react-app, a no config getting started experience, #nomorejsfatigue https://t.co/fqVWgn7w5t — React (@reactjs) July 22, 2016 Facebook(React.js開発元)がきょう、React.jsアプリを素早く作成するコマンドラインツール、create-react-appを公開しました。 公式ブログ記事: "Create Apps with No Configuration" GitHub: facebookincub
webpackを使った Rails上でのReact開発 - クックパッド開発者ブログ
はじめに こんにちは、投稿開発部エンジニアの芳賀です。 既存のRailsプロジェクトの中でReact.jsを利用する機会があったので、その時にやったことについてまとめてみます。 私自身は普段RailsのサーバサイドとCoffeeScriptが中心で、最近のJavaScript開発環境についてあまりキャッチアップできていなかったのですが、それらの状況を把握しつつ試行錯誤で開発していった経験から、できるだけ「React採用してみたいけどJavaScript界隈よくわからない目線」で書いてみようと思います。 RailsでReact.jsを使ういくつかの方法 2016年時点で、RailsでReact.jsを使う方法はいくつかあって、どれを採用するかで悩みました。 vendor/assets/javascripts にreact.jsを置いて利用する react-rails gem を利用する br
Facebookの競合他社はReact.jsが使えない？
React v16リリースと共にMITライセンスへ https://facebook.github.io/react/blog/2017/09/26/react-v16.0.html#mit-licensed 16系だけでなく、すぐに移行できない人向けに、15系の主要バージョンもMITライセンスに変更されました。 2017/09/24追記 近日リリース予定のReact v16にて、ライセンスをBSD + PatentsからMITに変更予定とのPOSTがありました。 We're relicensing React, Jest, Flow, and Immutable.js under the MIT license. https://t.co/3XD0z49UsS — React (@reactjs) 2017年9月22日 但しまだGitHubでLICENSE*ファイルの変更やPATENTS
React on Railsの基本理念
原文: The React on Rails Doctrine ジャスティン・ゴードン(2016年1月24日) このドキュメントはRailsの基本理念(訳注: 日本語版)に対する拡張と補足です。まだそのドキュメントを読んでいない場合、先にそちらを読むことをお勧めします。 React on RailsのREADMEの中で述べているように、このプロジェクトの目的は、Ruby on RailsとモダンなJavaScriptのツールやライブラリを統合するための、強固で最適なフレームワークを提供することです。react_on_railsに何をいれるべきかを考えるとき、その機能が RailsとモダンなJavaScriptとの共通部分と関連があるかどうかを自問します。RailsのビューとReactコンポーネントを統合するためのビューヘルパーがよい例です。答えがイエスである場合、その機能はここにあるべきで
なぜReactなのか - しゅみは人間の分析です
なぜReactなのか React, Cyclejs, Reduxを学んだ上でこれらの技術が何を解決したのかまとめてみる。発想はオリジナルではなく、今まで私が読んだ記事から拝借した解釈などが含まれている。たぶんReact, Fluxを学んだ人にとっては当たり前の感覚を言語化しているだけの内容となる。 TL;DR Q: なぜReactなのか A: フロントエンドが自由度の高いGUIアプリケーションになった。既存の手法では自由度の高いGUI実装を人間にわかりやすく管理することが難しくなった。 自由度の高いGUIな世界 自由度(複雑さ)の低い時代ではrender済みのDOMの上にDOMを操作する(jQueryによる)UIを載せる設計でも十分だった 現代のwebフロントエンドではVisual StudioやXcodeで作るネイティブGUIと同等の複雑さを求められる時代になっている jQueryだけで
早く・それなりの UI を実現する React コンポーネントセット 16 選 - Qiita
これまで、開発者が「早く・それなりの UI 」を実現するために、Bootstrap などの CSS フレームワークが重宝されてきました。 しかし今では、React などのライブラリを使って UI をコンポーネント化するようになってきています。 React であっても、事前に CSS フレームワークを読み込んでおき、クラス名を付与することでこれまでと同じように使うことができます。 ただ、既存の CSS フレームワークは内部で jQuery を使用していることが多いので、React と jQuery を共存させるか、jQuery 部分を自前で実装しないといけません。 そこで React で「早く・それなりの UI 」を作れそうな React コンポーネントセットを手当たり次第に調べてみました。 Note: Web 向け UI の コンポーネントのみとなっています。React Native や
5年間開発しているRailsプロジェクトにReact + Reduxを導入した話 by Shimpei Takamatsu | Wantedly, Inc.
こんにちは、WantedlyのWebエンジニアの高松です。 このエンジニアブログでも何度かReact関連の話題が出ていますが、WantedlyではReact + Reduxを中心としたWebフロントエンドの技術スタックを導入して開発しています。 今回はスタックの導入方法や勘所について、詳しく解説してみたいと思います。特に既存のRails環境にReactなどの導入を検討していらっしゃる方の参考になれば、と思います。 今回の内容は以前発表した以下のスライドを元にしています。 これまでのWantedlyのフロントエンド開発 まず、今回のスタック導入前のWantedlyのフロントエンド開発がどのようなものであったのかについてご説明します。 Wantedlyの開発リポジトリを参照すると、最初のコミットは2011年9月になっています。現在は社内でもマイクロサービス化の動きが始まっていますが、基本的にW
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Reactで学ぶ！いまどきのWeb開発
Reactの最新動向とベストプラクティス
