こんにちはseiです！
- エンジニアになりたいけど、独学で大丈夫？
- 独学で学習したいから勉強方法が知りたい！
- おすすめの言語とか、何から始めたらよいか知りたい！
この記事は僕が独学でwebアプリエンジニアになった勉強方法を紹介します。
独学で学んだことで、既卒でしたが新卒として外資系IT企業に入社することができました！
※僕は大学卒業後一年ブランクがあります（笑）
27歳のエンジニアです。
フルスタックエンジニアとしてバックエンド、フロントエンド、AWSを用いた開発を行っています。Go言語が得意です。
エンジニア歴1年で転職して150万円年収UPしました。
始める前の心の準備
最も重要なのは継続して学習することです！
学習を始める前にしっかり心の準備をしましょう（マインドセット）
目的をはっきりさせる
おそらくこの記事を読んでいる方は、これからプログラミングの学習をして、
と考えているはずです。（違ったらごめんなさい）
独学で学ぶのはセルフマネジメント力が必要
独学でエンジニアになるのは、思ったよりも難しくないです。
ですが、自分でしっかり学習する環境を整えていないと、ダラダラして一向に進みません。
家でダラダラしてしまう人はカフェに行ったり、図書館に行ったりして学習しましょう。
しっかり継続して学習していくことが大事です。
エンジニアになりたい理由を考える
また、なぜ他の職業ではなく、エンジニアになりたいのかもしっかり考えましょう！
ココが弱いと学習が続きません。
年収をあげたいのか、手に職を付けたいのか、安定がほしいのか、それとも単に興味があるのか
なんでも良いですが、紙に書いて保管しておくのがおすすめです！
独学で勉強するのは、誰も周りにいなくてサボりたい放題です。サボりはじめたらこれを見て初心を思い出しましょう。
僕の場合は、収入がやばかったので、手に職をつけるべく必死で勉強しました(+o+)
web系エンジニアがおすすめの理由
世の中には様々なエンジニアの種類があります。
例えば、フロントエンドエンジニア、バックエンドエンジニア、インフラエンジニア、モバイルアプリエンジニア、機械学習エンジニア、組み込み系エンジニアなどです。
このうち前半3つはweb系の領域になります。
軽く説明します。
webの見た目を作る人です。私たちが見ているwebページにおいて、ボタンがどこに配置されるのかとか、色はどの色にするのかというのを開発している人です。
webのデータを扱う部分を作る人です。例えば、会員登録制のサイトって、同じページにアクセスしても人によって表示のされ方が違いますよね？（名前とかの個人情報）
あれはバックエンドエンジニアさんがデータベースからとってきたデータをいじいじしてフロントエンドに渡しているからです。
webサービスをいい感じに全世界の人が見れるようにしたり、サービスが止まらないような環境にしてくれる人です。
例えば食べログとかのサービスって24時間ずっと動いてますよね？もし障害が起こったときでもすぐに復旧できるような環境を整えている人です。
おすすめはフロントエンドエンジニア
web系の領域から学習することをお勧めします。
さらにその中でも、おすすめはフロントエンドエンジニアです。なぜなら
- 初心者でも理解しやすい
- web系の技術が分かれば、他のエンジニアにも応用可能
- 案件では様子見でフロントエンドに関わることが多い
- デザイン方向に舵を切ることもできる
からです。
web系をお勧めする理由について補足すると
モバイルアプリエンジニアの友人がいますが、webの通信や認証周りの知識が乏しくて苦労したと言っていました。
逆にweb系技術を学んでおくと、モバイルアプリではさほど苦労しないと言っていました。
また、フロントエンドは目に見える形でわかりやすいので初心者におすすめです。
仮に致命的にプログラミングに向いていなくてもデザイナーの方向に舵を切ることができます。
最近はフルスタックに全領域を行っている人が増えているので、途中でバックエンド等やりたくなっても転身可能なので大丈夫です！
※ただし新しい分野の勉強は必須です
独学でエンジニアになった具体的な勉強方法
具体的な勉強方法を見ていきましょう。
最終目標
- 成果物を作成することで、信頼性が上がる
- フロントエンド、バックエンド、インフラまで幅広く学べる
例えば、あなたが企業の面接官だとして、毎日たくさんの求職者を面接している場合を考えてみましょう。
いくら、口でたくさん勉強しましたと言われても、その人が本当に勉強しているのか、アプリケーションを開発できるほどのプログラミング能力があるのかには不安が残ってしまいます。
しかし、求職者が成果物を持ってきてどのように作ったかなど、詳しく説明することができれば、かなり信頼することができます。
実際に僕が就職活動をしている際も、「独学で」かつ「webアプリケーションの作成をした」というのはかなり好印象だったようにおもいます。
今回はwebアプリを作成することを目標にしましょう！
基本方針
- 一日8時間土日も学習する
- なるべく動画を活用する（概念的な部分）
- 月額3000円くらいまでなら課金OK
無職だったので、最初のほうは一日8時間くらい勉強してました！（笑）
後半3ヵ月は落ち着いてきて2,3時間くらいです。（他の時間は案件とって稼いでいました）
あとはyoutube動画を見て学習することが多かったです。
どうしても概念的な部分や、どうやって世界の人が見れるようにするのか等は検索ワードが思いつきにくいからです。
ただ、今はchatgptあるんでchatgptに質問するのが一番早いかなと思います。
全体計画
- 1か月目 progateで文法基礎を身に着ける
- 2か月目 サイト模写＆HP作成ができるようになる（レンタルサーバに上げられるようになる）
- 3か月目 PHPの文法を学ぶ＆wpテーマを作成できるようになる
- 4か月目 PHPを使ってwebアプリを作成し始める
- 7か月目 webアプリ完成！
今はchatgptあるし、この記事を読みながらやれば、もっと早く達成できると思います。
僕はめちゃちゃ時間取れたので割と早く完成できました。1か月100時間近く勉強していたと思います。
実践する際は期間で比べて落ち込まないようにしてください！
1か月目
ここでの目標は「HPを作成してレンタルサーバにアップして、誰でも閲覧できるような状態にする！」です。
まずは基礎的なHTMLとCSSの書き方を学びました。
エンジニア界隈では何かとバカにされがちですが、progateは初心者にすごくお勧めです！
手を動かしながら体系的に学べる教材はなかなかないです！月額1000円くらいなので必要経費と思って使っていました。（スクールに行くよりは圧倒的に安いし）
Progateはオンラインでプログラミングを学べるサービスです。プログラミングを学んでWEBアプリケーションを作ろう。…
一日3時間くらい学習できるのであれば、2週間ほどで終わらせて2か月目の学習に入りましょう。
CSSの記法であるSASSまで学んでおくと良いです。
学習の際に意識してほしいこと
HP作成の大まかな流れを理解したうえで学習を進めると効果的です！
HP作成手順を簡単にまとめると、
- 「index.html」「適当な名前.css」「適当な名前.js」ファイルを作成する。
- 「index.html」ファイルから「適当な名前.css」「適当な名前.js」を読み込む
- FTP通信などで、レンタルサーバーにアップする
- レンタルサーバ上のパスにアクセスして表示できるか確かめる
皆さんが普段webページにアクセスするときに、使っているのはHTTP通信というものです。
FTP通信とはHTTPとはちょっと違うファイルを送信専用の通信みたいな感じで考えてもらえばOKです。
以上を念頭に置いて、文法をマスターしちゃいましょう！
2か月目
文法をマスターしたら、次は模写コーディングをしてみましょう。
エディターをダウンロードする
エディターとは、ファイルを作成、削除したり、ファイルの中身を編集したりするソフトです。
その他にもプログラミングに役立つめちゃ便利な機能が満載です！有料のもありますが、無料のもので十分です。
僕のおすすめはVSCodeです。
エンジニアでは知らない人いないと思うし、最も使われているので、とりあえずこれ入れとけば間違いないです。
ほぼすべての言語で動作し、任意の OS で実行される強力なコード エディターである Visual Studio Code…
bootstrapについて学習する
bootstrapとはcssのフレームワークです。フレームワークってなんだ？ってなってると思いますが、便利に簡単に書くことができるもの見たいな感じで考えてください。
以下の動画シリーズが非常にわかりやすいです。
BootStrapなどのオープンソースのフレームワークは、必ず公式ドキュメントが存在しています。
より詳しい使い方を知りたい場合は参照してください。開発の現場では検索しても出てこないときが多いので、ドキュメント参照はよく行います。
検索してもよく分からないときは、ドキュメントを参照する癖をつけると良いです。
世界で最も人気のあるフレームワーク Bootstrap で始めましょう。CDN とテンプレートを使ってモバイルファースト…
模写コーディングをする
模写コーディングとは、既存のサイトをそっくりそのまま再現できるようにコーディングすることです。
今までのhtml,cssの知識を活かして模写コーディングを行ってみましょう。
chromeディベロッパーツールを導入しよう
めちゃくちゃ便利なchromeディベロッパーツールを使用しましょう。
webページ上でこのdivブロックに対してどのcssが当たっているのかとかがカーソルあてるだけでわかります。
これないとフロントエンドの開発できないです（笑）
基本的な使い方は以下を参照してください。
Google Chromeのデベロッパーツール（検証モード）を使いこなすことで、開発環境の向上が図れます。具体的には、デ…
模写コーディングにおすすめのサイトは以下二つです。
今の段階で動きの実装までは学習していませんが、cssとjavascriptを組み合わせることで動きの実装が可能です。
javascript単体で学ぶより効果的なので、やりながら身に着けましょう。
取り組む際のルール
- 元のサイトからコードをそのままコピペしない
- 質問投稿は基本的にしない
- レスポンシブ対応までしっかり行う
以上を守ってコーディングできたならhtml,cssはマスターしたと思って大丈夫です！
レンタルサーバーにアップする
模写コーディングの成果物をレンタルサーバーにアップしてみましょう。
実績等を公開する際に、ローカルPCを見せられない場合もあるので。
FFFTPでFTP通信してアップしてあげればよいでしょう。
また、レンタルサーバーのおすすめはconoha wingです。
- 月額費用が安い（12か月だと941円/月）
- 管理画面が見やすい
- wafのセキュリティレベルが高い
xserverも使ったことありますが、conohaの管理画面はUI/UXが優れていて見やすく、めっちゃストレスフリーです。
wordpressとかの導入もめちゃ簡単なので、おすすめです。
【国内最速】の超高速レンタルサーバーConoHa WING！最新の高性能サーバー・超高速SSD・高速化技術で圧倒的な速さ…
3か月目
ここまでで、HPを作成することができるようになりました。
簡単なHP作成ならクラウドワークス等で受注してお金を稼ぐことができるでしょう。
※単価安いのと、競合多すぎるのでおすすめはしません
ここまでの学習でこんな疑問がないですか？
言語はPHPがおすすめ
初心者にはPHPがおすすめです！理由は以下です。
- 古めの言語なので情報が多い
- 比較的書き方が簡単で理解しやすい
- 型を意識しなくて良いので開発スピードが速い
PHPは1995年に登場しているかなり歴史の古い言語です。web開発するために作成されています。
ネット上にも多くの情報が転がっており、初心者が学習する言語としてはぴったりです！
まずは軽くprogateで文法だけ学習しましょう。
全部やらなくて良いです。ほんとに文法だけ。
ちなみにこの時期はwordpressのテーマを作成しましたが、皆さんはやらなくても良いと思います。
4か月～7か月目
この時期からは本格的にアプリ開発をし始めました！
同時にクラウドワークスで案件をとってみたりしていました！
どんなアプリを作るか考える
どんなアプリケーションを作るか考えましょう。
一人で開発するのであれば、大規模過ぎないものを選ぶと良いでしょう。
自分の興味のある事、作りたいものじゃないと続かないので頑張って考えましょう。
アイディア例
- 会員制の画像投稿システム
- 献立生成システム
- 麻雀点数記録システム
アプリ開発の全体的な流れ
- 自分のPC上にアプリケーションを構築する
- 作ったアプリケーションをみんなが使える状態にする（サーバー上にデプロイする）
こう見てみると、HPの流れと似ていますね！HPも自分のPC上に構築した後にサーバにアップしていました！
この図結構大事なので覚えましょう。
システムは一番下にOS層があって、その上にミドルウェア層があって、さらに一番上にアプリケーション層があります。（図にはないですが、一番下にハードウェアがあります）
自分のPCで考えてみましょう。
OSはwindowsやmacなどですね。これはわかりやすいです。文字を画面に表示したりファイルを管理したりとか基本的な事を行っています。
ミドルウェアはこれから学ぶフレームワークやDB（データベース）の事です。
OSとアプリケーションを仲介するソフトウェアだと思ってください。
最後アプリケーション層はよく利用しているやつですね。
特定の機能を持ったソフトウェアです。パワポとかwordとかそうですね。
ローカル開発の流れ
自分のPCで開発することをローカル開発と言うことがあります。
皆さんのPCにはすでにOSがインストールされてるはずです。（多分windowsかmacだと思います）
後はミドルウェアをインストールして、アプリケーションを構築していくだけです。
ローカル開発手順
- PHPをインストールする
- DBMS（mysql）をインストールする
- フレームワーク（Laravel）をインストールする
- vscodeでガンガン開発！
デプロイまで再生リストあるので、あとは動画見ればアプリ開発できると思います！
PHPがPCで実行される仕組み
コンピュータを動かすにはコンピュータが分かる言葉（機械語）に変換して読み込ませる必要があります。
言語にはインタプリタ言語とコンパイラ言語があり、PHPはインタプリタ言語です。
インタプリタ言語はアプリケーションを実行したときに一行ずつ機械語に翻訳される言語です。（コンパイルの必要がない）
コンパイラ言語はアプリケーションを実行する前にすべて機械語にコンパイルして実行する言語です。
コンパイラ言語のほうが、機械語に直してから実行するので実行速度が速いです。
インタプリタ言語のほうがコンパイルの手間がないので、コードを修正した際にコンパイルしなおす必要がないので楽です。
フレームワークについて
フレームワークとはより便利で簡単にアプリケーションを作成することができるものです。
よく使う機能などはフレームワークにあらかじめ搭載されていたりします（ログインや認証機能など）
PHPだとLaravelかcakePHPを選んでおけば良いと思います。
フレームワークの設計思想にMVCというものがあります。（Model,View,Contoroller)
どのフレームワークもほとんどMVCをベースに作られているので必ず理解してください。
簡単に説明すると、
Modelでやり取りするデータの形を決めて、Controllerに実際の処理のロジックを書いて、Viewに見た目の部分を書くといった感じです。
gitについて
gitというバージョン管理ツールがあります。開発の現場では100％使われています。
アプリケーションの開発において、バグったから2，3日前の状態に戻したいと言った事が起こるときがあります。
gitでバージョン管理してないと戻すのが大変です。
gitでバージョンを管理してgithubで実際のファイルを保存しておくと良いでしょう。
デプロイ時のOSについて
アプリケーションをインターネット経由でみんなが使える状態にすることをデプロイと言います。
普段なじみがあるOSはwindowsやmacですが、アプリケーションのデプロイ時にはLinuxが使われることがほとんどです。
（先ほどのシステム階層図を思い出してください）
Linuxが使われている理由としては無料だから、オープンソースでたくさんの有志によって改善が行われ、使いやすくなっているからだと思います。
デプロイ時にはLinuxをOSにすることをお勧めします。
まとめ
お疲れ様でした！僕もたくさん書いて疲れました（笑）
ここまで達成できれば、あなたも立派なエンジニアとしてキャリアを歩むことができると思います！
エンジニア業界は技術変革のスピードが速いので、ずっと学び続けていかないといけない職業です。
これからも楽しく技術を学んでいこうと思います！
