React
「ここのページだけReact使いたいんだよな〜」とか「ページのここの部分にReact入れ込みたいんだよな〜」ということはありませんか? 今回はそんなあなたにReactを部分的に使用する方法を紹介します。 こちらの記事を応用していきます。↓ www.mof-mof.co.jp …
Rails7のアプリでJSのビルドツールはesbuildを使用します。 環境構築の方法はこちらを参照ください↓↓ www.mof-mof.co.jp ReactとTypeScriptをインストールする 1. 以下のコマンドで必要なパッケージをインストール yarn add typescript react react-dom reac…
この記事について この記事は、全5回の第5回です。 RedwoodJSに入門してみた(第1回: アプリ作成〜モデル作成) RedwoodJSに入門してみた(第2回: CRUD作成 API編) RedwoodJSに入門してみた(第3回: CRUD作成 WEB編) RedwoodJSに入門してみた(第4回: dbAu…
この記事について この記事は、全5回の第4回です。 RedwoodJSに入門してみた(第1回: アプリ作成〜モデル作成) RedwoodJSに入門してみた(第2回: CRUD作成 API編) RedwoodJSに入門してみた(第3回: CRUD作成 WEB編) RedwoodJSに入門してみた(第4回: dbAu…
この記事について この記事は、全5回の第3回です。 RedwoodJSに入門してみた(第1回: アプリ作成〜モデル作成) RedwoodJSに入門してみた(第2回: CRUD作成 API編) RedwoodJSに入門してみた(第3回: CRUD作成 WEB編) RedwoodJSに入門してみた(第4回: dbAu…
この記事について この記事は、全5回の第2回です。 RedwoodJSに入門してみた(第1回: アプリ作成〜モデル作成) RedwoodJSに入門してみた(第2回: CRUD作成 API編) RedwoodJSに入門してみた(第3回: CRUD作成 WEB編) RedwoodJSに入門してみた(第4回: dbAu…
はじめに 今回から、全5回でRedwoodJSを使ってみて、その概要と所感などを公開していく。 RedwoodJSに入門してみた(第1回: アプリ作成〜モデル作成) RedwoodJSに入門してみた(第2回: CRUD作成 API編) RedwoodJSに入門してみた(第3回: CRUD作成 WEB編) …
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…
react-rails gemを使う方法 react-rails gemを使わない方法 TypeScriptを導入する 今回は、弊社メンバーが研修時に実装した課題のアウトプットがちょうど良かったので、そこに後からReactとTypeScriptを導入していきます。 この課題は、万葉さんが公開してい…
今回は、Reactでチャートを描画するライブラリ、Rechartsを使ってレーダーチャートを描画します。 早速余談ですが地名からじゃんけん力を算出してじゃんけんできるサービスをつくりました。グー力(りょく)とかが算出されます。残念ながら対人戦はできません…
普段はApolloを使っているのですが、GQlessというものがあると聞き試してみました。 パッと見てめちゃくちゃ便利そうだったので、そのあたり紹介できればと思います。 コードはここに置いておきました。 https://github.com/yubachiri/play-gqless 特長 環境…
2020終わり頃のApollo Client 3から、 reactive variables なるものが追加されたようです。リアクティブな変数を持たせることができるようになったということです。 New in Apollo Client 3, reactive variables are a useful mechanism for storing local s…
注: 「いつ使うべきなのか、どう重要なのか」は多くの先人が解説してくださっているため、この記事は具体例をもとに挙動を端的に理解することを目的にしています。 参考にした記事: https://qiita.com/uehaj/items/99f7cd014e2c0fa1fc4e https://qiita.com/s…
GraphQLのクライアントとしてデファクトスタンダードともいえる立ち位置にあるApollo。 キャッシュ機能が非常に便利な一方で、ちゃんと理解していないと沼にハマることもあります(n敗)。 最近はサーバをgraphql-rubyで書いてフロントはReactで書くというのを…
元々graphql-rubyとReactで生きていたんですが、どうやらHasuraなるものが良いらしいと知り、掲題のスタックで社内書籍管理サービスをつくってみました。 楽しかったのでちょっと書いてみます。 具体的には認証つきHasuraからusersを取得できるところまで。 …
Expo + ReactNativeで認証機能の実装を試してみる。本当はTwitter認証を実装したいんだけど、公式の情報がFacebook認証だったので、まずはFacebook認証を実装する。 プロジェクトを準備 FirebaseとFacebook側の設定 認証機能を実装する プロジェクトを準備 …
バージョンとか 何を作るか セットアップする 不要なものを整理しておく GraphQLを入れる GitHubトークンを入手する Clientの作成 環境変数を設定する GraphQLを使ってアクセスしてみる クエリを書く 今じわじわとやりたい欲が高まっているGraphQLとReactで…
前回、Firestoreから取得したデータを3カラムレイアウトで表示するところまで実装できたので、今回は、一覧画面から詳細画面へ遷移する実装をしてみる。 Expo + ReactNative + Firestoreで取得したデータを3カラムレイアウトで表示する とりあえず画面遷移だ…
前回、Firestoreからデータを取得してとりあえずログに表示するところと、3カラムレイアウトを組むところを試したので、今回は取り出したデータを3カラムレイアウトで画像表示してみます。 Expo + React Native + Firestoreでデータを取得してみる Expo + Re…
mofmofでRailsエンジニアをしている山形です。 好きな領域はフロントエンドで、もともとWebデザインをやっていたバックグラウンドを活かしてUIデザインを含めた開発をやっていたりします。 さて本日(US時間2017.4.27)Railsの新しいバージョン5.1.0がリリー…