車輪の二度漬け

railsを触っていましたが、最近はreactに興味あります。

Next.js + Vercel + TypeScript + Firebaseでアプリを作る。GraphQL 死合終了編

前回の記事からだいぶ間が空いてしまった。 ブログの管理画面を見るまで2月には記事を書いてるもんだと思ってた。 最後に作ってたブランチは以下: サーバー側:https://github.com/Ryu-u/soundfind_app/tree/feature/create-posts-new-page フロント側: ht…

Next.js + Vercel + TypeScript + Firebaseでアプリを作る。GraphQL事前準備編

0. 今回やること 1. 事前準備 データの設定 Cloud Functionsで使うTypeScriptファイルの自動再コンパイル設定 2. Apollo Serverの設定 3. GraphQLの設定 4. VSCodeの設定 5. 所感 6. その他参考にしたサイト等 0. 今回やること 前回の記事はこちら。 今回は…

Next.js + Vercel + TypeScript + Firebaseでアプリを作る。環境構築編

Next.jsの勉強をしようと思い、せっかくなので自分の知らないところややったことないことのキャッチアップをしつつプリを作ってみることにした。 構成としては、VercelとFirebaseあたりを使う想定。 今回は環境構築だが、フロントとバックの疎通などはまだ未…

Jestとreact-testing-libraryを使ったTypeScript + ReactのテストをCircleCIで回す

ReactのテストをCircleCIで自動化したかったので、ネットで色々調べつつ簡単に環境を構築してみた。 やったこと サンプルのテストを作成(jest + react-testing-library + TypeScript) CircleCIで自動テスト テスト結果をSlackに通知 やった内容 CircleCIの設…

【WIP】React + TypeScriptでOAuth認証【修正予定】

ブログのネタにと思って、ここ最近はずっと私生活でいろいろあったりして、なかなか進められていなかったReactでOAuth認証を行うサンプルコードをようやく仕上げた。 github.com 着手がブツ切りになったせいで、コードがぐちゃぐちゃしてたり、いたるところ…

RailsのviewにReactを使ったのでメモ(React + TypeScript + webpacker)

最近仕事でRailsで新規に作るviewにReactを使うということをやったので、それについて書いておく。 前提 これまではSprockets + CoffeeScriptで画面を作成していた React + TypeScriptで新規画面を作りたい 実際に画面を作るのはまだまだ先の話なので、現段…

LoLで出会ったプレイヤーを忘れないアプリを作った

ちょっと前にReact勉強のために作り始めて、その後、社内で勉強会のネタに使ったあとそのまま放置していたが、コードだけ整えて一旦公開することにした。 作ったもの スラム街として有名なLeague of Legends(LoL)で出会ったステキなプレイヤーをメモとともに…

Expressの公式ドキュメントを読んでみた

expressjs.com ちなみに、日本語版はこっち⇨ Express - Node.js Web アプリケーション・フレームワーク 僕の今いる会社はRailsでの開発がメインなのでバックエンドはほとんどRailsを使っている。 だが、最近はRailsは確かに便利だと思いつつも、Railsのなん…

React Routerの公式ドキュメントを読んでみた

reacttraining.com まだそんなにガチで使ったことなかったからざっくり流し読みした程度。 reacttraining.com まずはこのPhilosophyページを読むとわかりやすいと思った。 以下雑感。 Redirect reacttraining.com こう言う風にコンポーネントを書くようにし…

Reduxの公式ドキュメントを読んでみた

redux.js.org 読んでみたはいいけど、全然頭に入ってこねー。 正直、仕事でReduxを使ったことがない。 仕事でやったことあるのは、RailsのviewをReactで作るって感じで、stateもそんなに大きくないからHooksで十分だった。 個人開発でも大体Hooksで書いてし…

Reactの公式ドキュメント読んでみた その3 HOOKS編

今回はReactのHooksの公式ガイドを読んでみた。 Hooksはこれまで仕事などで使っていたので、割とわかっていると思っていたが、思いのほか知らないことが多かった。やっぱり公式を読んでおくのは大事。 ただ、まだパフォーマンスを気にするほどの画面は作った…

Reactの公式ドキュメント読んでみた その2ADVANCED GUIDES編

前回はReactの基本コンセプトを読んだので、今回は次のADVANCE GUIDESを読んでいこうと思う。 ただ、今回は前回ほどの量はなさそう。 理由としては、これどのタイミングで使うんだ...?ってものがあったり関数コンポーネントを使うようになってる現在ではあま…

Reactの公式ドキュメント読んでみた その1 MAIN CONCEPT編

最近はReactのドキュメントに目を通している。 以前にいきなり納期がタイトなReactの案件を振られて、四苦八苦しながらコード書いて以降、Reactについてわかった気になっていたが、改めてドキュメントを読むと色々と学びがあったのでメモしておく。 ある条件…

react + redux-thunk + typescriptでよくあるカウンターのサンプル

redux-thunkをreactとtypescriptで使ってみたかったので、よくある簡単なカウンターを作ってみた。 ただ、typescriptに慣れてなかったりそもそもreduxに触ったばっかりって感じで、表示のガワ部分を作ったあとのactionやreducerあたりは全部presentationalな…

最近の学び

仕事で久々にrailsでview周りを触ったので、そのことについて書いておく。 selectでdata-id ユーザーへの情報の一覧を表示する管理者向けの画面に、その情報がユーザーへ公開されているか否かを表示する項目があった。 これまでは別途情報ごとの編集画面に行…