妻が「こんなアプリがあったらいいのに」と話していたのを聞いて、ノリでちょっと作ってみようと思ったのだが、そもそもC言語しか知らない人間にとっては「WebアプリってCSSとJavascriptで作るもんでしょ？」ぐらいしか知識がなく。
しかし、断念するのもアレなので色々とググったら、ReactとかVue.jsとかどっかで見たことある言葉がたくさん出てきてしまって更に悩むことになったが、なんとなくReactを使おうと決めた。
Reactのことなら巷に情報は溢れているし、Webアプリ開発者の方々ならサクサク進めるであろうが、未経験者はいちいち躓いていくという現実を、備忘録込みで記録を残してみようと思う。
今の理解
Reactについての認識はこんなところ。
- WebのUI用JavaScriptライブラリ群
- これを使えばWeb画面であれやこれやできる
- Facebookが開発しているOSSで、今は商用に使っても大丈夫
また、このReactを用いてWebアプリ開発を行うには、以下の２つのパッケージが必要と知った。
- npm ・・・ 「Node.js」に関連するパッケージを独自で管理するアプリケーションのこと
- Node.js ・・・クライアントだけでなくサーバ側でも動作するJavascript実行環境で、Reactでの生産物をサーバ側で動作させるための土台
ということでnpmとnode.jsを手元に揃えるところから着手する。
開発環境の準備
開発環境は以下のスペック(古いノート)。
- PC：FMV-BIBLO MG70W(2007年製)
- CPU：Core2Duo T7100＠1.80GHz
- Mem：4GB
- SSD：50GBぐらい
- OS：Linux Mint 20 Cinnamon
インストール
aptを使って「npm」をインストールする。
$ sudo apt install npm
:
$ npm -v
6.14.4
$ sudo apt install nodejs
パッケージリストを読み込んでいます... 完了
依存関係ツリーを作成しています
状態情報を読み取っています... 完了
nodejs はすでに最新バージョン (10.19.0~dfsg-3ubuntu1) です。
nodejs は手動でインストールしたと設定されました。
アップグレード: 0 個、新規インストール: 0 個、削除: 0 個、保留: 0 個。
$ nodejs -v
v10.19.0
「nodejs」はnpmと依存関係ということで自動的に入っていた。
バージョンアップ
執筆時点(2020/11/19)でのバージョンは以下となっていた。
| npm | Node.js | |
|---|---|---|
| Mint 20 | 6.14.4 | 10.19.0 |
| 安定版 | 6.14.8 | 14.15.1 |
| 最新版 | 7.0.12 | 15.2.1 |
npmはまだしも、Node.jsはバージョンが離れすぎ。
Node.js
先にNode.jsをアップデートする。
(1) npmでNode.jsのパッケージ管理アプリの「n」をインストール
$ sudo npm cache clean
$ sudo npm install -g n
(2) nを使って、安定版(stable)を導入する
$ sudo n stable
:
installed : v14.15.1 (with npm 6.14.8)
$
(3) バージョンを確認する
$ nodejs -v
v10.19.0
$ node -v
v14.15.1
ん？どういうことだ？？
$ which node
/usr/local/bin/node
$ ls -l /usr/local/bin/node*
-rwxr-xr-x 1 root root 73828464 11月 19 13:19 /usr/local/bin/node
$ which nodejs
/usr/bin/nodejs
$ ls -l /usr/bin/node*
-rwxr-xr-x 1 root root 14416 3月 31 2020 /usr/bin/node
lrwxrwxrwx 1 root root 40 3月 7 2020 /usr/bin/node-gyp -> ../share/nodejs/node-gyp/bin/node-gyp.js
lrwxrwxrwx 1 root root 4 3月 31 2020 /usr/bin/nodejs -> node
$ env | grep PATH
PATH=/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin
/usr/local/binにはnodejsがないので、/usr/binにある方が動いてるのはわかるが、ファイルサイズが全然違うし、どないなってんのやん？？
(4) aptでインストールしたnodejsとnpmを削除する
調べたところ、aptで入れた「nodejs」と「npm」は上記の新しいバージョンを導入するために必要としただけであり、もう用済みであることがわかった。ということでaptで削除する。
$ sudo apt purge -y nodejs npm
：
(ガッツリ削除されるが気にしない)
：
$
(5) 再度、バージョンを確認する
$ npm -v
6.14.8
$ node -v
v14.15.1
$ nodejs -v
bash: /usr/bin/nodejs: そのようなファイルやディレクトリはありません
$
nodejsってのは古いコマンド表記なのかな？
とりあえず入れ替わったし、このままとする。
npm
一方のnpmだが、バージョンアップしたNode.js 14.15.1にnpm6.14.8が同梱されていたため、知らずにバージョンアップが済んでしまっていた。
$ npm -v
6.14.8
# 個別にバージョンアップする場合は「sudo npm install -g npm」を実行する
Hello World!
これで開発環境は出来上がったので、定番の「Hello World」をやってみた。
しかし、プログラムというと「viで.cファイル開いてmake」の認識であり、Eclipseですらほとんど触ったこと無いので、今のモダンな開発手法・ツールにいちいち驚く始末。
(1) 「Create-React-App」で雛形を作る
昔ながらにviで１ファイルずつ丹精込めて・・・でもいつかは出来るだろうが、Reactにはアプリ開発するのに必要な雛形が提供されているとのことなので、未経験者としてはこれを使わない手は無い。
$ npx create-react-app helloworld
：
(ズラズラズラズラと結構時間がかかった)
：
Happy hacking!
$ ls -l
合計 4
drwxrwxr-x 5 xxx xxx 4096 11月 19 14:50 helloworld
$
(2) 動作確認
この雛形のみでもブラウザで確認できるというので、以下の手順を実行。ブラウザから「localhost:3000」にアクセスするとReactの画面が表示された。
$ cd helloworld
$ npm start
：
(しばらく時間がかかった)
：
Compiled successfully!
You can now view helloworld in the browser.
Local: http://localhost:3000
On Your Network: http://xxx.xxx.xxx.xxx:3000
Note that the development build is not optimized.
To create a production build, use npm run build.
(3)「Hello World」の実現
ブラウザに「Edit src/App.js and save to reload」とあるので、これに従ってApp.jsを編集(Hello Worldを追記)→保存→ブラウザをリロードした(npmを再実行しなくてよい)。
$ cd src
$ vi App.js
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
+ <p>
+ Hello World!!
+ </p>
<img src={logo} className="App-logo" alt="logo" />
：
(省略)
：
</header>
</div>
);
}
export default App;
$
結果
できた！
雑感
- 本当にひとまずWebアプリを作れる環境は出来上がったが、大抵「Hello World」で終わることが多いので、ここから続けられるのかが一番の課題。
- 作りたいもののイメージはあって、ロジックだけPythonで試作してみていけそうな感じはしているのだが、Webアプリのお作法が全くわかっていないので、Reactを利用しながら進められるのか不安。
- 次はどこに進めばいいのだろうか？