青空な日々

ITエンジニア関連で興味あることをアウトプットして共有したいブログ

Node.jsの必要性とReactチュートリアル体験記~元SIerのSEのモダンフロントエンド入門記~

はじめに

2020年4月以降の新刊執筆について(宣言駆動) - 青空な日々の記事で書きたいと言っていた本に、
SIerのSEのためのモダンフロントエンド入門(仮)」があり次のように書いていました。

ここで言いたいのはバニラJSが最善というわけではなく、SIerのSEとして業務していた頃はバニラJSで十分だったのに、 なぜいま時間をかけてまで勉強して「より複雑にしなくてはならないのか?」と思ってしまうわけです。

他にもいろいろ書いたのですが、Reactのチュートリアルを経験したら本にするほどでもない分量で納得できたので、
ブログにしておこうと思います。

で、ブログを書き始めたらタイトルの通り内容が『Node.jsの必要性とReactチュートリアル体験記』になったので、
Node.jsの必要性とReactチュートリアル体験記にタイトルを変えましたw

目次


前提:言葉の定義について

SIerのSEのフロントエンド経験値がひとつの定義に収まるとは思っていません。
JavaScript未経験のSEだって居るでしょうし、
逆にReactバリバリ書いているモダンフロントエンド最前線のSEだっているでしょう。

それでも「SIerのSEのためのモダンフロントエンド入門(仮)」というタイトルの本にしようとしたのは自分が9年間(2007年~2016年)居たSIerではバニラJSしか使用していなかったからです。
これには様々な理由があるのですが、
IEでしか開発しない、例外はありつつも単純静的な帳票みたいな画面が多かったからだと思います。

なので、ここでの「SIerのSE」はあくまで私FORTEのことを指しています。

ちなみにモダンフロントエンドの定義はAngular(AngularJS)、React、Vueとしましたが、
これも他のRiot.jsなどを無視しているわけではなくシェアのイメージで3つ選んだだけです。

チュートリアルの最初に出てくるNode.jsについて

Reactのチュートリアルを始めると最初にブラウザで続けるか、
使い慣れたエディタでやるためにローカルに環境を用意するか聞いてきます。

このローカルに環境を用意する手順の最初で躓きます。

1. 最新の Node.js がインストールされていることを確かめる。

なぜNode.js前提なのか。
個人的にはNode.jsはサーバーサイドのイメージが強く、
フロントとバックで同じ言語で書ける!みたいなメリットが推されていた記憶があります。

しかし、いまのモダンフロントエンドは必ずと行っていいほどNode.js環境が前提となっています。
Unlearnして「そういうものだ」で済ませても良いのですが、
喉に刺さった小骨のようにしっくりこないので調べてみました。


なぜNode.js前提なのか。

ググってみると次のようなteratailがヒットします。

teratail.com

ここにはいろいろと理由が書かれていますが、SE時代の経験で納得できたものは一つもありませんでした。
例えばHTMLを書く辛さよりも仕様がひっくり返る辛さのほうが危急の課題でしたし、
HTMLを書く速度が上がったところで予算が達成できる見込みが上がるわけでもなかったからです。

他の理由もSIer時代は環境起因や知識不足などで問題になったことはありませんでした。

余談ですが転職した2社目の会社ではJQueryを使うようになったので、
次のようなことは課題だと感じ今ならNode.jsに魅力を感じます。
JSの順番、結合、便利なライブラリ、圧縮、依存関係管理、バージョンアップ…。

2社目の会社ではJSの順番、結合は独自開発のツールで行っており、
その保守も大変そうだったので今思えばNode.jsの方が楽だったろうにと思います。

これらを元になぜNode.jsが必要なのかを考えてみます。


Node.jsが必要な理由

なぜNode.jsが必要になったかは様々理由が出てきました。

HTMLやCSSを書きやすくしたい、
便利なライブラリを使いたい、
使うときも1個ずつ順番を気にして読みむのではなく簡単にポンと読み込んで欲しい、
依存関係確認もバージョン確認も面倒だから指定したバージョンか最新できちんと動いて欲しい…。

では、なぜそれらの理由が出てきたのでしょうか。

それはフロントエンドにこれらの作業が必要なくらい要求事項が複雑化している、ということだと思います。
またフロントエンドに限らずシステム開発業界全体的に速度が求められています。

この高速化、要求の複雑化に耐えうる環境を作るためにはバニラJSでは到底なし得なかったのです。

確かにただ帳票を表示すれば良いのならバニラJSでも十分かもしれません。
それも半年に一度、数枚の帳票を表示する程度の開発なら。

しかし、現状では1週間に複数リリースは当たり前になっており、
アジャイルの台頭によって仮説を基に作って改善していくスタイルが当たり前になっています。

また、モダンなサイトのような動きや複雑なデータ構造、非同期処理を楽に表現するにはバニラJSでは不十分です。

そのため、昨今の開発としてはNode.jsが必要となっていると思えました。
それをReactチュートリアルを通して体感したのて次はその話をします。

Reactチュートリアルを通して体感したNode.jsの必要性

Node.jsが必要になった理由は分かりました。
しかし、昨今は複雑になったと言っても体感しないとわかりません。
その「体感」が目の前にありました。

Reactチュートリアル

このReactチュートリアルは『三目並べゲーム*1』の開発を通してReactの基本を学ぶチュートリアルになっています。
この三目並べゲームをバニラJSで作ったらどうなるか?

考えただけで面倒…と出てきます。
いろんな状態を管理する必要があるためかなり複雑になるでしょう。

それがReactであれば初心者が最初に行うチュートリアルになってしまうのです。
これがまずひとつの納得どころでした。

開発環境で気づくNode.jsの必要性

Node.jsで開発をすることには納得したので、使い慣れたVS Codeチュートリアルを進めるために開発環境を整えます。
手順としてはNode.jsが入っていれば次のコマンド一発です。

npx create-react-app my-app

もし、これを手動でやったらどうなるか?
想像するために上記のコマンド実行後にpackage.jsonの一部を見てみましょう。

  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.3"
  },

dependencies、つまり依存関係を6個も入れています。
しかもそれぞれバージョンも管理してくれているようです。

他の記述からも様々なことをしてくれているのが伺えます。

これだけのことをコマンドひとつで出来る便利さがNodeのよいところなわけです。
これがReactのチュートリアルを体験してみて得られたNode.jsが必要という納得ポイント2個目でした。

結論:昨今の開発からしてNode.js必須、実感したくばReactチュートリアル!

ここまでの流れで私は「あーNode.js必須だわ」と納得し実感もできました。
納得できない方はReactチュートリアルやった上で、
三目並べゲームをバニラJSで書いてみると良いと思います。

私はまずHTMLを書かなければならないことに面倒さを覚えて止めましたw

余談:Reactチュートリアルの注意点

チュートリアルそのものに問題はなかったのですが、
squareとsquaresが頻繁に出てきて非常に紛らわしいです。

これを間違えると間違えた箇所ではなく、その先でエラーになったりします。
そのため、ミスした箇所の特定が非常に面倒になるため、
写経する際はミスしないようにヨシッと確認しながら進めましょう。

最後に

というわけで書こうと思った本がブログでいいやになった話でしたが、
途中で別の話になったブログでしたw

当初の目的は達成できたので良し。

この記事が公開されたときはまだ技術書典の会期中なので、気になった本があれば是非お願いします。
Reactの本ないけどw

techbookfest.org

*1:私の地元では○☓ゲームと言っていたな…