初心者必見！JSフレームワークの予備知識

LiSMOtechの小谷です。

React.jsやVue.jsなどのJavaScriptのフレームワークに手を出したいけど、
・学習コストが高そうで手を出せない！
・ちょっと公式ドキュメント読んだけど、コード書くとかの前に意味が分からない！
なんて思いませんか？

React.jsやVue.jsなどは、本体のコードを書く為の知識は勿論のこと必要となりますし、それとは別で環境と整える知識やデプロイする知識など様々な知識が必要となり、学習コストが高いですよね。。。
ということで、この記事ではコード書く前に必要となる予備知識を3つあげて、ざっくり見て行けたらなと思います。
 
かく言う僕も初めてReact.jsを触ったときは、そもそもエンジニアほぼ未経験(HTMLとCSSは知っていて、少しJavaScriptを触ったぐらい)で意味が分からな過ぎて、瀕死の状態でした。笑
ですが、意味が分からないなりでも動かしたり調べたりで、なんとか少しずつ分かるようになってきました。
なので、大体どんなかたでもやろうと思えばある程度はできるようになると思います！
 
そもそもJavaScriptのフレームワーク/ライブラリって何か?やどんなものがあるか?などは以下の記事も書いたので参考して頂けたらと思います。
ライブラリとフレームワーク
また、今回はReact.jsやVue.jsはフレームワークとして使用する想定で記事を書いています。
 
前置きが長くなりましたが、具体的に見ていきましょう!

node.js

まず、React.jsやVue.jsなどのJavaScriptのフレームワークの公式ドキュメントを見ても、まずnode.jsを入れようと出てくるかと思います。
 
なぜこのnode.jsをいれなくていけないのか。色々覚えることで精一杯なのによく分からないものいれるのか。など思うかもしれません。
分かります。このnode.jsや後で紹介するnpmやwebpackも学習コスト上げている要因ですよね。。。僕もいまでもちゃんとは分かっていないかもです。笑
なので、申し訳ないですが、自分の分かる範囲でJavaScriptのフレームワークを使う時にnode.jsがなぜいるかを書いていきます。

・PC(OS)でのJavaScript実行環境

ここでイメージを掴む為にJavaScriptのイメージをしてもらいたいのですが、なんとなくJavaScriptはブラウザ(chrome、safari、Edgeなど)だけ動くイメージがありませんでしたか？scriptタグやjQueryとかのイメージもありますし。
node.jsはそうではなく、PC(OS)でのJavaScriptの実行環境です。
と言われてもピンとこないですよね。。。

少し具体的に言うと、コマンドプロンプト(PCの操作をマウスなどではなくコマンド行うもの)上でnode.jsを介してjsファイルの実行やjsコードの実行をすることが出来るようになります。

フロントエンド(画面側の開発)でこんなことをしなくてはならないのか、フロントエンドの技術なんだしブラウザだけJavaScript動けばよいでしょと。
これも分かります。ですが、React.jsやVue.jsでは作業中のファイルだけでは完結しません。

作業中もコンパイルと言われるファイルをまとめる工程を踏んで変更の確認が出来たり、また必要なライブラリ(外部のファイル)を自分の作業用のフォルダにインストールしたりなどとファイルの操作をそこそこはさみます。
その時にブラウザだけで動くJavaScriptだけでは、このようなファイルの操作などできないので、そこをnode.jsさんが助けてくれます。

・Webサーバーとして

また、Webサーバー(WEB画面を開くためのHTML・CSS・JavaScriptなどのファイルを保存しておき、HTTP通信でこれらのファイルをかえしてくれるコンピューターやソフトウェア)しての役割もnode.jsは担ってくれています。
React.jsをローカルで開発するにはWebサーバー通してあげないと動かせないです。少しでも経験がある方はわかるかもしれませんが、
http://localhost:xxxxで自分のPCのブラウザでWebサーバーを見に行ってみたいなやつです。Wordpressをローカル(自分のPC上)で動かしたことのある方はイメージ付きやすいかもしれませんね。
 
なぜJavaScriptのフレームワークのローカルで作業中にWebサーバーが必要となるのかと言われると、今の僕で出せる説明では、そういう仕組みだからといったものになってしまいます。笑

ですが、少し付け足すなら、先ほど少し書いた通りReact.jsやVue.jsなどは作業中ファイルだけでは未完の状態です。
ローカルでソースコードを書いている間はこの未完のものをひとまずまとめて常にWebサーバーが提供してくれています。
これでソースコードを書いている途中でも変更箇所を確認できるようになっています。
 
なので、完成したコードを公開用のファイルに変換して出力(ビルド)した後のものでしたら、Webサーバーを通さずブラウザだけで確認することは可能です。
といっても、出力されたファイルをブラウザで直接開いても通信が出来ないので、本当に見た目だけ感じですけどね。

npm

上の説明でざっくりなぜnode.jsを入れなくはいけないかが分かったと思います。
次は、npm(node package manager)についてです。こちらもJavaScriptのフレームワークでは切り離せないところですね。
npmは基本的にはパッケージ管理システムのことですが、個人的にはnpmには二つの意味で使われている気がしてます。
 

・パッケージ管理システム

先ほど書いたようnode.jsのパッケージ管理システムでの意味が強いかと思います。
node.jsでは、色々と便利なパッケージやライブラリがあり、これら組み合わせて使用していくことが多いです。その時に使用される管理システムです。
また、node.jsは使われる様々なパッケージやライブラリのレジストリのこと指すこともあると思います。

・CLI(コマンドラインインターフェース)

もう一つはCLI(コマンドラインインターフェース)としてのnpmです。
実際にReact.jsのローカル開発環境を整えていくとなると

npm install

や

npm start

などのコマンドとしてnpmが出てきます。こういったnpmのコマンド実行して必要なパッケージをインストールしたり、ローカルの開発用のWebサーバーを立ち上げたりします。
ちなみに、node.jsをインストールと自動的にnpmはインストールされているので、まさに切り離せないですね。

webpack

最後は、webpackについてです。
webpackは構成するファイルをまとめるツールです。ここでいうファイルをJavaScriptだけでなく、cssやscssなども含まれます。
scssのコンパイルの操作などしたことあるひとはイメージしやすいかもしれませんね。

React.jsやVue.jsなどは開発であっても様々なファイルを使って作業し、これらのファイルをまとめる工程(コンパイル)が必要となります。その工程でこのwebpackがまとめてくれるわけです。
 
このコンパイルの工程は自動化されており、先ほどあげたようなコマンドいちいち打ち込んで実行する必要はありません。
webpackを使用してしているディレクトリで一度開発用のWebサーバーを立ち上げた後であれば、変更したファイルを検知してくれて自動的にコンパイルが走り、ブラウザもリロードされます。

まとめ

今回はJavaScriptのフレームワークで実際のコード書く前に必要となる技術を3点紹介しました。
今回上げたところは近年よく使われているJavaScriptのフレームワーク(React.js、Vue.js、Next.js、Nuxt.jsなど)ほぼすべてに共通して使っているものなので、身に付けておくとどのフレームワークを使用するにしても役に立つはずです！

あとは勉強を始めたばかりの人はこれを読んだだけではまだまだ理解は難しいと思います。僕が簡単にしか説明していないということもありますが。笑
なので、ご自身で実際に色々動かしたり試したりして、理解を深めていったりがよいかもですね。