アリババのカスタムフックをコードリーディング React の理解を深めるために、アリババのカスタムフックのコードを読んでいこうと思います！ カスタムフックとは use から始まりほかのフックを呼び出せる関数です。 自分独自のフックを作成することで、コンポーネントから React のロジックを抽出して再利用可能な関数を作ることが可能です！ OSS として多くのカスタムフックが公開されているなかでアリババを選んだ理由は、 わかりやすいドキュメントが用意されていること、有名企業であること、GitHub の Star 数が多いことがあります。 useBoolean フック useBoolean は、 true/false の値を state 管理する hooks です。 前回ご紹介した useToggle が管理してくれた値の型は number | string | boolean でしたが、 useBoolean は boolean のみで、より限定された hooks になります。 API 引数 Property Description Type Default defaultValue…

アリババのカスタムフックをコードリーディング React の理解を深めるために、アリババのカスタムフックのコードを読んでいこうと思います！ カスタムフックとは use から始まりほかのフックを呼び出せる関数です。 自分独自のフックを作成することで、コンポーネントから React のロジックを抽出して再利用可能な関数を作ることが可能です！ OSS として多くのカスタムフックが公開されているなかでアリババを選んだ理由は、 わかりやすいドキュメントが用意されていること、有名企業であること、GitHub の Star 数が多いことがあります。 useToggle フック useToggle は状態を2つの値で切り替えるhooksです。 API 引数 Property Description Type Default defaultValue デフォルト値を設定 number | string | boolean | undefined false reverseValue デフォルト値ではない値を設定 number | string | boolean…

404 ページをカスタマイズする 404 ページがデフォルトのままで寂しかったからカスタマイズしました！ 作った 404 ページ Gatsby では、 src/pages/404.js を編集することで 404 時のページをカスタマイズすることが出来ます。 おあそび ただ 404 を表示するだけではおもしろくないかなぁ。 404 ページに来るほど勉強熱心な方にはもっと筋肉を知ってもらいたいなぁ。 という思いから！ 404 ページにはタイピングゲームをご用意しました！ 実装は以下のコードをご確認ください！

つくったもの 技術ブログを書いているときに、サンプルコードの指定行をハイライトしたいことがありました。 サンプルコードのどこを説明しているのか読みやすくしたいと思ったからです！ たとえば .mdx ファイルで line={1,4-6} と行を指定すると、 コードブロック部分は 1 行目と 4~6 行目がハイライトされます。 実装 ```で表示するコンポーネントを用意 マークダウン記法の ` ` ` を使って表示される見た目を、MDXProvider を使って変えたいと思います。 { code: <表示したいコンポーネント /> } を MDXProvider の state である components に渡すことで、 ` ` ` で表示される見た目を変えることが出来ます。 MDXProvider について詳細は以下の記事を参照ください。 自分の場合は、 CodeBlock コンポーネントの中で、 Highlight という色付けされたコード部分を表示するコンポーネントを使っています。 この Highlight…

MDXを使う準備 この記事ではMDXを使った前提で進めます。MDXは不要でシンプルなMarkdownで良い方は適宜読み替えていただけると幸いです。 MDXとは、Markdownで簡潔に記述し、かつより高度で再利用可能なJSXも埋め込めるものです。 インストール gatsby.configに追記 gatsby-node.jsでページを作成 詳細は割愛しますが、 CreatePages API の、 CreatePage アクション を使ってページを作成します。 テンプレートファイルに ./src/templates/blog-post/index.js を指定しているので、あとでこのファイルを見ていきます。 MDXProviderでコンポーネントの定義をマッピングする MDXProviderを使うことで、MDXコンテンツ内のタグのレンダリングを置き換えることができます。 例えば <h1> の色を変えたい場合、以下のようにMDXProviderにオブジェクトを渡します。 自分の場合は、 コンテンツのレンダリングの定義を src/components/MDXComponents/index…

つくったもの hover したらコードブロック内の同じ単語がハイライトされます！ ブログのサンプルコードなんかを読んでて、 ってことがよくあり、ハイライトされるとコードが追いやすくなって便利かなと思って作りました！ Qiita からヒントを得て！（パクリ w） 実装 シンタックスハイライト まず、シンタックスハイライトをするために当ブログでは prism-react-renderer というライブラリを使っています。 prism-react-renderer の詳細は割愛しますが、 Highlight コンポーネントの code という state に表示するコード文字列を渡し、 tokens という配列を操作しています。二次元の配列となっており、各行の中に各単語が入っています。 各単語それぞれに色付けをする必要があるので、各単語を <span> タグで囲って style を適用しています。 ホバーした文字列を state で管理する token.content で単語の文字列を取得できるので、空白を除去して state…

Gatsby での基本的な画像の取り扱いについてメモ！ 必要なプラグイン GraphQL で取得する ファイル名は profile-pic.jpg であり fluid(伸縮)し最大幅は 400px, 対応ブラウザでは WebP 画像で表示して最適化する場合、このような GraphQL クエリを作成する。 fragments を使う 先程は以下のフィールドを指定したが、毎回指定するのは大変でミスもありそうだ。共通化したい。。 base64 aspectRatio src srcSet srcWebp srcSetWebp sizes そこで fragments というものがあり簡略化して書ける！ gatsby-image の fragments は gatsby-transformer-sharp/src/fragments.js で確認ができます！ このように fragments はプラグインで定義されていたり、自分で定義することも可能です。 gatsby-image で画像を表示する たとえば src/pages/index.js…

backgroundにグラデーションをかける方法 以下のような背景が白のボックスと背景がグラデーションのボックスを重ねることで枠線を表現します。 https://codepen.io/it_fitness_jp/pen/RwroedE ラッパーにグラデーションをかけて中の要素は白色にすると以下のようになり、 https://codepen.io/it_fitness_jp/pen/vYLyVov ラッパーのためにHTMLの構造を変えたくなく、z-indexを使っていいなら疑似要素を使うと以下のようになります。 https://codepen.io/it_fitness_jp/pen/BajQqOe border-imageを使った方法 https://codepen.io/it_fitness_jp/pen/RwroqWO border-image は、 border-image-source , border-image-slice , border-image-width , border-image-outset , border-image-repeat…

Gatsby で作っている当ブログに、先日目次を追加したのでご紹介します！ デモ いま目次が表示されているかと思いますが、PC とスマホで表示が違うのでデモを御覧ください！ PC こんな感じに右のサイドバーに表示してます！ スマホ 画面右下のボタンをタップすると目次が現れます！ React の公式ドキュメント風！ データ取得 目次に使う各タイトルのデータを取得するには以下のプラグインを使います。 gatsby-transformer-remark または gatsby-plugin-mdx すでに .md ファイルや .mdx ファイルを追加してページを作成しているなら入っているプラグインだと思います。 これらのプラグインが入っていることで、 tableOfContents という node が追加されます。 （これ以降の記事では、gatsby-transformer-remark ではなく gatsby-plugin-mdx を使っていることを想定して説明します。gatsby-transformer-remark…

筋トレ中に音楽聴くと楽しいですよね！！ 自分はむかしは筋トレ中に音楽聴くなんて邪道だ！って思ってたんですけど、聴き始めたらより追い込めたり集中できたり楽しかったりしたんで、1年前ぐらいからは筋トレ中に音楽を聴くことが多いです！ そんなぼくが筋トレ中に聴くと生産性爆上がりする曲を紹介します！！ おすすめアプリはYouTube 音楽を聴くアプリっていっぱいありますよね！ AppleMusicだったり、Spotifyだったり、YouTubuMusicだったり。 自分のおすすめは YouTube です！ YouTubeMusicではなく、YouTube！！ 理由は、 アニソンが多い 再生速度を変えられる とくに、後者の再生速度を変えられるってのが大事です！！（他アプリでホントに出来ないのかは確証なし🙇‍♂️） 再生速度を速めることで、 何倍もテンションも上がりやすい気がするし、 レスト（筋トレのセット間の休憩）も短くなりやすいと思います💪 速すぎると曲にのれないし、 遅すぎても効果が落ちるので、 1.25倍~1.5倍ぐらいがおすすめです！…

当ブログのコードブロックで実装している機能、そのコードを紹介します！ 機能紹介 シンタックスハイライト .mdx ファイルにこんな感じに書くと、 こうやって表示されます！ タイトル こんな感じに title を指定すると、 こうやって表示されます！ コードのコピー 右上のコピーアイコンをクリックしてみてください！ 行のハイライト こんな感じに line を指定すると、 こうやって表示されます！ ワードのハイライト コードブロック内のワードにカーソルを合わせてみてください！ JSX のデモ表示 こんな感じに demo を指定すると、 こうやって表示されます！ JSX のライブエディター こんな感じに言語が jsx のときに live を指定すると、 こうやって表示されます！ また、 live に加えて isManual を指定すると、 コード 上で紹介したコードブロックのコードです！ ご参考に！！

今回、Gatsby のテーマを使ってブログを作ってみようと思います。 最後まで読めば、自分のブログを得ることができ、拡張していく理解も得られていると思います！！ おそらく30分~1時間後ぐらいには以下のようなサイトを手に入れていると思います💪 👍 Demo 👍 ソースコード(GitHub) テーマを探す テーマを探すには、以下のサイトがおすすめです！ 今回は、 gatsby-theme-novela という テーマ を使ってみようと思います。 First Step こちらでも書いたように、Gatsby の テーマはプラグインの一種 です。 既にある Gatsby サイトにテーマを導入することも可能ですが、 今回は 1 から Gatsby サイトを作っていきましょう。 gatsby-theme-novela…

実行環境 エラー内容 解決策 方法1 方法2 どちらの方法も、プロジェクトごとに設定が面倒なら --local ではなく --global で設定すればおｋ。 ↓ 参考になったサイト🙏🙏（良すぎ！はてブした！）

Gatsby サイトにテーマを使って機能を追加することはよくあります。 ただテーマはスターターとは違い、実装のコードはアプリ内にはなく npm でインストールします。 それではどのようにカスタマイズするのでしょうか？ テーマをカスタマイズする最も簡単な方法は、 テーマが提供しているオプションを指定することです。 たとえば gatsby-theme-blog というテーマでは、以下のようなオプションを指定できます。 Key Default value Description basePath / ブログ記事のルート URL を指定できる contentPath content/posts ブログ記事ファイルを置くパスを指定 assetPath content/assets アセットファイルを置くパスを指定 mdxOtherwiseConfigured false 既に gatsby-plugin-mdx がサイトで導入されていれば、 true を指定する disableThemeUiStyling false gatsby-plugin-theme-ui…

useStaticQuery は GraphQL クエリを受け取って、データを返す hook です。 StaticQuery と useStaticQuery の違い React Hooks の登場によって useStaticQuery が実装されるまでは、 StaticQuery コンポーネントでレンダープロップスを使ってデータを取得することが出来ました。 StaticQuery を使う場合と、 useStaticQuery を使う場合の違いを見てみましょう。 useStaticQuery とは？ StaticQuery 、あるいはそれを hook で扱える useStaticQuery は、 あらゆるコンポーネントで GraphQL クエリを介してデータを取得することができます。 それに対し、ページコンポーネントでしか使うことのできないpage query があります。 （ページコンポーネントは特定の URL に対応するコンポーネントです） ページコンポーネントでのみ使えるqueryとは？ 例えばページコンポーネントで以下のように、 graphql…

記事内に同じブログ内の記事へのリンクを貼ることがあって、リッチに表示できたらなぁと思ったのでやってみた。 使い方 マークダウンファイル（ .mdx ）内に以下のように書きます！ コンポーネント失敗例 コンポーネントのソースコードは以下の通りです。 と言いたいところなんですが、、 GraphQLのクエリ部分でエラーが出てしまいます。 String interpolation is not allowed in graphql tag 文字列の埋め込みはできない。 useStaticQuery は文字通り静的なクエリで動的には生成出来ないようです。 コンポーネント成功例 気を取り直して別の方法で！💪 コンポーネントのソースコードは以下の通りです。 内容は以下の流れです。 useStaticQuery で全MDXを取得 全MDXの中から、指定するMDX1つを探す 見つからなければ何も表示しない 見つかれば表示 です。 それではコードと共に詳しく見ていきましょう。 useStaticQueryで全MDXを取得 useStaticQuery はGraphQL…

概要 Gatsby テーマは プラグイン の一種です。 プラグインとは違って自身で gatsby-config.js ファイルをもっており、複数のパッケージをインストールして管理できる Gatsby サイトになります。 この点は<と同じようですが、テーマはプラグインの一種です。 スターター と同じようですが、テーマはプラグインの一種です。 複数のテーマを同時に利用することができますし、テーマの更新や変更の影響を受けることができます。 テーマとスターターの違い テーマを理解するために、どんなときにテーマを作成するのか考えます。 Gatsby サイトを構築する際、様々な設定をする必要があります。 たとえばどこにデータを置くのか？ どのようにアクセスするのか？ どのように表示するのか？ などなど。 それらをテーマとしてパッケージ化することで、第三者や自分自身が再利用することができます。 似たものに スターター があります。 スターターは Gatsby サイトを素早く作成する方法の 1 つで、あらかじめ特定の目的のために設定された Gatsby…

概要 スターターは既に設定された機能をもつ Gatsby サイトのことです。 それを「雛形」としてダウンロードし、そこからカスタマイズして自分のサイトを作っていくことができます。 プラグインやテーマと違い元のスターターとの依存関係はないので、スターターが更新されても自分のサイトに影響はありません。 スターターでサイト構築を始めてみる もちろん手動で GitHub のレポジトリから clone し、 npm install で依存関係をインストールすることもできます。 gatsby-cli を使うことでより簡単に始められます。 gatsby new コマンドで、対象のレポジトリからstarterをcloneし、依存関係をインストールし、gitの履歴を消去した状態で始められます。 たとえば、 gatsby-starter-blog というスターターを blog という名前でつくる場合以下のコマンドを実行します。 この gatsby-starter-blog というスターターは、ブログの基本設定やRSS、GoogleAnalytics、コードのシンタックスハイライト、サイトのmeta…

プラグインとは？ Gatsbyプラグインは、Gatsby APIを実装してGatsbyサイトに追加機能を追加するNode.jsパッケージです。 例えば、以下のようなものがあります。 build 時に GraphQL に外部データを追加したり ヘッドレス CMS から追加 Shopify からショップデータを追加 Tweet を検索し追加 build 時に GraphQL に静的ファイルを追加したり 取得したデータのフォーマットを JSON オブジェクトに変換したり Markdown YAML PDF サードパーティーのサービスをサイトに追加したり Google Analytic Web Font Loader プラグインはスターターとは異なり、Gatsby…

MDX の紹介と、当ブログで使っているコンポーネントを紹介していきます 💪 MDX について 基本的に当ブログの記事は Markdown 形式で書いているのですが、拡張子は .md ではなく .mdx です。 Markdown の中に JSX を書くことが出来る。コンポーネントをインポートして使うことが出来る、MDX というものを使っています！ MDX のちからをお見せしましょう 外部リンク 実はもうこの記事でひとつ使っています！ リンクをコンポーネントにして使っています！ 実際の記述はこちら。 このように、Markdown 形式で書いている途中に Link コンポーネントを使うだけです。 実際の Link コンポーネントはこちら。 color はデフォでオレンジ( #F6AD55 )となり、 アイコンがついて別タブで開くようになってます。 Callout お次は直前に使ったこちら！ Notion の Callout…