wheatandcatの開発ブログ

React Nativeで開発しているペペロミア & memoirの技術系記事を投稿してます

GraphQL + Firestoreでクエリカーソルを使用したページングを実装①

memoirの1週間の振り返り機能でGraphQL + Firestoreでクエリカーソルを使用したページングを実装しました。 Pull Request github.com ↑だと、ページング処理はうまく行かないパターンがあったので、さらに以下で修正 github.com 実装 GraphQLのページングの…

GAEをGitHub Actionsでデプロイできるようにする

今回はチーム開発なので、常の最新の状態がデプロイされている状態にしたかったので、まずbackend側のデプロイの自動化をしました。 Pull Request github.com 実装 今回はGitHub Actionsでデプロイできるようにした。 コードは以下の通り ■ .github/workflow…

Firestoreの定期バックアップを実装する

memoirのデータは全てFirestoreで管理しているのでバックアップを実装したのでメモとして残しておく コード github.com 実装 ほぼ以下のドキュメントの通り作成しただけなので手順をそのまま記載 firebase.google.com まず、保存に使用するbucketをCloud Sto…

moqを使ってGo言語のテストコードを書く

前にGoMockを使ったテストコードについて記事にした事がありました。 www.wheatandcat.me 当時はGoMockしか知りませんでしたが、moqというライブラリの方が簡単に使えるという話を記事をみかけたので、memoirではmoqを使用してGo言語のテストを書いてみまし…

Zennのスクラップで開発日記を投稿する

memoirの開発のログを見返せるようにしたなと思い、Zennのスクラップを使用して開発日記を投稿してみたら結構良さ気だったので、記事にしました。 Zennのスクラップについて zenn.dev ↑に記載の通りで「スレッド形式で「作業ログ」や「試行錯誤の過程」を投…

Recoilを使ってみる

memoirにRecoilを導入してみた Recoilを採用した理由 ペペロミアでは画面を跨いでのステートは全てContext APIを使用していたが、以下の理由で若干悩ましい点があった。 Context APIだと自由に書けてしまい、実装機能が増えるにつれて独自の実装が増えてしま…

memoir開発日記 ①

最近新しいアプリの開発を行っているので、それについて記事にしました。 開発中のアプリ アプリ名: memoir 開発の動機 私の家庭では週1回振り返りの時間を設けていて、その時間では互いに今週あったことを会話で共有して議事録に残すのを習慣にしています。…

@graphql-eslint/eslint-pluginを導入してgqlをlintする

チーム開発でGraphQLを利用していると、気づかぬ間にdeprecatedのフィールドを参照していたことがあったので、それの防止策を紹介 Pull Request 以下で導入 github.com 内容 @graphql-eslint/eslint-pluginを導入しました。 github.com ※似たような感じで名…

Tailwind CSSの紹介

前の記事で書いたサイト作成で、Tailwind CSSを使ってみて、かなり良いなーと思ったので紹介 www.wheatandcat.me Tailwind CSSとは tailwindcss.com Tailwind は CSS フレームワークです。 既存のBootstrapやMaterialize CSSなどフレームワークと比較して非…

Atomic Designが難しい人向けにカテゴリー分けの参考サイトを作ってみた

概要 Atomic Designをプロジェクトで採用しているが、実際にチームで運用してみると認識よってカテゴリーがズレてルールが崩壊することがあるかなあと思います。 なので、そんな人向けにAtomic Designのカテゴリー分けの参考になりそうなサイトを作成しまし…

ペペロミア v3.0.0 リリースノート

GitHub Peperomia マイルストーン Peperomia v3.0.0 PeperomiaBackend v3.0.0 PeperomiaWeb v3.0.0 PeperomiaTool v3.0.0 対応内容 [Peperomia]APIの新設計と新デザインに合わせて修正する [Peperomia]新設計に合わせてログイン前をSQLite、ログイン後をGrap…

配色ガイドラインに合わせてtheme設定を作る

アプリのthemeの整理のため配色ガイドラインを設けてそれに合わせて実装しました。 配色ガイドライン https://www.figma.com/file/YYon1ahSQ7W15Mug0LsovHws/%E3%83%9A%E3%83%9A%E3%83%AD%E3%83%9F%E3%82%A2?node-id=2178%3A653 Figmaで画像の配色ガイドライ…

ログイン前: SQLite、ログイン後: write:RESTful API + read:Firestoreからログイン前: SQLite、ログイン後:GraphQL構成への移行

以下の2つのPull Requestで諸々のログイン前: SQLite、ログイン後:GraphQL構成への移行が完了しました github.com github.com ペペロミアのv2→v3のバージョンアップで、この辺の構成を一気に修正される予定です。 なので、改めてv2→v3への変化を記事にまとめ…

Firestoreで全文検索の機能を作成する

新設計のFirestoreの実装が、あともう少しで完了しそうなので、今回はその途中で実装した内容について記事にしてみました。 ペペロミアでは、以下みたいにタイトルを入力するとサジェストを表示する機能を実装していました。 今までは、単純に自身のCalendar…

graphql-codegen/typescript-react-apolloでHooks部分まで自動生成する

Firestoreの新設計に作り直しの作業が終わらないので、一旦途中記事を作成 https://github.com/wheatandcat/Peperomia/pull/709/files 新設計に合わせてアプリ側もGraphQLで再実装中です。 graphql-codegenとは 前に別記事で触れましたが、graphql-codegenを…

graphql-markdownでGraphQLのAPIドキュメントを自動生成する

github.com ↑最新のFirestoreの設計に合わせて全体的にGraphQLに移行していく中で、APIドキュメントを残していきたいなーと思いgraphql-markdownを使ってみました。 github.com 使い方 まずローカルで起動サーバーを起動 $ dev_appserver.py app.yaml localh…

Peperomia v2.0.6 リリースノート

GitHub Peperomia マイルストーン Peperomia v2.0.6 PeperomiaBackend v2.0.6 PeperomiaWeb v2.0.6 Peperomia LPサイト v2.0.6 PeperomiaTool v2.0.6 対応内容 [Peperomia]まだ残っているクラスコンポーネントをできるだけReact Hooksに変更する [Peperomia]…

Firestoreを新設計にマイグレーションする

元々Firestoreを使いこなせてない感がすごくあったので、改めて学習し直して新設計にマイグレーションしようとしているので、その辺の実装について記事にしていきます。 まず、現状のFirestoreの設計が以下です。 現状の Firestoreの設計(悪い例) ├──users…

アプリの強制アップデート機能を作成

Firestoreの新設計を適応させるためにアプリの強制アップデート機能が必須になりそうだったので、アプリの強制アップデート機能を実装しました。 https://github.com/wheatandcat/PeperomiaTool/pull/8 これをv2.0.6で実装して、Firestoreの新設計をv3.0.0で…

技術書典9に出品の本の作成が完了したので、LPページに技術書一覧の画面を追加しました

技術書典9に出品の本の作成が完了したので報告します。 Boothでも購入可能です。 booth.pm 内容は、2019〜2020 年のリリース内容の振り返りと現在のプロジェクトのアーキテクトについて解説していく本になっています。 以下、目次 ■⽬次 まえがき 第 1 章 ペ…

sentry-goを実装してみる

GAEのエラーは、デフォルトでGCPのロギングに出力されますが、ずっと追い辛いと思っていたのでsentry-go導入してエラー監視できるようにしてみました。 github.com Pull Request github.com 実装 Sentryはアプリのエラー監視でも使用していますがGo言語もサ…

React Custom Hooksでコンポーネントを整理

コンポーネントのコードにキーボードイベントの処理やスクロールイベントなど、 直接UIに関わらない処理が混じって、コードの可読性がしていたのでReact Custom Hooksを使用して整理しました。 ja.reactjs.org React Custom Hooksはコンポーネントとロジック…

今年も本を作成 するので表紙を公開

前にBoothに本を出展しましたが、1年経って内容が古くなったので新しく書こうかと思います。 booth.pm 時期的に技術書典9に出せたら良いかなーと思います。 blog.techbookfest.org 内容的にはQiitaに投稿した以下の振り返り記事の拡張版みたいな感じにする予…

Peperomia v2.0.5 リリースノート

リリース日 2020年07月21日 GitHub Peperomia マイルストーン Peperomia v2.0.5 PeperomiaBackend v2.0.5 PeperomiaWeb v2.0.5 PeperomiaHelp v2.0.5 Peperomia LPサイト v2.0.5 PeperomiaTool v2.0.5 対応内容 [Peperomia] DeepLinkでスケジュールを開く [P…

Reactで作成したLPサイトにアニメーションを追加してみた

peperomia.app ↑のLPサイトにに以下みたいなアニメーションを追加してみたので実装方法を紹介 Pull Request LPサイトにアニメーション追加 by wheatandcat · Pull Request #8 · wheatandcat/PeperomiaWebSite · GitHub 実装 まず、1つのコンポーネントで書い…

gqlgenとgraphql-codegenでGraphQLのtypeを自動生成してフロントエンドのコード作成する

バックエンドをgqlgenで実装して gqlgen.com graphql-codegenでスキーマ情報からTypeScriptのtypeを自動生成する構成で実装したました。 graphql-code-generator.com 実装 gqlgenでバックエンドを実装 ■ Pull Request https://github.com/wheatandcat/Pepero…

ExpoでPush通知を実装してみた

Push通知の実装をした後、すぐにExpo SDK38でexpo-notificationsが書き換わって、もろもろ書き換えてたら結構実装に時間がかかった https://blog.expo.io/expo-sdk-38-is-now-available-ab6cd30ca2ee 対応PR backend Expo Pushのtokenを保存 by wheatandcat …

リリースノートを自動生成するスクリプトを書いてみた

ペペロミアをリリースして1年くらい立ったので、振り返りしたいなーと思いリリースノート作りたいなーと思ったので、自動生成するスクリプトを書きました。 自動生成したリリースノート v1.0.3〜2.0.4まで以下で確認できます。 リリースノート カテゴリーの…

Peperomia v2.0.4 リリースノート

リリース日 2020年04月23日 GitHub Peperomia マイルストーン v2.0.4 対応内容 Dangerを導入する react-navigation v5にアップデート Expo sdk v37にバージョンアップ prettier 2.0にバージョンアップ Codecovを実装 Sign in with Apple実装 react-navigatio…

Peperomia v2.0.3 リリースノート

リリース日 2020年02月24日 GitHub Peperomia マイルストーン v2.0.3 対応内容 React Hooks対応 and ESLint対応 Specter導入 スケジュール画面とスケジュール詳細画面にローディングを実装 スケジュールの順番変更の処理で無駄にAPI更新の処理が走っている不…