投稿日：2021-01-21T23:59:23+09:00

React Developer Toolsのインストールを推されるコンソールメッセージ消してみた。

行いたいこと

ブラウザのコンソールに出てる以下の文章を本番環境で消したかった。
Download the React DevTools for a better development experience: https://fb.me/react-devtools

やったこと
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
  <head>

  </head>
  <body>
    <script>
      // 本番環境上でコンソール上のdevtoolに関するメッセージを本番環境では表示しないようにする。
      @production
        window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = {
          supportsFiber: true,
          inject: function() {},
          onCommitFiberRoot: function() {},
          onCommitFiberUnmount: function() {},
        };
      @endproduction
    </script>
    <div id="app"></div>
  </body>
</html>
解説

グローバル変数に以下の内容を代入すれば、devtoolに関するメッセージは消える
※ただしバンドルされるコード内に記載しても意味がない。
  window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = {
          supportsFiber: true,
          inject: function() {},
          onCommitFiberRoot: function() {},
          onCommitFiberUnmount: function() {},
        };
補足（Laravel）

投稿主の環境はPHP(Laravel) + React.jsの構成になっている。
ちょうどいいからLaravelのBlade(テンプレートエンジン)上で、本番環境では、出ないようにするために、
@production と @endproductionで挟んでいる。

@productionの解説
https://readouble.com/laravel/7.x/ja/blade.html#if-statements

　 Tweet
Qiitaで続きを読む

投稿日：2021-01-21T22:13:22+09:00

Next.jsの環境構築とメリット

参考

vercel社が提供するNext.js公式チュートリアル引用でございます。まるパクリです。
また、YouTubeで発信されているトラハックさんの動画がNext.jsを学習する上でめちゃくちゃ分かりやすかったです!!
誠に勝手ながら紹介させていただきました。

Next.jsで環境構築を行うメリット

1.Babel+Webpackの複雑な環境設定が不要
2.Code Splittingのような最適化設定が不要
3.パフォーマンスやSEOのためのpre-render設定が不要
4.Renderingのタイミングを選択できる(CSR,SSR,SSG)
5.サーバーサイドの処理（api）を簡単に実装できる

Next.js環境構築

※注意
- Windowsの方はUnixコマンドを使えるgit bashを用いてください。
- nodeが入っている前提です
$ npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/learn-starter"
succesfully!でプロジェクトができたら、
$ cd nextjs-blog(プロジェクト名)
$ npm run dev
ローカルサーバーを立ち上げ
http://localhost:3000/
を開く

終わりに

Next.jsのコミュニティは活発でアップデートも盛んなところが面白い！！

　 Tweet
Qiitaで続きを読む

投稿日：2021-01-21T21:54:12+09:00

あなたが知っておくべき最高のReactデザインパターン

(原文) The Best React Design Patterns You Should Know About

Reactの絶大な人気と実用性を否定することはできません。急速に変化するテクノロジーの世界では、すべての新しいフレームワークやツールに追いつくことは困難な作業です。

Reactはその使いやすさで、開発者にとって切望されていた安堵のため息をもたらしました。再利用可能なコンポーネント、優れた開発者ツール、広範なエコシステムは、Reactの最も愛されている機能のいくつかです。

DOM(Document Object Model)を直接操作するという伝統的なアプローチの代わりに、Reactは仮想DOMの概念という形で有用な抽象化レベルを導入しました。

React ライブラリは、テック大手 Facebook のエンジニア軍団によって積極的に開発・保守されています。これは、他のフレームワークやライブラリよりもずっと必要とされている優位性を提供しています。

また、JavaScriptコミュニティの数え切れないほどの貢献者が定期的にReactの改良と改善に貢献しています。

これらすべての要因により、新しいフレームワークが絶えず登場し、フロントエンド開発者の間で認知度を競い合っているにもかかわらず、Reactは開発者の間でその人気を維持しています。

フレームワーク、ライブラリ、プログラミング言語の成功は、その機能とコミュニティの活発さによります。

しかし、これら2つの要因とは別に、見落とされがちでありながら、プログラミング言語やフレームワークの実用の側面で最も大事なのは、デザインパターンの活用です。Reactはこれを可能としてます。

この記事では、Reactのデザインパターンの中でも特に知っておくべきものをいくつか紹介します。

デザインパターンの重要性

まず、デザインパターンが果たす役割を簡単に復習しておきましょう。簡単に言えば、デザインパターンとは、ソフトウェア開発でよくある問題を繰り返し解決するものです。

デザインパターンは、与えられた要件に従ってプログラムの機能を構築するための基本的なテンプレートとして機能します。

「デザインパターン」という用語は、「デザインシステム」と混同してはいけません。デザインシステムについては、別の記事で詳しく説明しています。

デザインパターンは開発プロセスをスピードアップするだけでなく、コードを読みやすくし、メンテしやすくします。

デザインパターンの一般的な例としては、シングルトン(Singleton)パターンやギャング・オブ・フォー(Gang-of-Four、GoF)パターンなどがあります。

ソフトウェア開発において、デザインパターンは2つの共通の役割に関連付けられています。

開発者に共通のプラットフォームを提供する：　デザインパターンは、既知の問題に対する標準的な用語や解決策を提供します。上で述べシングルトンパターンを例にしてみましょう。このパターンは、単一のオブジェクトの使用を前提としています。このパターンを実装した開発者は、特定のプログラムがシングルトンパターンに従っていることを他の開発者に簡単に伝えることができ、その開発者はその意味を容易く理解するでしょう。

ベストプラクティスを確保する：　デザインパターンは、広範な研究とテストの結果として作成されています。デザインパターンは、開発者が開発環境に容易に慣れることを可能にするだけでなく、ベストプラクティスが守られていることを保証します。その結果、エラーが減り、適切なデザインパターンが実装されていれば簡単に回避できたであろう問題をデバッグや発見する際の時間を節約することができます。他の優れたプログラミングライブラリと同様に、React はデザインパターンを多用して開発者に強力なツールを提供しています。Reactの哲学に適切に従うことで、開発者は素晴らしいアプリを作ることができます。

デザインパターンの理解ができたところで、次はデザインパターンのいくつかを見ていきましょう。次に、React.jsで利用できる最も広く使われているデザインパターンのいくつかに移りましょう。

デザインパターンを効果的に再利用する方法については、「偉大なアーティストは再利用する(Great Artists Reuse)
」という記事をチェックしてください。

Reactjsの機能

Githubで公開されているcreate-react-appを使って、 reactをインストールすることができます。npmを使って、他の依存関係をすべて追加することができます。

React.jsはJSXを利用しています。これはJavaScriptの構文拡張です。これはJavaScriptのフルパワーを備えており、Reactの「要素(Elements)」と呼ばれるものを提供してくれます。

JSX を使うのは必須ではありませんが、便利なビジュアルエイド(Visual aid)とスタイルオプションを提供してくれるため、好まれる方法です。また、有用なエラーメッセージやアラートも提供してくれます。

React.jsが従う中核的な哲学は、再利用可能な react コンポーネントの考え方です。このコンポーネントベースのアプローチは、ウェブアプリケーションのためのリッチなユーザーインターフェイスを構築するために活用できることに気づくでしょう。

これらのReactコンポーネントは、それ自体が小さなシステムと考えることができます。各コンポーネントは、出力だけでなく、独自のステート(State)、入力を持っています。

コンポーネントの入力はpropsの形で取られます。コンポーネントはブラックボックスと考えることができます。それぞれが独自のステートとライフサイクルを持ちます。コンポーネントは簡単に構成できます。

最終的なReactアプリは、非常にメンテしやすいコードで構成されます。

Reactのデザインパターン

React.jsには数多くのデザインパターンがあります。ここでは、おすすめのパターンをいくつか挙げてみます。

ステートレスコンポーネント

ステートレス関数の概念を理解するために、まずステートとは何を意味するのかを見てみましょう。

ステートとは、コンポーネントにインポートされるデータのことです。通常、データはデータベースから取得されます。

コンポーネントには、ステートフル・コンポーネントとステートレス・コンポーネントの2つのタイプがあります。両者の違いは、単にステートの有無だけです。

ステートレス・コンポーネントでは、その内部でthis.stateに到達することはできません。

ステートレス・コンポーネントは、機能コンポーネントまたはプレゼンテーション・コンポーネントとも呼ばれます。Reactでは、このようなコンポーネントは常に同じものをレンダリングするか、propsを介して渡されたものだけをレンダリングします。

開発者としての目標は、たとえその特定のコンポーネントを再利用しなければならないようなシナリオがすぐになくても、ステートがないコンポーネントを作ることです。

ほとんどの場合、開発者はコードを書き始めてからコンポーネントがステートを持つ必要があるかどうかを判断します。

コンポーネントの階層構造では、親コンポーネントはできるだけ多くのステートを保持し、子コンポーネントはステートレスにするのが最善の方法です。データはpropsを介して渡すことができます。

条件付きレンダリング

条件は、あらゆるソフトウェア開発者の武器の中で最も重要なツールです。

React コンポーネントを書く過程で、状態に基づいて特定の JSX コードをレンダリングする必要性がしばしば発生します。これは条件付きレンダリングによって実現されます。

条件付きレンダリングは、ニーズに応じて異なるコンポーネントを作成し、アプリが必要とするものだけをレンダリングすることができるので、非常に便利です。

例えば、条件付きレンダリングを使用して、ユーザーのログイン状態に基づいてユーザーに異なるメッセージを表示することができます。メッセージは、propsの isLoggedIn の値に従います。

Render Props

よくある問題を解決するためにデザインパターンがどのように存在するのかを議論しました。RenderPropsは、ロジックの繰り返しの問題を解決するためにReactで利用できます。

Reactの公式ドキュメントによると、Render Propsは「値が関数であるpropを使ってReactコンポーネント間でコードを共有するためのテクニック」と定義されています。

Render propsは、異なるコンポーネント間で同じステートを共有できるので、本当に便利です。各コンポーネント内部のロジックをハードコーディングする代わりに、何をレンダリングするかを決定するために関数propを使うことができます。

Render Propsを利用している人気のあるライブラリには、Formik、React Router、Downshift などがあります。

制御されたコンポーネント

ウェブフォームは多くのアプリケーションで共通の要件であり、コントロールされたコンポーネントはフォームのステートを処理するためのReactの答えです。

コントロールされたコンポーネントは、propsを介してフォームのステートを受け取ります。onChange のようなコールバックによって変更を通知することができます。

親コンポーネントはコールバックを処理してそれ自身の状態を管理することでコントロールすることができ、一方で新しい値はpropsとしてコントロールされたコンポーネントに渡されます。

デフォルトでは、React フォームはコントロールされたコンポーネントとコントロールされていないコンポーネントの両方をサポートしています。制御されたコンポーネントを使用することを強くお勧めします。

次のコードスニペットは、コントロールされたコンポーネントを示しています。

<input type = "text" value = {value} onChange = {handleChange} />

Reactフック

フックは react に比較的新しく追加されたもので、React 16.8 で導入されました。

これらの関数を使うことで、開発者はクラスを使わずにReactを使うことができます。Effect Hook ( useEffect ) や State Hook のように、あらかじめビルドされたフックが多数用意されています。

利用可能なフックの完全なリストは、Hooks API リファレンスを参照してください。

React のプリビルトのフックとは別に、独自のフックを作成することもできます。これにより、コンポーネントロジックを抽出して再利用可能な関数を作成することができます。

フックはReactに追加された歓迎すべきものであり、開発者コミュニティはこの新しい追加を非常に熱心に評価しています。

しかし、引数がオブジェクト、配列、関数である場合、フックの操作が少し厄介になることがあることを覚えておかなければなりません。これはやや混乱を招く可能性があります。

一方で、カスタムフックは使いやすくシンプルで、開発者にとっても大きなメリットがあります。

結論

Reactは非常に人気のあるライブラリであることが証明されています。このコミュニティは、オンラインで最も急速に成長している開発者コミュニティの一つです。

また、React.jsの学習や適応を容易にしてくれる便利なWeb開発リソースがたくさんオンラインで利用できます。

Reactのパワーは、その驚くべき機能と、それが提供する堅牢なアーキテクチャによるものです。Reactの最も顕著で広く愛されている機能の一つは、そのデザインパターンです。

デザインパターンは実際、このライブラリに並外れた実用性と有用性を与えています。デザインパターンはコードの最適化とメンテナンスを容易にします。

これにより、開発者は柔軟性があり、より良いパフォーマンスを提供し、メンテナンスが容易なコードベースを生成するアプリを作成することができます。

ここまで、ステートレス関数、Reder props、制御されたコンポーネント、条件付きレンダリング、Reactフックなど、いくつかの一般的なReactのデザインパターンについて説明してきました。

しかし、Reactのデザインパターンはこれらのパターンだけに限定されるものではなく、実装できるデザインパターンはいくつかあることに注意しなければなりません。

一般的なデザインパターンの使い方に慣れてしまえば、他のデザインパターンを体得するのも容易になるでしょう。

Reactアプリ開発の真髄を掴むには、適切なツールを使用することでより簡単になります。UXPinでは、まさにそれを提供します。業界のベストプラクティスとデザイン原則を深く理解した上で、デザインプロセス全体をシンプルにするツールを提供します。インスピレーションを得るために最新のブログをチェックしてみてください。

UXPinは、世界中の製品開発チームがアイデアをより早く製品に変えるのに役立つデザインプロセスツールです。

UXPinの革新的なテクノロジーであるMergeを活用することでPayPalなどの企業はDesignOpsの課題を簡単に解決するができました。 UXPin Mergeは、Reactコンポーネントを利用することで、最終完成品と完全な一貫性を持つデザインを実現します。

　 Tweet
Qiitaで続きを読む

投稿日：2021-01-21T21:45:31+09:00

[react]reactプロジェクトを作成、コンポーネント呼び出し

Reactを学びたい

React開発の初期構築手順、コンポーネント呼び出しの仕方の学習を記録します。自宅で学習したことの個人用メモ程度ですが、参考になる方がいらっしゃれば嬉しいです。環境はMacです。

作成しましょう

nodeはインストール済みです。
コマンドは以下の通り。
プロジェクト作成
npx create-react-app my-app
※ちなみに一度以下エラーになったんですが、大文字のアプリケーション名は使用できないようですね。なんでだろう・・・

name can no longer contain capital letters

とりあえず作成できました。サーバを動かすとローカル起動ができて画面が見られます。
サーバ起動
npm start
いろいろいじってみる

標準のApp.jsを以下のように変えてみました。
App.js
import React from 'react';
import { BrowserRouter, Route, Link } from 'react-router-dom';

import PageOne from './pages/Pageone';

const PageTwo = () => {
  return (
    <div>
      PageTwo
      <Link to="/">
        <button>
          show PageOne when you click this!!
        </button>
      </Link>
    </div>
  );
};

const App = () => {
  return (
    <div>
      <BrowserRouter>
        <div>
          <Route path="/" exact component={PageOne} />
          <Route path="/pagetwo"  component={PageTwo} />
        </div>
      </BrowserRouter>
    </div>
  );
};

export default App;
ここではrouterとコンポーネントの呼び出しを書いてみてます。
参考にさせていただいたページ→React Routerでのページ遷移を簡単に説明

あとせっかくなのでコンポーネントを分割してみました。
PageOneというコンポーネント（ページ？）をpagesというフォルダに別出ししています。

中身はこんな感じ。
PageOne.js
import React from 'react';
import { Link } from 'react-router-dom';

import Aisatsu from '../components/Aisatsu';

const PageOne = () => {

    return (
      <div>
        <Aisatsu greet="こんにちは！" />
        PageOne
        <Link to="/pagetwo">
          <button>
            show PageTwo when you click this!!
          </button>
        </Link>
      </div>
    );  
  }


  export default PageOne;
export defaultというのが、コンポーネントを呼び出すためには必要らしいです。
また、Aisatsuというコンポーネントを呼んでいます。
Aisatsuはこちら。
Aisatsu.js
import React, { Component } from 'react';

class Aisatsu extends React.Component {
    render() {
      return (
        <h1>{this.props.greet}</h1>
      );
    }
  }

export default Aisatsu;
propsの使い方などもなんとなくわかりました。

ちなみに画面はこんな感じ。

とりあえずは勉強あるのみということで・・・。
引き続き作っていきます。

　 Tweet
Qiitaで続きを読む

投稿日：2021-01-21T18:41:41+09:00

[React] Reactの学習をします（2-1）レビューサイトを作ろう

Reactの学習をします（2-1）

引き続き、Reactの学習をしています。

教材

Reactチュートリアル2：レビューサイトを作ろう

引き続き、likr さんが公開している「Reactチュートリアル2：レビューサイトを作ろう」という記事を教材に学習させて頂きます。

素晴らしい教材をありがとうございます。

成果物

このチュートリアル2につきましては、チュートリアルの通りに作成し既にNetlifyに公開させて頂いております。（素晴らしいチュートリアルをありがとうございます！！）

こちらです　→　日大文理ラーメンレビュー

学習日記

既に作成済ですが、私にはまだまだ内容が難しかったです。

少しずつ、チュートリアルの内容を読み返してみたいと思います。

※ 教材から箇条書き的に抜粋させて頂きます。

Web サービスの計画

このWebアプリでは、３つのGETと１つのPOSTが必要です。

メソッドパス

GET /restaurants

GET /restaurants/:restaurantId

GET /restaurants/:restaurantId/reviews

POST /restaurants/:restaurantId/reviews

・REST API において、これらの機能ごとの URI をエンドポイントと呼びます。

そして、実際に開発を進めていきます。（あらかじめいくつかのファイルを含んだリポジトリを用意して下さっています。）

・作業用ディレクトリの名前を review-app とします。

mkdirコマンドで、ディレクトリを作成しました。

（つづく）

メソッド	パス
GET	/restaurants
GET	/restaurants/:restaurantId
GET	/restaurants/:restaurantId/reviews
POST	/restaurants/:restaurantId/reviews

　 Tweet
Qiitaで続きを読む

投稿日：2021-01-21T18:05:16+09:00

create-react-app(CRA)でcssやめてscssを使う方法

Reactのプロジェクトを作成
npx create-react-app myapp --template typescript
Sassのビルドツールをインストール
npm i -D node-sass@4.14.1
node-sassのバージョン指定の理由は最新版の5.0.0をインストールすると下記のようなエラーが発生するからです
error Generating development JavaScript bundle failed 
Node Sass version 5.0.0 is incompatible with ^4.0.0.
cssファイルをscssファイルにリネーム

index.cssとApp.cssを.scssに変更
index.tsxとApp.tsxのcssをimportしている箇所をscssに変更

アプリを実行
npm start
ブラウザデフォルトのcssをリセットしたい

index.sccの最初に下記を追記すればOK(公式)
@import-normalize; /* bring in normalize.css styles */

　 Tweet
Qiitaで続きを読む

投稿日：2021-01-21T17:14:59+09:00

React Bootstrapで右に出る余白なんやねん

ご無沙汰してます、おおのんです。
今日はBootstrapに関すること。（あんまりReact関係ない）

右に余白がいてはる

とある日、Bootstrapを使って画面を作っていました。
レスポンシブ対応でスマホ画面サイズで見てみると、右に余白が！！！

どこが悪さしてるのか見てみると・・・

ここだった。

本来指定した領域をはみ出して表示しちゃってますので、overflow: hiddenしてみる。
index.js
..省略..
  return (
    <div className="overflow-hidden">
      <Carousel />
      <Row className="justify-content-center" md={10}>
..省略..
すると・・・！

余白を消し去ることに成功しました。

　 Tweet
Qiitaで続きを読む

投稿日：2021-01-21T12:39:49+09:00

【React初心者】Warning 「 Each child in an array or iterator should have a unique "key" の対処方法

はじめに

yosukeです！
先日、私が所属するevoluの自社サービスとしてリリースした「小説執筆アプリ - Mono - 」のUIを急遽Reactで作り直しちゃおうとなり、０からReactを学びながら実装に励んでおります！

状況

小説のタイトルのeditページ更新処理を行う関数コンポーネント内でmapを使いform内で更新対象のカラムをループ描画させた

結果

問題なく動作はするがデベロッパーツールのコンソールに表題のエラーが表示される

結論

「配列に、一意の「キー」が必要です」とのことなので、ループ処理領域のFormタグにkeyを渡して解消
edit.tsx
  return (  
            //省略

  {plots.map((value) =>
          <Form key={(value.id)}>

            //省略

     )}
こんな感じでkey属性に一意の値を渡してあげれば解消します。
詳しくはこちら
https://facebook.github.io/react/docs/lists-and-keys.html
これを読むと、listで書かれてますがFormも同じで、返されるDOMはidを持つことで不要なレンダリングを避けたりできるとのこと。
「ユニークなidをkeyに渡すことでパフォーマンス低下対策をしている」という感じですかね。

参考doc：https://facebook.github.io/react/docs/lists-and-keys.html

　 Tweet
Qiitaで続きを読む

投稿日：2021-01-21T12:34:38+09:00

【フロントエンド開発】初投稿

初めに

フロントエンドでチーム開発をしています。
チーム開発でのあれこれや、プロジェクトで使用している技術関連の話題を投稿していきます。

使用している技術関連

React

javascript/CSS/HTML

typescript

Electron

ASP

Git

AWS

GraphQL

Node.js

ReactNative/expo

目的

開発中に躓き調査した内容や、新しい技術を取り入れた場合に苦労したことなどを
個人のナレッジにとどめず共有していくことを目的としています。

　 Tweet
Qiitaで続きを読む

投稿日：2021-01-21T11:52:30+09:00

React チュートリアルを esbuild でビルドしてみよう

はじめに

爆速だと評判の esbuild を利用して react チュートリアルのコードをビルドしてみます。

参考にさせていただきました（ネタ元）

esbuildがwebpackより187倍早いらしいので環境構築しよう

esbuild の機能が足りないならプラグインを自作すればいいじゃない

前提

Node.js と Bash（もしくはなんらかの UNIX シェル）はインストール済みのものとします。

準備

プロジェクトフォルダの作成
bash
$ mkdir qiita
$ cd qiita

$ npm init -y
React チュートリアル (Tic Tac Toe) のソースを取ってくる

プロジェクトフォルダ直下に src フォルダを作成し、このフォルダ内にここの JavaScript と CSS のコードをそれぞれ index.jsx、index.css という名前で配置します。
bash
$ mkdir src
  // ---
$ ls src/
index.css  index.jsx
必要となるパッケージを追加します（react 関連）。
bash
$ npm install react react-dom
index.jsx の先頭につぎの3行を加えます。
src/index.jsx
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
esbuild の出力先として public というフォルダを作成し、以下のような index.html を配置します。
bash
$ mkdir public
public/index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>TicTacToe</title>

    
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    
    <div id="root"></div>

    
    <script src="index.js" type="module"></script>
  </body>
</html>
ここまでのファイル構成：
% tree -a -I 'node_modules'
.
├── package-lock.json
├── package.json
├── public
│   └── index.html
└── src
    ├── index.css
    └── index.jsx

2 directories, 5 files
esbuild を使ってビルド

esbuild のインストール
bash
$ npm install --save-dev esbuild
設定ファイル build.js の作成

オプションの説明はこちら。webpack でも普段利用するようなオプションが一通り用意されています。
build.js
const { build } = require("esbuild");

build({
  define: { "process.env.NODE_ENV": process.env.NODE_ENV },
  entryPoints: ["src/index.jsx"],
  outdir: "public",
  bundle: true,
  minify: true,
  target: "es2015",
  platform: "browser",
}).catch((err) => console.log("Error: " + err));
ビルド実行
bash
# Windows の場合
% export NODE_ENV=\"production\"
% node ./build.js

# macOS, Linux の場合
% NODE_ENV=\"production\" node ./build.js
注：（ダブルクォーテーションをエスケープ (\) しないと warning: "process.env.NODE_ENV" is defined as an identifier instead of a string (surround "production" with double quotes to get a string) という警告が表示されます）

public フォルダ以下へバンドルされた JS ファイルと minify された CSS ファイルが出力されているのが確認できると思います。
bash
  % tree -a -I 'node_modules'
  .
  ├── build.js
  ├── package-lock.json
  ├── package.json
  ├── public
+ │   ├── index.css
- │   └── index.html
+ │   ├── index.html
+ │   └── index.js
  └── src
      ├── index.css
      └── index.jsx

  2 directories, 8 files
ちなみにビルドに要したタイムは、0.11 秒でした。
% time NODE_ENV=\"production\" node ./build.js
NODE_ENV=\"production\" node ./build.js
0.11s user 0.03s system 116% cpu 0.119 total
同じことを webpack (babel-loader + mini-css-extract-plugin + css-loader) の production モードで試すと 2.92 秒かかります。噂通りの爆速ですね。
bash
% time ./node_modules/.bin/webpack

// ログは省略

webpack 5.16.0 compiled successfully in 1450 ms
./node_modules/.bin/webpack
2.92s user 0.12s system 174% cpu 1.741 total
ローカルサーバでサーブしてみる

ローカルサーバは express でさっくり立ち上げます。
express の設定方法については本稿の主題ではないので省略します。

参考記事： Node.jsとExpressでローカルサーバーを構築する(2) ―Expressでルーティング―

express のインストールと設定ファイルの作成
bash
% npm install --save-dev express
server.js
const path = require("path");
const express = require("express");

const app = express();

app.listen(8080, () => {
  console.log("Running at Port 8080...");
});

app.use(express.static(path.join(__dirname, "public")));

app.use((_req, res) => {
  res.sendStatus(404);
});
ローカルサーバ起動
bash
% node ./server.js 
Running at Port 8080...
localhost:8080 へアクセスすると Tic Tac Toe （３目並べ）ゲームが機能していることが分かると思います。

（おまけ） TypeScript + Sass も試してみる

tic-tac-toe を Hooks 化＆ TypeScript 化＆ Sass 化したものもビルドしてみます。
このリファクタリング自体は本稿の主題ではないので省略します。興味がある方はこちらのコードでご確認ください。

本編で見て来た通り、esbuild は CSS の minify には対応しているものの、Sass などの PostCSS には未対応です。
いまのところは、sass のために plugin（実験的機能）を自作する必要があります。

追加パッケージをインストール

TypeScript 関連
% npm i -D typescript ts-node @types/node
tsconfig.json
{
  "compilerOptions": {
    "target": "ES2015",
    "module": "ES2015",
    "moduleResolution": "Node",
    "esModuleInterop": true,
    "lib": ["DOM", "ES2015"],
    "strict": true,
    "jsx": "react"
  },
  "ts-node": {
    "compilerOptions": {
      "target": "ES2015",
      "module": "CommonJS"
    }
  }
}
Sass 関連
bash
% npm i -D sass @types/sass
不足している型定義ファイル
bash
% npm i -D @types/react @types/react-dom @types/express
プラグインの作成
esbuild-plugin-sass.ts
import { Plugin } from "esbuild";
import { render, Options } from "sass";

export const sassPlugin = (options?: Options): Plugin => ({
  name: "esbuild-plugin-sass",
  setup(build) {
    build.onLoad({ filter: /\.s?css$/ }, ({ path }) => {
      return new Promise((resolve) => {
        render({ ...options, file: path }, (err, result) => {
          resolve({
            contents: result?.css,
            loader: "css",
            errors: err ? [{ text: err.message }] : undefined,
          });
        });
      });
    });
  },
});
ビルドスクリプトの改編
build.ts
+ import { build } from "esbuild";
+ import { sassPlugin } from "./esbuild-plugin-sass";

  build({
+   define: { "process.env.NODE_ENV": process.env.NODE_ENV as string },
+   entryPoints: ["src/index.tsx"],
    outdir: "public",
    bundle: true,
    minify: true,
    target: "es2015",
    platform: "browser",
+   plugins: [sassPlugin()],
　});
npm スクリプト（参考）
bash
% npm i -D npm-run-all
package.json
{
  "scripts": {
    "start": "run-s build serve",
    "build": "NODE_ENV=\\\"production\\\" ts-node ./build.ts",
    "serve": "ts-node ./server.ts"
  }
}

　 Tweet
Qiitaで続きを読む

投稿日：2021-01-21T01:01:33+09:00

React開発環境構築〜今からソースを書くための事前準備(TypeScript, ESLint, Prettier)

CRAで簡単にボイラープレートを作れるが、
気の利いた設定を＋αする。

Create React App

まずはCRAでTypeScriptの雛形を作成します。
npx create-react-app my-app --template typescript

(2021/01/19現在)eslintcacheが毎度生成されるので、.gitignoreに追記しておく。

最初からTypeScriptのエラーがでた。VSCodeをUPDATEしたら直った。.tsファイル開いて、右下のTypeScirptバージョンクリックして、VSCodeのでなく、WorkSpaceのTypeScriptを選択した方がよいかも。

Absolute imports

絶対パスでimportしたいので、tsconfig.jsonに"baseUrl": "src"を追記。

tsconfig.json
{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}
Linter、Formatter設定

CRAデフォルトのルール

CRAでは良い感じにルール設定されている。yarn.lockを見てみると、ESLint系がずらり。
React固有のルールも設定されている。
react-scriptsのdependencies
    "@typescript-eslint/eslint-plugin" "^4.5.0"
    "@typescript-eslint/parser" "^4.5.0"
    eslint "^7.11.0"
    eslint-config-react-app "^6.0.0"
    eslint-plugin-flowtype "^5.2.0"
    eslint-plugin-import "^2.22.1"
    eslint-plugin-jest "^24.1.0"
    eslint-plugin-jsx-a11y "^6.3.1"
    eslint-plugin-react "^7.21.5"
    eslint-plugin-react-hooks "^4.2.0"
    eslint-plugin-testing-library "^3.9.2"
    eslint-webpack-plugin "^2.1.0"
package.json

最初からLint設定されている。
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ],
VSCode ESLint拡張機能

VSCodeにESLint拡張機能をを入れる。
https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
.tsxファイルを開くと右下に「ESLint」と出る。これにチェックついてればOK。
そうでなければクリックして許可。
エディタ上ででチェックされる。

保存時に自動でfixするように、VSCodeのsettings.jsonに追記しておく。
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }
ルールのカスタマイズ

デフォルトでは、フォーマットに関するルールは、足りないからカスタマイズする。
この辺がほしいところ。

シングルクオート/ダブルクオート

インデント

行末セミコロン有無 ...etc

Linterルールを追記するパターン(微妙なので飛ばして良し)

package.json
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ],
    "rules": {
      "quotes": [
        "error",
        "single"
      ],
      "semi": [
        "error",
        "always"
      ],
      "indent": [
        "error",
        2
      ],
      "max-len": [
        "error",
        {
          "code": 80
        }
      ],
      "linebreak-style": [
        "error",
        "unix"
      ]
    }
  },
クオーテーションとかコロンとかは、保存時に勝手に修正が入るようになったが、
最大行数はフォーマットされない。
あとJSXのタグのフォーマットも、ゆるい。'<header' で改行されてほしい。

この辺りがESLintの限界か？

PrettierとESLint共存パターン（おすすめ）

Prettierはフォマッターに特化している。
ファイル読み込んで出力し直すらしい。
だからフォーマットがガチガチ。

ただし、CRAのESLint設定は生かしたいので、共存させる。
prettier公式によると、LinterのStyleルールは競合するから、
コードの品質にはLinter, コードのフォーマットにはPrettierを使えとのこと。
https://prettier.io/docs/en/integrating-with-linters.html#disable-formatting-rules

で、競合するLintのStyleルールをOffにするコンフィグがあるよと。
そこに書いてあるeslint-config-prettierを使う。
どんなルールが対象かは、index.jsに書いてある。
https://github.com/prettier/eslint-config-prettier#installation

パッケージ追加
yarn add -D eslint-config-prettier

pluginに対応する除外設定追加
@typescript-eslint/eslint-pluginと
eslint-plugin-reactもdependenciesに合ったので追記して置く。
package.json
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest",
      "prettier",
      "prettier/@typescript-eslint",
      "prettier/react"
    ],
VSCode拡張機能「Prettier - Code formatter」のインストール

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

デフォルトフォーマッタを設定
settings.json
{
 "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}
保存するとフォーマットされる。
自動で改行するし、タグはカチッとフォーマットされて一行に続いたりしないからいい感じ。
こちらがおすすめ。

カスタマイズも簡単。
package.json
  "prettier": {
    "singleQuote": true
  },
設定ファイルを切り出しても良し。
https://prettier.io/docs/en/configuration.html

　 Tweet
Qiitaで続きを読む

投稿日：2021-01-21T01:01:33+09:00

React開発環境構築〜コードを書く前の事前準備(TypeScript, ESLint, Prettier)

目的

CRAで簡単にReactアプリケーションの雛形を作れるが、ソースを書く上で行っておきたい設定を＋αする。

Create React App

まずはCRAでTypeScriptの雛形を作成する。
npx create-react-app my-app --template typescript

(2021/01/19現在)eslintcacheが毎度生成されるので、.gitignoreに追記しておく。

最初からTypeScriptのエラーがでた。VSCodeをUPDATEしたら直った。.tsファイル開いて、右下のTypeScirptバージョンクリックして、VSCodeのでなく、WorkSpaceのTypeScriptを選択した方がよいかも。

Absolute imports

絶対パスでimportしたいので、tsconfig.jsonに"baseUrl": "src"を追記。

tsconfig.json
{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}
Linter, Formatter設定

CRAデフォルトのルール

CRAでは良い感じにルール設定されている。yarn.lockを見てみると、ESLint系がずらり。
React固有のルールも設定されている。
react-scriptsのdependencies
    "@typescript-eslint/eslint-plugin" "^4.5.0"
    "@typescript-eslint/parser" "^4.5.0"
    eslint "^7.11.0"
    eslint-config-react-app "^6.0.0"
    eslint-plugin-flowtype "^5.2.0"
    eslint-plugin-import "^2.22.1"
    eslint-plugin-jest "^24.1.0"
    eslint-plugin-jsx-a11y "^6.3.1"
    eslint-plugin-react "^7.21.5"
    eslint-plugin-react-hooks "^4.2.0"
    eslint-plugin-testing-library "^3.9.2"
    eslint-webpack-plugin "^2.1.0"
package.json

最初からLint設定されている。
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ],
VSCode ESLint拡張機能

VSCodeにESLint拡張機能をを入れる。
https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
.tsxファイルを開くと右下に「ESLint」と出る。これにチェックついてればOK。
そうでなければクリックして許可。
エディタ上ででチェックされる。

保存時に自動でfixするように、VSCodeのsettings.jsonに追記しておく。
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }
ルールのカスタマイズ

デフォルトでは、フォーマットに関するルールは、足りないからカスタマイズする。
この辺がほしいところ。

シングルクオート/ダブルクオート

インデント

行末セミコロン有無 ...etc

Linterルールを追記するパターン(微妙なので飛ばして良し)

package.json
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ],
    "rules": {
      "quotes": [
        "error",
        "single"
      ],
      "semi": [
        "error",
        "always"
      ],
      "indent": [
        "error",
        2
      ],
      "max-len": [
        "error",
        {
          "code": 80
        }
      ],
      "linebreak-style": [
        "error",
        "unix"
      ]
    }
  },
クオーテーションとかコロンとかは、保存時に勝手に修正が入るようになったが、
最大行数はフォーマットされない。
あとJSXのタグのフォーマットも、ゆるい。'<header' で改行されてほしい。

この辺りがESLintの限界か？

PrettierとESLint共存パターン（おすすめ）

Prettierはフォーマッターに特化している。
ファイル読み込んで出力し直すらしい。
だからフォーマットがガチガチ。

ただし、CRAのESLint設定は生かしたいので、共存させる。
prettier公式によると、LinterのStyleルールは競合するから、
コードの品質にはLinter, コードのフォーマットにはPrettierを使えとのこと。
https://prettier.io/docs/en/integrating-with-linters.html#disable-formatting-rules

で、競合するLintのStyleルールをOffにするコンフィグがあるよと。
そこに書いてあるeslint-config-prettierを使う。
どんなルールが対象かは、index.jsに書いてある。
https://github.com/prettier/eslint-config-prettier#installation

パッケージ追加
yarn add -D eslint-config-prettier

"prettier"と
pluginに対応する除外設定を追記。
@typescript-eslint/eslint-pluginと
eslint-plugin-reactもdependenciesに合ったので追記。
package.json
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest",
      "prettier",
      "prettier/@typescript-eslint",
      "prettier/react"
    ],
VSCode拡張機能「Prettier - Code formatter」のインストール

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

デフォルトフォーマッタを設定
settings.json
{
 "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}
保存するとフォーマットされる。
自動で改行するし、タグはカチッとフォーマットされて一行に続いたりしないからいい感じ。
こちらがおすすめ。

カスタマイズも簡単。
package.json
  "prettier": {
    "singleQuote": true
  },
設定ファイルを切り出しても良し。
https://prettier.io/docs/en/configuration.html

　 Tweet
Qiitaで続きを読む

20210121のReactに関する記事は12件です。

React Developer Toolsのインストールを推されるコンソールメッセージ消してみた。

行いたいこと

やったこと

解説

補足（Laravel）

Next.jsの環境構築とメリット

参考

Next.jsで環境構築を行うメリット

Next.js環境構築

終わりに

あなたが知っておくべき最高のReactデザインパターン

デザインパターンの重要性

Reactjsの機能

Reactのデザインパターン

ステートレスコンポーネント

条件付きレンダリング

Render Props

制御されたコンポーネント

Reactフック

結論

[react]reactプロジェクトを作成、コンポーネント呼び出し

Reactを学びたい

作成しましょう

いろいろいじってみる

[React] Reactの学習をします（2-1）レビューサイトを作ろう

Reactの学習をします（2-1）

教材

成果物

学習日記

Web サービスの計画

create-react-app(CRA)でcssやめてscssを使う方法

Reactのプロジェクトを作成

Sassのビルドツールをインストール

cssファイルをscssファイルにリネーム

アプリを実行

ブラウザデフォルトのcssをリセットしたい

React Bootstrapで右に出る余白なんやねん

右に余白がいてはる

【React初心者】Warning 「 Each child in an array or iterator should have a unique "key" の対処方法

はじめに

状況

結果

結論

【フロントエンド開発】初投稿

初めに

使用している技術関連

目的

React チュートリアルを esbuild でビルドしてみよう

はじめに

参考にさせていただきました（ネタ元）

前提

準備

プロジェクトフォルダの作成

React チュートリアル (Tic Tac Toe) のソースを取ってくる

esbuild を使ってビルド

esbuild のインストール

設定ファイル build.js の作成

ビルド実行

ローカルサーバでサーブしてみる

express のインストールと設定ファイルの作成

ローカルサーバ起動

（おまけ） TypeScript + Sass も試してみる

追加パッケージをインストール

TypeScript 関連

Sass 関連

不足している型定義ファイル

プラグインの作成

ビルドスクリプトの改編

npm スクリプト（参考）

React開発環境構築〜今からソースを書くための事前準備(TypeScript, ESLint, Prettier)

Create React App

Absolute imports

Linter、Formatter設定

CRAデフォルトのルール

package.json

VSCode ESLint拡張機能

ルールのカスタマイズ

Linterルールを追記するパターン(微妙なので飛ばして良し)

package.json

設定ファイル `build.js` の作成