20190827のReactに関する記事は7件です。

投稿日：2019-08-27T20:13:11+09:00

【react-bootstrap-table2】検索バーとカラムのフィルータを1つのボタンでクリアする

react-bootstrap-table2 では以下の公式デモが公開されていますが、1つのボタンで検索バーとフィルターをクリアするものは公開されていません。

検索バーをクリアするデモ

カラムのフィルターをクリアするデモ

ちょうど上記のようなボタンが必要だったので、上記デモを参考に作ってみました。

こちらが CodeSandbox で公開しているデモです。

Requirements

React 16.8.6

react-bootstrap-table-next 3.1.8

react-bootstrap-table2-filter 1.1.11

react-bootstrap-table2-toolkit 2.0.1

公式デモ・ソースの確認

1. カラムのフィルターをクリアするデモ

ボタンがクリックすされた時に、各フィルターに空文字を渡してクリアしてます。
const handleClick = () => {
  nameFilter('');
  priceFilter('');
  stockDateFilter();
};

export default () => (
  <div>
    <button onClick={ handleClick }> Clear all filters </button>
    <BootstrapTable
      keyField="id"
      data={ products }
      columns={ columns }
      filter={ filterFactory() }
    />
  </div>
);
handleClick 内で検索バーをクリアする処理を入れてあげればできそうです。

2. 検索バーをクリアするデモ

どうやって検索バーがクリアされてるのかさっぱり分かりません。
import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';

const { SearchBar, ClearSearchButton } = Search;

<ToolkitProvider
  keyField="id"
  data={ products }
  columns={ columns }
  search
>
  {
    props => (
      <div>
        <SearchBar { ...props.searchProps } />
        <ClearSearchButton { ...props.searchProps } />
      </div>
    )
  }
</ToolkitProvider>
GitHub のソースをみてみます。

3. 検索バーのソース

以下をもとにソースの場所を探してみました。
import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
ソースを眺めてみると、キーボード入力がされた際に実行される処理の中にそれっぽいものがありました。
onKeyup = () => {
    const { delay, onSearch } = this.props;
    const debounceCallback = handleDebounce(() => {
      onSearch(this.input.value);
    }, delay);
    debounceCallback();
}
キーボード入力された値（this.input.value）を onSearch にいれています。

ここに空文字をいれれば検索バーがクリアできそうです。

手順

1. ClearButton に searchProps と clearAllFilter を渡す

カラムのフィルターをクリアする関数
clearAllFilter() {
    nameFilter("");
    priceFilter("");
    originFilter("");
    stockFilter("");
}
<ClearButton
    {...props.searchProps}
    clearAllFilter={this.clearAllFilter}
/>
2. ClearButton が押された時に検索バー（onSearch("")）とフィルターをクリアする処理（clearAllFilter()）を実行させる
const ClearButton = props => {
  const handleClick = () => {
    props.onSearch("");
    props.clearAllFilter();
  };
  return (
    <Button
      onClick={handleClick}
    >
      Clear
    </Button>
  );
};
おわりに

react-bootstrap-table は廃止予定なので積極的に react-bootstrap-table2 を使いましょう。

Reference

デモ

react-bootstrap-table2: 公式デモ

　 Tweet
Qiitaで続きを読む

投稿日：2019-08-27T20:13:11+09:00

【react-bootstrap-table2】検索バーとカラムのフィルターを1つのボタンでクリアする

react-bootstrap-table2 では以下の公式デモが公開されていますが、1つのボタンで検索バーとフィルターをクリアするものは公開されていません。

検索バーをクリアするデモ

カラムのフィルターをクリアするデモ

ちょうど上記のようなボタンが必要だったので、上記デモを参考に作ってみました。

こちらが CodeSandbox で公開しているデモです。

Requirements

React 16.8.6

react-bootstrap-table-next 3.1.8

react-bootstrap-table2-filter 1.1.11

react-bootstrap-table2-toolkit 2.0.1

公式デモ・ソースの確認

1. カラムのフィルターをクリアするデモ

ボタンがクリックすされた時に、各フィルターに空文字を渡してクリアしてます。
const handleClick = () => {
  nameFilter('');
  priceFilter('');
  stockDateFilter();
};

export default () => (
  <div>
    <button onClick={ handleClick }> Clear all filters </button>
    <BootstrapTable
      keyField="id"
      data={ products }
      columns={ columns }
      filter={ filterFactory() }
    />
  </div>
);
handleClick 内で検索バーをクリアする処理を入れてあげればできそうです。

2. 検索バーをクリアするデモ

どうやって検索バーがクリアされてるのかさっぱり分かりません。
import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';

const { SearchBar, ClearSearchButton } = Search;

<ToolkitProvider
  keyField="id"
  data={ products }
  columns={ columns }
  search
>
  {
    props => (
      <div>
        <SearchBar { ...props.searchProps } />
        <ClearSearchButton { ...props.searchProps } />
      </div>
    )
  }
</ToolkitProvider>
GitHub のソースをみてみます。

3. 検索バーのソース

以下をもとにソースの場所を探してみました。
import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
ソースを眺めてみると、キーボード入力がされた際に実行される処理の中にそれっぽいものがありました。
onKeyup = () => {
    const { delay, onSearch } = this.props;
    const debounceCallback = handleDebounce(() => {
      onSearch(this.input.value);
    }, delay);
    debounceCallback();
}
キーボード入力された値（this.input.value）を onSearch にいれています。

ここに空文字をいれれば検索バーがクリアできそうです。

手順

1. ClearButton に searchProps と clearAllFilter を渡す

カラムのフィルターをクリアする関数
clearAllFilter() {
    nameFilter("");
    priceFilter("");
    originFilter("");
    stockFilter("");
}
<ClearButton
    {...props.searchProps}
    clearAllFilter={this.clearAllFilter}
/>
2. ClearButton が押された時に検索バー（onSearch("")）とフィルターをクリアする処理（clearAllFilter()）を実行させる
const ClearButton = props => {
  const handleClick = () => {
    props.onSearch("");
    props.clearAllFilter();
  };
  return (
    <Button
      onClick={handleClick}
    >
      Clear
    </Button>
  );
};
おわりに

react-bootstrap-table は廃止予定なので積極的に react-bootstrap-table2 を使いましょう。

Reference

デモ

react-bootstrap-table2: 公式デモ

　 Tweet
Qiitaで続きを読む

投稿日：2019-08-27T19:15:19+09:00

kintone UI Componentにプルリクエストする

kintone UI ComponentのJavaScript版を使っていたのですが最近React版に乗り換えました。
QuickStart Reactの手順で問題なくButtonは表示できましたが、Dropdownを表示すると以下のエラーが発生しました。

Uncaught Invariant Violation: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.

kintone UI Componentは非常に便利なライブラリなので多くの方に使ってほしい！
そして多くの方にプルリクエストしてほしい！と思っているのでその手順をまとめます。

エラーの内容確認

エラーメッセージが表示してくれているページを確認すると何やら3つぐらい原因の候補がありそうです。

ググったり、試行錯誤した結果、同じアプリ内に2つ以上のReactが含まれていることが原因の可能性であることがわかりました
$ npm ls react react-dom
+-- @kintone/kintone-ui-component@0.3.5
| +-- react@16.8.6
| `-- react-dom@16.8.6  deduped
+-- react@16.8.6
`-- react-dom@16.8.6
修正できることの確認

プルリクエストは当てずっぽうではだせないので、事前に手元で修正されることを確認する必要があります。
ここではその流れを説明するので、詳細がわからない方はググって下さい。

1. GitHub

kintone UI Componentをforkする

2. Git(kintone UI Component)

forkしたリポジトリをcloneする(git clone https://github.com/xxxx)

branchを作成(git checkout -b ブランチ名)

原因と思われる箇所を修正する

git commit -a

git push origin ブランチ名

ここまでの手順で修正版kintone UI Componentを自分のリポジトリに反映できました。
次は自分のプログラムに上記のリポジトリを読み込んでDropdownが表示されるようになるかを確認します。

Git(自プログラム）

npm uninstall @kintone/kintone-ui-component

npm install ユーザー名/kintone-ui-component#ブランチ名

例）npm install potaracom/kintone-ui-component#fix-dropdown

この手順で組み込めたのでReactが1つになっているかを確認します。
$ npm ls react react-dom
+-- react@16.8.6 
`-- react-dom@16.8.6 
ばっちりです。
あとはプログラムをビルドしてDropdownが表示できるか確認します。

という手順で、できあがったプルリクエストがこちらです。
果たしてマージされるでしょうか・・・

　 Tweet
Qiitaで続きを読む

投稿日：2019-08-27T16:07:55+09:00

Next.js + redux-persist の落とし穴に注意しよう

TL; DR

Next.js で redux-persist を使って store を LocalStorage に保存したい時、_app.js の <Component {...pageProps} /> 全体を PersistGate で囲うのではなく、個々の Component を PersistGate で囲うようにしよう

※ 以下の記事に既に同様のことが書かれています。参考にさせていただきました。
https://qiita.com/miyabiya/items/14e4f133d5df5d53cd77

落とし穴

Next.js で構築していた自分のサイトが Twitter Cards の生成に失敗しているのに気づいた。よく確認すると SSR で meta タグを吐き出すのに失敗している。
そのときの構成はこんな感じ。

pages/_app.tsx

import App, { Container } from "next/app";
import Layout from "../layouts/page-layout";
import { Provider } from "react-redux";
import store, { persistor } from "../store/store";
import { PersistGate } from "redux-persist/integration/react";

export default class MyApp extends App {
  render () {
    const { Component, pageProps, router } = this.props;

    return (
      <Container>
        <Provider store={store}>
          <PersistGate loading={null} persistor={persistor}>
            <Component {...pageProps} key={router.route} />
            <Layout />
          </PersistGate>
        </Provider>
      </Container>
    );
  }
}

pages/_documents.tsx

import Document, { Head, Main, NextScript } from "next/document";

export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    return { ...initialProps };
  }

  render() {
    return (
      <html lang="ja">
        <Head>
          <link rel="shortcut icon" href="/static/favicon.ico" />
          <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
          <meta name="theme-color" content="#000000" />
          <meta name="description" content="HelloRusk Official Website." />
          <meta property="og:image" content="https://hellorusk.net/static/mika_square.png" />
          <meta name="twitter:card" content="summary" />
          <meta name="twitter:site" content="@HelloRusk" />
          <meta name="twitter:image" content="https://hellorusk.net/static/mika_square.png" />
          <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:300&display=swap" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </html>
    );
  }
}

pages/それぞれのページ.tsx

import Head from "next/head";
import { hogemode, fugamode } from "../store/actions";
import { ModeState, ActionTypes } from "../store/types";
import HogeComponent from "../components/hoge";
import { connect } from "react-redux";

interface HogeProps {
  isHogekMode: boolean,
  hogemode: () => ActionTypes,
  fugamode: () => ActionTypes
}

const Index: React.FC<HogeProps> = props => {
  const handleChange = () => {
    props.isHogeMode ? props.hogemode() : props.fugamode();
  };

  return (
    <div>
      <Head>
        <title key="title">title</title>
        <meta property="og:title" content="このページのtitle" /> 
        <meta property="og:url" content="このページのurl" /> 
        <meta property="og:description" content="このページの概要" />
      </Head>
      // 何らかの store を持つ Component
      <HogeComponent
        checked={props.isHogeMode}
        onChange={() => handleChange()}
      />
    </div>
  );
};

const mapStateToProps = (state: ModeState) => {
  return {
    isHogeMode: state.isHogeMode,
  };
};

const mapDispatchToProps = {
  hogemode,
  fugamode
};

export default connect(mapStateToProps, mapDispatchToProps)(Index);

_app.js を見ればわかるように、全体を PersistGate で囲っている。
これによって、PersistGate 配下の Component は、LocalStorage にアクセスして状態を取り出すのを待ってからレンダリングが行われるようになる。画面表示的には何も問題はない。

問題は、これによって それぞれのページ.tsx にある <Head> 内の meta タグ

      <Head>
        <title key="title">title</title>
        <meta property="og:title" content="このページのtitle" /> 
        <meta property="og:url" content="このページのurl" /> 
        <meta property="og:description" content="このページの概要" />
      </Head>

この部分が SSR されなくなっていたことにある。よって、GET で得られる html にも meta タグが正しく記述されておらず、Twitter Cards などのOGP設定に失敗していた。

対策

PersistGate の粒度を上げればよい。
すなわち、大雑把に _app.js 全体を囲うのではなく、store を使っている Component それぞれに PersistGate を当てればよい。
上の例では、HogeComponent を PersistGate で囲うことになる。

　 Tweet
Qiitaで続きを読む

投稿日：2019-08-27T11:47:29+09:00

Reactのコンポーネントに関する覚書

JSX記法はReact.createElementの糖衣構文という文脈で色々と実験してみた結果

JSXのタグ名は変数名でも可

ユーザー定義のタグ(大文字から始まるもの)は参照できる範囲の識別子なら可能なので、適当な変数に代入してその変数名を使っても良い。
(React.createElementの第一引数に過ぎないので)
ただ、先頭を大文字にしないと独自コンポーネントと認識してくれないのでそこだけは守る必要あり

表示するコンポーネントの動的切替なんかもタグと{}の中から追い出すことも出来る
const Hoge = FugaComponent;

//render内
<Hoge/> //FugaComponentが出力される

const Hoge = someCondition ? FugaComponent : PiyoComponent;

<Hoge/> //someConditionに応じてどちらが表示されるか決まる
JSX記法とReact.createElementは混ぜても使える

以下のような感じ
render () {
 <React.Fragment>
   {React.createElement('div',{},'hoge')}
 </React.Fragment>
}
//<div>hoge</div>になる
JSXのタグで挟まれた要素は、React.createElementの第3引数(children)に渡される
JSX要素とReact.createElementの戻り値は内部的に同じになるなのでこれでもOK。

実務での使いどころはあるのかというと多分ないけれど。

ただ、JSXのタグの子要素はあくまで第3引数渡される値ということを認識しておくと、
軽く条件分岐する時にifではなく三項演算子を使う理由や、
ループを回す際にmapを使う理由辺りにも納得がいきやすい。
無名関数の実行とreturnし忘れ等も減るのではないかと。

まとめ

タグ名はあくまで第一引数

タグの子要素は第三引数に渡す値　=> よって{}内は式でないといけない

内部的にJSXタグとReact.createElementは等価なので混ぜても使える

　 Tweet
Qiitaで続きを読む

投稿日：2019-08-27T08:00:07+09:00

react-syntax-highlighterのstyleを見比べるサンプルページ作った

Reactで画面上にソースコードを載せるときにシンタックスハイライトをしてくれるパッケージ「react-syntax-highlighter」のstyleを見比べる為のページを作ったので紹介。

作ったもの

https://k8shiro.github.io/ReactCompareCodeHighlighter/

こんな感じで動きます。

react-syntax-highlighter

react-syntax-highlighterは上記の通りソースコードのシンタックスハイライトをいい感じにしてくれるReact用のパッケージです。以下のように、languageとstyleを指定して使用します。
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { dark } from 'react-syntax-highlighter/dist/esm/styles/prism';
const Component = () => {
  const codeString = '(num) => num + 1';
  return (
    <SyntaxHighlighter language="javascript" style={dark}>
      {codeString}
    </SyntaxHighlighter>
  );
};
languageとしてはpython、javascript, json等様々な形式に対応しているようで、また、シンタックスハイライのstyleとしてgithub風やxcode風等かなり多くのstyleがあります。今回は言語ごとにスタイルをいっぺんに見比べられるサンプルページを作りました。

その他

このサンプルページはGithub Pagesで公開しています。
build前のソースコードはこちらです。

　 Tweet
Qiitaで続きを読む

投稿日：2019-08-27T06:40:19+09:00

デザイナーが1人でGatsbyを使ってサイトを作ったよ

この記事について

内容を一言でまとめると

フロントの知識があまりないデザイナーが、サイトを公開するに至った道のり。

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

1からコードを書くことが苦手なデザイナー

自分のサイトを作って公開したことがないデザイナー

目次

作ったサイト

使っている技術、サービスなど

GatsbyJSに決めるまでの経緯

GatsbyJSに決めてからやったこと

ドメイン取得

小さなプロトタイプ作り

コンテンツ作成

スタイリング

Netlifyへの移行

スターター選定、プラグイン導入など

まとめ

作ったサイト

自分のポートフォリオサイトを作りました。
まだまだコンテンツは少ないのですが、これで完成ではありません。
これからの育ち方も含めて1つの作品にするつもりです。

GitHubはコチラ

使っている技術、サービスなど

Figma（ビジュアルデータ作成）

GatsbyJS（静的サイトジェネレーター）

Emotion（CSS in JSのライブラリ）

Netlify（ホスティングサービス）

zeroheight（デザインガイドライン作成）

GatsbyJSに決めるまでの経緯

会社の業務でReactを使うことが増えていたので、
「練習を兼ねてReactで作ろうかな〜」くらいの軽い気持ちでいました。

しかし、作ろうとしていたのは個人のポートフォリオサイト。

静的なコンテンツ

DOM操作はほとんどしない（はず）

わざわざReactで作る意味があるのかなあと少し悩みました。

そんな中、TwitterでGatsbyJS関連の記事が流れてきて初めて認知。
「環境構築が簡単で表示も速いらしい、更新も楽そうだしこれを使ってみたいな」と決定。

GatsbyJSに決めてからやったこと

まずは公式のドキュメントを一通り読みました。

本当は日本語記事を見ながらやれば良いかと思っていましたが、全然見つかりません。
公式リファレンスをちゃんと読む練習も兼ねて挑戦。

クイックスタートの通りにコードを書いてみてイメージを掴みます。
Gatsby CLIをインストールしてサイトの雛形を作成、develop, build, serveと基礎の基礎だけを理解しました。
ちなみに

develop = 自分のPC上でサイトを立ち上げる、本番環境で人が見るコードとは違う

build = 静的なファイルに書き出し、ここで出来たものをアップロードすれば公開できる

serve = 本番環境と同じものを自分のローカル上で確認できる

というイメージです。
最初は正直これらの差もあまりわかっておらぬまま進めていましたがどうにかなりました。

その後はチュートリアルを全部やりました。
HomebrewやNode.jsの導入から教えてくれるので環境構築で詰まることは少ないのではないでしょうか……？
少なくとも今まで自分が見たことのあるチュートリアルの中ではかなり親切な方だと思います。

チュートリアルの全体は

環境構築

JSXの書き方

CSSの当て方

Componentのネストによるレイアウトの仕方

データの扱い方（GraphQL）

gatsby-source-filesystemの扱い方（Gatsbyがどうやって各種データを保持していて、いかに出力するのか？みたいなことが書いてあります）

MarkdownからHTMLへの変換の仕方

複数のページをMarkdownから出力するやり方

サイト公開の準備（SEO含む）

というものです。
（本当はこの後にThemeについてのチュートリアルともう少し突っ込んだチュートリアルがありますが、万人に必要なものではないと思います。楽しくなってきちゃった方だけで大丈夫かと。）

ドメイン取得

チュートリアルを終えた後の気持ちは
「全然理解してないけどとりあえず手を動かそう」
でした。

が、ここで問題が発生します。

自分のドメインを持っていないし、取得したこともありません。

記憶が曖昧ですが、たしか「ドメイン取得おすすめ」などと検索。
出てきた記事内でオススメされるがままにムームードメインで取得したはずです。

ドメイン取得は値段以外で何がどう違うのか未だに分かっておらず……。
詳しい方がいれば教えていただきたいです。

あとはこのタイミングでロリポップのレンサバも契約していました。
一瞬だけ使った後にNetlifyへ移行済。

ちなみに取得したのは.work。
初年度だけでなく2年目以降も割と安かったのと、
「デザイン以外のサイトコンテンツも作りたくなるかもしれないし、汎用的な方が良いよね！」
と捕らぬ狸の皮算用。

小さなプロトタイプ作り

歴史を遡ったところ、一番最初に公開したのはコレのようです。

ページ遷移、なし

コンテンツ、なし

ただ文字がアニメーションしているだけ。

たったこれだけのサイトでしたが

ドメインとレンサバを紐づけるのってどうやってやるんだ？

会社ではmergeすれば本番公開されるけど、今ってされてなくない？

WHOISってなんだよ？

よくわかんないけどポチポチしてたらhttpsになった、一体何が起こったのか？

などと分からないことだらけ。
結局Netlifyに移行したので必要なかった作業も多いのですが……色々調べる機会になりました。

自分でやってみたことでエンジニアの皆さんへの感謝がぶち上がり、一人で四苦八苦した価値がありました。
いつもありがとうございます。

コンテンツ作成

意味深なアニメーションだけのトップページから脱却すべく、下層ページを作成しました。

テキストだけローカルで書いて、あとはせっせとFigmaにコピペ。
（Figmaには日本語入力バグがあってFigma上でテキストを打つのはかなりしんどい）
デザインデータを作るのはいつもやっているように進めるのみ。

コンテンツ作成のポリシーなどはポートフォリオに記載していますので良ければそちらをご覧ください。

スタイリング

せっかくGatsbyというモダンなジェネレーターを使うのだからと、スタイリングも新しいものにチャレンジしてみました。

ボツになったものたち

styled-components

styled-jsx

CSS Modules

JSS

初めのしばらくはstyled-componentsを使用。

機能的に悪い箇所はなかったのですが、なぜスタイル宣言時にタグを指定しなければならないのかが腑に落ちずあまり好きになれませんでした。
// 公式にあるコード
const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;
sectionかarticleかdivかなど……タグの意味と見た目は分離されているべきではないでしょうか？

また、はじめに宣言したタグから変更することも出来るのですが
// 公式にあるコード
const Component = styled.div`
  color: red;
`;

render(
  <Component
    as="button"
    onClick={() => alert('It works!')}
  >
    Hello World!
  </Component>
)
どういうことかというと

スタイリングされたdivとしてComponentを宣言する

Componentの使用時に「このComponentをbutton扱いにする」という意味のpropを渡す

定義したスタイルは一緒なのに都度asを渡さなければならないのがイマイチです。
かといってタグ違い用に同じ見た目のComponentと複数作るのはもっとWET。

ファイルでComponentを分けているのにComponent内に見た目のためだけのローカルな（？）Componentが複数生まれるのもなんだかしっくり来ず……。

styled-jsxも試しましたが、こちらも似たような理由でやめてしまいました。
あとはJSX内に毎度毎度別のタグっぽく<style jsx>を入れないといけないのもなんだか……。

その他CSS ModulesやらJSSやらも検討しましたが採用には至らず。

今採用しているもの→Emotion

最終的にはEmotionに落ち着きました。
css PropのString Stylesを使ってスタイルを書いています。
Object StylesだとCSSTypeが使えるっぽいのですが、頭にすっと浮かぶプロパティはハイフン付きのものなので迷いつつString Stylesを選択。

実際のコードはこんな感じです。
Button.js
import React from 'react'
import { Link } from 'gatsby'
import hexToRgba from 'hex-rgba'

import { css } from '@emotion/core'
import Color from '../styles/Color'
import Size from '../styles/Size'
import Typography from '../styles/Typography'

const root = css`
  display: inline-block;
  color: ${Color.White};
  background-color: ${Color.Blue};
  ${Typography.Body};
  font-weight: 500;
  text-decoration: none;
  border-radius: ${Size(1)};
  box-shadow: 0 ${Size(0.5)} ${Size(2)} ${hexToRgba(Color.Black, 16)};
  padding: ${Size(2)} ${Size(3)};
`

export default ({ children, to }) => (
  <Link to={to} css={root}>
    {children}
  </Link>
)
ColorとかSizeとかTypographyは自分で作った定数や関数で、いちいち値を書かなくて良いようにしています。

Netlifyへの移行

ドメインをとったのがムームードメインで、当初は運営が同じGMOペパボさんで連携があるロリポップのサーバーを当初は借りていました。
しかし……ロリポップのマニュアルに載っていたのはFTPでファイルをアップロードするやり方。

はじめの内こそ

ローカルで開発

Gatsby buildでpublicディレクトリに書き出し

中身をまとめてアップロード

と律儀にやっていましたが……正直面倒くさい！
怠惰な性格には自信があるので、簡単に出来るやり方を模索していました。

調べているうちにNetlifyなら簡単に出来そうだったので使ってみることに。

初期設定の時期は良い感じのタイミングでやるべきことの指示が出るので
言われるがままやっていたら

GitHubでmasterにmergeしたら本番リリースされる設定

常時SSL化

Netlify DNSの準備

などが終わっていました。
あれ？こんなんで良いんでしょうか……書いててちょっと不安になってきました。

スターター選定、プラグイン導入など

若干時系列は前後しますが、Gatsbyで新規にサイトを作成するときは
gatsby new [SITE_DIRECTORY] [URL_OF_STARTER_GIT_REPO]
というコマンドを叩きます

自分はデフォルト設定になっているgatsby-starter-defaultから作りました。

スターターなのに若干CSSの指定が入り組んでいるような気がしますが……多分一番シンプルに始められます。
このスターターを使った時点で適用されているプラグインは

gatsby-plugin-react-helmet

gatsby-source-filesystem

gatsby-transformer-sharp

gatsby-plugin-sharp

gatsby-plugin-manifest

これで全部のはずです。
具体的に何がどう動くというよりはGatsbyの根幹を作っているプラグイン達だと思います。

動くものが出来てきたら徐々にプラグインを増やしていきました。
下記のものは2019年8月27日現在のリストなので多分まだ増えると思います。

gatsby-plugin-emotion

途中で説明したEmotionを使うために必要なプラグインです

gatsby-plugin-sitemap

SEO用に入れました、サイトマップを出力してくれます

gatsby-plugin-netlify

機能は色々ありますが、301転送をしたいがために入れました

まとめ

多分フロントエンドエンジニアの方にコードレビューしてもらったらすごい数のご指摘をいただくと思うんですが、それでも動いています。

苦労しながらも一人で動くものを作れた経験は大きいと思っていて、引き続きこのサイトを使って新しい挑戦をしていくつもりです。

また、記事の冒頭に挙げた

1からコードを書くことが苦手なデザイナー

自分のサイトを作って公開したことがないデザイナー

こういった人たちに「自分も試しにやってみようかな」と思えるきっかけを提供できたら嬉しいです。

最後まで読んでいただいてありがとうございました。

　 Tweet
Qiitaで続きを読む

20190827のReactに関する記事は7件です。

【react-bootstrap-table2】検索バーとカラムのフィルータを1つのボタンでクリアする

Requirements

公式デモ・ソースの確認

1. カラムのフィルターをクリアするデモ

2. 検索バーをクリアするデモ

3. 検索バーのソース

手順

1. ClearButton に searchProps と clearAllFilter を渡す

2. ClearButton が押された時に検索バー（onSearch("")）とフィルターをクリアする処理（clearAllFilter()）を実行させる

おわりに

Reference

【react-bootstrap-table2】検索バーとカラムのフィルターを1つのボタンでクリアする

Requirements

公式デモ・ソースの確認

1. カラムのフィルターをクリアするデモ

2. 検索バーをクリアするデモ

3. 検索バーのソース

手順

1. ClearButton に searchProps と clearAllFilter を渡す

2. ClearButton が押された時に検索バー（onSearch("")）とフィルターをクリアする処理（clearAllFilter()）を実行させる

おわりに

Reference

kintone UI Componentにプルリクエストする

エラーの内容確認

修正できることの確認

1. GitHub

2. Git(kintone UI Component)

Git(自プログラム）

Next.js + redux-persist の落とし穴に注意しよう

TL; DR

落とし穴

対策

Reactのコンポーネントに関する覚書

JSXのタグ名は変数名でも可

JSX記法とReact.createElementは混ぜても使える

まとめ

react-syntax-highlighterのstyleを見比べるサンプルページ作った

作ったもの

react-syntax-highlighter

その他

デザイナーが1人でGatsbyを使ってサイトを作ったよ

この記事について

内容を一言でまとめると

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

目次

作ったサイト

使っている技術、サービスなど

GatsbyJSに決めるまでの経緯

GatsbyJSに決めてからやったこと

ドメイン取得

小さなプロトタイプ作り

コンテンツ作成

スタイリング

ボツになったものたち

今採用しているもの→Emotion

Netlifyへの移行

スターター選定、プラグイン導入など

まとめ

日付別

タグ一覧

1. `ClearButton` に `searchProps` と `clearAllFilter` を渡す

2. `ClearButton` が押された時に検索バー（`onSearch("")`）とフィルターをクリアする処理（`clearAllFilter()`）を実行させる

1. `ClearButton` に `searchProps` と `clearAllFilter` を渡す

2. `ClearButton` が押された時に検索バー（`onSearch("")`）とフィルターをクリアする処理（`clearAllFilter()`）を実行させる