6
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

eeic (東京大学工学部電気電子・電子情報工学科)Advent Calendar 2019

Day 6

webアプリの勉強がてらサークルの内部システムを作った話

Last updated at Posted at 2019-12-05

TL;DR

  • サークルでの情報共有がめんどくさかったので、勉強がてら内部向けwebシステムを作った
  • フレームワークというものの存在を知らなかったのでフルスクラッチで作ったところメンテナンス性がなさすぎた
  • フレームワークを使うべき

あらすじ

詳細はサークルの内部情報に関わってくるので言えませんが、ファイルで管理していた情報が管理しきれなくなってきたということで、自分で内部向けwebシステムを開発することとなりました。
簡単に言えばkintoneのようなものを自作しようとしたわけです。

構成は以下のような感じです。

  • PHP + MySQL
  • フレームワークなし(フルスクラッチ)
  • ところどころjQueryを使っている

勉強しながらの開発

開発を始める前はwebアプリなんて書いたことがなく、ほぼ一からの勉強でした。

  1. PHP、SQL、HTML、CSSの書き方
  2. httpプロトコルのお勉強
  3. セキュリティの勉強

を勉強しました。言語の勉強だけでなく、2. や3. の勉強をしなければいけないのがwebプログラミングのつらさですね。
また、初めての開発ということもあり、セキュリティ関係は相当慎重になりました。(その分使い勝手は悪化していますが)
最終的には合計5000行ほどのコードになりました。

身についた知識

  • HTML, CSS ,JavaScript, PHPなどの言語仕様
  • 最新の記法や命名規則
  • 流行りのフレームワーク

この開発を通して様々な知識をつけることができました。

わからないことが多く、ひたすらググりました。ひたすら公式ドキュメントを読みました。
また、流行にも敏感になるようになりました。

よく言われるように、プログラミングの上達の近道は一つでも多くのプロダクトを開発し、アウトプットをすることだな、ということをこの開発で実感しました。

ダメだった点

  • フレームワークを使わなかった
  • モデルを知らなかった(MVC?MVVM?何それおいしいの?)
  • そもそも「フロントエンドとバックエンドの分離」とかいう発想がなかった
  • CSSの構成がグチャグチャ(途中でSMACCSに変えようとしたりBEMにしようとしたり)
  • 命名規則バラバラ
  • その結果、自分以外がメンテナンスするのが困難なコードが生み出された
  • なんなら自分でもわからない

実装しながら勉強したため、基本的な設計に関してはほとんど知識のない状態で行ってしまいました。勉強して知識がついたころにはもう実装がだいたい終わっており、設計を変えるのはもはや不可能という状況でした。

これから

本当は一から作り直したいレベルのアプリケーションでしたが、スケジュールの予定でいち早く運用開始する必要があったため、もう運用されています(そろそろ運用されて1年が経ちますね)。
僕ももう引退が視野に入っているので下の代に引き継がなければいけないのですが、このままのコードでは引き継げません(汗)

間を縫ってデータ移行の準備を進めながら、また一から実装するかもしれません。(せっかく作ったwebシステムは使い続けて欲しいですからね)

まとめ

色々と問題点は挙げましたが、特に重大な問題は発生せず運用できています。

また、自分のいい経験になる開発でした。
大きなプロダクトを作るのは楽しいものです。プログラミングを学び始めた人や少しでも上達したいと思っているかたも、ぜひ何か実用的なものを開発してみてください。きっと楽しさに目覚めるはずです。
ちなみに、今度は自分用のToDoアプリを作ろうと思っています。もしかしたら記事にするかもしれないのでお楽しみに。

6
2
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
6
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?