Holmesブログを始めてみました2022年の目標の1つに、「ブログを始めて毎月投稿する」という目標があったので、早速ブログを始めました。本当は、まだまだ改善したい部分が多い状態なのですが、このままでは1本も記事を書けないまま1月が終わってしまうので、最低限のところで妥協して公開することにしました。これからprism導入でシンタックスハイライトを効かせるさくらVPSでのホスト自前検索エンジン実装(今年の目標)i18n対応などなど、順次実装して記事にしていけたらと思っています。今回は初回なので、ブログを始めた理由&Gatsbyを使ってみて面白かった箇所、覚えておきたい箇所など中心にご紹介できたらと思います。mediumなど無料で便利なサービスがたくさんある中で、わざわざお金がかかる方法でブログを運営しようと思った理由は以下3つです。かっこいい一番大事です。何か記事を書こうと思っても、気が進まないと筆が進みません。自分の気分を乗せるにはかっこいいと思えることが大切です。アウトプットの機会を増やしたいかっこいいと似ているのですが、やはりアウトプットの機会を増やすためには何か原動力が必要です。先にあげたサービスは無料で使えるものばかりですが、無料であるが故にいつでも辞めることができてしまいます。アウトプットするために詳細まで調べることで曖昧だった知識が明確になり、知らなかったことも知ることができることは百も承知です。自分は何かを作ることに比べ何かを書くことに対してはどうしても腰が重くなりがちなタイプです。そこで、まずは一定初期投資をしてサンクコストを発生させることで行動するモチベーションを作り、いつの間にか習慣になるのを待つ作戦を取ることにしました。かっこよく書きましたがただの見切り発車です。いうことで、まずは新年早々高級な.ioドメインを取得して(3年プランで18,656円)、さくらVPS1G年間ぷらんを契約して(10,890円)、合計29,546円の納税を行いました。幸先いいスタートです。Herokuなど、超簡単にデプロイ可能&個人で使う分には無料で使うことができるサービスがたくさんあります。業務ではAWSやGCPなどクラウドを活用することも多いでしょう。気軽に使える反面、自分で面倒を見る必要がある部分は少ないので、内部で何が起こっているのかあまり気にせずに使えてしまうことも多いです。そのため、エンジニアとしての基礎体力をつけたい&読書や試験勉強などを通してかじってきたネットワークの知識を血肉としたい、でも自宅サーバーはPC買うところからだしちょっと敷居が高いということで、さくらVPSを契約してブログを運営してみることにしました。今回はブログを作成するということで、SPAはほぼ不要、SSGができる、できるだけ軽くて早いという条件でフレームワークを選びました。そこで、一切使ったことがないけど気になっていたsvelteでブログを作ろう。と最初は考えたのですが、途中まで作ってからmarkdownファイルを含めたフォルダ構成と処理が気に入らず、Gatsbyに結局切り替えました。fsでpathを取ってくる方法せっかくフレームワークを入れるならばフレームワークが提供している機能で処理したかった。import.meta.glogでファイルを取得する方法.svelteファイルと同一階層にmarkdownファイルを置く必要がある。自分のこだわりとして、markdownファイルは別フォルダにおいて管理したかった。TypeScriptだとエラーが出てしまう(自分のTS力問題な気もしますが。importのパスを1度間違えて、解決した後も1度エディタを落とさないとエラーが解消しない問題が多発していたことも切り替えた理由の一つです。始め方チュートリアルをみて開発を始めました。blog」と検索すると、19,792件も検索結果がヒットするので、こういったものを活用すればささっとそれっぽいブログを作成することができると思います。Componentは使わずに手作りのCSSを書き、configファイルも1から書いてブログを構築することにしました。チュートリアルの日本語訳や、ブログを1から構築する方法などは他の方もブログなどで沢山紹介してくださっているので、今回は自分が気になった箇所を中心に紹介できればと考えています。Linkタグとaタグの使い分けGatsbyが提供するコンポーネントに<Link>があります。ールでリンクがビューに現れたタイミングでリクエストが送られるので、ユーザーが実際にリンクをクリックした際に高速でロードすることができる優れものです。ホストしているサイトと同一サイト内でしかLinkタグは使えないので、外部サイトのリンクをおきたい場合には通常通りaタグを使うことになります。layerGraphQLは今回初めて触りました。理解は浅いのでこれから深めていきたいところです。layerに入っているデータに対して、クエリを発行してデータを取得することができる仕組みになっています。layerに追加してやる必要があります。layerに追加さえしてしまえば、基本的には同じ構文でGraphQLのクエリを発行することができるので便利です。gatsby-source-filesystemプラグインを活用しました。パッケージをインストールしたのちに、gatsby-config.jsファイルに以下設定を追加します。layerに対して、ルートディレクトリ直下においたblogディレクトリの中身が追加されました。component内においては、コンポーネントの外で以下のようにgraphqlタグをつけたクエリをエクスポートして、コンポーネントに`props`として渡して活用します。layerにアクセスするためには、useStaticQueryを活用します。useStaticQueryは、コンポーネント内部で定義してfetchしたデータをそのままコンポーネント内部で活用することができます。注意点として、useStaticQueryは1つのコンポーネントで1回しか呼び出すことができないので、複数種類のデータを取得したい場合には一気に全てのデータを取得する必要があります。おいては、クエリに名前をつけることが可能で、上の例だとBlogPostがクエリ名に当たります。クエリ名はつけてもつけなくてもOKなのですが、デバックの際にはクエリ名があった方がどのクエリで問題が発生しているのかわかって便利ということです。1点注意する必要がある点としては、クエリ名には重複があってはいけないので、注意が必要です。variableという仕組みがあります。component内でしか活用することができない仕組みですが、動的にデータを取得したい場合には強力な仕組みです。APIを活用する際に便利で、今回ブログを作成するにあたってもこの機能を活用しました。APIは名前そのままですが、ブログ投稿のように動的に決定するページを作成したいときに活用するAPIです。{nodeType.field}.tsxのファイル名で動的にpathを変えてコンテンツを作成していくことが可能です。今回私のケースでは、{mdx.slug}.tsxファイルで各ブログポストのページを作成する際に活用しています。APIを活用する際のポイントとして、ファイル名を生成する際に指定した項目(今回だとmdx.slug)のidが自動的にpropsとしてコンポーネントに渡され、それをそのままGraphQLのクエリ内で活用することができる点が挙げられます。この機能のおかげで、サンプルのクエリにおいて、idを特に何も渡さなくても自動でmdx.slugのidがクエリに渡され、データを抽出してくることが可能になっています。確認で、ローカルサーバーを立ち上げた状態でhttp://localhost:8000/___graphqlを開いてみます。ローカルサーバーを立ち上げると自動で活用可能になります。}}以下のような結果が表示されるかと思います。`${__dirname}/blog`,直下のファイルorフォルダ名が抽出されています。{}}つまり、{mdx.slug}.tsxで使用しているmdx.slugの部分はこれら1つ1つのフォルダ名に対応しており、それらに対してidが自動で振られる。そのidを動的にクエリを生成する際に活用する。いうのがポイントでした。検証として、{mdx.slug}.tsx内で、console.log(props)と入れてみると、ブラウザのデベロッパーツールで、以下のようなオブジェクトを確認できるかと思います。variableとして活用可能なデータです。variableとして活用可能ということですね。.mdで記事を書きたい今回Gatsbyでブログを作成していますが、今後ブログサイト自体を作り直すことがあると思います。その際に、パッケージやフレームワーク固有の記法を使ってしまうと移行作業が大変なので、.md形式で記事は書いていくことにしました。そこで問題になるのが、.mdファイルをmdxでHTMLに変換した際のスタイル。デフォルトのままだと、行間やフォントがかっこよくありません。本当は、gatsby-remark-prismjsプラグインを入れてシンタックスハイライトも効かせたい、しかし、どうやらtokenizeが失敗しているようで、ドキュメント通りに設定してもシンタックスハイライトが効きません。デプロイしたかったのですが、期限が迫ってきているのでここは一旦パスします。取りいぞぎ、ヘッダーやコードブロック、インラインコード、クオートなど最低限だけCSSを追記してスタイリングして次に進むことにしました。gatsby-remark-prismjsの導入は今後の改善でやっていきたいと思います。これからやること本ブログはまだまだ改善ポイントが山盛りです。最低限、以下項目はシャシャッと実装して、faviconの設定prismjsを設定してシンタックスハイライトを効かせる目次の追加CI/CD環境の整備リファクタリング検索機能などをもう少しゆったり追加していけたらいいかなと思っています。ちなみに、本ブログはさくらVPSでホストしているので、次回はそのことについて書けたらと思います。9で構築したのですが、rootユーザーのパスワードログインがデフォルトでできなくなっていること、よく紹介されているツールで非対応のものがまだあることなど、他のバージョンのCentOSとは異なる部分がいくつかあったので少し手こずりました。withGatsby。