最近、未経験からエンジニア就職を目指しているをよく見るようになりましたね。
それに伴ってポートフォリオを作ってみた趣旨の記事もよく見るようになりました。
自分が就職した当時はポートフォリオなんて言葉を知らなかったし、なんなら今の自分よりトレンド技術をうまく使いこなしているのではないかとも思ったりします。
そんな訳で、未経験エンジニアはどんな技術を使ってポートフォリオを作っているのかを調べてみたいと思います。

どうやる

Qiitaで「未経験　ポートフォリオ」で記事検索をする
タグを集計して各技術の割合を算出する
どうにかこうにか円グラフを描画する

やる

ソース全文はこちらの記事に載せています。

記事検索

Qiita APIを使用します。
Qiita API v2ドキュメント - Qiita:Developer

main.ts

import * as rp from "request-promise";

let pageIndex: number = 1;

const body: string = await getPosts(pageIndex);
const posts: Post[] = JSON.parse(body);
let allPosts: Post[] = [];
allPosts = allPosts.concat(posts);
let postSize = posts.length;

while (postSize >= MAX_CONTENTS) {
  pageIndex++;
  const body = await getPosts(pageIndex);
  const nextPosts = JSON.parse(body);
  allPosts = allPosts.concat(nextPosts);
  postSize = nextPosts.length;
}

function getPosts(page: number) {
  const options: rp.Options = {
    uri: `https://qiita.com/api/v2/items?page=${page}&per_page=100&query=%E6%9C%AA%E7%B5%8C%E9%A8%93%E3%80%80%E3%83%9D%E3%83%BC%E3%83%88%E3%83%95%E3%82%A9%E3%83%AA%E3%82%AA`,
    headers: {
      Authorization: `Bearer ${process.env.READ_TOKEN}`,
    },
  };
  return new Promise<string>((resolve, reject) => {
    rp(options)
      .then((res) => {
        resolve(res);
      })
      .catch((err) => {
        reject(err);
      });
  });
}

「未経験　ポートフォリオ」で記事検索した結果を100件ずつ取得しています。
100件取得できた場合はページインデックスをインクリメントして次の100件を取得します。
最終的に取得したデータはこんな感じ↓

504件取得できたみたいです。

タグ集計

取得してきた記事の中からタグだけを抽出した配列を作成します。

main.ts

const tagsArr: tag[] = [].concat(
  ...allPosts
    .map(function (res) {
      return res.tags;
    })
    .map(function (tags: tag[]) {
      return tags.map(function (tag) {
        return tag.name;
      });
    })
);

できた配列はこんな感じ↓

1900以上のタグが入力されていますね。
平均して１記事に３〜５個ほどでしょうか。
技術カテゴリではないタグも混じってるけど動くのでとりあえずヨシ！

配列内で重複しているタグの出現回数をを集計します。
※参考：JavaScriptで配列の重複している項目の数をカウントする - Qiita

main.ts

const pie = countDuplicate(tagsArr);

function countDuplicate(arr) {
  return arr.reduce(function (counts, key) {
    counts[key] = counts[key] ? counts[key] + 1 : 1;
    return counts;
  }, {});
}

グラフ描画

nodeplotlib - npmを使用します。

main.ts

const data: nodeplotlib.Plot[] = [
  {
    type: "pie",
    values: Object.values(pie),
    labels: Object.keys(pie),
    textinfo: "label+percent",
  },
];
nodeplotlib.plot(data);

描画してみます。

タグが多すぎてなんとも言えないグラフが完成しました。
ここからある程度の傾向がわかるくらいにタグを間引いて完了です。

完成した円グラフ

まとめ

未経験エンジニアのポートフォリオで使用されている技術は大体こんな感じでしょうか。

サーバーサイド：Ruby、PHP、Python
フロントエンド：JavaScript、Vue.js、React
フレームワーク：Rails、Laravel、Django
ホスティング：AWS、Firebase
サーバー：Docker
コード管理：GitHub

割と予想通りの人が多かったのではないでしょうか？
よく使用されている技術を使用してレベルの差を見せつけるも良し、敢えて使用率の低い技術にチャレンジしてみるのもいいかもしれないですね。