create-react-appって実務で使うの?

きっかけ

Qiitaの記事にてこのようなことが書かれていました。

これはあくまで自分の考えですがcreate-react-appは初心者の入門のためのツールであり
実開発者の…ましてサービスレベルで使うものではないと思っています。

このツールが解決していることは複雑なビルド周りの設定を隠蔽して手早くReactを始められるようにすることであり、実開発における開発環境の構築を目的としているわけではありません。

脱create-react-app ~ 真面目に express × react 環境を構築する~(https://qiita.com/ohs30359-nobuhara/items/bdc06b2db1bef7af2439

この記事は2022年4月現在から4年前の記事のため、当時と現在では状況が違うと思いますが、はたして現在の create-react-app は本番環境で使えるのかについて調査しました。

結論

  • バージョン管理コストを最小化させたいなら create-react-app を使う。
  • 本番環境でのオーバーヘッドや使用容量を最小化させたいなら自前で環境構築する。
  • どっちの良い所取りをしたければ create-react-app で環境構築後に 必要 / 不必要 な dependency を install / uninstall する。

参考資料

2020年8月に DEV Community に投稿された記事「Don’t use create-react-app: How you can set up your own reactjs boilerplate.」を参考にしながら考えます。

create-react-appのデメリット

記事中では以下のように記載されていました。

Difficult to add custom build configs. One way to add custom configs is to eject the app, but then it overrides the Only one build dependency advantage. The other way is you can use packages like customize-cra or react-app-rewired but then they have limited capabilities.

追加の設定が困難です。設定を追加する1つ目の方法は、npm run eject することですが、そうすると既定の dependency が上書きされます。もう一つの方法は、customize-cra や react-app-rewired などのパッケージを使う方法ですが、この場合機能が制限されます。

Abstracts everything. It’s important to understand the things that need to run a React app. But due to it’s Only one build dependency advantage, a beginner might think that react-scripts is the only dependency needed to run react apps and might not know that transpiler(babel), bundler(webpack) are the key dependencies which are used under the hood by react-scripts. This happened to me until I read this awesome article.

create-react-app はすべてを抽象化します。Reactアプリを動かすために必要なものを理解することが重要です。しかし、Only one build dependencyという利点から、初心者はreactアプリを動かすのに必要な依存関係は react-scripts だけだと思い、transpiler(babel) や bundler(webpack) が react-scripts がフード下で使用する主要依存関係だと知らない可能性があります。

CRA is bloated – IMO. For example, CRA comes with SASS support, if you are using plain CSS or Less it’s an extra dependency that you will never use. Here is a package.json of an ejected CRA app.

私の考えでは create-react-app は肥大化しています。例えば、create-react-app は SASS をサポートしていますが、もしプレーンな CSS や Less を使っているなら、それは決して使うことのない余分な依存関係です。

Don’t use create-react-app: How you can set up your own reactjs boilerplate.(https://dev.to/nikhilkumaran/don-t-use-create-react-app-how-you-can-set-up-your-own-reactjs-boilerplate-43l0

この記事に対してのコメント欄で興味深いものを以下に抜粋します。詳細はこちらでご覧ください。

Another disadvantage is, you’re forced to use whatever dependencies CRA requires, including an older version of webpack and babel-loader. CRA is an entire version behind the current webpack version. Installing a newer version will simply break react-scripts.

もう一つの欠点は、古いバージョンのwebpackやbabel-loaderなど、CRAが必要とするあらゆる依存性を使わざるを得ないことです。CRAは、現在のwebpackのバージョンより1バージョン遅れています。新しいバージョンをインストールすると、単にreact-scriptsが壊れるだけです。

Brian Blankenship(https://dev.to/c0dezer019/comment/1f914

じゃ create-next-app はどうなんや?

Google検索してみると、「脱 create-react-app」はヒットしても「脱 create-next-app」はヒットしないので、Next.js の環境を自前で作る場合は、Googleに頼らずにやる必要があります。

Next.jsにはプラグインのエコシステムがないので、Reactプロジェクトのように dependency を追加 / 削除 する必要がないのだと思います。

おそらく Next.js は初めから Vercel にデプロイすることを想定して開発されたフレームワークなので、本番環境でも大丈夫なようにスリムな構成になっているのだと思われます。

Processing, Arduinoを使ってロボットアームを作った

ホーム » ブログ

背景

僕は電子工作の経験が一切なく、今回使うArduino、Processingも今回の工作で初めて利用、インストールするレベルの初学者です。

大学の講義で取り扱っていた3自由度のロボットアームに興味を持ち、作りたいものを探していたところ、「全自動手書きレポートマシン」に大変興味を抱き、ぜひ作りたいなと!

Continue Reading →

Seleniumで非同期処理による動的データの待機処理ができない

ホーム » ブログ

Seleniumでスクレイピングをする際にページの読み込みが完了するまで待機することがよくあります。このような処理を待機処理といいます。

取得する要素が静的に決まっていて、HTMLをパースする時点で要素の値が存在している場合は既存のメソッドで待機処理を実現することが可能ですが、非同期通信(Ajax)によって要素の値が動的に決定される場合、すなわち描画が終わった後に動的な変更によって要素の値が決まる場合は、既存のメソッドで待機処理を実現することができません。

今回の記事ではこうした課題を解決するための手法を紹介します。

Continue Reading →

文科省プログラム「enPiT」を振り返りながらニューノーマルな働き方について考える

ホーム » ブログ

今回文部科学省の教育プログラム「enPiT」に参加し、1年間アプリ開発を行なったため、振り返りをします。

記事の最後の方では、enPiTの授業形式がまさに今大手IT企業などで取り入れられているやり方に近かったので、これからの働き方のあり方やその中で市場価値を高めるためにはどうすればよいかを考えました。

enPiTとは

高度IT人材を育成する産学協働の実践教育ネットワーク

「成長分野を支える情報技術人材の育成拠点の形成(enPiT)」は、4分野における高度IT人材の育成を目指しています。大学・企業界の協力体制のもとで推進されるリアリティの高い講義や演習など、特色あるプログラムを通じて実社会においてイノベーションを起こすことができる人材を輩出します。

enPiT2 成長分野を支える情報技術人材の育成拠点の形成: https://www.enpit.jp/

授業の趣旨は、つまるところ「身の回りの課題を解決するアプリを作ってください!」ということです。

伝えたいこと

Continue Reading →