バックエンド出身エンジニアがReact/Next.jsに入門してみた話
今日からあなたはフロントエンドエンジニアです！ え、面接でバックエンド・インフラしかやってなかったって言ったのに！？フロント！？どうしよう 😭 [1] どうも、株式会社カナリーでお部屋探しマーケットプレイスの CANARY を開発している shusann です！ 本エントリーでは、 もしあなたが明日から急にフロントエンドエンジニアを任されることになっても困らないよう、私がこの半年間で何をどうやって学んできたかをシェアすることで道しるべとなれることを目指しています。 これから同じ境遇に立つ人やフロントエンド興味あるけど何から手を付ければいいかわからないようなエンジニアにとって、この記事が参考になれば嬉しいです 😍 とはいえ、本エントリーは半自伝的な記事で「ああ、こんなことやってたんだ」という読み物として話半分に読んでいただければ幸いです。 自己紹介 本題の前に、半年前の入社当時の自分の状
今Reactを使うならピュアなCSSをサポートするUIフレームワークやライブラリを選定するのがマルそうと思った話
最近個人開発でNext.jsの環境を立ち上げた際に、スタイリングをどうやってやろうかなと迷ったので初心に帰って最近のスタイリングについて調べ直してみました。結構面白かったので、記事にまとめることにしたので、よかったら読んでみてください。 本記事では以下に触れます。 React界隈におけるスタイリング方法の歴史的変遷 なぜタイトル通りピュアなCSSをサポートする機構が良いと感じたか おすすめのスタイリング機構 ざっと振り返るReactのスタイリング方法の歴史的変遷 私が最終的にピュアCSSを推したいと思った理由をお話する前に、爆速で変わり続けるReactとともに、スタイリングはどう変遷していったのかをざっとまとめたいと思います。 （こういうのって、歴史と組み合わせて理解すると、結構深まりますよねと思っているのは私だけでしょうか…、いえそんなことはないはず😊） 大昔: CSS Modules
GoエンジニアがReactにチャレンジして驚いた5つのこと
はじめに こんにちは。Magic Momentでエンジニアをしている伊藤です。 いつもはMagic MomentのプロダクトであるMagic Moment Playbookの開発に携わっています。 元々はGo言語エンジニアとしてMagic Moment Playbookのバックエンド開発に参加し始めました。 ですが、今回フロントエンドエンジニアとしてフロント側の開発に参加することとなりました。 Go言語を使っていたエンジニアがReactを使い始めて驚いたこと、理解しづらかった部分などを書いていこうと思います。 これからフロントをやってみたいと思うバックエンドエンジニアの方の参考になれば幸いです。 そもそもReact.jsとは Magic Moment PlaybookのフロントエンドはReact.jsを使って構築されていますが、そもそもReactとはなんなのでしょうか。 ReactはFac
Reactベストプラクティスの宝庫！「bulletproof-react」が勉強になりすぎる件
Reactアプリケーションのアーキテクチャの一例として公開されているGitHubリポジトリ「bulletproof-react」が大変勉強になるので、私自身の見解を交えつつシェアします。 ※2022年11月追記 記事リリースから1年ほど経過して、新しく出てきた情報や考え方を盛り込んだ続編記事を書いていただいているので、こちらも併せて読んでいただければと想います（@t_keshiさんありがとうございます！）。 ディレクトリ構造が勉強になる まずはプロジェクトごとにバラつきがちなディレクトリ構造について。 ソースコードはsrc以下に入れる bulletproof-reactでは、Reactに関するソースコードはsrcディレクトリ以下に格納されています。逆に言えば、ルートディレクトリにcomponentsやutilsといったディレクトリはありません。 たとえばCreate Next Appで作成
Reactを使うならRecoilも学べば良いと思うって話 - Grooves開発ブログ
こんにちは、 tbaba です。元々 Rubyist として入社していますが、ここ2〜3年はフロントエンド力の向上にも力を注いでおります。 突然ですが、React で状態を管理する時に何を使っていますか？クラスコンポーネントにしてクラスに状態をもたせている、Redux を使って管理している、React Hooks で管理している、などなど色々な選択肢があるかと思います。 そんな中で自分たちのチームは、現在社内向けのアプリケーションにおいて、フロントエンド開発をする際に Recoil という状態管理ライブラリを使うことが多いです。そこで、今日は「なんでそれ使うの」「何が便利なの」みたいな話ができれば良いなと思います。 先に言っておくと、自分のスキルセットとしては「 TypeScript を利用した開発2年目」「React を利用した開発3年目」「基本は Ruby on Rails が得意なバ
TypeScript で書く React コンポーネントを基礎から理解する - Qiita
この記事は Recruit Engineers Advent Calendar 2019 の 23日目の記事です。 TypeScript のプロジェクトで React コンポーネントを書いていると、コンパイラに怒られることがたびたびあります。ネット上にあるサンプルコンポーネントが JavaScript で書かれていると、プロジェクトにもってきたときにコンパイルできないということはよくあるんじゃないでしょうか。any でコンパイラを黙らせることもできますが、せっかく TypeScript を使っているので、安全に解決したいよねってことでこのような記事を書きました。 型定義は @types/react@16.9.17 にしたがっています。目次をみて、この程度のことはもう知っているよという方は react-typescript-cheatsheet をみてください。React + TypeScr
9 Ways To Implement CSS in React JS
Hey, guys. Today I want to tell you about css in React app. So it was that styles are very important around in web. There are no sites that look good without css. Many developers and companies do not pay enough attention to styles. Of course if you are javascript (react) developer you would like to create more javascript logic and spend less time with styles. Or your team has special people who cr
2020年のフロントエンドマスターになりたければこの9プロジェクトを作れ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 以下はSimon Holdorf( dev.to/ Twitter / GitHub )による記事、9 Projects you can do to become a Frontend Master in 2020の日本語訳です。 9 Projects you can do to become a Frontend Master in 2020 Introduction あなたがプログラミングの初心者であるか、既に経験豊富な開発者であるかにかかわらず、この業界では、急速な変化に追いつくために新しい概念と言語・フレームワークを学び続けるこ
React, Redux, GraphQLを学べるオンライン教材「Full Stack Open 2019」がとても良かった - FRTKL
この記事はコネヒト Advent Calendar 2019の11日目の記事です！ qiita.com はじめに 半年ほど前から新規事業のチームで仕事するようになり、主な技術スタックもPHPからGo, Next.jsへと変わりました。 その中で、特にフロントエンドのテスト周りにおいてキャッチアップ不足を感じていたのですが、たまたま見つけた*1「Full Stack Open 2019」という教材がとても良かったので紹介したいと思います。 「Full Stack Open 2019」とは fullstackopen.com フィンランドのヘルシンキ大学で実際に使われているテキストベースのオンライン教材です。 Nodeで作られたREST APIとReactを使ったSPAの実装を通して、React・Redux・Node.js・MongoDB・GraphQLが一度に学べる教材となっています。 教材
Reactの最強フレームワークGatsby.jsの良さを伝えたい！！ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Gatsby.jsって？ この記事は**Gatsby.js Advent Calendar 2019 1日目**の記事です。 2日目の記事は**@aimofさんのJSの文法すら怪しいフロント初心者がblog用のgatsby starter（っぽいもの）を自作・公開してみた**です!! Gatsby.jsはReactで作られた静的サイトジェネレーターです。内部的にGraphQLを用いてデータを取得し、markdownからHTMLを生成、などの処理を簡単に行うことができます。 静的サイトジェネレーターが何かと言うと、何かしらの言語で書かれた
Reactの無料教材「Full Stack Open 2019」 - JavaScript勉強会
フィンランドのヘルシンキ大学のプログラミング講座が無料で公開されています。 fullstackopen.com Learn React, Redux, Node.js, MongoDB, and GraphQL Reactなど、JavaScriptでWebアプリを作る際に使われる技術について学習できます。 （紹介記事） developer.feedforce.jp この講座をブックマークして、時間だけが過ぎてしまったので、今日から読み始めてみたいと思います。 （今からやらないと年を越してしまう可能性もあるｗ） React利用の説明方法を参考にしてみたいと思います。 ライセンス Authors and License The course material is written by Matti Luukkainen. Numerous people have improved and co
React開発者向けのコンポーネントコレクション「React Rainbow Components」
◆ React Rainbow Components https://react-rainbow.web.app 紹介 「React Rainbow Components」は、ReactでWebアプリを簡単構築するためのコンポーネントコレクションです。 $ npm install react-rainbow-components --save $ yarn add react-rainbow-components npmまたはyarnでインストール可能 Webアプリでよく使われる60以上のコンポーネントが提供されています。 その他にも、管理者ツールやセットアップ手順の解説 デザインライブラリも提供されており、これ1つでReactを使ったWebアプリが構築できるような意気込みを感じます。 ページネーションや タブ スピナーとといったコンポーネントがimport1つで実装可能ですので、Reac
【2019年版】バックエンドエンジニアが React でモダンなフロントエンド開発を始めるまで - Feedforce Developer Blog
id:daido1976 です。入社してからあっという間に1年が経っていました。 直近3ヶ月ほどプライベートでフロントエンド開発の勉強をしていたのですが、ここ数年で CSS の Grid や React の Hooks が新しく導入されたことなどもあり、少し古いコンテンツだと教材として役立たない1 と感じることが多かったので、本記事では私が実際にやってみた中で 2019年時点で オススメできると判断した教材や学び方を皆さんにご紹介したいと思います。 はじめに やったこと JavaScript MDN の JavaScript の部分を読む & 手を動かす JavaScript Primer を読む YouTube 動画で Promise を学ぶ デバッグ方法を学ぶ React React 公式のチュートリアルを2周する egghead.io の動画で Redux を学ぶ ヘルシンキ大学の
Reactビギナーズガイドをtypescriptで勉強し直してわかったこと①【mixinは使うべからず（というか使えない）】 - Qiita
自己紹介と今更ながらreactの勉強を一から 私のことをまずお伝えすると、ここ数年は、とあるベンチャー企業のシステム部のマネージャーをしていました。 reactが出た時はなんだjqueryみたいな便利なライブラリでしょ、jsxなんてテンプレートエンジンでしょ、ぐらいにしか思っていなかったのが、今や、es6だのtypescriptだのgulpだのwebpackだの知らない用語がいっぱいでてきて、jsのフロント周りの開発についていけなくなってしまった浦島太郎sのうちの一人です。 今やhtml、さらにはjavascriptやcssですらベタ書かない時代になっていて、「俺がわからないライブラリは使うな！トランスパイラなんて信用できるか！！」なんて言えるはずもなく、さすがに現場のエンジニアとの意思疎通に支障を来すので、勉強することに。 オライリージャパンの「Reactビギナーズガイド」を買ってみる
GitHub - ReactTraining/react-broadcast: Reliably communicate state changes to deeply nested React elements
react-broadcast provides a reliable way for React components to propagate state changes to their descendants deep in the component hierarchy, bypassing intermediaries who return false from shouldComponentUpdate. It was originally built to solve issues that arose from using react-router together with react-redux. The router needed a safe way to communicate state changes to <Link>s deep in the compo
React Holiday, 2023
This is a 25 day exploration of modern React. This year we're getting back to basics — building exceptional, extensible UI. Together, we'll build one component that touches everything: state, refs, context, composition, custom hooks, component modularization, and even accessibility! Learn everything you need to know about building robust UIs in React 🚀
少人数でのフロントエンド開発をクイックに進めるために - Qiita
この記事は 第2のドワンゴ Advent Calendar 2017 7日目の記事です。 昨日の記事は@yue82さんでRTL設計スタイルガイドのアンチパターンをやってみたでした こんにちは。ニコニコ静画でフロントエンド開発を行っているnagisioです。 今年も冬コミに落ちてしまいました 去年の記事はRe:ゼロから始めるElectron開発生活でした。Electronに関して、残念ながら最近はあまり書いてないのですが、Reactは既に趣味でも仕事でも必須なフレームワークとなりました。 本記事ではそんなReactを用いたプロダクト開発について、どのように開発を進めていくのかを追っていきます。 はじめに（宣伝枠） ニコニコ静画チームにおいて、フロントエンドでの新規開発は基本的に少人数（１〜２人程度）で行っています。比較的小規模な開発が多く、例えば直近でリリースしたのがニコニコ漫画@C93です
ReactComponent のリファクタリング指針 - freee Developers Hub
エンジニアの id:t930 です。 freee Developers Advent Calendar 2017 19日目いきます。 React はその名前を聞くようになってから3年以上が経過し、Webアプリケーション開発の文脈においてはもはや枯れた技術と言えるでしょう。会計freeeでも2015年ごろに Backbone.js から React へのリプレースを行い、現在では Reactコンポーネントだけでも900近いファイルが存在しています。当然このような規模でやっているとリファクタリングも必要になってくるわけで、本記事ではそんな中で得られたReactコンポーネントにおけるリファクタリングの指針について紹介していきます。1 適切な単位に分割する React に限った話ではないですが、巨大で見通しの悪いコンポーネントはメンテナビリティや再利用性の低下を招きます。表示領域、責務、意味付けに
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【2024年】React, Tailwind CSSでメルカリクローンサイトを作ろう【入門】
GitHub - kay-is/react-from-zero: A simple (99% ES2015 less) tutorial for React
