expo+react native６日目コードが書けない初心者がChatGPTと一緒にスマホアプリを完成させた話【AdMob地獄編】4月16日

こんにちは、ASDで文章がとにかく苦手な私が、なぜかスマホアプリを4本も作ることになった話です。しかも今回のテーマは、「文章が苦手な人でもブログ記事が書けるようにするアプリ」。

はい、開発者がまず書けてない。もう矛盾がバグ。

コードの関係：完全なるChatGPT依存

まず前提として、私はコードが書けません。何もわかりません。でもなんとなく「アプリを作りたい」って思って、ずっとChatGPTを相方にしてExpo + React Nativeで開発しています。

で、つい先日ようやく4本目のアプリができたんですよ。

アプリ名：○○だけど書けるもん！
文章を書くのが苦手な人向けの構成サポート付きブログ生成アプリです。

最大の敵、それが初心者にとっての超高難易度AdMob

「アプリ作ったし、ちょっと広告でも入れてお小遣い稼げたらいいな」と思ったのが地獄の始まり。

そう、AdMob地獄です。

• 登録はしてあるのに広告が表示されない
• テスト広告出すだけで1時間悩む
• ビルド？ああ、3時間前に押したやつね…

でもChatGPTがひとつずつ教えてくれた。たぶん私より人生に疲れてる。

AdMobバナー広告の導入ステップ

手順をざっくりまとめると…

1. expo-ads-admob をインストール

npx expo install expo-ads-admob

2. .env ファイルを作ってテスト広告IDを保存

ADMOB_BANNER_ID=ca-app-pub-3940256099942544/6300978111

3. babel.config.js を追加（なぜか最初は無かった）

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      ['module:react-native-dotenv', {
        moduleName: '@env',
        path: '.env',
      }]
    ]
  };
};

4. components/AdBanner.tsx を作成

import React from 'react';
import { View, StyleSheet } from 'react-native';
import { AdMobBanner } from 'expo-ads-admob';
import { ADMOB_BANNER_ID } from '@env';

const AdBanner = () => (
  <View style={styles.bannerContainer}>
    <AdMobBanner
      bannerSize="fullBanner"
      adUnitID={ADMOB_BANNER_ID}
      servePersonalizedAds
      onDidFailToReceiveAdWithError={(error) => console.warn('広告取得失敗:', error)}
    />
  </View>
);

const styles = StyleSheet.create({
  bannerContainer: {
    alignItems: 'center',
    marginTop: 10,
  },
});

export default AdBanner;

5. 各画面に <AdBanner /> を配置

• HomeScreen.tsx → 「保存済み記事を見る」ボタンの下
• FinalArticleScreen.tsx → 「ホームに戻る」ボタンの下

どちらもユーザー体験を邪魔せず、自然に広告が見える場所です。

📦 そしてビルドへ…（Expo Goでは広告は出ない）

ここが最大の罠だったんですが、Expo Go では AdMob 広告が動かない仕様なんです。

正確には「ネイティブコードを含むライブラリ（like AdMob）は動かない」です。

なので、ChatGPTからの指示に従って eas build を使って .apk ファイルをビルドし、実機に入れて確認する方法を選びました。

npm install -g eas-cli
npx eas build:configure
npx eas build --platform android

途中でパッケージ名を聞かれたら

com.masaice.kakerumon

とかそれっぽいのを入力。署名鍵（keystore）も「Y」でOK。

最後に

正直、自分でも思う。

「え、コード書けないのにアプリ作ったの？ 」

はい、ChatGPTさまのおかげです。
私はただ、指示に従ってボタンを押し、ファイルを作って貼り付けただけ。なのに、ちゃんとアプリができた。

もしかしたら、「コードが書けない」ってのは、もうそんなに大きな壁じゃないのかもしれないですね。

アプリ作りたい人は、まずはコピペ力と粘着力からどうぞ💪