WEBアプリ開発(Reactの勉強)

アプリ開発にやや興味がある。
というより、社内でアプリ開発の案件も受けよう。みたいな話になってるので勉強しないといけない。

いろいろ調べてみたけど、情報がバラバラでどこから始めていいのかわからなかった。
ので、アプリ開発の基本フローを整理してみる。これを見返せば、自分が作りたいアプリを形にするための流れがざっくりわかるはず。きっと。

Webアプリ制作にあたっての選択肢

まず、Webアプリ制作にあたっての選択肢を並べてみよう。

  • HTML/CSS + PHP 
  • HTML/CSS + PHP系サーバー + JavaScript
  •  サーバー自体をFlaskで立て、Pythonで運用する
  • サーバー自体をNode.jsで立て、JavaScriptで運用する
  • 何もわからんからCMS

今回の目的

こんなところだろうか。正直、WEBサイトとかECばっか作ってたから「 5.何もわからんからCMS 」という方法が一番簡単そうだし、社内リソース的にWEBアプリ開発のスタートアップには良いと思う。

ただ、調べてみると開発をReactでやってる方がネット上にはちらほらいらっしゃる。
名前は聞いたことあったし、VSCodeの拡張機能でもよく見かけた。
ただ、個人的に使ったことはなかったのでよく調べてみた。

React.jsとは?

どうやら、React.jsとは、誤解を恐れずに書くと「JavaScriptの中でHTML/CSSを全部処理できるすごいやつ」らしい。

JavaScriptのライブラリのひとつで、「JSX形式」でJavaScriptとHTML/CSSをまとめて記述することができるファイル形式を用いて記述する(めっちゃ便利やん)
Node.jsというJavaScriptベースのサーバーで動くWebアプリ(特にワンページアプリ)を作る際の主要ライブラリであるそうだ。

なぜReact.jsなのか

React.jsを選んだ理由。それはHTMLで書けるからだ。
Swiftも選択肢に挙げてはいたが、HTML/CSSと画面表示のコーディング方法が違い、Swiftのフレームワークを使うと時間がかかりそうなので今回はReactを採用する

新たなフレームワークを学んで使いこなせるようになるにはかなり労力がかかる。その点、React.js(正確にはライブラリ)はHTMLがベースになっているのでそのままシームレスに移動できる。その点、FLaskやSwift、D-jangoより優っていると思う。

簡単な開発環境準備

React.jsを利用することで、アプリのファイルを簡単に構成することができる。
アプリを構成するときはディレクトリの構成を手動で立てなければいけない。が、React.jsを使えばコマンドを打ち込むだけでディレクトリができる。やったね!

実務で利用するまではまだ時間がありそうなので、とりあえず適当に触りながら経過を書いていこうと思う。