このサイトについて
このサイトは@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でライブラリを公開した経験がないので、個人開発したサイトを公開した次は「簡単なものでもいいのでライブラリを作って公開する」を目標にしようと思う。
とにかくまずはどれだけ雑でどれだけ微妙なことでどれだけ間違っててもいいので(よくないけど)できるだけ高頻度で更新していくことに挑戦していきたい。