UM式 エンジニア勉強会 新卒編②
こんにちは！
前回の記事は、新卒編①とエンジニア勉強会ってどんなことしているのかをお伝えしましたね。
「#社内報」の数ある記事のうち、1週間「スキ」を最も集めた記事として通知が来まして、社員一同とてもとても喜んでおります。
ご一読いただいた皆様、「スキ」をくださいました皆様、ありがとうございます。
これからも大事に丁寧に、noteの記事を通して弊社のことをたくさん知ってもらえるきっかけになれるよう努めてまいります・・・・！！
気持ちも新たに・・・・
この度も、弊社USEN Mediaで毎月行われているエンジニア勉強会の「新卒編②」を書いていきたいと思います。
■自己紹介
せっかくの機会ですので、自己紹介をさせていただこうと思います。
マコと申します！
2022年4月新卒入社後、半年間の研修期間を経て9月にMediaに配属され、バックエンドエンジニアとして働いております。
好きな食べ物はコロッケで・・・
趣味は、色々ありますがインドア派な人間でございます。
最近、ブルーロックというアニメを見ておりまして、出てくるキャラクターが黒髪と金髪で「自分やん！」って思ってました・・。すいません(笑)
■テーマ
今回僕は、「研修で 開発したwebアプリのJS(JavaScript)をVue.jsに置き換えてみた」という発表をさせていただきます。
■どうしてこの題材を選んだか
まず、JavaScriptに苦手意識がありまして・・・。
そもそもプログラミングが未経験ということももちろんあるのですが、案件を進めていくうえで、JavaScriptにつまずく機会が多くありました。
2つ目に、せっかくの勉強会ということで新しい技術を学びたいなと思いました。
そのため今回は、入社時の研修で作ったクイズアプリのJavaScriptを、モダンなフレームワーク(Vue.js)に書き換えてみようと思います。
第１１回 UM式 エンジニア勉強会
研修で開発したWebアプリのJavaScriptをVue.jsに書き換えてみた
■Vue.jsについて
最近流行りのChatGPTにVue.jsについて聞いてみました！
聞いてみたはいいものの横文字ばかりで、ちんぷんかんぷんで・・・。
次にテンプレートを 教えてもらうことにしました。
ChatGPTはすごいなと思いつつ始めようと思ったのですが、よくわからず・・・。
■公式サイトのチュートリアルを試してみる
結局、 公式サイトのチュートリアルを一通りやってみることにしました。
まぁ〜ふんふんこんな感じか・・・みたいな感じで要領を得ることができました。
そこで「とりあえず実装してみるか！」と進めてみることにしました。
■実装してみる
実装内容についてです。
クイズモードというクイズを回答していく画面のJavaScriptを書き換えていきます。
その機能の仕様を簡単に紹介したいと思います。
クイズモードが「0文モード」と「エンドレスモード」の2通りあり、Ajaxの機能を使って出題回答の送信などを非同期で通信処理するようになってます。
回答履歴等のデータの保存は、 apiを作成して行いました。DBを使ったデータのやりとりは、Laravelを用いて記述をしております。
また、「エンドレスモード」のAjaxを使っていた箇所を、Axios(アクシオス)に変えてみました。
やり方としては、テンプレート側に対応するメソッド(呼び出しの要素)を埋め込みます。そして、JavaScript側には各メソットをVue.jsの形式に変更していきます。次にAjaxで通信していた部分をAxiosに変更して進めます。
■実行してみる
では、実行していこうと思います！！
今回書き換えた「エンドレスモード」を実行しようと思いましす。
スタートボタンを押すと、データベースに通信をかけてクイズの情報を取ってきて表示します。
クイズに正解すると、次の問題でというように表示されます。
また、結果画面に行くとアカウントの情報に保存されていまして、正答率に反映されていくという処理になっております。
■反省
今回JavaScriptをVue.jsに書き換えたWebアプリを作成してみて、反省点と問題点としては、以下のことが考えられました。
1つ目は、サーバーやDockerの知識が足りないなと思いました。
研修の時とパソコンが変わっていたので、github上から現在のパソコンにcloneしてサーバーをローカルで立ち上げるところまででも、結構時間がかかってしまいました。
2つ目にVue.jsへの理解が足りてなかったなというところです。
3つ目にもあげているのですが、LaravelとVue.jsの相性の良さをしっかりと理解することができませんでした。
大まかな記述を終えてから実際に画面表示してみると、通信できてなかったり、フレームワークの振る舞いを理解して使えていない部分が見受けられました。
最後に
■研究してみてどうでした？
勉強会で発表するまでの限られた時間内で、新しい技術を習得したいと思い、Vue.jsを始めてみたのですが順調に進んでいくはずもなく・・・・
苦戦する時間の方が長かったように思えます。
ですが、今後も引き続きモダンな技術の習得にもっともっと挑戦をしていきたいとも思いました！！
あとは・・・・
先輩方曰く、日頃から勉強会のネタを用意しているようで・・・・
普段の生活の中で、ネタがあるようなエンジニア生活を送っていきたいですね。
■noteを見てくださった方々にお伝えしたいことはありますか？
ご一読いただきまして、ありがとうございます。
noteを見てくださった方は、きっと日々勉強会などで使えるネタをお持ちの方ばかりだと思います。
僕もみなさんと一緒にネタを見つけり、研究したネタを持っていたりするようなエンジニアライフを目指していきたいです。
あとは・・・今回の勉強会で「時間の管理」が大事だと改めて実感しました(笑)
しっかり進捗の管理していきながら、次の勉強会に出た時には、もっと成長した姿を見ていただけたらいいなと思います・・・・！！
最後に、僕もサイトウくんと一緒に新卒にフォーカスをした記事で登場する予定です。
また会いましょ〜