React

A collection of 5 posts
YouTubeのサバゲー動画をフィールドごと見れるサービスを作った
個人開発

YouTubeのサバゲー動画をフィールドごと見れるサービスを作った

以前からサバゲーにハマっていることは書いてきましたが、1つサービスを作りました。 https://airsoft-videos.com はじめてのサバゲーフィールドに行く際に、よくYouTubeでそのフィールドで撮影されたサバゲー動画を見ていたんですが、フィールド名の表記がバラバラだったり、フィールド名が一般名詞で見つけにくかったりしたので、そのあたりを解決するサービスがほしいなーということで、今回作りました。 合わせて、2つチャレンジをしました。 1. 最近までミノ駆動本を読んでいたこともあり、DDDを実践したいなということで、それっぽいこともやってみました 2. サーバーサイドJSに興味があったので、サーバーサイドはTSを使って実装しました 良いコード/悪いコードで学ぶ設計入門posted with ヨメレバ仙塲 大也 技術評論社 2022年04月30日頃 楽天ブックスで購入Amazonで購入Kindleで購入 結局のところ、DDDでやるほどの規模ではなかったかなっていうのと、サーバーサイドJSは結局フロントエンドとは別物なのでメリット薄いかなという印象にな
3 min read
linkifyを使って文字列に含まれているURLをLinkコンポーネントに変換する
React

linkifyを使って文字列に含まれているURLをLinkコンポーネントに変換する

今とある個人開発を行っていて、APIで取得した文字列含まれているURLをLinkコンポーネントに変換する必要が出てきました。 一番かんたんな実装は、String.prototype.replaceを使う方法だと思うんですが、これだとdangerouslySetInnerHTMLを使うことになるので、出来れば他の方法が良いなと思っていたところに、linkifyを教えてもらいました。ありがとうございます! ということで、linkifyを使って実装しようとしたんですが、思ったような感じでは実装できなかったので、どうやって実装したのかを書いていきたいと思います。 手順 ①必要なNPMパッケージをインストールする $ yarn add linkify linkify-react Next.jsを使っているので、linkify-reactも利用します。 ちなみに、react-linkifyというパッケージもありますが、これは別物なのでご注意を。 執筆時のこちらは5年ほどメンテナンスされていませんでした。 ②Linkコンポーネントを作る import { Link as C
3 min read
外部イメージにgatsby-imageを適用する方法
Gatsby

外部イメージにgatsby-imageを適用する方法

以前行った外部リンクのリッチ化の続きです。 元の状態は取得した画像のURLを直リンしてしまっていました。 読み込みのラグもありますし、何より相手のサーバーに負荷をかけることになるので一回習得してしまってGraphQLでいい感じに使えるようにしようというのが今回の趣旨です。 解説 外部イメージを扱いたい時はcreateRemoteFileNodeを使います。 前回のコードに処理を追加します。 const { createFilePath, createRemoteFileNode, } = require('gatsby-source-filesystem') // 中略 exports.onCreateNode = async ({ node, actions, getNode, getCache, createNodeId, }) => { if (node.internal.type === 'LinksYaml') { // 中略 // image let image_url if ($(
1 min read
GatsbyJSの外部リンクをリッチにする
Gatsby

GatsbyJSの外部リンクをリッチにする

以前の記事の今後やっていきたいことにもあげていた外部リンクの見た目を良くするためにRichLinkコンポーネントを作成しました。 使い方 https://www.deg84.com/create-sitemap-with-gatsby/ 解説 レンダリング時に取得しようとするとCORS(Cross-Origin Resource Sharing)の対策が必要なのでgatsby-node.jsでビルド時に情報を取得しておきます。 基本的にはOGPの内容を取得します。設定がない場合はmetaなどの情報から取得するようにしてみました。 取得するURLの一覧はYAMLで別途管理しておきます。 exports.onCreateNode = async ({ node, actions, getNode }) => { const { createNodeField } = actions // 中略 if (node.internal.type === 'LinksYaml') { const data = { url: node
2 min read
GatsbyJS + Netlify + MDXでブログ作ってみた
Gatsby

GatsbyJS + Netlify + MDXでブログ作ってみた

以前から技術的なことはQiita、それ以外ははてなブログに書くようにしていたんですが、Qiitaは色々問題が出てきて投稿するのをためらうようになり、はてなもちょっと使うのを躊躇するようになってしまってどこにもアウトプットが出来なくなってしまいました。 まあなんとなく察して下さい。 ってことで何か良いサービスないかなと探したんですが良いものが見つからず結局自分で作るかということになりました。 ちなみに要件はこんな感じでした。 * Markdownで書ける * エクスポートできる * OGPがいい感じになる * はてなブログとかQiitaとかのイメージ * 今どきの見た目 * 技術的な記事以外もOK * メンテナンスコストなし(できれば) * 独自ドメイン設定できること(マストではない) もし何か良いサービスあれば教えてください。 Qrunchは結構条件に当てはまったんですが、技術的な記事以外がNGだったので今回は見送りました。 技術スタック * Gatsby * Netlify * MDX(Markdownからコ
2 min read