daichikamo's Note

インターネッツ会社2年目の備忘録です。

非エンジニアの僕が休職中にプログラミングを勉強して作ったもの

2022年に入ってから持病が悪化して急に体調が悪くなり約2か月間にわたって休職してました。

 

後半はすっかり良くなって時間ができたので、プログラミングのスキルアップもかねていろいろ作っていました。

 

そこで、今回は自分が一か月半で学習したことと、成果物の紹介したいと思います。

自分のプログラミング経験

まずは前提として、自分の背景を書いておきます。

  • 予約サービスで業務でも、ちょっとコードを書いている
    • 某ネット予約サービスの営業企画 3年目(非エンジニア)
    • 3年目から開発のディレクションも兼務していた
    • 分析用途でSQLも書いていた
  • 曲がりなりにも少しプログラミングは経験あり
    • Progateは一応全部終わってる
    • 大学の勉強で使っていたので、分析用途として RやPythonは使える
    • Ruby on RailsやLaravelでブログを作ってみよう!」みたいなのを何度か試して都度 挫折していた

目標としたもの

はじめは「何か一人で最後まで自分でデプロイできるまで作ろう」と思いましたが、

途中からは欲が出てきて「現役のWebエンジニアに追いつけるだけの知識を身に着けたい」に変わりました。

①基本の部分から本を読み進める

休職期間のはじめの数週間は一日中横になっていたり、ボーっとする日々を過ごしていましが、段々と元気が出てきたので軽く頭を動かしたくなって本を読み始めました。

インターネット企業に勤めているのにインターネットのことが何もわかっていないなと思って、今のWebの成り立ちやHTTP通信の仕組みについて本を読んでいました。

 

 

また、Pythonを勉強していた時につまずいた「オブジェクト指向」も再チャレンジしてみました。

(この辺りはある程度はプログラミングに慣れておかないと意味がわからないと思うので、体が拒否反応を示したら飛ばしても良いと思います。)

 

チュートリアルを実践してみる

段々と手を動かしてプログラミングしてみたい気分になりましたが、特に作りたいものもなかったので、一時期Twitterで紹介されていたteamLab社の研修をやってみることにしました。

team-lab.github.io

これは基礎の基礎から教えてくれるので僕みたいなぺえぺえでも付いていくことが出来て、その後の自信につながりました。

また、Git、DockerやPostgreSQLなど、メインのLaravel以外も説明してくれているのでとても勉強になるいい資料でした。

 

<成果物①>Laravel+Bootstrap+PostgreSQLinstagramもどき

課題の一番最後にあったインスタグラムもどきの画面仕様書に沿ってLaravelを使ってインスタグラムもどきを作成しました。

team-lab.github.io

 

github.com

写真投稿のCRUD操作(更新以外)ができるようになっています。

作りながら気づいたのですが、Javascriptを一切使わずにLaravelの純正の機能だけで作ったので「いいね」するだけでリロードされる仕様になっています。。

「なるほど、だからフロントエンドの技術は必要なのか」と、その後にVue.jsをやるモチベーションになりました。

③実践向けの本を読む

ここまで来るとすでにいろんなことに興味が湧き出して、それぞれ踏み込んだ内容の本を読み始めました。

 

オブジェクト指向系の本
フロントエンド技術の本

<成果物②>Vue.js+Firebaseを使った掲示板もどき

インターネット企業に勤めておきながらAjaxという技術について詳しく知らなかったので、JSファイルが外部のAPI通信してWebアプリを作ってくれるって素敵やん!ってなり、Vue.jsで何か作ってみることにしました。

これも作るものがなかったので、Youtubeの下記の動画を参考に簡単な掲示板を作ってみました。

 

Build a CHAT APP in VUE and FIREBASE using Vue's Composition API - YouTube

https://github.com/daichipyon/vue-practice/raw/eb7e9450f4a482376273eafbed18d392c4f2bc66/vue-chat.gif

github.com

 

<成果物③>Vue.js+外部APIを使ったコロナ罹患者のダッシュボードページ

こちらもYoutubeのデモを一度見た後に、自分で作成してみました。

Build a Covid Tracker App With Vue.js & Tailwind - YouTube

https://user-images.githubusercontent.com/33198528/160746447-c095ffba-8c62-48dc-9fe3-aeaf8dc767dd.gif

github.com

プログラマーの心がけ系の本

④いまやっていること

バックエンドフレームワーク

会社のバックエンドがSpring Bootであるため、一度仕組みを理解しておこうと思っています。

 

 

フロントエンドの練習

まだVue.jsが使いこなせるまでに至っていないので、もっと手を動かして理解しないといけないです。

そこで、今はチュートリアルなどは見ずにアプリを作ってます。

<成果物④>HIPHOPのプロデューサーを調べるアプリ

Ajaxを使ってHIPHOPWikipedia的な立ち位置であるGeniusのAPIからHIPHOPプロデューサーの情報を引っ張ってきて表示するアプリを作りました。

 

ラッパーの名前を入力すると、そのラッパーにビートを提供しているプロデューサーの一覧が出てきます。

f:id:daichidaze:20220405184321p:plain

genuine-platypus-680372.netlify.app

github.com

謝辞

この休職の間、ずっと支えてくれた恋人や友人たちには感謝をしてもしきれません。

また、自分の穴埋めをしてくれている会社の上司や同僚たちには心よりお礼を申し上げたいです。

 

正直これからどうなるか分かりませんが、前向きに目の前のことに取り組んでいこうと思います。