技術ブログを200記事書いてみて 技術力向上に繋がったと思う3つの習慣

みなさん、こんにちは。どんぶラッコです。 Tokyo Lab6期卒業です。

7日目の記事は、@YukiOmori
さんによる [未経験からフリーランスエンジニアになれるのか〜あるいはその方法論〜](https://qiita.com/YukiOmori/items/46a7190a6cdbc38f324c)でした。

>堅実にフリーランスエンジニアを目指すのであれば、最初にどこかの小さめの事業会社で、どんなに短くても最低1年ぐらいはガッツリとサービスを作る経験を一通りやっておくといいのではないだろうか。

この締めの文章、読みながらめちゃめちゃ頷きました笑

さて突然ですが、昨年の5月から自社ブログを継続的に書いています。
https://blog.proglearn.com

会社の宣伝になればいいなー、という目的から始めたブログですが、2020年12月7日時点で、僕が執筆した記事は**198記事**、全体で**472記事**あるブログに成長し、PV4万/月・UU3.3万/月のブログになりました！
ニッチな内容の記事ばかりなのに...継続は力なりとはこのことですな←

僕の担当記事では主に開発や技術に関することを発信してきました。そして実はこの"ブログ記事を書く"習慣が自分の技術力向上に繋がったと思っています。

そこで、今回の Advent Calendar では、技術ブログを書く上で自分が役に立ったことや癖づけている習慣についてご紹介したいと思います。


## 1. 技術のネタ帳を作る

まずは、技術のネタ帳を作ることです。
僕はチームで使っているNotionに、技術のネタ帳を作っています。
自分が開発をする時に調べたこと、悩んだことなどをノートにまとめています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241647/bf602deb-05ad-113a-ab3c-b7dc45820475.png)

中身は本当にメモ書き程度でOKです。

- 参考になると思ったURL
- 試してみたコード
- 詰まったところ
- 所感

なんかをメモしておくようにしています。例えばこんな感じ。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241647/3d05653f-8797-69dc-b324-23e18aa6b066.png)

この程度でいいんです。

重要なことは、 **自分が実施したログや悩んだことをメモに残す** ことです。 スクリーンショットをとっておけば、それがそのまま自分の記事として転用できますし、もし詰まった部分があればその対応策についても記述することができます。

何より、改めてブログ記事化すること自分の中の手順を整理することができます。これが一番大きいです。新しい技術を学習している時は、様々はソースを参照するため、どれが正しい手順なのか頭の中でごっちゃごちゃになってしまっていることが多いです。
正しい手順を腹落ちさせると共に**自分用のリファレンスを作成する**意味でも、ブログの記事にすることはめちゃくちゃ有用です。


## 2.サンプルコードを作成する

「これから使い回すことがあるだろうな〜」と思うコードについては、サンプルコードを作って汎用的に使えるようにしています。共有方法は **github** や **codepen** です。

特にフロント側の実装をすることも多いので、HTML/CSS や VueComponent を作るのに codepen を重宝しています。

例えばこんな感じです。これはハンバーガーメニューのCSSですね。


<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="cha1ra" data-slug-hash="JjXPvmp" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="ハンバーガーメニューを実装する">
  <span>See the Pen <a href="https://codepen.io/cha1ra/pen/JjXPvmp">
  ハンバーガーメニューを実装する</a> by cha1ra (<a href="https://codepen.io/cha1ra">@cha1ra</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>


これを解説した記事は 「ハンバーガーメニュー」で検索すると上位に来る人気記事になりました
(つい最近までもう一つ順位が上だったのですが...悔しい...)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241647/392e0f3c-8fa2-ab56-1ac1-64e1a52142b4.png)

これのように、自分がよく使うパーツを切り出して、汎用化する癖をつけておくと、普段コードを書いている時から **切り出しやすいようなコード** を意識して書くようになります。結果として、**読みやすいコード**を書くことにつながります。
(ちなみにこれ、コンポーネント思考に近いですよね。意味毎にまとめてるわけですから！)

## 3. チートシートを作成する

意外に自分にも、自分以外にも需要があるのが **チートシート**。よく使うコマンドなどを1枚にまとめたやつですね。
最近Qiitaの更新はサボり気味なのですが、僕が投稿した記事の中で一番読まれているのが**[Vuetifyを使っているときによく見に行くページと情報](https://qiita.com/don-bu-rakko/items/5d1cde5759b743b9bbc9)**という、Vuetifyでよく使うCSSについてまとめたチートシートページです(font-sizeの指定CSSとかがもう古いから更新しなきゃなあ...)

自社のブログの方では、BulmaやPostmanのチートシートを作ったりしています。

これ、作るのはある程度時間がかかりますが、一度作ってしまえば自分の学習効率がめちゃめちゃアップします。

僕がよくやっているのは、アナログですが、新しい技術を学ぶ時はチートシートをプリントアウトして手元に持っておきます。コーディングをしているとついつい手順一つひとつを追っていくミクロな視点になってしまいますが、チートシートを活用して、マクロな視点でその技術を眺めると、命名規則やルールなど、その技術の"癖"を一掴みにすることができます。

`[知りたい技術] cheatsheet filetype:pdf` なんかで google 検索すればある程度の情報はゲットすることができますが、もし自分好みのものや最新版のチートシートが見つからない場合は是非自作に挑戦してみてください。


## とにかくアウトプットだ！

以上、僕が有用だと思った習慣でした。上記の習慣は「ブログ記事を書く」というルーティーンを作っていなければ意識していなかったことだと思います。その意味では、とにかく発表やブログアップロードの機会を強制的に作り、アウトプットを積極的にしていく姿勢が最も重要です。

今回のAdvent Calendarも正直書くつもりはなかったのですが(ごめんなさい！)、あと3枠残っているというアナウンスがあったので、考えるより先に応募していました。

結果として、自分が実践してきたことを客観的に振り返るいい機会になりました。
Advent Calendarはまだまだ始まったばかり。大いに盛り上がっていきましょう！！

## 最後に: 宣伝させてください

では、この記事の最後に潔く自社の宣伝させてください！笑

僕は今、[quintet株式会社](https://9uintet.com/)という会社を同期と経営しています。
「満足を生み出す」企業になることを理念とし、Webサービスを通じて満足を最大化することができるプロダクトを作ろうとしています。

その取り組みの中で、「業務の効率化による満足の最大化」を旗印に、自社プロダクトとして議事録の文字起こし・DXを推進するサービス **OneMinutes (ワンミニッツ)** を絶賛開発中です。

[![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241647/1f833767-8cee-07c1-fdd2-3ebdae7b247b.png)](https://one-minutes.com)

自動文字起こしの様子はこんな感じ。やっぱ目の前で実際に動くプロダクトはワクワクしますね。

![mojiokoshi](https://i.gyazo.com/f306b9a7c4f529957eeb03fef3babc24.gif)

今月頭から事前登録受付中したので、どんなサービスなのか、ちょっとでも興味を持った方がいらっしゃったら是非LPをチェックしてみてください！(LPも結構気合入ってます)

https://one-minutes.com

---

9日目の記事は @ayakotowatari さんによる "G'sに入って人生が新たに動き出したこと" がテーマの記事！
楽しみです！