【初心者向け】Qiitaの初心者向け記事を定期的に紹介してくれるLINE Botを作ったら夢が広がった話



## Qiitaと仲良くなりたい。
筆者はプログラミングを勉強し始めて1週間くらいの新参者です。
これからプログラミングを勉強するにあたって、
Qiitaを見ていくとタメになるということはわかったのですが
どれを自分が読めばいいかわからない状態でした。

ならば、毎日なんでもいいから読んでみる習慣を作れば
記事の良し悪しや自分の中での引き出しが増えるんじゃないかなと思い
通勤時間に記事の紹介を行ってくれるLINE Botを作ろうと思いました。

## 【完成イメージ】
Qiita APIを用いて「初心者」タグが付いている記事のタイトルとURLを取得し
LINE Botで出力させます。

定期的な実行についてはGitHub Actionsを用いて行っています。
出力された状態は以下のようになりました。
次の見出しからどんな風に作成をしたか書いていきます！
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2775528/8450d5d2-f20c-30b8-a777-ca796d45c1e2.jpeg" width=50%>

### 【環境】
以下の環境を用いて開発を行っています。
それぞれの環境構築記事は調べてもらえると助かります。
- [Visual Studio Code 1.71.2](https://azure.microsoft.com/ja-jp/products/visual-studio-code/)
- [node.js v18.7.0](https://nodejs.org/ja/)
- [LINE Developers](https://developers.line.biz/en/)
- [GitHub Actions](https://github.co.jp/features/actions)

### 【STEP1】Qiita APIを用いて記事のタイトルとURLを取得する
※ここは実際の実装の時には不要なコードですが初心者向けの記事なので
　最初のステップとして記載をしています。

まずはQiitaからAPIを使って自分の取り出したい情報を
取得することができそうか試してみました。
[Qiita API/Qiita Diveloperのリンクはこちらです。](https://qiita.com/api/v2/docs)
今回は「初心者」タグのついた記事のタイトルとURLを取得することができるか試してみました。

```javascript:【STEP1】Qiita APIを用いて記事のタイトルとURLを取得する
    const axios = require('axios');

    async function main() {
    //「初心者」タグのついている記事を引っ張ってきてください。
        let response = await axios.get('https://qiita.com/api/v2/tags/' + encodeURI('初心者') + '/items');
    //タイトルを出力してください
        console.log(response.data[0].title);
    //URLを出力してください
        console.log(response.data[0].url);       
    }
```

### 【STEP2】配信用のLINE Botを作成する
こちらの記事を参考にLINE Botを立ち上げました。
 [LINE公式アカウントの作成 / LINE Botの初め方](https://zenn.dev/protoout/articles/16-line-bot-setup)
親しみが持てるように「Qiitaの案内人」と名付けました。
LINE Botを作成したら「チャネルシークレット」と「チャネルアクセストークン」を取得しましょう。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2775528/9d03914a-dbfc-9e1c-a66b-92e0c99952ea.jpeg" width=50%>

### 【STEP3】STEP1で取得したタイトル・URLをLINE Botで配信する
LINE Botの立上げが完了したので実際に配信ができるか試してみました。
ソースコードは以下です。
一つの文章が長いよりは短い方が好きなので、タイトルとURLで分割をするようにしました。

```javascript:【STEP3】STEP1で取得したタイトル・URLをLINE Botで配信する
    const line = require('@line/bot-sdk');
    const axios = require('axios');

    //1.LINE Botとの連携パート
    const config = {
        channelSecret:***************, //チャネルシークレットで置き換え
        channelAccessToken: *************//チャネルアクセストークンで置き換え
    };

    const client = new line.Client(config);

    //2.STEP1で行った情報取得パート
    const main = async () => {
        const result = await axios.get(
        'https://qiita.com/api/v2/tags/' + encodeURI('初心者') + '/items' //この部分を打ち替えて取得するデータを変更する
    );
    const text1 = result.data[num].title//STEP1で取得を確認した情報
    const text2 = result.data[num].url//STEP1で取得を確認した情報

    //3.LINE Botでメッセージを出すパート
        const messages = [{
            type: 'text',
            text: text1
        },
        {
            type: 'text',
            text: text2
        }];

        try {
            const res = await client.broadcast(messages);
            console.log(res);
        } catch (error) {
            console.log(`エラー: ${error.statusMessage}`);
            console.log(error.originalError.response.data);
        }
    }

    main();
```

### 【STEP4】GitHub Actionsで定期実行ができるように設定を行う
最後に定期実行を行うためにはGitHub Actionsを用いるとよい、と調べていてわかったので以下のコードをGitHub Actions上のymlファイルに記載しました。
実行頻度についてはcron式というものを使うのですが、その設定は以下の記事を参考にしました。
[cronの設定方法について【初心者向け】](https://qiita.com/ryota_i/items/2db9b8340c9fb8f42aad)

```yml:【STEP4】GitHub Actionsで定期実行ができるように設定を行う
    name: Node.js Cron
    on:
  
    push:
        branches:
          - 'main'
    schedule:　
        - cron:  '* * * * *' //ここで配信したい時間を設定します。

    jobs:
      build:

    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [18.x]
        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/

    steps:
    - uses: actions/checkout@v3
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v3
      with:
        node-version: ${{ matrix.node-version }}
        cache: 'npm'
    - run: npm ci
    - run: node ****.js //STEP3で作ったJavaScriptのファイル名を記載します。
```
    
          
ちなみにディレクトリ構造は以下のようにしています。

    ├── .github/workflows
    │   └── main.yml (上記のコードを記載する場所) 
    ├── ****.js (Step3で作成したJavaScript)
    ├── package-lock.json
    └── package.json

## 【所感】こんなことが大変だった＆もっとこうしたい
#### **①.Qiita APIを解読するのが大変** 
初めて読んだときは本当に呪文だと思いました。
とりあえず今は使えそうな項目に書いてある部分をコピペして
ほしい情報を取得できるんだな～と理解しました。
あとはひたすらSTEP1の段階でやってみたら感覚がつかめました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2775528/2c182c9f-8577-ca08-450a-86274eb10e3f.png)
Qiitaの記事に慣れてきたら、きっと推しの執筆者の方とかも出てくると思うので
その方の記事を定期的に配信したり、記事のいいね数も調べられることが分かったのでトレンドやベストセラー的な記事が引っ張ってくるように今回のBotを改善していきたいなと思います。

#### **②.やりたいことが増えると勉強することも増える**
今回の開発では定期的な配信までやり切りたいなと思っており
VS Code内で解決できると思っていたのですが
Qiitaで調べてみると今回紹介したGitHub Actionsで定期実行を行っていたり
rubyやPythonを使って対応ができるみたいでした。

まだわからないことが多く今回は一番簡単そうな気がしたGitHub Actionsを使いましたが他の言語も覚えたいなと思いました。

## 終わりに・今後の野望
Qiitaから情報を取得できることが分かったので
例えばこれを別のサイトにして推しのアイドルのライブやテレビの出演予定を
自動的に配信するBotを作ったり、クックパッドで毎日レシピが届いたりしたら
生活が楽しくなりそうだな～と感じました。
ここまで読んでくださりありがとうございました！