非エンジニアのアプリ開発！ChatGPT頼りで雑学アプリを作ってみる

こんにちは、普段はUX・UIデザイナーをしているしんぺいと言います。
今回、非エンジニアの僕がほぼ「ChatGPT」頼りで簡単なアプリケーションを作ってみました。


![img.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3618353/1847ac56-44a6-e99d-64b1-19b3e7ef2ce0.png)


## 毎日雑学botを作ってみる
雑学詳しい人ってなんかカッコ良いですよね。
知的な大人に憧れて「1日1ページ、読むだけで身につく世界の教養3651日1ページ、読むだけで身につく世界の教養365")」という本を買ったこともありましたが、そもそも1日1ページ、読むのハードルが高すぎでした。持ち歩くのに本でかいし。

https://bunkyosha.com/books/9784866510552

なんでこの度、改めて雑学王を目指し「毎日Wikipediaの記事がランダムで届く」アプリを作ろうと思います！！


# とりあえずChatGPTに聞いてみる

本当ならAPIの仕様調べたりするんでしょうが、今回は完全ChatGPT様に聞いてみる。

**「node.jsでwikipedia APIを使ってURLはランダムで出力する方法を教えてください」**

### 結果

```javascript:sample.js
const axios = require('axios');

async function getRandomWikipediaUrl() {
  try {
    // Wikipedia APIのランダムな記事エンドポイント
    const apiUrl = 'https://en.wikipedia.org/w/api.php?action=query&list=random&rnnamespace=0&rnlimit=1&format=json';

    // Wikipedia APIにリクエストを送信
    const response = await axios.get(apiUrl);

    // レスポンスからランダムな記事のタイトルを取得
    const pageTitle = response.data.query.random[0].title;

    // ランダムな記事のURLを構築
    const wikipediaUrl = `https://en.wikipedia.org/wiki/${encodeURIComponent(pageTitle)}`;

    // 結果を返す
    return wikipediaUrl;
  } catch (error) {
    console.error('Error fetching data from Wikipedia API:', error.message);
    throw error;
  }
}

// ランダムなWikipedia記事のURLを取得する
getRandomWikipediaUrl().then((url) => {
  console.log('Random Wikipedia URL:', url);
});
```

無事ランダムでWikipediaの記事を取得することができました。賢い。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3618353/817b69db-0f62-211f-df6a-5f3747a0e9f3.png)



続いてLine 通知が来るようにしてみる

**このURLをLine Notifyで毎日通知が届くようにしてください**

```javascript:sample.js
const axios = require('axios');

// Line Notifyのアクセストークン
const lineNotifyToken = 'YOUR_LINE_NOTIFY_ACCESS_TOKEN';

async function getRandomWikipediaUrl() {
  try {
    // Wikipedia APIのランダムな記事エンドポイント
    const apiUrl = 'https://en.wikipedia.org/w/api.php?action=query&list=random&rnnamespace=0&rnlimit=1&format=json';

    // Wikipedia APIにリクエストを送信
    const response = await axios.get(apiUrl);

    // レスポンスからランダムな記事のタイトルを取得
    const pageTitle = response.data.query.random[0].title;

    // ランダムな記事のURLを構築
    const wikipediaUrl = `https://en.wikipedia.org/wiki/${encodeURIComponent(pageTitle)}`;

    // 結果を返す
    return wikipediaUrl;
  } catch (error) {
    console.error('Error fetching data from Wikipedia API:', error.message);
    throw error;
  }
}

async function sendLineNotification(message) {
  try {
    // Line Notifyにメッセージを送信
    await axios.post('https://notify-api.line.me/api/notify', `message=${message}`, {
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
        'Authorization': `Bearer ${lineNotifyToken}`,
      },
    });
  } catch (error) {
    console.error('Error sending Line Notify:', error.message);
    throw error;
  }
}

// ランダムなWikipedia記事のURLを取得してLine Notifyに通知
getRandomWikipediaUrl().then((url) => {
  sendLineNotification(`Random Wikipedia URL: ${url}`);
});

```

あとは日本語記事に限定したり、タイトル変えたりくらいで、無事、毎日雑学ベータ版ができました！(毎日手動で実行すれば笑)

いやー３０分くらいでここまでできちゃうのは本当すごい。

<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3618353/a5698a27-46a1-870c-173f-130ef501b04a.png">


今回返ってきた記事は下記のようなものだったんですが、地名だけだと何の雑学にもならないのである程度ジャンルを絞った方などしたほうが良いかなと思うので、そこは今後改善ですね。

https://ja.wikipedia.org/wiki/%E8%A8%88%E7%AE%97%E8%A4%87%E9%9B%91%E6%80%A7%E7%90%86%E8%AB%96#:~:text=%E8%A8%88%E7%AE%97%E8%A4%87%E9%9B%91%E6%80%A7%E7%90%86%E8%AB%96%EF%BC%88%E3%81%91%E3%81%84,%E3%82%92%E6%95%B0%E5%AD%A6%E7%9A%84%E3%81%AB%E6%89%B1%E3%81%86%E3%80%82

https://ja.wikipedia.org/wiki/%E3%82%BF%E3%83%81%E3%82%B3%E3%83%9E%E3%81%AA%E6%97%A5%E3%80%85

https://ja.wikipedia.org/wiki/%E7%BE%8E%E8%B3%80%E5%A4%9A%E5%8F%B0


何にせよ、ChatGPT頼りでもちゃんと動くアプリができたことは感動でした！