※当サイトはリンクに広告ページが含まれている場合があります
これまで、バックエンドはLaravel、フロントエンドはVue.jsを使ってきましたが、ここ最近Reactの勢いが増している気がしており、現在はReactを目下絶賛勉強中。
それもあって、改めて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自体も学んでおくべきなのですが。。。
あなたのご質問・ご相談に、月1回、無料・本音で回答します。
ご質問・ご相談は、登録後に届くメールから送っていただけます。費用は一切かかりません。「お悩み相談室」というクローズドな場だからこそ、踏み込んだ内容の質問にも回答できます。
これまでに、こんなご質問・ご相談に回答してきました。
- コンサル(3号業務)を主力業務にするには、どうすれば良いか？
- どのようにして顧問料を上げれば良いか？
- 営業が苦手で、新規の顧客獲得ができない
- 業務をどう絞り込めば良いか？
- 一人社労士のままで良いのか、人を雇うべきか？
- 苦手・相性の悪い顧問先と、どう付き合うか？
- 生成AIの時代、社労士は今後どう生き残るか？
なぜ、無料で同業の社労士からの相談に乗るのか？
それは「本当に顧客のために活動できる社労士仲間を増やしたい」からです。
私自身、社労士という資格に誇りを持っています。企業からの社労士に対する不満をよく聞きますし、「社労士なんて役に立たない」と思われることは、正直悔しいです。
- 信頼される・信頼できる社労士の仲間を増やしていきたい
そんな想いから、少しでも社労士業界全体のレベルアップに貢献できればと考えています。
登録は無料・月1回配信・配信解除いつでも可能
※ 登録後、本人確認のメールをお送りします。届かない場合は迷惑メールフォルダもご確認ください。