フリーランスエンジニアを目指してプログラミングスクール「TECH：EXPERT」に通ってみた（応用学習編）（24日目&25日目&26日目&27日目&28日目&29日目&30日目&31日目）
こんにちは、かとたくです。
今回もプログラミングスクール「TECH:EXPERT」学習したことについてまとめていきます！
前回、チャットアプリ「Chatspace」のインクリメンタルサーチの機能の実装まで終えることができたので、メッセージの自動更新機能と本番環境へのデプロイをするところまでをやっていきます！
まず、4/14に学習したことは以下の通り。
・Chatspaceメッセージ自動更新機能の実装
最初、メッセージを格納しているテーブルのIDの最後の値を取ろうと配列で取得するのかなと考えていましたが、Javascriptでlastというプロパティで要素の最後を取得することができるみたいなので、とりあえずその作戦でやってみました。が、進捗はほぼ皆無でかなりメンタルがやられた1日となりました・・・。
翌日4/15に学習したことは以下の通り。
・Chatspaceメッセージ自動更新機能の実装（続き）
なかなか進捗なない日々が続いておりましたが、どうせ同じURLに自動更新するならわざわざ別のURLを経由しなくてよくね？という指摘があり、そこからようやく少し進み、なんとか自動更新機能の実装が大まかにできました。確認方法としては2つ同じURLで画面を開いて中身を見比べればOKです。
あと、わかったのは現在のURLをそのまま指定するならJQueryのlocation.hrefでいけました。もちろんそこから値を変化させるなら正規表現を使う必要がありますが、今回は必要なかったので手間が省けました。
あとは、メッセージを送信した時に自動でスクロール（LINEみたいな）できればとりあえず完成です。
4/16に学習したことは以下の通り
・Chatspaceの自動スクロール機能の実装
Javascriptにコードで書くと数行で終わるのですが、これがとんでもなく地獄でした・・・。
結論から言うと、たった2行追記すればOKなのですが、これに気づくまでに丸1日費やすことになりました。
一つはJSファイルに「$('セレクタ名').animate({scrollTop: $('セレクタ名').get(0).scrollHeight}, ‘fast’);」※別にスクロールの速さはどうでもいいかな？を対象の処理の後続に記述し、CSSファイルにoverflow:scroll;とheightを設定すればとりあえず自動スクロールで最下部に行くようになります。ぼくの場合は、該当の部分に高さを設定し忘れていたので、ヘッダーとフッター部分にスクロールが当たるので疑問に思いましたが、なんとか解決できてよかったです。
4/17に学習したことは以下の通り。
・Chatspaceの細かい調整
・AWSの環境構築
Chatspaceを作っている際にうっかり忘れていたのですが、グループを編集するボタンがリンクになっていなかったので直しました。ただ、hamlで書いていたのでリンクによくある下線を消すのが大変でした・・・。
Chromeなどのブラウザでは検証ツールで「User Agent Styleseet」をいうものがあり、reset.cssでも消せないみたいです。今回でいうと「User Agent Styleseet」にtext-decoration:underline;と設定されていたので、まずリンク部分にクラスを指定し、その部分にCSSでtext-decoration:none;をつけると消すことができます。
一通り実装できたので、AWSの環境構築も行いました。とはいえ以前にアカウントとEC2インスタンスは作っていたのでそこから続きでやってはいましたが。ただ、ちょこちょこわからないことやエラーも頻発していたので、調べたり質問投げたり色々しておりました。
AWSの方では、特に困ったのはMySQLの設定ですね・・・。特にパスワード周り。設定ファイルを一度削除してもう一度作り直しても削除前のパスワードがターミナルで表示されたり特に大変でした。最終的にはEC2のユーザーの一度ログアウト→再ログインで解消でき、本番環境にもデータベースが作られたので少し安心しました。
4/18にやったことは以下の通り。
・AWSの環境設定（Ngnix経由でRailsにアクセス、デプロイ作業の自動化）
完全にAWSの環境設定をひたすらやっておりました。ただ勉強時間でいうと12時間ほどかかるレベルでうまくできないことばかりで大変でした・・。特に自動デプロイツールでよく使われるGemとして「Capistrano」というのがあるのですが、インストールするだけならそこまで苦労はしないです。正直Qiitaやスタックオーバーフローにも書いてあるレベルなので。ただ、そこから本番環境へデプロイするのにエラーはでるし内容はよくわからんわでかなり苦戦いたしました。また、あるあるなのが、ローカル環境では正常に動いていたのに本番環境でいきなり動かなくなることもざらにあるので注意が必要です。
4/19に学習したことは以下の通り
・AWS（S3での画像アップロード、アクセス分散）
・Chatspaceの細かい修正（メッセージも画像も入力していないとエラーが出る、グループ編集画面のブラッシュアップ）
AWSにはS3という画像をアップロードする際に用いられる機能があるのですが、これを設定した状態でデプロイするとこれまたエラーが出るので大変でした・・・。結局ファイルの書き方に問題があったので完全に自分のミスなのですが、それはいいとしても画像を送った時に送信できない・または2度同じ画像が送信されるという意味不明な状態で完全にパニック状態でした。夜通しで作業していたので集中力も皆無でしたが、どうやらS3を使用する際に画像の容量（byte数）に上限があるみたいなので、軽めの画像なら問題なく動きました。
他には、開発時に漏れていたタスクを解消して、再度デプロイすればOKなのでそれも直しつつ最終課題に備えていきます。
4/20に学習したことは以下の通り。
・案件の面談
正直勉強という勉強はあまりしておらず、事前に案件の面談の予定が入っていたので、それに行ってきました。
エンジニアとして2年ほどやっていたのである程度想像していましたが、まずはテスター→できるようになったらPG→さらにできるようになったらSEみたいな半分年功序列的な感覚もあるので疑問点が拭えなかったです。あと、業務系アプリが大半なのと、住んでいるのが名古屋なのでそこも影響しているかもしれませんが、新規案件って結構少ないんですよね・・・。自分でアプリを作るならまだしも仕事となると色々と事情があるのがもどかしいですね。
最初はwebエンジニアとして入学しましたが、AWSを勉強してみてサーバーサイドに特化するのもアリかなと思う次第です。
最後に4/21に学習したことは以下の通り。
・Chatspaceの細かい修正（インクリメンタルサーチ のブラッシュアップ）
細かい修正でしたが、連日12時間ほど作業し続けた影響で身体はボロボロでした。修正が終わって速攻デプロイしてとりあえずアプリは完成することができました！
当初はアプリをweb上で公開したかったのですが、セキュリティ面がガバガバすぎるのと、アドレスがIPアドレスのままになっているので正式に公開するのは控えさせていただきますが完成したアプリのキャプチャだけ掲載しておきます！（一部だけ公開）
※セキュリティの都合上、URLは伏せております。あとAWSの無料期間が過ぎそうになったら別のサーバーに移行するかもしれないのでご了承ください。
ジャスト1ヶ月かかってしまいましたが、無事にアプリを完成させることができました！内容は非常に簡素ですが、作るとわからないことだらけで、エラーやバグもしょっちゅう起きるので、その間は本当に心が折れます。ただ、完成するとそれ以上の達成感を味わえることができるのがエンジニアの一つの魅力だと思うので、この文章を通して少しでも多くの人に伝わったらいいかなと思います。
今後は最終課題として某有名サイトのコピーサイトを作ります！（サイトの名前は次回公開します）
ただ、開発期間が1ヶ月弱なので本家とは程遠いクオリティになると思いますが、少しでもつかづけられるように頑張ります！
最後までご購読していただき、ありがとうございました！
また次回も読んでいただけると嬉しいです！！