プログラミング言語の人気ランキングをQiitaAPIで調べて纏める（PythonとFlutterによる実装の例）

# はじめに

どのプログラミング言語を勉強したらいいか？人気な言語はどれ？気になる人もたくさんいるでしょう。ランキングしようとしても色んな基準があって一概と答えることはできないが、ここではQiitaでの記事数とフォロワー数でランキングを纏めてみたいと思います。参考になれば幸いです。

纏める方法は[QiitaAPI](https://qiita.com/api/v2/docs)を通じてデータを取得して扱うことです。主にPythonを使いますが、Flutterを使ってスマホで表示するアプリも作ってみたので、ここでもコードを載せて説明します。


# 結果発表

## 扱う対象について

ここで扱うのは言語の名前である[Qiitaでのタグ](https://qiita.com/tags)です。全部**65言語**あります。

勿論実際にもっとたくさん言語があるはずですが、ここでQiitaで**記事数が50以上**だけ扱うので、あまり誰も知らないマイナー言語は含まれません。（私が使う[IDL言語](https://qiita.com/phyblas/items/c62e8e9b4cb51a4b9447)も記事数9しかないので入れていません。[ALGOL](https://ja.wikipedia.org/wiki/ALGOL)や[Ada](https://ja.wikipedia.org/wiki/Ada)も）

できるだけたくさんの言語を入れようとしていますが、もしまだどこかの人気言語を見落としていたら指摘して頂ければ追加します。

ここで扱うのはプログラミング言語だけなので、[SQL](https://ja.wikipedia.org/wiki/SQL)、[HTML](https://ja.wikipedia.org/wiki/HTML)、[CSS](https://ja.wikipedia.org/wiki/Cascading_Style_Sheets)、[LaTeX](https://ja.wikipedia.org/wiki/LaTeX)などは対象外です。

[SAS](https://ko.wikipedia.org/wiki/SAS_(소프트웨어))や[Coq](https://ja.wikipedia.org/wiki/Coq)など独特な言語を使うソフトウェアはプログラミング言語リストに入ることもあるようですが、厳密にはプログラミング言語の名前ではなくソフトウェアの名前なので対象外です。

[VBA](https://ja.wikipedia.org/wiki/Visual_Basic_for_Applications)は[VB（Visual Basic）言語](https://ja.wikipedia.org/wiki/Visual_Basic)の用途で言語自体を差すのではないので対象外ですが、実際に[VBAタグ](https://qiita.com/tags/VBA)の数が圧倒的にVBや[VB.net](https://ja.wikipedia.org/wiki/Visual_Basic_.NET)より多いので、VBの人気はVBAタグで考慮した方がいいかもしれません。

一文字の名前の言語は[C言語](https://ja.wikipedia.org/wiki/C言語)、[D言語](https://ja.wikipedia.org/wiki/D言語)、[R言語](https://ja.wikipedia.org/wiki/R言語)がありますが、ここでは[C](https://qiita.com/tags/C)と[R](https://qiita.com/tags/R)はそのままタグの名前として定着していますが、D言語はdlangというタグが使われています。[clang](https://qiita.com/tags/clang)というタグもありますが、これはC言語のことではなく、[別の意味](https://ja.wikipedia.org/wiki/Clang)なので紛らわしい気もします。

[Mind](https://ja.wikipedia.org/wiki/mind_(プログラミング言語))、[なでしこ](https://ja.wikipedia.org/wiki/なでしこ_(プログラミング言語))、[プロデル](https://ja.wikipedia.org/wiki/プロデル)という[日本語プログラミング言語](https://ja.wikipedia.org/wiki/日本語プログラミング言語)も含まれます。


## 全部の言語のタグ纏め

以下の表は2024年1月20日時点でQiitaAPIから取得したデータから纏めたもの。名前の順で並んでいます。後ろにある括弧はこの65の言語の中での順位。

<table>
<tr><th style="text-align: center">言語</th><th style="text-align: center">記事数</th><th style="text-align: center">フォロワー数</th></tr>
<tr></tr>
<tr><td><a href="https://ja.wikipedia.org/wiki/ActionScript">ActionScript</a></td><td><a href="https://qiita.com/tags/ActionScript" target="_blank">261</a> (46位)</td><td>235 (40位)</td></tr>
<tr><td><a href="https://ja.wikipedia.org/wiki/AppleScript">AppleScript</a></td><td><a href="https://qiita.com/tags/AppleScript" target="_blank">489</a> (38位)</td><td>168 (46位)</td></tr>
<tr><td><a href="https://ja.wikipedia.org/wiki/assembly">assembly</a></td><td><a href="https://qiita.com/tags/assembly" target="_blank">154</a> (55位)</td><td>67 (52位)</td></tr>
<tr><td><a href="https://ja.wikipedia.org/wiki/AWK">AWK</a></td><td><a href="https://qiita.com/tags/AWK" target="_blank">560</a> (34位)</td><td>287 (36位)</td></tr>
<tr><td><a href="https://ja.wikipedia.org/wiki/BASIC">BASIC</a></td><td><a href="https://qiita.com/tags/BASIC" target="_blank">200</a> (49位)</td><td>9 (64位)</td></tr>
<tr><td><a href="https://ja.wikipedia.org/wiki/brainfuck">brainfuck</a></td><td><a href="https://qiita.com/tags/brainfuck" target="_blank">75</a> (63位)</td><td>17 (61位)</td></tr>
<tr><td><a href="https://ja.wikipedia.org/wiki/C言語">C</a></td><td><a href="https://qiita.com/tags/C" target="_blank">5250</a> (12位)</td><td>34130 (8位)</td></tr>
<tr><td><a href="https://ja.wikipedia.org/wiki/C_Sharp">C#</a></td><td><a href="https://qiita.com/tags/C#" target="_blank">16168</a> (7位)</td><td>49961 (6位)</td></tr>
<tr><td><a href="https://ja.wikipedia.org/wiki/C++">C++</a></td><td><a href="https://qiita.com/tags/C++" target="_blank">11123</a> (10位)</td><td>40338 (7位)</td></tr>
<tr><td><a href="https://ja.wikipedia.org/wiki/Carbon_(プログラミング言語)">Carbon</a></td><td><a href="https://qiita.com/tags/Carbon" target="_blank">119</a> (59位)</td><td>7 (65位)</td></tr>
<tr><td><a href="https://ja.wikipedia.org/wiki/Clojure">Clojure</a></td><td><a href="https://qiita.com/tags/Clojure" target="_blank">691</a> (27位)</td><td>563 (26位)</td></tr>
<tr><td><a href="https://ja.wikipedia.org/wiki/cobol">cobol</a></td><td><a href="https://qiita.com/tags/cobol" target="_blank">153</a> (56位)</td><td>71 (51位)</td></tr>
<tr><td><a href="https://ja.wikipedia.org/wiki/CoffeeScript">CoffeeScript</a></td><td><a href="https://qiita.com/tags/CoffeeScript" target="_blank">967</a> (23位)</td><td>17071 (12位)</td></tr>
<tr><td><a href="https://ja.wikipedia.org/wiki/Crystal_(プログラミング言語)">Crystal</a></td><td><a href="https://qiita.com/tags/Crystal" target="_blank">296</a> (44位)</td><td>207 (43位)</td></tr>
<tr><td><a href="https://ja.wikipedia.org/wiki/Dart">Dart</a></td><td><a href="https://qiita.com/tags/Dart" target="_blank">2844</a> (18位)</td><td>876 (23位)</td></tr>
<tr><td><a href="https://ja.wikipedia.org/wiki/Delphi">Delphi</a></td><td><a href="https://qiita.com/tags/Delphi" target="_blank">686</a> (28位)</td><td>229 (41位)</td></tr>
<tr><td><a href="https://ja.wikipedia.org/wiki/D言語">dlang</a></td><td><a href="https://qiita.com/tags/dlang" target="_blank">511</a> (37位)</td><td>228 (42位)</td></tr>
<tr><td><a href="https://ja.wikipedia.org/wiki/ECMAScript">ECMAScript</a></td><td><a href="https://qiita.com/tags/ECMAScript" target="_blank">560</a> (35位)</td><td>282 (37位)</td></tr>
<tr><td><a href="https://ja.wikipedia.org/wiki/Elixir_(プログラミング言語)">Elixir</a></td><td><a href="https://qiita.com/tags/Elixir" target="_blank">4469</a> (14位)</td><td>1301 (21位)</td></tr>
<tr><td><a href="https://ja.wikipedia.org/wiki/Elm_(プログラミング言語)">Elm</a></td><td><a href="https://qiita.com/tags/Elm" target="_blank">674</a> (29位)</td><td>565 (25位)</td></tr>
<tr><td><a href="https://ja.wikipedia.org/wiki/Erlang">Erlang</a></td><td><a href="https://qiita.com/tags/Erlang" target="_blank">564</a> (33位)</td><td>430 (29位)</td></tr>
<tr><td><a href="https://ja.wikipedia.org/wiki/F_Sharp">F#</a></td><td><a href="https://qiita.com/tags/F#" target="_blank">399</a> (40位)</td><td>337 (33位)</td></tr>
<tr><td><a href="https://ja.wikipedia.org/wiki/Forth">Forth</a></td><td><a href="https://qiita.com/tags/Forth" target="_blank">80</a> (62位)</td><td>22 (59位)</td></tr>
<tr><td><a href="https://ja.wikipedia.org/wiki/Fortran">Fortran</a></td><td><a href="https://qiita.com/tags/Fortran" target="_blank">661</a> (30位)</td><td>332 (34位)</td></tr>
<tr><td><a href="https://ja.wikipedia.org/wiki/GLSL">GLSL</a></td><td><a href="https://qiita.com/tags/GLSL" target="_blank">602</a> (32位)</td><td>436 (28位)</td></tr>
<tr><td><a href="https://ja.wikipedia.org/wiki/Go_(プログラミング言語)">Go</a></td><td><a href="https://qiita.com/tags/Go" target="_blank">12869</a> (9位)</td><td>8217 (17位)</td></tr>
<tr><td><a href="https://ja.wikipedia.org/wiki/Groovy">Groovy</a></td><td><a href="https://qiita.com/tags/Groovy" target="_blank">608</a> (31位)</td><td>267 (38位)</td></tr>
<tr><td><a href="https://ja.wikipedia.org/wiki/Haskell">Haskell</a></td><td><a href="https://qiita.com/tags/Haskell" target="_blank">2251</a> (19位)</td><td>14395 (14位)</td></tr>
<tr><td><a href="https://ja.wikipedia.org/wiki/Haxe">Haxe</a></td><td><a href="https://qiita.com/tags/Haxe" target="_blank">178</a> (52位)</td><td>190 (45位)</td></tr>
<tr><td><a href="https://ja.wikipedia.org/wiki/Java">Java</a></td><td><a href="https://qiita.com/tags/Java" target="_blank">23712</a> (5位)</td><td>88248 (3位)</td></tr>
<tr><td><a href="https://ja.wikipedia.org/wiki/JavaScript">JavaScript</a></td><td><a href="https://qiita.com/tags/JavaScript" target="_blank">54947</a> (2位)</td><td>147065 (2位)</td></tr>
<tr><td><a href="https://ja.wikipedia.org/wiki/JScript">JScript</a></td><td><a href="https://qiita.com/tags/JScript" target="_blank">177</a> (53位)</td><td>54 (54位)</td></tr>
<tr><td><a href="https://ja.wikipedia.org/wiki/Julia_(プログラミング言語)">Julia</a></td><td><a href="https://qiita.com/tags/Julia" target="_blank">1477</a> (21位)</td><td>1061 (22位)</td></tr>
<tr><td><a href="https://ja.wikipedia.org/wiki/Kotlin">Kotlin</a></td><td><a href="https://qiita.com/tags/Kotlin" target="_blank">7086</a> (11位)</td><td>3326 (19位)</td></tr>
<tr><td><a href="https://ja.wikipedia.org/wiki/lisp">lisp</a></td><td><a href="https://qiita.com/tags/lisp" target="_blank">429</a> (39位)</td><td>400 (30位)</td></tr>
<tr><td><a href="https://ja.wikipedia.org/wiki/Lua">Lua</a></td><td><a href="https://qiita.com/tags/Lua" target="_blank">729</a> (26位)</td><td>376 (32位)</td></tr>
<tr><td><a href="https://ja.wikipedia.org/wiki/MATLAB">MATLAB</a></td><td><a href="https://qiita.com/tags/MATLAB" target="_blank">1274</a> (22位)</td><td>735 (24位)</td></tr>
<tr><td><a href="https://ja.wikipedia.org/wiki/mind_(プログラミング言語)">mind</a></td><td><a href="https://qiita.com/tags/mind" target="_blank">175</a> (54位)</td><td>16 (62位)</td></tr>
<tr><td><a href="https://ja.wikipedia.org/wiki/Nim">Nim</a></td><td><a href="https://qiita.com/tags/Nim" target="_blank">382</a> (42位)</td><td>378 (31位)</td></tr>
<tr><td><a href="https://ja.wikipedia.org/wiki/Objective-C">Objective-C</a></td><td><a href="https://qiita.com/tags/Objective-C" target="_blank">4067</a> (16位)</td><td>23653 (10位)</td></tr>
<tr><td><a href="https://ja.wikipedia.org/wiki/OCaml">OCaml</a></td><td><a href="https://qiita.com/tags/OCaml" target="_blank">199</a> (50位)</td><td>257 (39位)</td></tr>
<tr><td><a href="https://ja.wikipedia.org/wiki/Pascal">Pascal</a></td><td><a href="https://qiita.com/tags/Pascal" target="_blank">232</a> (48位)</td><td>20 (60位)</td></tr>
<tr><td><a href="https://ja.wikipedia.org/wiki/Perl">Perl</a></td><td><a href="https://qiita.com/tags/Perl" target="_blank">1832</a> (20位)</td><td>18229 (11位)</td></tr>
<tr><td><a href="https://ja.wikipedia.org/wiki/PHP_(プログラミング言語)">PHP</a></td><td><a href="https://qiita.com/tags/PHP" target="_blank">28955</a> (4位)</td><td>81755 (4位)</td></tr>
<tr><td><a href="https://ja.wikipedia.org/wiki/Prolog">Prolog</a></td><td><a href="https://qiita.com/tags/Prolog" target="_blank">385</a> (41位)</td><td>124 (49位)</td></tr>
<tr><td><a href="https://ja.wikipedia.org/wiki/purescript">purescript</a></td><td><a href="https://qiita.com/tags/purescript" target="_blank">263</a> (45位)</td><td>164 (47位)</td></tr>
<tr><td><a href="https://ja.wikipedia.org/wiki/Python">Python</a></td><td><a href="https://qiita.com/tags/Python" target="_blank">78028</a> (1位)</td><td>167011 (1位)</td></tr>
<tr><td><a href="https://ja.wikipedia.org/wiki/Q_Sharp">Q#</a></td><td><a href="https://qiita.com/tags/Q#" target="_blank">58</a> (64位)</td><td>48 (56位)</td></tr>
<tr><td><a href="https://ja.wikipedia.org/wiki/R言語">R</a></td><td><a href="https://qiita.com/tags/R" target="_blank">4714</a> (13位)</td><td>2547 (20位)</td></tr>
<tr><td><a href="https://ja.wikipedia.org/wiki/Ruby">Ruby</a></td><td><a href="https://qiita.com/tags/Ruby" target="_blank">40765</a> (3位)</td><td>67430 (5位)</td></tr>
<tr><td><a href="https://ja.wikipedia.org/wiki/Rust_(プログラミング言語)">Rust</a></td><td><a href="https://qiita.com/tags/Rust" target="_blank">4281</a> (15位)</td><td>3639 (18位)</td></tr>
<tr><td><a href="https://ja.wikipedia.org/wiki/Scala">Scala</a></td><td><a href="https://qiita.com/tags/Scala" target="_blank">3353</a> (17位)</td><td>15669 (13位)</td></tr>
<tr><td><a href="https://ja.wikipedia.org/wiki/Scheme">Scheme</a></td><td><a href="https://qiita.com/tags/Scheme" target="_blank">247</a> (47位)</td><td>11966 (15位)</td></tr>
<tr><td><a href="https://ja.wikipedia.org/wiki/Scratch_(プログラミング言語)">Scratch</a></td><td><a href="https://qiita.com/tags/Scratch" target="_blank">381</a> (43位)</td><td>158 (48位)</td></tr>
<tr><td><a href="https://ja.wikipedia.org/wiki/Smalltalk">Smalltalk</a></td><td><a href="https://qiita.com/tags/Smalltalk" target="_blank">144</a> (57位)</td><td>62 (53位)</td></tr>
<tr><td><a href="https://ja.wikipedia.org/wiki/solidity">solidity</a></td><td><a href="https://qiita.com/tags/solidity" target="_blank">917</a> (24位)</td><td>330 (35位)</td></tr>
<tr><td><a href="https://ja.wikipedia.org/wiki/SuperCollider">SuperCollider</a></td><td><a href="https://qiita.com/tags/SuperCollider" target="_blank">52</a> (65位)</td><td>53 (55位)</td></tr>
<tr><td><a href="https://ja.wikipedia.org/wiki/Swift_(プログラミング言語)">Swift</a></td><td><a href="https://qiita.com/tags/Swift" target="_blank">21976</a> (6位)</td><td>10768 (16位)</td></tr>
<tr><td><a href="https://ja.wikipedia.org/wiki/Tcl">Tcl</a></td><td><a href="https://qiita.com/tags/Tcl" target="_blank">97</a> (61位)</td><td>40 (57位)</td></tr>
<tr><td><a href="https://ja.wikipedia.org/wiki/TypeScript">TypeScript</a></td><td><a href="https://qiita.com/tags/TypeScript" target="_blank">13663</a> (8位)</td><td>27267 (9位)</td></tr>
<tr><td><a href="https://ja.wikipedia.org/wiki/Visual_Basic">VB</a></td><td><a href="https://qiita.com/tags/VB" target="_blank">101</a> (60位)</td><td>88 (50位)</td></tr>
<tr><td><a href="https://ja.wikipedia.org/wiki/VB.Net">VB.Net</a></td><td><a href="https://qiita.com/tags/VB.Net" target="_blank">734</a> (25位)</td><td>462 (27位)</td></tr>
<tr><td><a href="https://ja.wikipedia.org/wiki/VBScript">VBScript</a></td><td><a href="https://qiita.com/tags/VBScript" target="_blank">554</a> (36位)</td><td>199 (44位)</td></tr>
<tr><td><a href="https://ja.wikipedia.org/wiki/なでしこ_(プログラミング言語)">なでしこ</a></td><td><a href="https://qiita.com/tags/なでしこ" target="_blank">198</a> (51位)</td><td>25 (58位)</td></tr>
<tr><td><a href="https://ja.wikipedia.org/wiki/プロデル">プロデル</a></td><td><a href="https://qiita.com/tags/プロデル" target="_blank">121</a> (58位)</td><td>14 (63位)</td></tr>
</table>


## 記事数ランキング

Qiitaで最も記事数が多い言語トップ40を棒グラフに書いて纏めます。

![kijirank.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202903/17724c07-609d-ed7d-63ac-bd5050775a35.png)

やはり一番人気なのはPythonで次はJavaScriptですね。これは記事数だけでなく、フォロワー数を見ても同じ結果です。


## フォロワー数ランキング

フォロワー数で並べてまた棒グラフを見たらこうなります。

![folrank.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202903/7b355ecc-489f-d78c-f053-37783cf9ef93.png)


記事数と比べたら大体同じような傾向ですが、違うところも多いです。Rubyは記事数は3番なのに、フォロワーは5番となっています。逆にPerlやCoffeeScriptなどはフォロワー数のわりに記事数は少ない。更にSchemeはフォロワー数だけすごく多いが、記事数ランキングに入らないのです。

## 記事数とフォロワー数の分布図

記事数とフォロワーの関係を可視化するために分布図も描きます。ただし多すぎないようにここでは記事数25番までだけ表示します。

![kiji-fol.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202903/28c5762a-54c8-53e1-d326-12d415efdd8a.png)

# Pythonによる実装

以上QiitaAPIに接続してデータを取ってグラフに書いたのは全部、一番人気と言われるPythonです。

Pythonを使うとどの作業も簡単にできてしまって本当に便利ですね。人気になるのも当然な結果でしょう。

ここでは今回使ったコードも載せます。

## データ取得
まずデータを取得して`.csv`に保存するコードです。`requests`と`pandas`を使ったら簡単にできます。
```python
import requests
import pandas as pd

lis_df = []
for i in range(1,51):
    req = requests.get('https://qiita.com/api/v2/tags?page=%d&per_page=100&sort=count'%i)
    lis_df.append(pd.DataFrame(req.json())[['id','items_count','followers_count']])
pd.concat(lis_df,ignore_index=True).set_index('id').to_csv('qiita_tag.csv')
```

ここで得られるのは最も記事数が多い5000のタグです。その中に今回の対象であるプログラミング言語の前であるタグが含まれます。


## 棒グラフと分布図

データを手に入れた後、次は纏めて`matplotlib`でグラフを描きます。

```python
import pandas as pd
import matplotlib.pyplot as plt

# 扱う言語のリスト
gengo_lis = 'ActionScript AppleScript assembly AWK BASIC brainfuck C C# C++ Carbon Clojure cobol CoffeeScript Crystal Dart Delphi dlang ECMAScript Elixir Elm Erlang F# Forth Fortran GLSL Go Groovy Haskell Haxe Java JavaScript JScript Julia Kotlin lisp Lua MATLAB mind Nim Objective-C OCaml Pascal Perl PHP Prolog purescript Python Q# R Ruby Rust Scala Scheme Scratch Smalltalk solidity SuperCollider Swift Tcl TypeScript VB VB.Net VBScript なでしこ プロデル'.split(' ')
# 言語の名前であるタグだけ抽出する
df = pd.read_csv('qiita_tag.csv',index_col='id').loc[gengo_lis]

# フォロー数の棒グラフ
y = range(40)
plt.figure(figsize=[6,7.5],dpi=100)
ax = plt.axes(ylim=[min(y)-0.5,max(y)+0.5])
df.sort_values('followers_count',inplace=True)
plt.barh(y,df['followers_count'][-40:],color='#AAEE44',ec='k')
plt.yticks(y,['%s: %6s'%x for x in df['followers_count'][-40:].items()])
plt.title('フォロー数',family='MS Gothic')
plt.semilogx()
plt.tight_layout()
plt.savefig('folrank.png')

# 記事数の棒グラフ
plt.figure(figsize=[6,7.5],dpi=100)
ax = plt.axes(ylim=[min(y)-0.5,max(y)+0.5])
df.sort_values('items_count',inplace=True)
plt.barh(y,df['items_count'][-40:],color='#EEAA44',ec='k')
plt.yticks(y,['%s: %6s'%x for x in df['items_count'][-40:].items()])
plt.title('記事数',family='MS Gothic')
plt.semilogx()
plt.tight_layout()
plt.savefig('kijirank.png')

# 記事数とフォロワー数を比較する散布図
plt.figure(figsize=[6,6],dpi=100)
plt.xlabel('記事数',family='MS Gothic')
plt.ylabel('フォロー数',family='MS Gothic')
plt.scatter(df['items_count'][-25:],df['followers_count'][-25:],s=6,fc='r')
for gengo in df.index[-25:]:
    plt.text(df['items_count'][gengo],df['followers_count'][gengo],gengo,ha='right',va='top',family='MS Gothic',size=9)
plt.loglog()
plt.grid(ls=':',which='both')
plt.tight_layout()
plt.savefig('kiji-fol.png')
plt.close()
```

なお、ランキングの順位はこう書いて得られます。
```python
df['items_count_rank'] = (-df['items_count']).argsort().argsort()+1
df['followers_count_rank'] = (-df['followers_count']).argsort().argsort()+1
```

# Flutterによる実装

## できたもの

最近Flutterを勉強し始めて随分と気に入ったので、この実装もFlutterで何かしたくてこんなものを作ることになりました。

まずできたアプリを`.apk`ファイルにデプロイしてスマホに入れてインストールして起動したらまずは空っぽですが、「データをロードする」ボタンを押したらQiitaAPIからタグのデータを読み込んで纏めて並べてこういう表が出てきます。スライドして下の方も見られます。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202903/19273858-2a87-96d8-32e0-0daaf9320313.png)

このアプリは3タブに分けられて、次のタブを押したら記事数の順番で並んでいる棒グラフになります。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202903/2f912710-6914-3428-c5e1-c4a21be8bb1a.png)

そしてフォロワー数の順番で並んでいる棒グラフ。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202903/b88ae0e2-fa30-186e-6005-2f0fc7b566ef.png)

一度ロードしたらデータは保存されるので、閉じて再びアプリを起動してもデータはそのままで、もう一度ロードする必要はないが、時間が経ってまた新しいデータに更新したい場合またボタンを押します。


## 実装のコード

ここではFlutterやDartなどの基本を省略します。コードの中で色々解説を書きます。

### 使うパッケージ

今回の実装で必要なのはこの2つのパッケージです。
- [http](https://pub.dev/packages/http)
- [shared_preferences](https://pub.dev/packages/shared_preferences)

`http`はQiitaAPIに接続してデータを取得するためであり、`shared_preferences`は取得したデータを保存するためです。

### AndroidManifest.xml

Androidで`http`パッケージが使えるようにするにこの部分を追加する必要があります。
```android\app\src\main\AndroidManifest.xml
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
```

### pubspec.yml

今回使う2つのパッケージを`pubspec.yml`に追加します。
```pubspec.yml
  shared_preferences: ^2.2.2
  http: ^1.2.0
```

### main.dart

コードは分けずに全部ただ一つのファイルに纏めているので長いです。分けてもいいが、面倒くなるのでこのままでいい。
```lib\main.dart
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:shared_preferences/shared_preferences.dart';

void main() {
  runApp(const QiiApp());
}

class QiiApp extends StatelessWidget {
  const QiiApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const DefaultTabController(length: 3, child: QiiPage()),
    );
  }
}

class QiiPage extends StatefulWidget {
  const QiiPage({super.key});

  @override
  State<QiiPage> createState() => _QiiPageState();
}

class _QiiPageState extends State<QiiPage> {
  // 扱うプログラミング言語の名前のリスト
  List gengoLis =
      'ActionScript AppleScript assembly AWK BASIC brainfuck C C# C++ Carbon Clojure cobol CoffeeScript Crystal Dart Delphi dlang ECMAScript Elixir Elm Erlang F# Forth Fortran GLSL Go Groovy Haskell Haxe Java JavaScript JScript Julia Kotlin lisp Lua MATLAB mind Nim Objective-C OCaml Pascal Perl PHP Prolog purescript Python Q# R Ruby Rust Scala Scheme Scratch Smalltalk solidity SuperCollider Swift Tcl TypeScript VB VB.Net VBScript なでしこ プロデル'
          .split(' ');

  // 必要なウィジェットのリスト変数を宣言しておく
  List<TableRow> tableRowLis = [];
  List<Row> kijiRankBar = [];
  List<Stack> folRankBar = [];

  // タグのデータを並べてウィジェットに入れる
  void setQdata(qdata) {
    // 言語リストに含まれるものだけ取得する
    List qTagLis1 = qdata.where((q) => gengoLis.contains(q['id'])).toList();
    // リストをコピーする
    List qTagLis2 = [...qTagLis1];
    List qTagLis3 = [...qTagLis1];

    // 名前で並び替える
    qTagLis1
        .sort((a, b) => a['id'].toUpperCase().compareTo(b['id'].toUpperCase()));
    // 記事数で並び替える
    qTagLis2.sort((a, b) => b['n_kiji'].compareTo(a['n_kiji']));
    // フォロワー数で並び替える数で並び替える
    qTagLis3.sort((a, b) => b['n_fol'].compareTo(a['n_fol']));

    int nKijiMax = 0; // 記事数の最大値
    int nFolMax = 0; // フォロワー数の最大値
    TextStyle style =
        const TextStyle(fontWeight: FontWeight.bold, fontSize: 18);
    // 全体のデータを表示する表の行
    tableRowLis = [
      // ヘッダの行
      TableRow(children: <Widget>[
        TableCell(
          child: Container(
            padding: const EdgeInsets.all(3),
            alignment: Alignment.center,
            child: Text('言語', style: style),
          ),
        ),
        TableCell(
          child: Container(
            padding: const EdgeInsets.all(3),
            alignment: Alignment.center,
            child: Text('記事', style: style),
          ),
        ),
        TableCell(
          child: Container(
            padding: const EdgeInsets.all(3),
            alignment: Alignment.center,
            child: Text('フォロワー', style: style),
          ),
        ),
      ])
    ];

    // 表に行を入れていく
    for (Map q in qTagLis1) {
      // 最大値の更新
      if (q['n_kiji'] > nKijiMax) nKijiMax = q['n_kiji'];
      if (q['n_fol'] > nFolMax) nFolMax = q['n_fol'];

      tableRowLis.add(TableRow(
        children: <Widget>[
          // 言語の名前
          TableCell(
            child: Container(
              padding: const EdgeInsets.fromLTRB(10, 3, 10, 3),
              child: Text('${q['id']}'),
            ),
          ),
          // 記事数
          TableCell(
            child: Container(
              padding: const EdgeInsets.fromLTRB(10, 3, 10, 3),
              alignment: Alignment.centerRight,
              child: Text('${q['n_kiji']}'),
            ),
          ),
          // フォロワー数
          TableCell(
            child: Container(
              padding: const EdgeInsets.fromLTRB(10, 3, 10, 3),
              alignment: Alignment.centerRight,
              child: Text('${q['n_fol']}'),
            ),
          )
        ],
      ));
    }

    // 記事数順で表す行のリスト
    kijiRankBar = [];
    for (Map q in qTagLis2) {
      kijiRankBar.add(Row(
        children: [
          Container(
            // 言語の名前を書く左の部分
            color: const Color(0xFFDDDDEE),
            width: 100,
            height: 28,
            child: Padding(
              padding: const EdgeInsets.all(3.0),
              child: Text(q['id']),
            ),
          ),
          Flexible(
            // 記事数によって長くなる棒
            child: FractionallySizedBox(
              widthFactor: q['n_kiji'] / nKijiMax,
              child: Container(
                color: const Color(0xFFEEAA44),
                height: 26,
              ),
            ),
          ),
          Container(
            // 棒の右側に記事数
            padding: const EdgeInsets.all(3.0),
            child: Text('${q['n_kiji']}'),
          ),
        ],
      ));
    }

    // フォロワー数順で表す行のリスト
    folRankBar = [];
    for (Map q in qTagLis3) {
      folRankBar.add(Stack(
        children: [
          Container(
            // 棒の後ろの灰色
            color: const Color(0xFFDDDDEE),
            height: 26,
          ),
          Container(
            // フォロワー数によって長くなる棒
            color: const Color(0xFFAAEE44),
            width: MediaQuery.of(context).size.width * q['n_fol'] / nFolMax,
            height: 26,
          ),
          SizedBox(
            // 言語の名前とフォロワー数
            height: 28,
            child: Padding(
              padding: const EdgeInsets.all(3.0),
              child: Text('${q['id']} (${q['n_fol']})'),
            ),
          ),
        ],
      ));
    }
  }

  // QiitaAPIからデータを取得する関数
  void loadQiitaTag() async {
    List qdata = []; // タグのデータわ収めるリスト
    try {
      for (int i = 1; i < 51; i++) {
        // QiitaAPIにアクセス
        var response = await http.get(Uri.parse(
            'https://qiita.com/api/v2/tags?page=$i&per_page=100&sort=count'));

        for (Map q in jsonDecode(response.body)) {
          // 読み込まれたデータをリストに収めていく
          qdata.add({
            'id': q['id'],
            'n_kiji': q['items_count'],
            'n_fol': q['followers_count'],
          });
        }
      }

      // shared_preferencesを起動する
      SharedPreferences prefs = await SharedPreferences.getInstance();
      // データを保存する
      await prefs.setString('qdata', jsonEncode(qdata));
      // 表示のために配置する
      setState(() {
        setQdata(qdata);
      });
    } catch (e) {
      // 何かエラーが出る場合そのエラーメッセージを表示する
      setState(() {
        tableRowLis = [
          TableRow(children: <Widget>[Text('$e')])
        ];
      });
    }
  }

  // shared_preferencesで保存されたデータを読み込んで配置する
  void readQdata() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    setState(() {
      setQdata(jsonDecode(prefs.getString('qdata') ?? '[]'));
    });
  }

  // アプリを起動した時に実行する関数
  @override
  void initState() {
    super.initState();
    readQdata();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          backgroundColor: const Color(0xFF88FFCC),
          title: const TabBar(
            // 上のメニューの部分
            isScrollable: true,
            indicatorColor: Color(0xFFCC9966),
            tabs: [
              Tab(text: '全体'),
              Tab(text: '記事数順'),
              Tab(text: 'フォロワー数順'),
            ],
            labelStyle: TextStyle(fontSize: 20),
          )),
      body: TabBarView(children: [
        // 全体のデータを表すタブ
        ListView(
          children: [
            // 押したらQiitaAPIに接続してデータを取得するボタン
            ElevatedButton(
              onPressed: loadQiitaTag,
              child: const Text(
                'データをロードする',
                style: TextStyle(fontSize: 20),
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(3.0),
              child: Table(
                border: TableBorder.all(),
                children: tableRowLis,
              ),
            )
          ],
        ),
        // 記事数のタブ
        ListView(
          children: kijiRankBar,
        ),
        // フォロワー数のタブ
        ListView(
          children: folRankBar,
        ),
      ]),
    );
  }
}
```


## 参考になった記事
- [Flutterでshared_preferencesを使う](https://qiita.com/fukuit/items/0f385dde916cd7668c72)
- [DartでListをソートする方法](https://qiita.com/sekitaka_1214/items/59890f8a7318d14f4fc9)
- [Flutterでタブ画面を作る。](https://qiita.com/yuyuyu159/items/ad4b556914a661927a8b)
- [\[Flutter\] TabBarとTabBarViewを勉強しよう。](https://qiita.com/Dreamwalker/items/cc19bb4f8b7068ae0fd3)
- [FlutterでちょっとイケてるTabを書く](https://qiita.com/yasudadesu/items/95f553d5a7c5d345aa6e)
- [【Flutter】AppBarを使わずにTabBarを使う](https://qiita.com/yuskey/items/3ef09fd4b85347e7442f)
- [DartのListやMapのClone(Deep Copy)](https://qiita.com/kasa_le/items/fc5379ba15e6193f37f8)
- [【Dart】自作クラスのリストに関するあれこれ](https://qiita.com/mayaaaaaaaaaaa/items/aaf668804873d1e26afa)
- [【Flutter】TableのWidgetに枠線（border）を付けたい](https://qiita.com/someone7140/items/93490eac9ff650e159f5)
- [【Flutterレイアウト】Flex、Row、Column、Wrap、Stackについて](https://qiita.com/ling350181/items/47c8029e53af392f0e5f)
- [FlutterでHTTPリクエストやってみる。](https://qiita.com/JunichiHashimoto/items/11b6b3df4925a808bcd3)


# 他にプログラミング言語ランキング関連の記事
ランキングの基準はそれぞれ色々違って、時間によっても変わっていくので、この記事以外にも色んな基準と色んな時期に書いた記事を読んで比べて参考にしてみましょう。

以下Qiitaで見つけた他のランキング関連の記事：
- [GitHubから言語ランキング作ってみた(2013/07/26)](https://qiita.com/potato2004/items/fbbc5d5edc80b43801e7)
- [人気プログラミング言語ランキング](https://qiita.com/tadnakam/items/0f724e7cb0f3a0f0f64f)（2015年）
- [プログラミング言語ランキングより：2016年 動向を見守るべき言語は Elixir、Julia、Rust、Swift、TypeScript](https://qiita.com/tatsuya6502/items/d82fd8f1244afff4db13)
- [GitHub からみたプログラミング言語の動向（半年変化をアップデート）](https://qiita.com/yahhonob/items/de92b515f87dfa484318)（2016年）
- [初心者がこれから学ぶべき言語を目的別にまとめてみた](https://qiita.com/blog3nt/items/c84b95ff3c0045416ac3)（2016年）
- [プログラミング言語の人気](https://qiita.com/ty-edelweiss/items/b8172c2e22726bc08aeb)（2017年）
- [言語選定とかしてみる](https://qiita.com/ugdark/items/de6098c8fee6c4ad8ec8)（2018年）
- [2019年にお勧めのプログラミング言語](https://qiita.com/ITnews/items/6b7680c3ca635e83c275)
- [2019年にわざわざ学ばなくてもいいプログラミング言語](https://qiita.com/rana_kualu/items/5be7a827ed370c3cc67f)
- [全ての開発者が学ぶべき5つの言語](https://qiita.com/poly_soft/items/e89bc757596cfdfba784)（2019年）
- [プログラム言語ランキング](https://qiita.com/chenglin/items/5ca75bab901d1fff9ee1)（2019年）
- [QiitaAPIで各プログラミング言語のタグの記事とフォロワーの数を調べて纏めたりする（pythonとrubyを使う）](https://qiita.com/phyblas/items/e6d9803bc0421e455653)（2019年）
- [Qiitaに掲載されているプログラミング言語別の記事数を調べてみた](https://qiita.com/devmynote/items/9270dfbb36b9d778bf82)（2020年）
- [8月のプログラミング言語ランキング：データ抽出と人工知能言語の台頭！](https://qiita.com/ScrapeStorm-JP/items/fea2ddab27dd59167f58)（2021年）
- [2022年第一四半期 プログラミング言語ランキング](https://qiita.com/rana_kualu/items/356f64523f3369ff46c2)
- [おしゃれなプログラミング言語ランキング](https://qiita.com/omo_taku/items/9dd1ec6326caaf1b6d1e)（2023年）
- [実際なんの言語が市場で需要が高いんだろう？と思って調べてみました](https://qiita.com/suga_slj/items/7a2ff9ee9c7a54b4617f)（2023年）
- [「実際に仕事で使われているプログラミング言語」ランキング](https://qiita.com/mmake/items/68cc8f07331e0ef8ce50)（2023年）
- [アドベントカレンダーでプログラミング言語ランキングしてみた](https://qiita.com/newta/items/5986bbe4627cc7a3a4b5)（2023年）