GitHubへのコミットに応じてTwitterのユーザーネームを更新するWEBアプリを一週間で作ろうとした話

# はじめに
この投稿は[N高等学校 Advent Calendar 2018](https://qiita.com/advent-calendar/2018/n-highschool) 23日目?の記事です。
知らないことがたくさんあるので、間違いがあればコメント欄に優しく書いていただけると助かります！

# 誰
N高等学校の生徒です。
2年生で、心斎橋キャンパスに通っています。
通学時間は2時間です（遠い目）。


本格的にプログラミングを始めたのは4月から。
つまりプログラミング8ヵ月です。お手柔らかにお願いします🤲

# 何

「**GitHubのコミットに応じてTwitterのユーザーネームに拡張子をつける~~WEBアプリ~~**」
![アートボード 1@4x.png](https://qiita-image-store.s3.amazonaws.com/0/227637/4ea12b20-fefe-c83e-9992-85001ae9155d.png)


WEBアプリにはできませんでした。ごめんなさい！！！！
本当はOAuthで皆さんにも使ってもらおうかと思っていたのですが、時間の都合で無しにしました（）

なお、「アドカレやべえ！」ってなった12/17からの開発です。
圧倒的に時間・技術力が足りてないのでその点はご了承ください😅


## 動機

- うおっ、やべえ。アドカレあと一週間じゃん😅（12/17の出来事）
- @issei_y さんの記事をみた → `Twitter API`
 - [Twitterの名前を5分毎に東京の天気⛅☂☃と連動させるサーバレスプログラムを書いたら色々知らないことが出てきた話](https://qiita.com/issei_y/items/ab641746be2704db98be)
- エンジニア受けの良いものを作りたかった！
 - エンジニアと言ったらGitHub! → `GitHub API`
- 触ったことないフレームワークを使ってみたかった
 - なんか Node.js つよそう → `Node.js`
- 彼女が欲しかった
 - なんかいいアプリ作ったらモテるんじゃね？知らんけど（大阪人）
 
…ってなったので作りました。

## 中身
- ~~Docker~~
- Node.js
 - ~~Express~~
 - ~~NOW~~ 
- Twitter API
- GitHub API

採用理由は特にないです。無難なやつを使ってます！

## 仕組み
1. GitHub APIを使用して1日のコミット数・コミット言語
2. 一番コミット数が多かった言語
3. Twitter APIを使用して、プロフィールを更新！
4. cronを使用して毎日0:00に定期実行！

### 実際にやってみた

#### Before
<img width="100%" src="https://qiita-image-store.s3.amazonaws.com/0/227637/2b0de0d8-834f-9ff1-6ee3-09cbb2b4485d.png">

#### After
<img width="100%" src="https://qiita-image-store.s3.amazonaws.com/0/227637/765ccd5b-60da-25d0-db24-6425be0225d7.png">

### 感想
**うおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおお！！！！！**

Node.jsを触ったことがなかったのと、GitHub、TwitterのAPIを叩けたことなど諸々含めて超嬉しかったです。



## 難しかったところ

### Twitter API

Twitter APIでは `POST account/update_profile`をしなければなりませんが、ドキュメントが公式しかなく、すごく大変でした…（まぁ、RESTful APIなので当たり前ですね。）
最初は`Axios`でゴリ押ししようと思っていたのですが、大変そうだったので`Twit`を使いました。
コードは以下です。

```javascript:app.js
T.post('account/update_profile', { name: displayName }, (err, data, res) => {})
```
`post()` の第一引数がエントリーポイント、第二引数がクエリ、第三引数がコールバックとなっています。

### GitHub API

GitHubのAPIは`Axios`というライブラリを使いました。

```javascript:app.js
const axios = Axios.create({
  baseURL: 'https://api.github.com/',
  headers: {
    'Content-Type': 'application/json',
    'User-Agent': 'lang-display'
  },
  responseType: 'json'
})

const getUniqueRepositories = events => {
  return events.map(event => {
    return {
      url: event.repo.url,
      commitCount: event.payload.size
    }
  })
}

const getLastDayPushedRepositories = events => {
  const lastDay = moment().subtract(moment.duration(1, 'days'))
  const lastDayPushEvents = events.filter(event => moment(event.created_at).date() === lastDay.date())
  return getUniqueRepositories(lastDayPushEvents)
}

module.exports = userName => {
  axios.get(`users/${userName}/events`)
    .then(res => {
      if (res.status === 200) {
        const pushEvents = res.data.filter(event => event.type === 'PushEvent')
        } else {
          console.error(`Status: ${res.status}\n${res.statusText}`);
        }
    }).catch( err => {
      console.error(err)
    })
}

```
なお、GitHub APIにどの言語にコミットしたか、というのを直接取ることはできません。
コミット履歴から地道に情報を取っていきましょう。

### タイムゾーン問題
GitHubのAPIは`2018-12-18T15:21:41Z`のように、**ISO 8601形式**で**UTC時刻**を出力します。
なお、`UTC`は**セシウム原子時計が刻む時刻と、地球の自転から求められる時刻のずれを修正した全世界共通の時刻のこと**で、`ISO 8601`は**日付の表示方法を定めた国際規格** です。
グローバルなアプリだから日本時間考慮しなくてもいいか！と思っていたのですが流石に嫌だったので、`moment.js`を使用して時間の計算をすることにしました。
（間に合わなくてリリースできなかったんだから時間の考慮云々関係ないじゃん！というのは内緒です。）

#### moment.js 使い方
`moment()`に先ほどGitHub APIで取得した**ISO 8601**形式の文字列をそのまま投げると比較用のオブジェクトが生成できます。
また、`fromNow()`で対象のオブジェクトが現在から何時間前か、なども取得することができます。
詳しいことは[公式サイト](https://momentjs.com/)をご覧ください。

### cli問題
`babel-cli`、`babel-node`を入れていて、ひたすら

```shell:error
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! babel-node@6.5.3 postinstall: `node message.js; sleep 10; exit 1;`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the babel-node@6.5.3 postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/yoshi1125hisa/.npm/_logs/2018-12-19T04_25_07_032Z-debug.log
コードbabel-node@latestで1のインストールに失敗しました
```

のエラーが出ました。正しくは `@babel/cli`, `@babel/node`です。
実はここで折れそうになりました。。


## まだ実装できていなくて、今後やりたいこと
- ソースの公開
- 皆さんに使ってもらえるようにする！
- 拡張子を入力するときにユーザーネームの規定文字数を越えるときの処理
 - ex)20文字以上になるとエラーになるので、事前にユーザーネームを(20-拡張子分)にしておかないといけない… 

### 目標！
1月末にリリースしたい！

# 終わりに

ここまで読んでいただきありがとうございました！
では次のN高アドベントカレンダーを引き続き宜しくおねがいします！


## 宣伝
N高等学校は、IT×グローバル社会を生き抜く“創造力”を身につけ、世界で活躍する人材を育成しています。
自分の得意分野をとことん伸ばしたい方にはこの学校はベストな選択肢だと思います！
ぜひあなたもN予備校で一緒に学びましょう！

## Special Thanks
- OJI ([@OldBigBuddha](https://twitter.com/OJI_1941)) 
 - Node.js、APIを教えてくれました。ありがとうございました！
- くまちゃん (@floppy73)
 - アイデアをくれました。ありがとうございました！！
 - お誕生日おめでとう！！  
- [N高等学校 #programming](https://qiita.com/tags/n高等学校) の皆さん
 - 相談に乗ってくださりありがとうございました！