見出し画像

情報収集に最適！共通のフォローを自動で取得するツールを、React.js + Express.jsで作ってみよう

苦しんでプログラミングを学んだ柴犬（くるしば）

こんにちは。くるしばです。

元々コンサルタントの仕事をしていましたが、独学でプログラミングを学習し、Webサービスを作って起業しました。

その後個人で開発したサービスを売却したり、また別のIT系の会社を創業したりしています。

去年の8月から下記のTwitterにてプログラミング学習に関して発信し始め、ありがたいことに8000人の方々にフォローして頂きました。


僕はもともと面白いWebサービスやアプリ、事業などを調べるのが趣味で、上記のTwitterでもプログラミング学習や開発に便利な様々なツールを紹介しています。

こういったツールだったり、技術系の情報などを日頃どう探しているのか質問をいただくことが多いです。

もちろん他の記事でまとめられているようなテック系のメディアなどは一通り見ているのですが、個人的に一番良いソースとなっているのは実はTwitterです。

Twitterで良質な情報を発信しているアカウントをフォローすることで得られる情報は、とても参考になります。

ではそういったアカウントをどうやって見つけていくのか。

僕がよくやる方法の一つとして
「自分が普段参考にしているアカウントがフォローしているアカウントから探す」
というものがあります。

例えば自分がフォローしていて、普段から参考にしているAさんがいます。

そのAさんがフォローしている人たち、つまりAさんが参考にしている可能性が比較的高い人たちの中には、自分にとっても参考になる情報を発信している人が見つかる可能性も高いということです。

特に自分がフォローしている人の複数人が共通しているフォローしている人を抽出するとかなり参考になります。

しかし、これを手動でやるとなるとかなり大変です。

例えばAさんとBさん、2人の間に共通するフォローを見つける場合、2人分の全てのフォローをリストアップし、共通するアカウントを探す必要があります。

頑張ってリストアップして、Cさん、Dさん、Eさんの三人を見つけたとすると、今度はこの3人の間で共通するフォローを探してみたくなります。

この方法の良いところでもあるのですが

共通のフォローを探す→見つけた人たちのさらに共通のフォローを探す→…

と、何度もサイクルを繰り返して、自分にとって有益そうなアカウントを無限に探索することができますが、これを毎回手動でやっているとどれだけ時間があっても足りません。

なのでTwitter APIを使って指定したアカウントの共通のフォローを抽出できるツールを作りました。

もともと使っていたものはCLI上で動くものだったのですが、今回記事を書くにあたってReact.jsを使ってブラウザで動くものを作りました。

今回はこちらのツールの作り方について書いていこうと思います。


この記事で学べること

React.jsとExpress.jsを使って、指定したアカウントがどういったアカウントをフォローしているのかを分析できるツールが作れます。

具体的には

・指定したアカウントがフォローしているアカウントのリスト
・指定したアカウントのうち、何人がフォローしているのか情報
・フォローされている人数が多い順に結果をソート

などが可能です。

また今回は後述するCORSの問題があるので、Reactだけで完結するものではなく、簡単ですがExpressを使ってサーバーサイドの実装も行います。

一般的なWebサービスと同じく、フロントエンドとAPIでデータのやりとりを行う形で実装されるツールです。

実際に自分の役に立つプロダクトを作りながら、Webサービス開発の基礎を学べるコンテンツとなっています。

正直、今回作るツールに関してはReactやExpressの基礎が分かればほとんど苦もなく作れます。

なのでプログラミングの知識もそうですが、基礎的な知識だけでも、自分で使える便利なツールが作れたり、さらにスキルがつけばもっと面白いものも作れるのです。

そんなこともこの記事を通してお伝えして、あなたのプログラミング学習のモチベーションが上がったらいいなと思っています。


前提条件

この記事はプログラミング初心者向けに書いており、わかりやすさを優先するために機能や詳しい説明を省略している部分などもあります。

また、ReactやJavascript等を全く知らない方は、一旦Progateのコースなどをやってもらってからの方がベターです。

今回スタイリングは人気のUIコンポーネントライブラリの「Chakra UI」を利用するため、CSSについてはそこまで事前知識がなくても進められると思います。

また、各ユーザーのフォローを取得するにはTwttier APIを利用します。

フォロー取得のエンドポイントは15分ごとに15回までのリクエスト制限が設けられています。

そのため連続して使用したり、あまりフォローが多い人の情報を取得しようとすると制限に引っかかってしまうことがあります。

ただし、基本的には数千人~数万人もフォローがいるような人は、情報収集のためではなく別の目的でフォローしている可能性が高いため、そういった人のフォローをこのツールで分析してもあまり意味がないことが多いです。

また、基本的にMac環境の人向けの内容となります。


環境構築

React.js

まずはReactの環境構築をしていきましょう。

自分のPCにNode.jsが入っていない場合は下記よりダウンロードし、インストールしてください。

Node.jsがインストールできたら、ターミナルを開きプロジェクトを作成したいフォルダに移動します。

移動できたらcreate-react-appコマンドを使ってReactプロジェクトを作成していきましょう。

npx create-react-app twitter-following-analyzer

create-react-appコマンドが入っていない場合、下記のような表示になりますが、yを入力してエンターを押してください。

Need to install the following packages:
create-react-app
Ok to proceed? (y)

下記のような表示が出てきたら、無事にプロジェクトが作成されました。

Success! Created twitter-following-analyzer at /Users/shibainu/javascript/twitter-following-analyzer
Inside that directory

作成したプロジェクトのフォルダに移動し、Reactを起動させましょう。

cd twitter-following-analyzer
twitter-following-analyzer $ npm start

ブラウザでhttp://localhost:3000を開いて、下記のような画面が出ればうまく起動しています。


Express.js

冒頭で今回はTwitter APIを利用してユーザーのフォローを取得するという話をしましたが、Twitter APIはCORSの関係で直接ブラウザから利用することができません。

サーバーサイドからは使うことができるため

React → サーバーサイド→ Twitter API

という形でサーバーサイドを経由し、Twitter APIからフォローを取得します。

今回サーバーサイドにはExpress.jsというJavascriptのフレームワークを使います。


プロジェクト内にExpressをインストールするapiフォルダを作り、インストールしていきます。

twitter-following-analyzer $ mkdir api
twitter-following-analyzer $ cd api
twitter-following-analyzer/api $ npm init
twitter-following-analyzer/api $ npm install express

npm initを実行するとpackage.jsonに記載する情報を求められますが、全て何も入力せずEnterを押していって大丈夫です。

Expressのインストールが終わったら、package.jsonを開いて編集します。

// twitter-following-analytics/api/package.json

{
  "name": "api",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "cors": "^2.8.5",
    "express": "^4.18.2",
    "twitter-api-sdk": "^1.2.1"
  },
  "devDependencies": {
    "nodemon": "^2.0.20"
  },
  // ①
  "type": "module"
}

①ではESMを使うための設定をしています。

次にapi直下にindex.jsというファイルを作りましょう。

twitter-following-analyzer/api $ touch index.js

index.jsを編集し、下記のような内容にします。

// twitter-following-analytics/api/index.js

import express from 'express

const app = express()
const port = 3031
app.listen(port, () => console.log(`Server listening on port ${port}!`))

app.get('/', (req, res) => {
    res.send('Hello World!')
})

ターミナルに戻り、expressを起動しましょう。

twitter-following-analyzer/api $ node index.js

http://localhost:3031にアクセスして、下記のようにHello Worldという表示になっていれば成功です。

また、Expressにはホットリロードの機能がなく、コードを編集して反映させたい場合はサーバーを再起動させる必要があります。

手動でやればいい話なので必須ではありませんが、若干不便なのでコードが変更された際に自動でサーバーを再起動させるよう設定していきます。

今回はnodemonというパッケージを使います。

twitter-following-analyzer/api $ npm install nodemon --save-dev

次にpackage.jsonを編集します。

// twitter-following-analytics/api/package.json

{
  "name": "api",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    // ①
    "start": "nodemon index.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.18.2"
  },
  "devDependencies": {
    "nodemon": "^2.0.20"
  },
  "type": "module"
}

①ではnpmスクリプトに、nodemonを使ってExpressを起動するコマンドを追加しました。

ここで作ったstartコマンドを使って、Expressを起動してみましょう。

twitter-following-analyzer/api $ npm start

先ほどと同じくhttp://localhost:3031にアクセスすると、Hello World!というテキストが表示されてると思います。

index.jsを編集し、Hello Express!と表示させてみましょう。

// twitter-following-analytics/api/index.js

import express from 'express'
const app = express()
const port = 3031
app.listen(port, () => console.log(`Server listening on port ${port}!`))

app.get('/', (req, res) => {
    res.send('Hello Express!')
})

変更を保存し、ページをリロードすると、サーバーを手動で再起動しなくても変更が反映されているかと思います。


Twitter API

Twitter APIを利用するにはTwitter DeveloperでAPIキーの利用申請をする必要があります。

申請の手順は下記のページを参考にしてください。

ここからは申請が完了した前提で話を進めていきます。

作成したプロジェクトの画面に行き、Bearer Tokenの「Regenerate」ボタンを押します。

するとトークンが表示されます。

これはソースコード内で使うのでメモしておきましょう。


実装

Twitter APIで指定したユーザーのフォローを取得

ではいよいよここから実装に入っていきます。

ここから先は

19,568字 / 8画像
この記事のみ ¥ 1,580

ログイン

この記事が気に入ったらサポートをしてみませんか？