GatsbyでTypeScriptを使いブログシステムを構築します。ここではcretePagesを実装します。gatsby-markdown-remarkが作成したノードからページを作成する方法を記述します。
はじめに createPages の実装を行います。 この関数は、 Gatsby から呼ばれます。 前回作成した slug を元にページを追加します。 手順 主な手順としては、以下になります。 GraphQL でマークダウンコンテンツを取得 取得した各要素に対してページを追…
GatsbyでTypeScriptを使いブログシステムを構築します。ここではonCreateNodeの実装を行います。ここで行うことはslugを作成することです。
はじめに 前回までの準備をもとに実装していきます。 今回は、onCreateNode の実装を行います。 onCreateNode では、ファイル名から slug を作成し、指定されたnodeのfieldsキーの下にカスタムノードを作成します。
作成したものは GraphQL …
コンテンツの生成にMarkdownファイルをサポートする方法を記述します。Gatsbyの公式チュートリアルで紹介されている内容を元にTypeScriptを用いて記述します。gatsby-nodejsでは、ts-nodeを使用しTypeScriptで記述します。
はじめに ブログのコンテンツに Markdown ファイルを使用する方法を記述します。
具体的な方法は、Gatbyの公式サイトにあるチュートリアルに紹介されています。 この内容に沿って、TypeScript を使って機能を盛り込んで行きます。 主な手順 Markdown …
TypeScriptで作成しているGatsbyプロジェクトに、SematicUIを組み込みます。SemanticUIをGatsbyプロジェクトにインストールした後に、実際にページに組み込んで行きます。
はじめに GatsbyプロジェクトにSemantic UIを組み込みます。 SemanticUIは、UIパーツのフレームワークです。 因みに、このようなジャンルではTwitter製のBootstrapがよく使われています。 手順 土台となるプロジェクトは、『TypeScri…
GatsbyでTypeScriptを使用してサイトを構築する方法を記述します。jsxファイルをtsxに変更してtscでコンパイルが通るようになるところまでを記述します。
はじめに ここでは、JavaScript で記述されているファイルを TypeScript に変える方法を記述します。 スターターで生成された JavaScript ファイルを順次 TypeScript に変換してゆきます。 流れとしては、以下になります。 ファイルを選択し…
GatsbyでTypeScriptを使用してサイトを構築する方法を記述します。まずはプロジェクトの作成からGatsbyでTypeScriptを使用できるようになるまでを記述します。TypeScriptとプラグインをインストールし、eslintを設定します。
はじめに Gatsby のサイトを TypeScript で作成する方法を記述します。
現時点の主な環境は以下です。 プロジェクト バージョン Gatsby 2.7.20 TypeScript 3.5.3 yarn 1.17.0 主な流れ 主な流れは以下のようになります。 …
このサイトについての説明です。このサイトでは私がいろいろと実験したメモを記載しています。
はじめに 世界の皆さんこんにちは。 私の研究室へようこそ。 ここでは、ソフトウェア開発やら自分の興味あることについての自分用メモを記していきます。 備忘録用にこのサイトを作りました。 そのメモをここに共有します。 ここで紹介する記事も実験場ですが、このサイト自体も実験場で…