【Laravel】【jQuery】未経験から入社して約一年経ったので、1か月間でちょっとしたhtmlを出力できるWEBアプリケーションを作ってみた

はじめに

当記事を開いていただきありがとうございます。
タイトルの通り、未経験から新卒社員として開発事業部に入社して約一年が経ちました。そこで、学んだことを活かして、一か月間でLaravel、JQueryを用いたちょっとしたWEbアプリアプリケーションを作ってみました。当記事は作ったアプリケーションの紹介と感想をまとめたものです。

投稿者の情報

・2020年4月に未経験から新卒社員として開発事業部に入社
・入社後は主にサーバー側の実装を担当
・Laravel,jQueryは案件では少ししか触ったことがない
・2020年10月、AWSアソシエイトの資格を取得し、以降2件ほどインフラ構築にチャレンジさせてもらった

公開中のテスト環境

！注意！
最低限の機能のみのテスト環境です。予期せぬ不具合が発生する場合があります。予めご了承ください。
テスト環境の出力は一回のみ可能です。
テスト環境についてのご指摘、ご質問を当記事にコメントすることはお控えください。
zipでの出力のため、chromeの場合は出力時に警告が出る場合があります。

成果物の紹介

アプリケーションの目的

会社から出ている若手向け課題や、CodeceptJSを初めて触ったときに「時間はかけたくないけど、それっぽいviewが欲しいな」と思うことがありました。そういった際、簡単にそれっぽい画面を調達するためにこのアプリケーションを作ろうと思いいたりました。そのため、現時点ではエンジニア向けの最低限のviewを出力することが目的であり、ランディングページのようなデザイン性や戦略性の高いページを作ることは想定していません。また、出力されたソースをそのまま使うことはせず、エンジニアが多少の加筆修正をすることが前提です。

アプリケーションできること

画像のように、画像やテキストなどいくつかの情報を入力します。

完成した要素をドラックアンドドロップで配置します。

これを繰り返し、webページっぽくします。
（灰色の部分は列ごとのpaddinbg-top、padding-bottomで、上下に伸縮することができます。）

作った画面の情報をHTMLとして出力することができます。見た目だけでなく、ボタンやnavバーのリストをクリックしたアクションを設定することができ、外部ページへの遷移や、指定した列にスクロールをすることができます。

zipファイル内に「html」フォルダと「img」フォルダがあり、それぞれフォルダ名通りのファイルが格納され、出力されます。

アカウント機能

ユーザーは、ユーザー名、メールアドレス、パスワードを登録することでアカウントを作成することで、作ったhtmlの情報を保持し、後からでも再度出力することができます。アカウント機能はLaravel標準のAuth機能で作りました。また、別件で触ったことのあるGoogleの「OAuth 2.0」によるログインも実装しているので、Googleアカウントをお持ちの方は、Googleのログイン情報だけで簡単にアカウント作成、ログインをすることができます。

インフラ

インフラはすべてAWSで構築しています。構成図は以下の通りです。基本的な構成ですので、詳細は割愛します。

RDSにはアカウント情報が、S3にはアップロードされた画像ファイルが格納されます。

設計から最低限の機能完成まで

まず、タイトルに「1か月で」とありますが、30人日ということではなく、実際には一日90分ほど時間を費やしていました。カレンダー上で5/1に設計をはじめ、5/30に当記事を作成した、ということです。
ところどころ抜けている日がありますが、これらの日は課題やプライベートの用事で作業していません。
・5/1~5/4
基本的な画面設計、機能設計をし、やることリストをメモ帳に書き出しました。
・5/7~5/8
カード要素の情報を入力することで、要素が画面上に表示されるようにしました。
・5/10~5/12
画面上に表示された要素をドラッグアンドドロップし、配置ができるようにしました。
・5/15~5/19
Navバー、見出し、ドキュメント、画像、ボタン要素を追加しました。
プレビュー、出力機能を実装しました。
・5/20
要素の削除、再配置機能を追加しました。
・5/21
AWSでテスト環境と本番環境のインフラ構築をしました。
・5/23~26
テスト環境で発生した不具合を修正しました。

反省点

改めて書き出してみるとたくさんの反省点があったので、いくつかご紹介します。
・課題やプライベートの用事で作業できない日が何日か発生することを想定できず、余裕を持たせられなかった。
・ローカル表示からHTTPS表示への移行が初めてであり、404をはじめとするエラーが多発した。
・デザイン面の勉強不足が目立ち、UIUXがとてもひどい
・いくつか想定にない機能（列ごとのパディング追加機能、プレビュー機能など）を追加したことで、想定してたスケジュールから大きくずれってしまった。

これらの反省点は、今後に活かしたいです。

今後追加する予定の機能

・SP版対応
・要素の追加（表、ハンバーガーボタン、動画など）
・一度作成した要素の編集機能
・UI,UXの改善（ボタンやテキストエリアの形や色に意味を持たせるなど）
・一つの要素に対するテンプレートを増やす
・利用者からのご指摘、ご質問を受け付ける窓口

感想

　ここまでご覧いただき、ありがとうございます。
今回、短い期間での開発であったこともあり未完成で欠陥だらけのテスト環境でありながらオープンに公開したのは、インプットよりもアウトプットの比重を増やしたいと思ったことが一番の理由です。
　エンジニアの中には、プライベートの時間であっても新しく得た技術やひらめいたアイデアをもとにもくもくと開発し、スキルを高めていく人がたくさんいると思います。投稿者の社会人経験はエンジニアだけですが、ほかの業種と比べるとやはりエンジニアは勉強熱心な方がとても多いと感じます。しかし、プライベートの開発で、世界中の人々に実際に触っていもらう段階まで進める人は限られているのではないでしょうか。理由としては、指摘、批判が怖い。インフラ構築がめんどくさい（できない）。恥ずかしい。などかと思います。もちろんプライベートの時間なので、ひたすらインプットしても良いですし、趣味で自分が満足できていればよいという人もいるでしょう。しかし、仕事としてエンジニアをしているのであれば、自社開発にしても受託開発にしても、成果物を評価するのは「他人（少し冷たく感じる言葉ですが）」であることがほとんどです。なので、たとえプライベートで収益化を考えていないとしても思い切って公開し、「他人」からの評価、感触を掴み、それを反映する。ここまでやることでインプットだけでは得られない知見を得られると思っています。今回の開発と記事投稿で新たな知見が得られたらそれをまた記事にするので、その時はよろしくお願いします。
　機能の追加などがあった場合こちらの記事に追記しますので、LGTM、ストックをお願いします。励みになります。