Gatsby Logo

Blog Page

Gatsby Tutorial Starter

04.21.2021

【JavaScript】typeofの違い【TypeScript】

JS、TSで開発する際に、の使い方に混乱したのでまとめる。 ①typeof 演算子 ②型クエリー ①typeof 演算子 いわゆるJavaScriptのtypeof。与えられたオペランドの型を表す文字列を返す。 typeof - JavaScript | MDN typeof演算子の返り値一覧 型 返り値 Undefined "undefined" Null "object…
01.11.2021

Reactのレンダリングプロセス

Reactのレンダリングプロセスには2段階のステージがある。 ①Render ステージ ②Commit ステージ ①のRenderステージは、仮想DOMの構築から差分検出処理(リコンシリエーション)までを含む。 ②のCommitステージは、検出した差分を実DOMに反映する段階である。 React のライフサイクルメソッド図 ①Renderステージ このステージで行われることは、 仮想DOM…
11.18.2020

フォントサイズ指定のremとpx

この記事の要約 import文を相対パスで記載せず、絶対パスで記載するやり方。 要約 かつてはpx指定だとブラウザで文字サイズが変更できなかった けど、今は マウスのズームでもブラウザのサイズ変更でも文字が拡大縮小されていることが確認できる ただ、 ルートがpx指定だった場合、ブラウザデフォルトの文字サイズ設定が反映されなくなることは事実です。 だけど、 設定する人レアじゃない? DX…
10.23.2020

「create-react-app」+ 「TypeScript」環境で絶対パスのaliasを指定する

import文を相対パスで記載せず、絶対パスで記載するやり方。 手順 ①パッケージをインストールする webpackの設定を変更するためのパッケージ、をインストールする。 https://github.com/timarney/react-app-rewired ②package.jsonを編集する 先程インストールしたパッケージに合わせて、package.json内のデフォルトのscript…
10.20.2020

「Array.prototype.filter()」メソッドで配列のfalsyな要素を除去する

filter()メソッドを使うことで、配列のfalsyな要素(0, null, undefined, false)を除去することができる。 解説 は、与えられた関数を配列の各要素に対して一度ずつ呼び出し、がと評価される値を返したすべての要素からなる新しい配列を生成します。 引用:Array.prototype.filter() - JavaScript | MDN…
10.18.2020

Gitコマンド「branch]「fetch」よく使うオプションまとめ

Gitのブランチに関するコマンドと、リモートリポジトリのデータを取得するGitコマンドについて。 git branch ブランチ一覧を表示する ローカルリポジトリに存在するブランチリストを表示する。マークがついているブランチが現在チェックアウトしているブランチとなる。 オプションをつけることで、リモート追跡ブランチを含んだブランチ一覧を表示する。 ※とはリモート追跡ブランチのこと。 参考:Git…
10.17.2020

GatsbyJS製ブログに「見出しにリンクを貼る機能」を追加する

hタグの見出しにアンカーリンクを設置して、URL設定できるようにする。 手順 ①プラグインをインストールする プラグインをインストールする。 https://www.gatsbyjs.com/plugins/gatsby-remark-autolink-headers/ ②configファイルを設定する を編集し、プラグイン設定を追加する。 ※よりも上にを追記する。 ※option…
10.12.2020

GatsbyJS製ブログに「外部リンクを別タブで開く機能」を追加する

外部ドメインリンクのaタグにをつけて、別タブで開く設定にする。 手順 ①プラグインをインストールする プラグインをインストールする。 https://www.gatsbyjs.com/plugins/gatsby-remark-external-links/ ②configファイルを設定する を編集し、プラグイン設定を追加する。 ※よりも下にを追記する。 ※セキュリティ対策のため、option…
10.11.2020

GatsbyJS製ブログに「コードタイトル設定機能」を追加する

GatsbyJSにはコードのシンタックスハイライト機能は初めから存在している。 が、コードタイトル設定機能は組み込まれていないため手動で追加が必要となる。 手順 ①プラグインをインストールする プラグインをインストールする。 https://www.gatsbyjs.com/plugins/gatsby-remark-prismjs-title…
08.30.2020

Homebrewでzshをインストールする

macOS Catalinaから標準シェルがzshになったが、デフォルトで入っているものは大抵古いバージョンなので、 homebrewで最新のバージョンのzshをインストールしたほうがよい。 手順 ①Homebrewをインストールする macOS(またはLinux)用パッケージマネージャー — Homebrew Homebrewはで書かれている。 ②brew doctorコマンドでwarning…
08.23.2020

[].slice.call()とは

どうやら配列風オブジェクトを配列に変換する記法らしい。 解説 🐳 NodeList メソッドは、配列風オブジェクトであるを取得する。 NodeListはArrayオブジェクトを継承していないので、やなどのが持つメソッドを使用できない。 そのため、配列風オブジェクトでArray.prototype…
Gatsby Tutorial Starter - Justin Formentin