筋肉チョットデキル

ステータスオープン!

岡本 侑貴
29
所属
おいしい健康
職種
筋肉エンジニア
HTML
B
70
CSS
C
65
JS
C
60
TS
G
9
React
E
40
Gatsby
B
74
Ruby
D
58
Rails
C
67
Java
G
10
HP
MP
調
n%IW
ストーリーをのぞく

職務経歴

筋肉経歴

開発実績

ブログ

アリババのカスタムフックコードリーディング~useBoolean編~

2020年07月16日
2 min read
ReactHooks

アリババのカスタムフックをコードリーディング 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…

Read more

アリババのカスタムフックコードリーディング~useToggle編~

2020年07月15日
5 min read

アリババのカスタムフックをコードリーディング 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ページをカスタマイズした

2020年07月01日
3 min read

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

コードブロックの指定行をハイライトさせる

2020年06月26日
7 min read

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

MDXProviderを使ってマークダウンの表示を変える

2020年06月26日
4 min read

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…

ブログ記事一覧へ

Made with Gatsby& ChakraUi

Yuuki Okamoto • 2020