TwitterのJavaScript APIを現役エンジニアが解説【初心者向け】

TwitterのJavaScript APIについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。

JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。

 

 

TwitterのJavaScript APIとは

TwitterのAPIを使うためのJavaScriptインターフェースのことです。APIは「Application Programming Interface」の略です。APIとはある特定のサービスの機能やデータを、無料で外部サービスと提携して開発・整形して利用できるようになるものです。

今回のケースを平たく言うと、TwitterのアプリをJavaScriptというプログラム言語で操作するものという感じです。

 

TwitterのJavaScript APIで実現できる主なこと

APIのリファレンスを見ることで、用意された機能の一覧が確認できます。

Twitter　APIリファレンスはこちら

平たく言うと、普段Twitterを使うときにしている操作がAPIでできます。ツイートする、いいねを押すなどの操作です。

[PR] フロントエンドで副業する学習方法を動画で公開中

Twitter APIを利用するための準備

JavaScriptでAPIを呼ぶためのコードを書く前に必要な手順が3つあります。

1、Twitterアカウントの作成

Twitterのサイトから画面の指示にしたがってアカウントを作成します。

Twitterのサイトはこちら

2、Twitter開発者アカウントの申請

Twitter Developerのサイトから画面の指示にしたがって申請をします。Twitterアカウントと比べると少し大変なので、申請の流れを概要レベルで書いておきます。

1. 簡単な質問に英語で答える
2. APIを利用する目的などを英語で200文字以上書く

（※まず基本英語での表記しかありません。英語が苦手な方は自動翻訳などを利用して進めてください）

なお、このときに書いた理由によって申請にかかる日数が変わるようです。ちなみに、勉強のためという感じの内容にしたら即時で申請がとおりました。

Twitter Developerのサイトはこちら

3、APIのキーを取得

申請が通るとメールが送られてくるのでTwitter DeveloperサイトにログインしてAPIの操作に必要な各種キーを取得しましょう。

画面右上の方にある「Create an app」ボタンを押して必須入力項目（requiredと書かれている項目）を入力します。入力をして「Create」ボタンを押せば各種キーは目前です。「Keys and tokens」というタブの中に各種キーが記載されています。

画面の4つの項目の文字をAPIを呼ぶ際に使用しますのでコピーしておいてください。

1、API key
2、API secret key
3、Access token
4、Access token secret

キーとトークンが記載された画面

画面の赤線がAPIと、API keyとAPI secret keyです。Access tokenとAccess token secretは赤丸のCreateボタンを押すことで表示されます。

 

実際に書いてみよう

Node.jsのtwitterモジュールを使用すると楽にAPIを使えますので、今回はこれを使用した例を紹介します。下記のコマンドでtwitterモジュールをインストールしてください。

npm install twitter

まずはAPIを使ってツイートをする例を紹介します。

var Twitter = require('twitter');

var client = new Twitter({
	consumer_key:'【API key】',
	consumer_secret: '【API secret key】',
	access_token_key: '【Access token】',
	access_token_secret: '【Access token secret】'

var params = {status: '日本語ツイート検証'};
client.post('statuses/update', params, function(error, tweets, response){
	if(error){
		console.log(error);
	}
});

 

解説

1. 「var Twitter = require(‘twitter’);」にて、インストールしたtwitterモジュールを読み込んでいます
2. 「var client = new Twitter({」にて、事前に準備した4つの文字（キーとトークン）を設定しています
3. 「var params = {status: ‘日本語ツイート検証’};」にて、ツイートの文面を指定しています
4. 「client.post(」は、第1引数がAPIリファレンスに記載されたエンドポイント（URL）、第2引数がツイート内容、第3引数がAPIが呼ばれた後に実行される関数（コールバック）となっています

APIが呼ばれた後の関数はエラーがあった場合のみコンソールにエラーメッセージを表示するようにしています。

TwitterのツイートをするAPIのリファレンスページはこちら

client.post(～の部分をAPIリファレンスを見ながら書き換えることで好きな処理が実行できるかと思います。

応用編

せっかく準備に手間をかけてAPIが実行できるようになったので、他の処理を呼ぶ例を紹介します。

TechAcademy/テックアカデミーのツイッターアカウント（@techacademy）の一番上に表示されるツイートにいいねをつけてみます。

twitterモジュールの読み込みやキーの設定は同じで、client.～の部分のみを変えるだけで実行できます。client.～の部分のみのソースです。

var params = {screen_name: 'techacademy',count:1};
client.get('statuses/user_timeline', params, function(error, tweets, response){
	if(!error){		
		client.post('favorites/create', {id :tweets[0].id_str}, (error, tweets, response) =>{});
	}else{
		console.log(error);
	}
});

 

解説

1. 「var params = {screen_name: ‘techacademy’,count:1};」にて、ツイートを取得するアカウントと取得件数を指定しています
2. screen_nameにツイッターのアカウントの@を覗いたもの、今回はテックアカデミーのアカウント（@techacademy）のtechacademyを指定。countはなくても良いのですが今回のようにツイートの取得件数を指定する場合に追加します
3. 「client.get(」にて、第1引数にツイート取得の「statuses/user_timeline」を指定しています。第2引数に取得条件、第3引数にツイートを取得した後の処理を記述しています
4. 取得した後の処理は、いいねをつけるAPIです。「client.post」にて、第1引数にいいねをつける「favorites/create」を指定しています。第2引数にツイートのID、第3引数は何もしない空の処理です
5. 第2引数のツイートIDは、ツイートの取得APIで取得したツイートがtweetsに配列で入っているので、この1つめである[0]を指定しています
6. ツイートIDには「id」と「id_str」があるのですが、idはプログラムやサーバーによって数字が丸められる（端数が切られるようなもの）ことがあるのでid_strを使った方が無難です

以上です。このようにリファレンスを参照して、URLと条件の値を変えるだけで好きなAPIの処理を実行できます。

筆者プロフィール

横山茂雄（よこやましげお） フリーエンジニアとして活動中。サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。 言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。TechAcademyジュニアのゲームアプリコースを担当しています。

 

 

TechAcademyでは、初心者でも、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。