BETA

React素人がReact中心のSPAを作ってみた

投稿日:2020-06-06
最終更新:2020-06-09

概要

  • Reactを使ったSPAなWebアプリを作ってみたかったので作成
  • 製作期間は約1か月

作ったもの

Webで簡単に履歴書を作成できるサイト

使用技術

ライブラリ等は書きませんので、詳しく見たい場合はGitHubを参照

  • Docker 19.03.8
  • nginx 1.17.10
  • MySQL 8.0.20
  • PHP 7.3.17
  • Laravel Framework 6.18.16
  • React 16.13.1

使用技術理解度

  • 初見技術
    • Docker
    • nginx
    • Laravel
    • React
  • 既知技術
    • MySQL
    • PHP

なぜこの技術を選んだのか

  • 練習のために初見技術を多く取り入れようと思い選んだ。
  • 個人開発なので時間がかかってもいいという理由。

ハマったこと

  • Dockerでの環境構築
    • Docker?なにそれおいしいの?状態だったので環境構築に莫大な時間を費やした。
    • 感覚的にこれじゃないというのは、作っては壊しを繰り返した。
  • nginxの設定
    • Apacheもろくに触れないのでドはまりしました。
    • ログに記録しているけどAPIの結果が返らなくなってしまった。
  • React
    • Reactに限らずフロントエンドは難しい。
    • なぜ?と思うようなところにパーツが飛んでいく。
    • 細かい調整をしていたら訳が分からなくなったのでぶっ壊してすべて1からやり直す。
    • やろうとしていたことすべてReactでできそうだったのでどうにかしてPHPでAPIを作った。
  • Laravelのルーティング
    • APIを作ったはずなのにルーティングはweb.phpが反映されている
  • Laravelのログ
    • ログの出し方はいろんなサイトに載っているが、ログファイルの場所が載っていなかったので探すのに時間がかかってしまった。
    • ログが見れない状況が続いたのでデバッグにい時間がかかりすぎた

実装機能

実装済

  • 各種情報入力
  • 情報をPDF変換
  • 変換済みPDFのダウンロード

未実装

  • ログイン機能
    • 最初はつける予定だったが、リリースしないので変更
  • バリデーション
    • バリデーションも個人利用前提なので未実装
  • 写真張り付け
    • セッションを利用したファイル送信の挙動がわからないのでいったん放置->リリースしないので実装省略

完成

一応これでOKかなと納得ができるものが作れたのでGitHubに公開しました。
最初はデプロイの練習もかねてリリースを予定していましたが、セキュリティが思ってる以上にがばがばなのでローカル限定で使用します。

完成したWebアプリのトップページをチラ見せ。

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@umesanの技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう