もふもふ技術部

IT技術系mofmofメディア

React

RedwoodJSに入門してみた(第5回: 実際に使ってみて感じたこと)

この記事について この記事は、全5回の第5回です。 RedwoodJSに入門してみた(第1回: アプリ作成〜モデル作成) RedwoodJSに入門してみた(第2回: CRUD作成 API編) RedwoodJSに入門してみた(第3回: CRUD作成 WEB編) RedwoodJSに入門してみた(第4回: dbAu…

RedwoodJSに入門してみた(第4回: dbAuthによる認証)

この記事について この記事は、全5回の第4回です。 RedwoodJSに入門してみた(第1回: アプリ作成〜モデル作成) RedwoodJSに入門してみた(第2回: CRUD作成 API編) RedwoodJSに入門してみた(第3回: CRUD作成 WEB編) RedwoodJSに入門してみた(第4回: dbAu…

RedwoodJSに入門してみた(第3回: CRUD作成 WEB編)

この記事について この記事は、全5回の第3回です。 RedwoodJSに入門してみた(第1回: アプリ作成〜モデル作成) RedwoodJSに入門してみた(第2回: CRUD作成 API編) RedwoodJSに入門してみた(第3回: CRUD作成 WEB編) RedwoodJSに入門してみた(第4回: dbAu…

RedwoodJSに入門してみた(第2回: CRUD作成 API編)

この記事について この記事は、全5回の第2回です。 RedwoodJSに入門してみた(第1回: アプリ作成〜モデル作成) RedwoodJSに入門してみた(第2回: CRUD作成 API編) RedwoodJSに入門してみた(第3回: CRUD作成 WEB編) RedwoodJSに入門してみた(第4回: dbAu…

RedwoodJSに入門してみた(第1回: アプリ作成〜モデル作成)

はじめに 今回から、全5回でRedwoodJSを使ってみて、その概要と所感などを公開していく。 RedwoodJSに入門してみた(第1回: アプリ作成〜モデル作成) RedwoodJSに入門してみた(第2回: CRUD作成 API編) RedwoodJSに入門してみた(第3回: CRUD作成 WEB編) …

RedwoodJSのファーストインプレッション

RedwoodJSというフレームワークがめちゃくちゃ良さそうなので入門してみます。 RedwoodJS is 何? Redwood is the full-stack web framework designed to help you grow from side project to startup. Redwood features an end-to-end development workflow …

新規サービスを作るときに使う技術選定

mofmofでは新規サービスをゼロから開発することが多くあります。 その際にshwldがどのように技術選定をしているのかを書いてみます。 こちらの記事がとても参考になる内容で、私なりにも書いてみようと思いこの記事を書いています。 https://zenn.dev/moga/a…

既存Railsアプリに後からReactとTypeScriptを導入する

react-rails gemを使う方法 react-rails gemを使わない方法 TypeScriptを導入する 今回は、弊社メンバーが研修時に実装した課題のアウトプットがちょうど良かったので、そこに後からReactとTypeScriptを導入していきます。 この課題は、万葉さんが公開してい…

【Recharts】Reactでレーダーチャートを描画する

今回は、Reactでチャートを描画するライブラリ、Rechartsを使ってレーダーチャートを描画します。 早速余談ですが地名からじゃんけん力を算出してじゃんけんできるサービスをつくりました。グー力(りょく)とかが算出されます。残念ながら対人戦はできません…

【GQless紹介】スマートなGraphQL client GQlessを使ってqueryを発行する

普段はApolloを使っているのですが、GQlessというものがあると聞き試してみました。 パッと見てめちゃくちゃ便利そうだったので、そのあたり紹介できればと思います。 コードはここに置いておきました。 https://github.com/yubachiri/play-gqless 特長 環境…

Apolloをストアとして活用する Next.jsのwith-apollo exampleをベースに解説

2020終わり頃のApollo Client 3から、 reactive variables なるものが追加されたようです。リアクティブな変数を持たせることができるようになったということです。 New in Apollo Client 3, reactive variables are a useful mechanism for storing local s…

ReactのuseCallbackを3分くらいでふわっと理解する

注: 「いつ使うべきなのか、どう重要なのか」は多くの先人が解説してくださっているため、この記事は具体例をもとに挙動を端的に理解することを目的にしています。 参考にした記事: https://qiita.com/uehaj/items/99f7cd014e2c0fa1fc4e https://qiita.com/s…

Apolloのキャッシュ更新入門 writeQuery / cache.modify / 自動

GraphQLのクライアントとしてデファクトスタンダードともいえる立ち位置にあるApollo。 キャッシュ機能が非常に便利な一方で、ちゃんと理解していないと沼にハマることもあります(n敗)。 最近はサーバをgraphql-rubyで書いてフロントはReactで書くというのを…

React + Firebase + Hasuraで体験する快適なGraphQL生活

元々graphql-rubyとReactで生きていたんですが、どうやらHasuraなるものが良いらしいと知り、掲題のスタックで社内書籍管理サービスをつくってみました。 楽しかったのでちょっと書いてみます。 具体的には認証つきHasuraからusersを取得できるところまで。 …

Expo + ReactNative + FirebaseでFacebook認証を実装する

Expo + ReactNativeで認証機能の実装を試してみる。本当はTwitter認証を実装したいんだけど、公式の情報がFacebook認証だったので、まずはFacebook認証を実装する。 プロジェクトを準備 FirebaseとFacebook側の設定 認証機能を実装する プロジェクトを準備 …

React + GraphQL + ApolloでGitHubから自分の過去のプルリクエストのタイトルを振り返ってみる

バージョンとか 何を作るか セットアップする 不要なものを整理しておく GraphQLを入れる GitHubトークンを入手する Clientの作成 環境変数を設定する GraphQLを使ってアクセスしてみる クエリを書く 今じわじわとやりたい欲が高まっているGraphQLとReactで…

Expo + ReactNative + Firestoreでラーメン一覧から詳細画面への画面遷移を実装する

前回、Firestoreから取得したデータを3カラムレイアウトで表示するところまで実装できたので、今回は、一覧画面から詳細画面へ遷移する実装をしてみる。 Expo + ReactNative + Firestoreで取得したデータを3カラムレイアウトで表示する とりあえず画面遷移だ…

Expo + ReactNative + Firestoreで取得したデータを3カラムレイアウトで表示する

前回、Firestoreからデータを取得してとりあえずログに表示するところと、3カラムレイアウトを組むところを試したので、今回は取り出したデータを3カラムレイアウトで画像表示してみます。 Expo + React Native + Firestoreでデータを取得してみる Expo + Re…

Rails5.1.0で--webpack=reactを試してみた

mofmofでRailsエンジニアをしている山形です。 好きな領域はフロントエンドで、もともとWebデザインをやっていたバックグラウンドを活かしてUIデザインを含めた開発をやっていたりします。 さて本日(US時間2017.4.27)Railsの新しいバージョン5.1.0がリリー…