このサイトについて
このサイトは@tagucchが日々インプットしたことをメモとか備忘録みたいな軽いノリでアウトプットしようとする場所(の予定)
このサイトを作った理由
端的に言うと、
- React が書きたい
- Next.js が盛り上がっていたので使ってみたい
- ポートフォリオになるようなものを作りたい
- 個人開発を完結させて公開させるまでの経験をしたい
- 極限までハードルが低いアウトプットの場をつくりたい
という感じ。
Next.js を触ってみたい
ここ 2 年くらいはフロントエンドに興味があり、フロントエンドをメインに仕事をしている。
最初に React を触り始め、当時勤めていた会社を辞めてしばらくは業務委託で Nuxt と Next の両方を少しずつ触らせてもらっていた。
転職してからはずっと Nuxt を使っているのだが、個人的に Vue より React のほうが書き心地が好きだしエディタや TypeScript との相性もいいなと思っているので、業務以外で React を触ろうと思って流行りの Next.js を使ってみたという流れ。
実際にこのサイトを作ろうと思って雛形を作ったのは、最初のコミットを見ると 2020/10/17 になっていた。本当はもっと早く完成させて早く公開したかったのだが、自分の行動力のなさが全面に出てしまった……。
一時期怪しかったものの、エタって終了ということもなく公開できたことがよかった(今までいくつか個人開発をしてはエタってを繰り返していたため)
Next.js の v9 時代に作り始めたので、公開するよりだいぶ前に v10 が出てしまったのもいい思い出としておきたい。
開発を完結させて公開する経験を積みたい
少し前述したが、やる気を出してちょっと作ってエタってを何回か繰り返していたので、実際に自分で何かを公開するという経験を積みたかった。
ゼロから何かを完成させるというのはほとんど経験がなくて、そういう経験をしないと得られないものがあるんだろうなというのは周りを見て思っていた。
実際にやってみると、自分の知識や技術のなさをかなり痛感した。Web をやっているのにドメインの購入や設定とか全然分からなくて手探りで進めた。こういうのを経験しておけたのはよかったなと思う。まあ Vercel が大変便利で Google Domains と Vercel をちょっとポチポチしただけなんだけど。
アウトプットする上でハードルが極限まで低い場がほしい
インターネットでたくさんのエンジニアが記事を書いて公開してるのを見て、自分のアウトプットの少なさに危機感を覚えている。
また、前に調べて解決した内容でも忘れてしまって、同じ問題に直面したときにまたノーヒントで調べ直すことがちょいちょいある。
そしてこれは引かれても何も言えないのだけど、気になる記事をあとで読もうと思ってタブを開きっぱなしにして、を無限に繰り返していて、ブラウザがありえん散らかっているのをどうにかしたい気持ちもある。前に見たらたしか開いているタブ 400 を超えていた気がする。頭がおかしいと思うので、読んだ記事は読んだこととリンクと雑に学んだことや感じたことを書く場を作って、とにかくタブを溜め込む癖をなくさなきゃ……という焦りを感じている。
そういうのをまとめてどうにかしたいなという気持ちがあってこのサイトを作った。
とにかく自分の文章を書くことで脳に定着させたいという側面もある。
温度感でいうと、メモ <= このサイト < 日記 <= ブログくらいのノリでやっていきたい。
ブログは「人に見せる」ための文章ということで、事前の調査や正確性の検証にかなり時間と労力を使うため公開へのハードルが高い(と自分は感じている)し、日記と言えばまあそうかな〜くらいの感じ。
メモよりはちゃんとしてるかな？と思ったけど、実際はただのメモ置き場くらいの感覚だと思う。
このサイトはあくまでメモや雑記といった立ち位置で、自分の拙い考えを垂れ流せる場所であり、間違ったことを書いても「この前書いたこれ、間違ってました〜」くらいのノリで書いていきたい。分からないことを分からないっすと書いていきたい。
真面目にコツコツとインプットしたりアウトプットしたりしてこなかったので、かなりの場面で基礎的なことが抜け落ちていると感じている。それを解消するためにはとにかく少しずつでもいいからインプットとアウトプットを積み上げていくしかないなと思ったのでこのサイトを作った。
実際に作ってみて
このサイトは Next.js で作って、公開する際は SSG(Static Site Generation)で静的ページとして公開している。
ISR(Incremental Static Regeneration)を使ってみようかと思ったのだが、こんなメモ置き場に使うものなのかという感じがしたのでやめた。半分嘘です。残り半分の本当は ISR を完全に理解できていないので今はとりあえずいいかなと思ったから。revalidate に指定する秒数って何を基準に決めればいいの……。
Next.js のアプリケーション自体も Vercel に乗せていて、GitHub の master ブランチ(このリポジトリを作ったあとにデフォルトのブランチが main になった)に push したり merge すると勝手にデプロイされて本番環境に反映される。すごい。
いくつか苦労したところがあって、例えば触ったことがないし気になるからという理由で利用した Tailwindcss。
まず慣れるまで時間がかかって、「このプロパティを指定するなら Tailwind ならこんな名前やろな」が予測できるようになるまでにかなりの時間を要した、と思う。config も正直あんまりよく分かってない。
あとは OGP 周りも知識がなさすぎてかなり時間をかけた。「ページごとに別の OGP タグ適用させたいのにpages/index.tsxに書いたやつになっちゃう！どうすればいいの！」みたいな感じでめちゃくちゃ悩んでいた。後述するが、参考にさせてもらったmiyaoka.devで meta タグの key 属性を知れなかったら詰んでいたと思う。本当にありがたい。
それから前述したけど ISR についてもまだあんまり理解できてなくて、仕組みをもっとちゃんとインプットしていきたい。SSR + SWR と何が違うの？と問われたりしても脳がフリーズするので。
個人開発だしメモ置き場だし、時間かけて作るよりもとにかく素早く公開したい！という意図があったので、未完成だったり作ってなかったり後回しにしたりしたものがいくつかある。OGP の画像をフリー素材を使って雑に文字の画像を貼り付けただけのものにしたり、シェアボタンとか作ろうと思ってやめたり、検索機能を実装しようと思ってやめたりしたり、みたいな感じ。でも結局スタイルとか細かくぽちぽちやってて時間がかかってしまった。し、CSS に自信が全然ないのでこれでいいのかも全然分からない。「この CSS の書き方はよくないのでこうしなよ」みたいなアドバイスや Issue や PullRequest をいただけると助かります。
そして、スタイルや色合いなど見た目に携わる部分をたくさんアドバイスしてくれて、モチベーションの維持の手助けをしてくれた@tabemidayoに感謝。
参考にしたサイト
作るにあたって主に以下のサイトをかなり参考にさせてもらった。
どのサイトもブログのような記事を公開するサイトで、技術スタックも React(Next.js や Gatsby.js)で、ソースコードが公開されているので参考にさせてもらった。
特に miyaoka.dev は最もスタックが似ていて、OGP 周りや CSS のことをこのソースコードで学ばせてもらった。本当に感謝。
これから
個人開発の成果物としてはなんとかエタらずに公開できたけど、本題はここからで、できるだけ高頻度にメモを更新していきたい。そのために作ったんだし。
あとこれはこの記事を書いてて気づいたんだけどリストのリンクのスタイルがうまく当たってないので直したい。というか直したいところはちらほらあるし、検索もしたいし、どうにかしたい。あと main ブランチに名前変えたい。継続して改善していきたい。
それから、Next.js の仕様上だと思うんだけど、日本語リンクを踏むと 404 になってしまう。ので、タグに日本語が使えない。リンクの日本語の部分をローマ字にしようと思ってそういうライブラリを探したんだけど、カタカナをローマ字にするのに一度ひらがなへの変換をしなきゃいけないというのがあったりするので自分で作ってみようかなという気になっている。npm でライブラリを公開した経験がないので、個人開発したサイトを公開した次は「簡単なものでもいいのでライブラリを作って公開する」を目標にしようと思う。
とにかくまずはどれだけ雑でどれだけ微妙なことでどれだけ間違っててもいいので(よくないけど)できるだけ高頻度で更新していくことに挑戦していきたい。