プログラミング未経験からポートフォリオを完成させるまでの記録

# はじめに
プログラミングの学習を始めてから約半年が経ちました。
初めてのポートフォリオが完成したということと、これからプログラミング学習を始める方に少しでもためになれば良いなと言う思いでこの記事を書きました！

まず私の紹介ですが、文系の大学を卒業後、製造業の営業職を約8年しており、ITとはまったく無縁の状態でした。
そんな中プログラミングの魅力に目覚め、初心者ながらポートフォリを完成させるまでに至りました！
その経過を振り返ってみたいと思い、教材や技術書、行ってきたこと等を記録にまとめてみます。

ちなみに完成したポートフォリオについてですが、GithubのREADMEに制作した経緯や、機能など詳しくまとめてあるので、もし気になった方がいたら見ていただけると幸いです。

https://github.com/takaya8522/Study_Support_App

# 半年間で学んだこと一覧
### ポートフォリオに採用したもの
- Ruby 3.0.1, Ruby on Rails 6.1.7 ( Puma ), Nginx
- HTML, CSS, JavaScript(JQuery), UIkit
- Docker, Docker-Compose
- AWS ( EC2, VPC, IAM, RDS, ALB, Route53, S3 )
- PostgreSQL
- RSpec

### ポートフォリオに採用しなかったが、勉強したもの
- Python
- React
- AWS ( ECR, Fargate )
- Github Actions

# Python
## スッキリわかるPython入門 (スッキリわかる入門シリーズ)
人生で始めて買った記念すべきプログラミング技術書です。
ポートフォリオとしてはRubyを使ったので、Phthonの勉強はこの一冊で終わったのですが、帯にも書いてある通り、初心者でもプログラミングの本質を学ぶことができ、プログラマーを目指そうと思ったきっかけの一つになった一冊です。
![image.png](https://m.media-amazon.com/images/I/51Z0yxWK9jL._SX345_BO1,204,203,200_.jpg)

https://amzn.asia/d/bbR1RSc

# HTML/CSS
## 1冊ですべて身につくHTML & CSSとWebデザイン入門講座
プログラミングの学習を進めるうちにWebアプリについて興味を持ち、まずはHTML/CSSについて学習したいと思い購入しました。
初心者でもテキスト通りに読み進めることによって、簡単におしゃれなサイトを作ることができました。
Web学習への第一歩になった一冊です。
![image.png](https://m.media-amazon.com/images/I/51IxleJF-FL._SX391_BO1,204,203,200_.jpg)

https://amzn.asia/d/78Pvjl5

# Javascript
## 確かな力が身につくJavaScript「超」入門 第2版
Webアプリに動きをつけたい！と思って始めてJavascriptを学び始めて時に購入した本です。
![image.png](https://m.media-amazon.com/images/I/51RXlVPRVuL._SX391_BO1,204,203,200_.jpg)

https://amzn.asia/d/8f3lLlO

# Webアプリの基礎を一から学ぶ
この頃からWeb制作について本格的に学習したいと言う思いが定まり、プロのエンジニア目指して学習をスタートしました。
また独学で学習することも考えたのですが、まずはプログラミングの基礎を網羅的に学びたい、チーム開発を経験してみたい、プログラミングのコミニュティを作りたいと考え、スクールに入ることを決めました。
## プログラミングスクール
独自のテキストを使って学習を進めていき、章ごとに課題を作成し合格すると次に進むことができるというスタイルで学習を始めました。
スクールといってもメンターさんに頼り切るのではなく、カリキュラムを通して自走力を付けると言うことに重きを置いているスクールなので、プログラマーとして学習をしていくことに対しての地盤を固めることができました。

テキストの具体的な内容としては、HTML/CSS、Javascriptから始まり、SQLの基礎、Ruby、Ruby on Railsのバックエンドの技術がメインとなっていました。
学習時間としてはテキストやワークを含めて約800時間ほどで全て終わらせることができました。


# Ruby
## プロを目指す人のためのRuby入門[改訂2版] 言語仕様からテスト駆動開発・デバッグ技法まで
プログラミングスクールにて学習中に、テキスト以外に読み進めていたRubyについての技術書となります。
始めてプログラミング言語について本格的に書かれている技術書を読み、改めてプログラミングって楽しい！と思うことができた一冊です。
この本で学ばさせていただいた知識は、今後別のプログラミング言語を学んだ時にも活きてくるのではないかと感じており、そういった面でも大変勉強になりました。
![image.png](https://m.media-amazon.com/images/I/41LHdQuWVcL._SX394_BO1,204,203,200_.jpg)

https://amzn.asia/d/exLNQCc

# AWS / Docker
ポートフォリオの作成に着手し、本番環境にアップロードする際にインフラ関係の知識が足りないと感じ
AWSの学習を始めました。
また、学習を進めているうちに、Dockerで環境構築をするのに興味を持ち、ポートフォリオをAWS & Dockerで構築することに決めました。
インフラ関係の学習は主にYoutubeの動画を見て学習を進めました。
このようなハイクオリティな動画を、Youtubeで無料で配信をされており、大変ありがたいと思いました。

https://youtu.be/lZD1MIHwMBY

https://youtu.be/HvrIPQ77xRY

https://youtu.be/2_FxLp9xgmo

# Uikit
プログラミングスクールでは、フロントエンドフレームワークにBootstrapを勉強したのですが、今までと違うもっとシンプルなデザインをポートフォリオにはに採用したい！と考えUikitを学び始めました。
ですが、Uikitについての参考文書やQiita記事などはほとんどなく、自力で英文の公式ドキュメントを読むしかありませんでした。
しかしながら、プログラミングスクールでの教えで、普段から公式レファレンスを読むよう習慣づけていたのが功を奏し、ポートフォリオに実装させることができました！

https://getuikit.com/

# React
ポートフォリオのフロントフレームワークにはUIkitを使ったためReactは使っていないのですが、UIkitだとカスタマイズ性に劣っているということと、コードの可読性がかなり悪いということから、React等の本格的なフレームワークを使いたいと感じ学習を始めました。
また、Reactの学習にはUdemyを選んでみました。結果は大成功でした。
日々進化をしている技術を学び始めるには、まずUdemyで講座を受け、その後技術書で深掘りをしていく、という流れが自分に合っているのではと気づきました。

## React(v18)完全入門ガイド
Reactについて書かれている教材は何点かあったのですが、私がお勧めしたい講座です。
Reactについて体感的に、かつ網羅的に学習をすることができます。
また、なぜそうなるのか？という説明を毎回していいただけるので、自分の学習スタイルにとても合う講座でした。
全部で25時間ほどの大ボリュームな講座でしたが、挫折ポイントを詳しく説明してあるので始めてReactを触る私でも読み進めることができました！

https://www.udemy.com/share/106Nqw3@SXVlHnxTqSDdsXbxjQUiRuYm7dY3AS6c5xG7ZiNCb5toNSDLQfKpQnmh6LAI5PSk7w==/

# WEBアプリに関する基礎学習

## プロになるためのWeb技術入門
Web技術に関する基礎知識は既に理解していたつもりでいました。
しかしポートフォリオを作成している際、まだまだ理解が曖昧である箇所があると感じ、もう一度体系的に学び直すために購入をしました。
今まで学んできた断片的な知識が一つにつながり、より知識を深めることができました。

<img src="https://m.media-amazon.com/images/I/61YVe2oD4CL._SX397_BO1,204,203,200_.jpg" width="380">

https://amzn.asia/d/1xQ8krZ

# 他にやっていたこと

## プログラミングの先輩方のGithubをとにかく見まくる！
この半年間とにかくいろんな方のGithubを見まくりました！暇さえあれば見てました笑
プログラミングスクールの同期生や、過去2年前くらいの卒業生までは、可能な限り全員見ました！
次は、twitterで見つけたプロのエンジニアの方や、海外の方のGithubを見ました。
読んでいて分からないことも多々あるのですが、プログラミング歴の長い方が書いたソースコードを読むと新しい発見が必ずあります！
また、READMEを読んで知らない技術を覚えたりもしてました。
この習慣は、これからも続けていきたいと思います。

https://github.com/

## Youtubeを観てモチベーションを上げる！
プロのエンジニアに絶対なる！と決心してから何度も観させていただいた動画です！
モチベーション維持のためや、エンジニアとしての方向性に迷った時、ぜひ観てほしい動画です。

https://youtu.be/O9D18lhLa2Y

## 毎日楽しみながら、継続して学習する！

この半年間、今できることはなんだろうと常に考えながら活動してました！
Githubの草もできる限り毎日生やし、手を動かしつづけました！
あと学習に詰まったときは、教材やポートフォリオとは全く関係のないことをして寄り道するのがおすすめです！
私はよくGithubのプロフィールを派手にしたりしながら遊んでました笑



コミットするとき、Emoji Prefixを取り入れるのも楽しく開発できるのでおすすめします！
Gitでコミットメッセージを作成する際、先頭に絵文字をつけるだけです。

https://gitmoji.dev

# 2023年に読みたいと思っている教材等
年始のUdemyのセール時に購入させていただいた講座等や、これから読みたいと思っている本となります！
今年は、SQL、Gitについてのより実践的な使い方や、Web技術についての深掘りを中心に学習を進めていきたいと考えています。
また、ポートフォリオにはGithub Actionsを使ったCI/CDの構築することを目標にしています！

https://www.udemy.com/share/101ZvE3@5807dvLbpv_pmLlceut2ZRjLnjMC2jvuTVUiQFoSMN1IOkduTKxw4xtjja2Ex86_yg==/

https://www.udemy.com/share/101WYW3@Y416Gmh6xTi8ReL_7vSg0-kBGcOf2-P_BiE8VgF-8iiaK6GtnKc3shTSi5HHtQZZsw==/

https://www.udemy.com/share/107pvi3@bRA9a1M-Rj8uYXbLeCAA9zGnCjmtoITmPaTp42MAeJuvlC7pK31GU-c4Oabs1SUgLQ==/

<img src="https://m.media-amazon.com/images/I/41fQf8MI9AL._SX352_BO1,204,203,200_.jpg" width="380">

https://amzn.asia/d/fopC3lf

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2846974/25ce5279-bd4a-888f-bcfc-0e83456c573e.png" width="380">

https://amzn.asia/d/j2v6QOQ

# おわりに
プログラミングを半年間勉強してみて、プログラムを自分で動かす魅力にどんどんはまっていき、これからもプログラミングを勉強し続けたい！と言う思いが強くなりました。
ポートフォリオに関してもまだまだ開発途中だと感じているので、今後も技術のブラッシュアップに励みたいと思っております。

ご覧いただきありがとうございました。