どうも!「シャベルエンジニア」のスプ兄です!
- 高卒・文系・元消防士から9ヶ月で開発エンジニアに転職
- 実務経験1年でPM(プロジェクトマネージャー)
- プログラミングスクール代表 兼 講師
このシリーズでは、「完全未経験から9ヶ月で、完全オリジナルのポートフォリオを作ってWeb開発エンジニアに転職するためのロードマップ」をテーマにお届けします。
今回はその第4弾、4ヶ月目前半の学習内容を詳しくお伝えします。
- エンジニアになるための学習4ヶ月目にやることが詳しく分かる!
4ヶ月目に学ぶこと(3つ)
4ヶ月目に学ぶことは、大きく分けて3つあります。
- Ruby on Railsを使ってローカル環境で開発をしてみる
- フロントエンドの言語について理解を深める
- ポートフォリオの作成準備をする
今回は1つ目と2つ目について詳しく解説し、3つ目のポートフォリオ作成準備は4ヶ月目後半の記事でお伝えします。

1.Ruby on Railsをローカル環境で開発してみる
これまでの基礎学習は主にProgateを使って進めてきましたが、
実務では開発環境と呼ばれる場所でコードを書きます。
その中でも、自分のパソコンに構築された「ローカル環境」での開発が非常に重要です。
環境構築について
まずは環境構築が必要です。
プログラミング言語やフレームワークは、インストールするだけでは使えません。
環境構築という作業が必要で、ここで3ヶ月目に学んだコマンドラインの知識が役立ちます。「Ruby on Rails 環境構築」と検索すると手順が出てきますが、PCのOSによって手順が異なるので注意が必要です。
Windowsはこちら→Ruby on Railsの環境構築をしてみよう!(Windows)
macはこちらから→Ruby on Railsの環境構築をしてみよう!(macOS)
IDEの準備
Ruby on Railsの環境構築ができたら、Visual Studio Code(VSCODE)などのIDEを使った開発の準備をします。
VSCODEはエンジニアが開発しやすいように、開発用ツールをまとめたソフトウェアです。具体的なインストール方法は「Visual Studio Code インストール」で検索すると出てきます。
VSCODEには便利な拡張機能があり、例えば全角スペースを検知して教えてくれる「zenkaku」や、自分の環境で簡単にサーバーを立てられる「Live Server」などがあります。これらを使いながら学習を進めていきましょう。
3ヶ月目に学んだProgateのRuby on Railsの内容をローカル環境上で再現する学習がおすすめです。
可能ならばProgateの内容に少しオリジナルのアレンジを加えてみると良いでしょう。

2.フロントエンドの技術について知識を深める
次に、フロントエンドの技術について知識を深めます。
具体的には、HTML・CSSはもちろん、SASSやjQuery にも触れておくと良いです。
さらに、JavaScriptまで学んでおくとキャリアアップにも繋がります。
フロントエンドの知識を深める理由は?
フロントエンドの知識を深める理由は、未経験から転職して実務の最初は
CSSやjQueryなどを中心としたコーディングから始まることが多いからです。
SASSはCSSに比べて効率的に書けるので、学んでおくと良いです。
jQueryはサイトの見た目に動きをつける技術で、実務でも使われることが多いです。
JavaScriptを学ぶ理由は?
JavaScriptを学ぶ理由としては、近年のフロントエンドの業界で人気のREACTなどのライブラリがJavaScriptから派生しているため、キャリアアップに役立ちます。
学習方法について
具体的な学習方法としては、SASSとjQuery の基礎をProgateで押さえた上で、動きがあるサイトの模写やポートフォリオに動きがあるものを実装してみると良いです。
JavaScriptは、jQueryで付けた動きを生のJavaScriptで書き直してみる学習方法が効果的です。
補足
フロントエンドのコーディングについてですが、現在、生成AIの発展で学習がしやすい環境になっているので、AIを活用しながら進めてみると良いと思います。
AIが作ったコードをたたき台として修正し、実際に使える状態まで持っていくスキルが今後求めらるので身につけておきましょう。

まとめ
それでは今日のまとめです!
- Ruby on Railsを使ってローカル環境で開発をしてみる
- フロントエンドの技術に対して知識を深める
- ポートフォリオの作成準備をする(後半の記事で説明します。)
もっと具体的な情報が欲しい場合や、コメントでお気軽にご相談ください。
それでは4ヶ月目後半の記事でまたお会いしましょう。