業務ではJava+SpringBoot、jQuery等しか使ったことがないエンジニアです。
React+TypeScriptを学ぶ過程を記録として残していきます。
あとから来る人の参考の１つとしてハマったところも書いていければと。

概要

この記事では、React+TypeScriptで開発するためのローカル環境を構築するところまでやります。
後々のことも考えて、anyenv+nodenvで環境をつくっていきます。
筆者の環境は以下に記載しておきます

• macOS Catalina 10.15.7
• node.js
• TypeScript
• React

anyenvとnodenvのインストール

JavaScript(TypeScript)のパッケージ管理システムとしてyarnを使うためにNode.jsをインストールします。今後、場合によってはバージョンの違うNode.jsを使う可能性もあるため、バージョンマネージャを使います。
今回は他の言語(pyenvなど)のパッケージマネージャもまとめて管理できるanyenvを使って、Node.jsのバージョンマネージャであるnodenvを入れていきます。

// Homebrewを使ってanyenvをインストールする
brew install anyenv

// ご自身が使っているシェルに合わせて設定ファイルにanyenvの設定するコマンドを追記する
echo 'eval "$(anyenv init -)"' >> ~/.bash_profile

// 起動中のシェルに再ログインしてanyenvを有効化する
// exec・・・現在のプロセスを上書きしてコマンドを実行
// $SHELL・・・現在起動中のシェルのパス
// -l・・・bashのオプション。ログインを意味する
exec $SHELL -l

// anyenvコマンドでnodenvをインストールする
anyenv install nodenv

// シェルを再起動
exec $SHELL -l

Reactプロジェクトを作成

プロジェクトを作成したいディレクトリにて下記コマンドを実行します。

// npx・・・npmパッケージで提供されているコマンドを実行するコマンド
// create-react-app・・・React用のテンプレートプロジェクトをいい感じにつくってくれるコマンド
// --template typescript・・・TypeScriptでReactのプロジェクトを作成するオプション
npx create-react-app <プロジェクト名> --template typescript

Reactプロジェクトを起動

create-react-appで作成したプロジェクトを起動します。
コマンドが正常に完了すると以下のようなメッセージが表示されるのでそのとおりに実施すればOKです。

We suggest that you begin by typing:

 cd hello-world
 yarn start

Happy hacking!

以下のような画面が表示されれば成功！！

参考

• りあクト！ TypeScriptで始めるつらくないReact開発 第3版【Ⅰ. 言語・環境編】
• exec $SHELL -l でシェルが再読込されるしくみ

業務ではJava+SpringBoot、jQuery等しか使ったことがないエンジニアです。
TypeScript+Reactを学ぶ過程を記録として残していきます。
あとから来る人の参考の１つとしてハマったところも書いていければと。

概要

この記事では、TypeScript+Reactで開発するためのローカル環境を構築するところまでやります。
後々のことも考えて、anyenv+nodenvで環境をつくっていきます。
筆者の環境は以下に記載しておきます

• macOS Catalina 10.15.7
• node.js
• TypeScript
• React

anyenvとnodenvのインストール

JavaScript(TypeScript)のパッケージ管理システムとしてyarnを使うためにNode.jsをインストールします。今後、場合によってはバージョンの違うNode.jsを使う可能性もあるため、バージョンマネージャを使います。
今回は他の言語(pyenvなど)のパッケージマネージャもまとめて管理できるanyenvを使って、Node.jsのバージョンマネージャであるnodenvを入れていきます。

// Homebrewを使ってanyenvをインストールする
brew install anyenv

// ご自身が使っているシェルに合わせて設定ファイルにanyenvの設定するコマンドを追記する
echo 'eval "$(anyenv init -)"' >> ~/.bash_profile

// 起動中のシェルに再ログインしてanyenvを有効化する
// exec・・・現在のプロセスを上書きしてコマンドを実行
// $SHELL・・・現在起動中のシェルのパス
// -l・・・bashのオプション。ログインを意味する
exec $SHELL -l

// anyenvコマンドでnodenvをインストールする
anyenv install nodenv

// シェルを再起動
exec $SHELL -l

Reactプロジェクトを作成

プロジェクトを作成したいディレクトリにて下記コマンドを実行します。

// npx・・・npmパッケージで提供されているコマンドを実行するコマンド
// create-react-app・・・React用のテンプレートプロジェクトをいい感じにつくってくれるコマンド
// --template typescript・・・TypeScriptでReactのプロジェクトを作成するオプション
npx create-react-app <プロジェクト名> --template typescript

Reactプロジェクトを起動

create-react-appで作成したプロジェクトを起動します。
コマンドが正常に完了すると以下のようなメッセージが表示されるのでそのとおりに実施すればOKです。

We suggest that you begin by typing:

 cd hello-world
 yarn start

Happy hacking!

以下のような画面が表示されれば成功！！

参考

• りあクト！ TypeScriptで始めるつらくないReact開発 第3版【Ⅰ. 言語・環境編】
• exec $SHELL -l でシェルが再読込されるしくみ

環境

Mac：Catalina
docker: 19.03.13
docker desktop for mac
Dockerはインストール済みとする。

環境準備

拡張機能である、Remote-Containersを入れる

VSCodeを起動

適当な加フォルダでVSCodeを開きます（中身はからっぽでOK）

開発コンテナ設定ファイルの作成

表示 > コマンドパレットを開く

Remote-Containers: Addまで打ち込んだら表示される、Remote-Containers: Add Development Container Configuration Files...を選択します。

Show All Definitions...を選択します。

検索BOXにnode と入力し、Node.js & Typescriptを選択します。

バージョンは現時点最新の14を選択しときます

これで設定ファイルが追加されました。

React設定の追加　

Dockerfile

Dockerfileの17行目あたりにcreate-react-appのインストールを追加する

Dockerfile

# [Optional] Uncomment if you want to install more global node packages
# RUN sudo -u node npm install -g <your-package-list -here>
RUN sudo -u node npm install -g create-react-app

devcontainer.json

ポートフォワードの設定を行う。
23行目あたりのポートフォワードのコメントを外して3000と入力する。

devcontainer.json

// Use 'forwardPorts' to make a list of ports inside the container available locally.
"forwardPorts": [3000],

Dockerの有効化

左下のアイコンをクリックし、

コマンドパレットに表示されたContainers:Rebuild and Reopen in Containerを選択する。

react app の作成と実行

作成

ターミナルにて以下を打ち込む

npx create-react-app my-app

しばらく待つとreact appの雛形が作成される。
（初回はかなり待たされる）

Happy hacking!が表示されたら完了

実行

環境作成が完了したら、ターミナルにて以下を打ち込む

cd my-app
npm start

しばらく待つと起動します。

ブラウザにて http://localhost:3000 にアクセス！
以下の画面が表示されればOK

Happy hacking!

おまけ

Terminalにwarning: setlocale: LC_CTYPE: cannot change locale (ja_JP.UTF-8)と表示されるときは

Dockerfileに以下を追加することで解決します

Dockerfile

RUN localedef -f UTF-8 -i ja_JP ja_JP.UTF-8

参考

How to use Visual Studio Code Remote Containers to develop Microsoft Teams apps · Garry Trinder

表示出しわけ

let flg = true;
let el = (
　　　　　<div>
　　　　　 { flg &&
　　　　　　　　<p>yesなら表示</p>
　　　　　 }
　　　　　</div>
);

※ flg ? a : b
という表示でも可能

リストの表示

let list = [
    <li>松井</li>,
    <li>田中</li>
];
let el = (
    <div>
       <ul>
       {list}
       </ul>
    </div>
);

※ list.map((value)) => (処理)でも操作可能

この記事について

内容を一言でまとめると

• 前回の記事の続きで、具体的なコンテンツを作成するまでの流れ

こんな人が読んでくれたら嬉しい

• ポートフォリオサイトを作成しようと思っている方
• かつ、制作物のページ更新は出来るだけ簡単に済ませたい方

作ったサイト

• https://www.keisukewatanuki.work/

運用の方法

1. 所定のフォルダに、任意の名前のフォルダを作成する
2. そのフォルダ内にMarkdownファイルを保存する
3. フォルダ名をslugとしたページが作成される

作成の手順

プラグインを導入する

プラグイン名	説明
gatsby-transformer-remark	MarkdownファイルをHTMLに変換してくれるプラグイン。
gatsby-remark-images	Markdown内で使った画像も普段のGatbsyのように最適化を施した上でビルド出来るようにしてくれるプラグイン。

shell

yarn add gatsby-source-filesystem gatsby-transformer-remark gatsby-remark-images gatsby-plugin-sharp

今回の記事において重要なのはgatsby-transformer-remarkとgatsby-remark-imagesです。
Gatsbyを使っているならgatsby-source-filesystemとgatsby-plugin-sharpは導入済の場合も多いと思いましたが、念のため記載。

gastby-config.js

plugins: [
  {
    resolve: `gatsby-source-filesystem`,
    options: {
      name: `markdown-pages`,
      path: `${__dirname}/src/markdown-pages`,
    },
  },
  {
    resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [
        {
          resolve: `gatsby-remark-images`,
          options: {
            maxWidth: 680,
            linkImagesToOriginal: false,
            quality: 80,
            withWebp: true,
          },
        },
      ],
    },
  },
]

resolve: gatsby-source-filesystemの部分は、Markdownファイル専用のフォルダを作っておいた方が便利なので作成し、filesystemで扱えるようにここで定義しています。

resolve: gatsby-transformer-remarkは、オプションとしてgatsby-remark-imagesを使うので入れ子になっています。
自分は画像をクリックした際にオリジナルへリンクしてもしょうがないなと思ったのでfalseを選んだり、webpが使えるようにしたかったのでtrueを選択したりしています。

テンプレートを作成する

src/templates/template.js

import React from 'react'
import { graphql } from 'gatsby'
import Img from 'gatsby-image'

// 本来このあたりにスタイリングのためのコードがあるものの、省略

export default function Template({ data }) {
  const post = data.markdownRemark
  const featuredImageFluid = post.frontmatter.featuredImage.childImageSharp.fluid
  return (
    <>
      // 本来レイアウトのためのコンポーネントやコードがあるものの、省略
      <Img fluid={featuredImageFluid} alt='' />
      <h1>{post.frontmatter.title}</h1>
      <article dangerouslySetInnerHTML={{ __html: post.html }} />
    </>
  )
}

export const pageQuery = graphql`
  query($slug: String!) {
    markdownRemark(fields: { slug: { eq: $slug } }) {
      html
      frontmatter {
        title
        featuredImage {
          childImageSharp {
            fluid(maxWidth: 800) {
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
    }
  }
`

GraphQLでhtmlやfeaturedImageの情報を取得して、returnの中であれこれ展開します。
今回で一番大切になるのはdangerouslySetInnerHTML={{ __html: post.html }}の部分。
ここにMarkdown内のコンテンツが注入されます。

createPage APIを利用してページを生成する

gatsby-node.js

const path = require(`path`)
exports.createPages = async ({ actions, graphql }) => {
  const { createPage, createRedirect } = actions
  const template = path.resolve(`src/templates/template.js`)
  const result = await graphql(`
    {
      allMarkdownRemark(
        sort: { order: DESC, fields: [frontmatter___date] }
        limit: 1000
      ) {
        edges {
          node {
            fields {
              slug
            }
          }
        }
      }
    }
  `)
  result.data.allMarkdownRemark.edges.forEach(({ node }) => {
    createPage({
      path: node.fields.slug,
      component: template,
      context: { slug: node.fields.slug },
    })
  })
}

const { createFilePath } = require(`gatsby-source-filesystem`)
exports.onCreateNode = ({ node, getNode, actions }) => {
  const { createNodeField } = actions
  if (node.internal.type === `MarkdownRemark`) {
    const slug = createFilePath({ node, getNode, basePath: `markdown-pages` })
    createNodeField({
      node,
      name: `slug`,
      value: slug,
    })
  }
}

このページで紹介されているやり方だとMarkdown内に毎度slugのために何かしら指定することになり……面倒でした。
というわけでcreateNodeFieldという関数でもって、src/markdown-pagesの中にあるフォルダ名をslugに出来るようにしています。

あとはresult.data.allMarkdownRemark.edges.forEach(({ node })の中でMarkdownからページを作成する運びです。

Markdownを保存する

ここまで来たらsrc/markdown-pages内にフォルダを作ってMarkdownファイルを保存すればどんどんページが作成されます。
もちろんリリースした後でもMarkdownを編集すればサイトそのものを更新できます。

まとめ

せっかくサイトを作っても更新が面倒だと滞りがちです。そうなってしまっては勿体ないですよね。
出来るだけ簡単に更新出来るようにして、日々触れるサイトになると良いよねと思います。
ちなみに自分の制作物のページ更新は若干滞っています……。頑張らないとな……。

?のようにPropsからHタグのレベルを制御したいとします。

例

<H level={1} /> // = <h1 />
<H level={2} /> // = <h2 />
<H level={3} /> // = <h3 />
<H level={4} /> // = <h4 />
<H level={5} /> // = <h5 />
<H level={6} /> // = <h6 />

React.ElementTypeにキャストすることで文字列からHTMLの標準タグを作ることができます。

解決法

function H(props) {
    const Header = `h${props.level}` as React.ElementType;
    return <Header />;
}