【ウェブカツ】プログラミング学習記録 + エンジニアとして働き初めて１.５ヶ月

こんにちは。

プログラミング全くの未経験の私がオンラインプログラミングスクール「ウェブカツ」の女性割引 でプログラミングを学び始めて半年、フロントエンドエンジニアとして働き始めて1.5ヶ月が経ちました。

今回もウェブカツ の進捗状況についてまとめていきたいと思います。

オンラインプログラミングスクールウェブカツ はこちら↓

webukatu.com

目次

現在のウェブカツ進捗

HTML・CSS部入門
javascript・jQuery部入門
PHP・MySQL部
ネットワークサーバー部
Webサービス部
PHPオブジェクト指向部
WordPress部
javascript・jQuery部中級

HTML・CSS部中級

HTML・CSS部上級

javascript・jQuery部上級　L12

時間に関しては、ウェブカツ での学習が123h、ウェブカツ 補足が221hです。

初めてのプロジェクト

入社してから初めて、規模としては非常に小さいですが、プロジェクトを任せていただきました。詳細については、あまり書きませんが、ログインページを新しくするというもの。

私が今働いている会社は、自社のウェブサービスを持っていて、それをある分野のクライアントと連携してサービスを展開しているという感じです。なので、自社だけでウェブサービスを成立させることができるというわけではなく、複数のクライアントと連携・調整しながらそれぞれのウェブサービスの運営を行なっています。

今回、あるクライアントのウェブサービスの形態の変更に伴い、自社のウェブサービスのログインページを変更することになりました。この案件のHTML、CSS、jQueryでのプログラミング実装をさせていただくことになりました。

ログインページのデザイン自体は、クライアントが既存の会員サイトで使っているログインページのデザインに寄せるという話になり、HTMLやCSSはそこまで大変ではなく、多くの時間を要したのはjQueryの部分です。

中身としては、クライアントの持っているユーザー情報をAjax通信で照合して、APIの返り値によって、ログイン処理を行うか、エラー文言を表示するかというもの。

ウェブカツでAjax通信については学んでいたこともあり、何をするのか想像することはできましたが、API を取ってきて、ログインをするというのは初めて。それにAPIを取ってくる先は、２箇所あり、一つ目のところで正常ログインができなかった時に、もう一つのAPIに投げるというもの。条件分岐もこれまたたくさんあるもので、今自分がどこにいるのかわからなくなり、これでもかというくらいデバックしまくりました。

プログラミングにおいて、本当にデバックて大切。うん。

また、ログイン保持の機能の実装もありました。正確には、◯日間はログイン時に画像認証を表示させないというもの。

ウェブカツでは、cookie にログインタイムなどのログイン情報を保存する方法を学んでいましたが、今回はlocalstrageを使って、ログイン保持機能を実装しました。

localstrageへのログイン情報の保存の仕組みとしては、そこまで複雑ではなかったのですが、これまた条件分岐が様々あって頭の弱い私に取っては、こんがらがって大変。ログイン情報があれば、画像認証を表示させないというのはいたって簡単に実装できたのですが、ログイン情報があって、画像認証のないログインフォームに以前と異なるユーザーIDを入力すると、ユーザーID自体が正しくても、また画像認証のログインフォームを表示し、そこで入力からやり直すという処理に戻るというのがうまく行かず、色々と試行錯誤しながら実装していきました。

先日、ひとまずテスト段階までの実装が終わり、来週、クライアント先等でテストが行われます。（不安だ。。。！）プログラミングの大きなエラーがなければ、テスト結果の修正等を終えた後、再来週あたりには本番環境へ反映される予定です。

やりたいように表示がうまく行かなかったり、条件分岐がうまく行かなかったりして、本当に大変でしたが、小さなプロジェクトでも自分一人で実装をさせていただいたこと（もちろん周りの方にはたくさん助けていただきました。）、そして、全く無理だという状況にはならず、ググりながらなんとか形にすることができたのが、本当に達成感でいっぱいです。大変だったけどプログラミング実装が楽しかったと思えたことが何より嬉しいです。まだまだ始まったばかりですが、エンジニアになってよかったと思えたことがよかった！！

予想外に大変なこと

もちろんプログラミングを書くことはまだまだ大変ではあるんですが、予想してなかった大変なことがあります。

何が一番大変かって、既存のファイルをいじること。

今使っているファイルをもらうと意外にも、不要なソースコードが盛りだくさん。そもそも使っていないcssやクラス名、jsの関数などが残ったままなんです。何これ？とか消したいけど、他に影響ないかな、とかそれを確認するのも一手間。一応使ってないものは消してもらって構わないと確認を取った上でめちゃめちゃ消してます。CSSファイルはコードの量が半分になることも。今はgit管理しているし、もし戻したいとなれば戻すこともできるから便利ですよね。

最後に

入社して初めてアサインさせてもらったプロジェクトについて、概要を書きました。入社して、わからなければ、聞くことができる人が隣にいること、仕事としてずっとプログラミングを書くことができるのがとてもとてもありがたいなと感じています。年明け？くらいには、あるクライアントと連携しているウェブサービスのフルリニューアルを担当させてもらえるというような話が！今よりも短時間で作ることができるようにそれまでもさらにレベルアップしていきたいと思います！