これまで、バックエンドはLaravel、フロントエンドはVue.jsを使ってきましたが、ここ最近Reactの勢いが増している気がしており、現在はReactを目下絶賛勉強中。

それもあって、改めてJavaScriptの本質的な部分を勉強しています。

関連：JavaScriptの展開記法（スプレッド記法）

ReactアプリでToDoアプリを作ってみた

初学者が大体チャレンジするのがToDoアプリ、ということでReactで作ってみました（作ってみたToDoアプリはこちら）

以前、Vue.jsを勉強していたときも最初に作ったのはToDoアプリなので懐かしい・・・

ベースにしたのは、Youtubeの【React入門】完全初心者OK！１から簡単なTodoアプリを作ってReactの１歩を踏み出してみよう ~Reactチュートリアル~。

この解説をベースに、自分なりにEnterでタスクを追加できるように関数を付け加えたり、CSSを当てて見栄えを整えたりして、一応それなりの形に完成させました。

こんなにわかりやすい解説を無料で掲載してくれてありがたいことですし、勉強したい人にとっては本当に良い時代ですね👍👍👍

ちなみに、最近「リスキリング」という言葉が流行しています。

日々学習し自分自身をアップデートしていく、そんなのは以前から当たり前だったと思うのですが・・・

Reactアプリをエックスサーバーに公開する方法

ローカルサーバーで挙動を確かめつつ、ようやくToDoアプリを完成させたので、エックスサーバーに公開（デプロイ）しようと思い、方法を調べたら、

• 以下のコマンドにより、buildフォルダに生成されたファイル一式をpublic_html以下に入れるだけでOK

$ npm run build

と書いてあるウェブサイトが多かったのですが、何も表示されず・・・。いい加減なことを書く人が多いのは困ったものです😮‍💨

色々と調べて、ようやく見つけたのが「Reactアプリをレンタルサーバーで公開する方法」

ちゃんと、サーバーにアップする前にしなければならないこと、として注意点が記されています。

• 「package.json」に以下を追加
  • “homepage”: “公開URL” ← 私の場合は「react_todo」
• 「public」フォルダ内に「.htaccess」を作成し、以下を記述

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

その後、以下のコマンドによりビルドし、buildフォルダに生成されたファイル一式をpublic_html以下に入れます。

$ npm run build

無事に学習の成果がアップでき、ひとまず一段階クリアです。

しかし、Reactを知ると、洗練された書き方に感動しますし、素のJavaScriptを書くのがイヤになるのはわかります。

原理を知るという意味ではJavaScript自体も学んでおくべきなのですが。