JavaScript

Mobile

React Native react-native-google-mobile-ads & AdMob で広告を表示する

この記事では AdMob を利用して本番用の広告を出すための手順を記載しています。 初めて AdMob を利用する人は何をすればいいの?となると思うので、この記事は実際に広告を表示するまでにやったことを記載しています。コードの書き方というよ...
Mobile

[個人開発] Web アプリ開発者が React Native で iOS アプリを開発、リリースまでした経験

本業ではずっと IT業界に身を置き Webシステム開発をしており、スマホアプリの開発経験はほとんどありませんでしたが、この度初めて個人開発でスマホアプリの開発を行い、リリースするまで行うことができました。 技術自体は好きで仕事以外でも本を読...
React

SPA(React) で親 Window から子 Window へのデータの受け渡しがしたい

SPA(Single Page Application)だけど別ウィンドウでも開きたい、かつ、起動元の親ウィンドウのデータを起動された子ウィンドウで参照したい場合の方法です。 候補は以下 URL パラメータ渡し LocalStorage グ...
React

TanStack Query の stale / cache 動作を動かしながら理解する

前回の記事で TanStack Query に入門して基本的な使い方を知りましたが、この記事では stale / cache の動きについて試行した結果も踏まえて解説です。 動作環境は以下の続きにしています。 ここではキャッシュの動きを理解...
React

TanStack Query 入門 – React Query で Github のリポジトリ取得 API を実行

この記事では TanStack(TanStack は以前の React Query)の Query の使い方と基本の動きを紹介しています。 色々な機能がありますが、この記事ではまずは基本的な使い方のメモ。 利用するコードベース 以下で作った...
React

React Router v6.4 のチュートリアルを通してloader, action を使った画面遷移と処理の理解

本記事は React Router のチュートリアル の中ででてくる処理の理解をより深めるために試行した結果をまとめたものです。 動作確認バージョン 主なライブラリのバージョンは以下 ├── @types/react-dom@18.0.9 ...
React

内部向けシステムを SPA(React)で作るときのプロジェクトのベースを考える

この記事では内部向けシステムは、社内システム/業務システムなどある特定範囲内で目的をもって利用されるものを想定しています。 目的や会社の背景やポリシーによるため唯一の解がないのは大前提ですが、フロントエンド関連で調べたとき、toC 向けの記...
Vue

Vue + d3(d3-force) で理解しながら有向グラフを描画する

この記事では Vue + d3 を利用して有向グラフを描画する方法をステップ・バイ・ステップで説明します。 グラフ描画といえば d3 が有名ですが、直接使ったことはなく d3 をラッパーしたライブラリを使って いる方も多いと思います。この記...
Vue

Vue 3 + vue-apollo 4 で GraphQL mutation を行う(Github の API を利用して issue の登録/更新を行う)

Vue.js のロゴ
Vue

Vue 3 + vue-apollo 4 で GraphQL query を行う(Github の API を利用してリポジトリの取得/追加読み込みを行う)

Vue.js のロゴ