1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Reactでの初めてのWebアプリ作成

Last updated at Posted at 2025-11-03

はじめに

Reactを本格的に触りだして早2週間
業務の合間や休みの日にコツコツUdemyで学習して
遂にReactでWebアプリ開発をやってみた!

開発物 ~学習記録アプリ~

今回開発したのは下記のようなWebアプリである
image.png

・学習記録(学習内容と時間)を追加
・学習記録(学習内容と時間)の記録
・学習時間の累計
・学習記録がどちらか一方が空欄、或いは学習時間が0以下の場合エラー表示

という至ってシンプルかつ練習にちょうどいい画面である

CSSとかで装飾されていないので非常に味っ気がないって?
もっと機能凝れよ!って?
そんなこと言うんじゃない笑

本質はReactで最低限の機能を作ってみることで、凝る事やCSSはその次。
本質を見失ってはいけない(非常に大事)。

製作時間

元々jQueryでWebアプリ開発をしていたのもあって、ぴったり1時間で完成した。

jQueryでもこのような画面はできるが、1時間は越えてしまう。
(基礎となるHTML用意したりjsファイル用したりとで)
一方でReactだとJSXというJSの中にHTMLを書くというハイブリットな
能力とコンポーネントごとに作成するという特徴のおかげで非常に短時間でできた。
この点は感動である。

伝えたいこと

何事もそうだが、移り変わりの激しいITの世界
とにかく普遍的な知識を徹底、基礎的なことで簡単なものを作る事

新しい技術は大体既存技術や普遍的な知識の応用なので、
ここを大事にするかどうかで理解の速さがかなり違うと思う。
Reactだと、例えばuseStateやレンタリングの
考え方はサーバーやDBのバックアップの取り方などを理解してると
イメージがつきやすいと思う(set関数は最後にレンタリングした際の
スナップショットを利用して、DOMの差分を更新という点)。

また、いきなり難しいものを作ると確実に挫折するので、
まずは凝らなくてもいいので最低限の機能を自分が今持っている知識だけで
実装すること。これを繰り返せば、難しい技術でもしっかりと身につく。
千里の道も一歩から。

最後に

今回は非常に簡単なものだったので1時間でできたが、ここからが本番であると考える。
ここで「〇〇って簡単じゃ~ん!」って調子乗ったらえらい目に合うのがお約束である笑
なので、簡単な間から確実にマスターし、本質も理解すること。
勝って兜の緒を締めよの精神でこの先も学習を続けていきます!

JISOUのメンバー募集中!

プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか?
興味のある方は、ぜひホームページをのぞいてみてくださ!
▼▼▼

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?