人気のあるタグでみんなはどんな記事を書いているのかトレンドを考察してみた


Qiitaでは日々様々な記事が投稿されており、その記事には様々なタグがある。
投稿数の多いタグでどんな記事を書いているのか知れれば世の中でどんな技術やものが流行っているのかを把握できるではと考えた。
それをもとに技術の調査や実践を行うことでスキルアップや知識の向上を図れたらと思う。

## 環境
- Node-RED
- JavaScript
- QiitaAPI

## やりたいこと
やりたいことは主に以下の３つである。

- タグ一覧から人気のある順に並べたい
- 該当タグの記事の数
- 人気があるタグで人々はどのような記事を書いているのか

## 手順
1. Qiita APIを用いて、タグとそれに対応する記事数を記事数の降順に並び替える。
2. 人気のあるタグの記事のタイトルを引っ張ってくる。
3. 人気のあるタグでみんなはどんな記事を書いているのか調査をする。

## 記事内で使用したフロー&JSON
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2618860/01549d6b-ee1f-0fbf-3c5f-4f786dd3ba7d.png)

```Node-RED:JSON
 [{"id":"f5a2844a.acd6f8","type":"tab","label":"フロー 1","disabled":false,"info":""},{"id":"c252ea32.f084e8","type":"debug","z":"f5a2844a.acd6f8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":510,"y":440,"wires":[]},{"id":"5bc00aca.91a3e4","type":"http request","z":"f5a2844a.acd6f8","name":"","method":"GET","ret":"obj","paytoqs":"ignore","url":"https://qiita.com/api/v2/tags?page=1&per_page=20&sort=count","tls":"","persist":false,"proxy":"","authType":"","x":230,"y":200,"wires":[["12dfa86e.fb21c8"]]},{"id":"7b819b8e.8b8764","type":"inject","z":"f5a2844a.acd6f8","name":"inject","props":[{"p":"payload"},{"p":"items_count","v":"\"\"","vt":"str"},{"p":"id","v":"\"\"","vt":"str"},{"p":"title","v":"\"\"","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"\"\"","payloadType":"str","x":170,"y":140,"wires":[["5bc00aca.91a3e4"]]},{"id":"12dfa86e.fb21c8","type":"function","z":"f5a2844a.acd6f8","name":"function01","func":"let array_data =  msg.payload;\nlet items_count=[];\nlet id=[];\n\n//指定した回数分のタグと対応する記事数を取得\nfor(let i=0;i<10;i++){\n    items_count[i] = array_data[i].items_count;\n    id[i] = array_data[i].id;\n}\nmsg.items_count =  items_count;\nmsg.id = id;\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":230,"y":260,"wires":[["e569a6f2.245738"]]},{"id":"e274560a.7816c","type":"http request","z":"f5a2844a.acd6f8","name":"","method":"GET","ret":"obj","paytoqs":"ignore","url":"https://qiita.com/api/v2/tags/{{{query}}}/items?page=1&per_page=20","tls":"","persist":false,"proxy":"","authType":"","x":230,"y":380,"wires":[["2a1caf33.b5deb8"]]},{"id":"e569a6f2.245738","type":"function","z":"f5a2844a.acd6f8","name":"function02","func":"msg.query = encodeURI(msg.payload[0].id);\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":230,"y":320,"wires":[["e274560a.7816c"]]},{"id":"2a1caf33.b5deb8","type":"function","z":"f5a2844a.acd6f8","name":"function03","func":"let array_data02 =  msg.payload;\nlet title=[];\n\n//指定した回数分のタイトルを取得\nfor(let i=0;i<10;i++){\n    title[i] = array_data02[i].title;\n}\nmsg.title = title;\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":310,"y":440,"wires":[["c252ea32.f084e8","d40c91e9.f1104"]]},{"id":"d40c91e9.f1104","type":"csv","z":"f5a2844a.acd6f8","name":"","sep":",","hdrin":"","hdrout":"none","multi":"one","ret":"\\n","temp":"msg.id","skip":"0","strings":true,"include_empty_strings":"","include_null_values":"","x":290,"y":500,"wires":[["21e500ed.f97fa8"]]},{"id":"21e500ed.f97fa8","type":"file","z":"f5a2844a.acd6f8","name":"","filename":"data.csv","appendNewline":true,"createDir":false,"overwriteFile":"true","encoding":"none","x":520,"y":500,"wires":[[]]}] 
```

## 1.タグとそれに対応する記事数を記事数の降順に並び替える。
とりあえず、Node-REDの _http request_ ノードでQiita APIにアクセスし、
_function_ ノードを用いてデータを整えようと思う。

Qiita API v2の仕様については以下のサイトを参考にした

https://qiita.com/api/v2/docs

どうやらタグに関わるJSONを取得するのは下記urlにアクセスをすれば良いらしい。
` https://qiita.com/api/v2/tags?page=1&per_page=20&sort=count`
> - followers_count
> このタグをフォローしているユーザーの数
> - icon_url
> このタグに設定されたアイコン画像のURL
> - id
> タグを特定するための一意な名前

### タグとそれに対応する記事の数を取得
```javascript:function01
let array_data =  msg.payload;
let items_count=[];
let id=[];

//指定した回数分のタグと対応する記事数を取得
for(let i=0;i<10;i++){
    items_count[i] = array_data[i].items_count;
    id[i] = array_data[i].id;
}
msg.items_count =  items_count;
msg.id = id;

return msg;
```

### 実行結果
| タグ | 記事の数 |
|:-:|:-:|
Python|	 63011
JavaScript|	 47217
Ruby|	 36882
Rails|	 35082
AWS|	 30622
PHP|	 25799
初心者|	 21940
Docker|	 21193
Java|	 19761
iOS|	 19554

※2022年4月時点

やはり機械学習が流行っている関係などでPythonが1位のようだ。
今回の調査で用いているJavaScriptは2位でWebサイトで多用されているため
記事としても人気があるようだ。

## 2. 人気のあるタグの記事のタイトルを引っ張ってくる。

次に人気のあるタグを利用している記事の調査を実施する。
今回の調査では人気のあるタグの定義を記事数が多いものだと仮定して、記事数の多いPythonとJavaScriptの記事のタイトルを投稿が直近のもの順でそれぞれ10個ずつ抽出することとする。
`https://qiita.com/api/v2/tags/:tag_id/items?page=1&per_page=20`

### ランキング上位タグを使った記事の抽出
1. 人気上位のタグ（今回だったらPython）の記事を  _http request_ ノードを使って取得
2. _function_ ノードを使って記事のタイトルのみ配列に格納

```javascript:function03
let array_data02 =  msg.payload;
let title=[];

//指定した回数分のタイトルを取得
for(let i=0;i<10;i++){
    title[i] = array_data02[i].title;
}
msg.title = title;

return msg;
```

## 3. 人気のあるタグでみんなはどんな記事を書いているのか調査をする。
2.では人気上位の2つのタグであるPythonとJavaScriptの記事を抽出してきたわけだが、
それぞれのタグでどのような記事が書かれていて、何がトレンドになっているのかを考察していきたい。

### Pythonタグを用いている記事
<dd> ①:"[ABC247 E] Max Min　ざっくり解説"
<dd> ②: "Python v2.7でバイナリデータ解析"
<dd> ③: "PythonでPDFファイルを結合・分割・並び替えアプリ作成"
<dd> ④: "YOLOシリーズの速度比較をしてみました"
<dd> ⑤: "化石エンジニアの野良リカレント教育・Kaggle～あのエラーとの戦い～"
<dd> ⑥: "AWS Cloud9でPython基礎"
<dd> ⑦: "『アイの歌声を聴かせて』が21世紀だとしたら何年なのか、プログラミングで挙げてみる"
<dd> ⑧: "地球上のある地点からある距離だけある方向へ離れた点の座標を求める"
<dd> ⑨: "VSCode の Remote Container で Azure Functions + Python 開発環境を構築する"
<dd> ⑩: "vimeo APIを公式のpythonライブラリで使用するサンプル"</dd>

 **Python記事に対する感想**
自分は大学時代からPythonを使用しているが機械学習ばかりをやっていたので、機械学習が多く出てくるのではないかと
予測をしていたが別にそういうわけではないようだ。機械学習は今回だと④,⑤の記事だけのようで思っていたいたよりも少なく、半分くらいを占めているものだと想像していたので驚いた。また、AWSやAzureといったクラウド環境を使用した記事があることからPythonはクラウドとの相性も良いようだ。

### JavaScriptタグを用いている記事一覧
<dd>①: "ウクライナ国旗を油彩画風に描画する Generative Art"
<dd>②: "JSの変数宣言について"
<dd>③: "【JS】アコーディオンメニューの様なQandA【jQuery】"
<dd>④: "ESP32＋QuickJS＋Blocklyの例"
<dd>⑤: "Qiitaのアニメ関連の記事で語られている技術・トピックについて分析してみた"
<dd>⑥: "【JavaScript】日付は `YYYY/MM/DD hh:mm:ss.iii` の形式で欲しい！のに無いから自作した（のに、、よく調べたらあった"
<dd>⑦: "【React】Googleのjsクライアントを直接使用してGoogleログインを実装する"
<dd>⑧: "Vue.js / Google Maps JS API でクリックされたmarkerにアニメーションをつける"
<dd>⑨: "SKT豆腐屋と「Screeps: Arena」 のチュートリアル#3「First attack」を進めよう"
<dd>⑩: "SKT豆腐屋と「Screeps: Arena」 のチュートリアル#2「Simple move」を進めよう"</dd>

**JavaScript記事に対する感想**
JavaScriptの勝手なイメージとして、Webサイトやアプリの構築に使われる言語なので関連の記事が多くなるかなと予測をしていたがやはりPythonと比べてその傾向があるようだ。個人的に気になったのは①の記事でGenerative Artについては

> ジェネレーティブアートとは
> コンピュータソフトウェアのアルゴリズムや数学的/機械的/無作為的自律過程によってアルゴリズム的に生成・合成・構築される芸術作品を指
> す。コンピュータの計算の自由度と計算速度を活かし、自然科学で得られた理論を実行することで、人工と自然の中間のような、統一感を持っ
> た有機的な表現を行わせる作品が多い。
> Wikipediaより

ということらしい。JavaScriptはアートもかけるのかと関心をしてしまった。

**調査についての考察**
Python・JavaScriptタグの記事タイトルにその言語の特徴が表れてはいたが、どのプログラム言語でもできそうな内容の記事が多いように思われる。それは、記事数の多いPython・JavaScriptタグは初心者でも始めやすいため記事の内容も初心者向けから玄人まで幅広い。実際、PythonやJavaScriptは参考書の種類や学習できるコンテンツも数多くあり、多言語と比べると参入障壁が低い。玄人の投稿はトレンドを意識した内容の記事があるかもしれないが、初心者や初心者向けに書いた記事にはトレンドとは関係のない基礎的な内容になると思われる。
それに加え、どちらのプログラム言語も様々な分野で活用できるため、これといったトレンドを探すことが難しかった、逆に言うとなんでもできるからここまで記事数が多くなっており、人気でタグ付けされているのだ。



## つまずいたところ

今回の調査では主にNode-REDとJavaScriptを組み合わせて作成をしたわけだが、なぜかNode-REDでinjectをした際に
サーバーとの接続が中断されてしまう。
サイトの更新をすると”Application error”と表示されNode-REDが開けなくなり、ある程度時間がたつと開けるようになる。
といったような事象が多発した。原因は結局のところ判明はしなかったが、heroku側の連続稼働の仕様、JavaScriptのソースの誤り等が原因ではないかと考察をしている。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2618860/f597b69e-7e92-5633-0dc7-8be49ee4ac4c.png)
![687474~1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2618860/4c01964b-92c7-7ecc-ca0c-078c17853b0e.png)


## あとがき
今回の調査で今現在人気のあるタグTOP2はPythonとJavaScriptで、2つのタグでどのような記事が書かれているのかを見て今のトレンドを考察した。その結果、その言語の強みを活かした記事の他にも自分が知らないような技術を使った記事があった。
その一方でタイトルだけでは実際にどのようなことを記事にまとめているのかが推測がしにくいことが分かった。
そのため、もっと調査対象や観点を増やせば更に新たなトレンドや技術を知れるのではないか。とQiitaAPIとJavaScirptの可能性を感じた調査であった。

## 引用＆参考

https://qiita.com/api/v2/docs

https://qiita.com/ikumi623/items/69298f93ef931bd29b75