★この記事は10分で読み終われます。
Webアプリ以外を目指す方にも役立つ記事です。
#本記事のポイント
- 京都大学大学院を卒業し、企業でITエンジニアとして働いている筆者がIT企業で働く友人の様々な体験談をもとにWebアプリ作成に求められるスキルを具体的に書いています。
- 無料で相談を受けられるサービスを紹介しています。
- Webプログラミングのスキルを学ぶための良書を紹介しています。
目次
Webアプリを作りたい人の苦戦の理由
ぼんやりとわかっているけど実行することができないといった人を多くみてきました。
本記事では、Webエンジニアになるためのロードマップをわかりやすく説明しているので、手順に沿って一つずつ考えて実践してみてくださいね。
まずは、ちょっとずつちょっとずつ実行してみることがとても大切です。
Webアプリを作るためのロードマップ
目的を明確にする
どのようなWebアプリを作りたいかを明確にすることが第一です。
なぜなら、何をしたいかで何を勉強するのかが変わってくるからです。（ここ大事！）
フリーランスで相手にアピールするときに何ができるかを明確にできるなどのメリットもありますね。
まず、Webには大きく２種類のコンテンツがあります。
WebアプリとWebサイトの違いを知る
Webアプリとは
【裏に情報を貯める必要がある動的サービス】だと考えてください。
・アクセスされた人や時間で表示するデータが動的に変更されるもの
・ログイン・会員情報機能を備えているもの
具体例
・TwitterなどのSNS
・ECサイト
・サブスクサービス（動画配信、音楽アプリなど）
必要な技術・スキル・人物像
フロントエンド
- HTML + CSS
- Javascript + jQuery
バックエンド
Webアプリ開発の３大フレームワークがRailsとLaravelとDjangoです。この3つを扱う言語がRuby、PHP、Pythonになります。
データベースのデータを引っ張ってくる部分にSQLの知識があるとより良いです。（必須ではないかな）
- （基本言語）Ruby または PHP または Python
- （Webフレームワーク）Rails または Laravel または Django
- （DB操作）SQL
- ネットワーク知識があるとなお良し
Webサイトとは
ブログに代表される静的サイトのことです。
会員機能は必要なくアクセスされたら決まったサイトを表示するものを静的サイトと呼びます。
具体例
・自分をアピールするポートフォリオサイト
・会社をPRするコーポレートサイト
・キャンペーンを告知するプロモーションサイト
・ブログサイト
・情報発信のメディアサイト
必要な技術・スキル・人物像
- HTML + CSS
- Javascript + jQuery
- 配色や配置などデザイン知識
目に見える装飾部分にはHTML＋CSSです。
軽くアニメーションの動きをつけるのにjQueryが活躍します。
必須ではもちろんありませんが、配色パターンや配置、配列などのデザインの知識も知っておくとユーザが使いやすいWebサイトが作成できます。
使われないサービスほど悲しいものはないので学んでみることをオススメします。
Webアプリで作りたいもの、そして必要な知識がわかってきたでしょうか？
各スキルの勉強方法
まずはProgateで基礎知識をつけよう
Progateとは基礎知識を優しく丁寧に学べるサービスです。
スマホのアプリでもゲーム感覚で学べるので本当に素晴らしいサービスです。
初級編は無料で、中級編から有料になります。初級編からコツコツやっていきましょう。
勉強する順番は
HTML/CSS ▶︎ Javascript ▶︎ Ruby ▶︎ Ruby on Rails ▶︎ React ▶︎ SQL ▶︎ Command Line,Git
こだわりがない人はRuby on Railsを勉強するとよいです。
基礎の次は実践的なスキルをつけよう
大きく勉強する方法は２種類で「プログラミングススクール」or 「参考書」です。
（普通の勉強と同じで「学校や塾で勉強」or 「参考書・サイトで勉強」ですね）
これは正直それぞれの人にあったスタイルがあります。
プログラミングスクールでは無料相談ができるので、相談してみて自分に合わなそうなら参考書で勉強の手順でいいと思います。
学校や塾が適している人
- 時間的に縛られて勉強することでやる気が上がる人
- 明確な目的を持ちたい人
- マンツーマンの指導が好きな人
- 知識やスキルが全くない人
参考書が適している人
- 自分のペースで勉強をしたい人
- 自分でモチベーションを保てる人
- 安く勉強をしたい人
- 少し知識やスキルを持っている人
では、自分に適した勉強方法をみていきましょう。
Webアプリの勉強方法⑴：プログラミングスクール（相談だけでもしてみる価値あり！！）
今では、よく聞くようになったプログラミングスクールについて説明します。
プログラミングスクールの多くがオンラインスクールで短期間で決められた目的に沿ったカリキュラムで勉強することができます。
いつでも相談をできることもメリットですが、やはり期間を決めて勉強することを実践できる環境を作ることのメリットは大きいです。
新規の人には無料でカリキュラムの相談や受講体験ができるので試してみる価値は十分にあります。
１. CodeCampGate
信頼性がとても高いオススメのプログラミングスクールが【CodeCampGATE】です。 
オンライン・マンツーマン指導のプログラミングスクールとしてNo.1の実績を持つCodeCampが運営する未経験から最前線で活躍するエンジニアを目指す為のサービスです。
カリキュラムとして「ショッピングサイトの構築」が提供されており、Webエンジニアを目指す人には特にオススメです。
人気の理由は以下になります。
- ショッピングサイト構築の基礎・実践を4ヶ月でやりきるカリキュラムが準備されている点です。
▶︎ 人は期限を設けて目標を立てると、実行力が上がるという論文があるほどに目に見える目標がとても大切です。
▶︎ そしてDocker、PHPのフレームワークLaravel、チーム開発gitも知れるのでバックエンドも完璧です。 - 各受講生には専任のキャリアアドバイザーがつき、オンラインで日本全国、毎日7時から23時開始まで対応。
- プログラミングの習得から就活の応募書類の添削、面接対策などを提供しています。
「４ヶ月頑張ってみる」「ショッピングサイトを１から作ってみる」という挑戦をしただけで、勝ちに近づいていると思います。
なぜなら「考える」から「実行する」でできる人が１割程度になってしまうからです。
その1000人の中で10人に入れたのなら他の人との差を実感でき、努力をする・勉強することが好きになっているはずです。
頑張りましょう！
２. GEEK JOB
GEEK JOB 
は、第二新卒/フリーターに向けた、無料のプログラミング学習&就職支援サービスです。
GEEKJOBは,「「学びかた」を改革し、自ら学び、自らサービスを創り出す人を増やす」という事業ミッションを掲げていて
プログラミング学習においては、講義形式ではなく「反転学習」を取り入れ、 自らすすんで学習するスタイルを取り入れています。
カリキュラムとして「オリジナルアプリの開発」が提供されています。
人気の理由は以下です。
- オリジナルアプリの開発とカリキュラムの内容が面白い。
- 学習した内容の定着はもちろんのこと、就業後も「進んで学ぶ姿勢」を評価されている
- 参加者の71.6%はパソコン初心者からスタートし、転職成功率は95.1%という実績
- 「徹底した採用者目線」での就職支援と プログラミング学習支援を実施している
プログラミングを学ぶだけが目的となっていないことがとても素晴らしいコンセプトだと思います。
プログラミングを学んだ先には、システム開発やアプリ開発の仕事が待っていますが、学んだプログラミングだけではまだまだできることは限られています。
そんな状況で進んで学び、得た知識を発展させて考える人材を育成するサービスなのでオススメです。
また、就職支援として 面接のロールプレイングから実際の仕事を体験するアクティビティがあり、 選考突破方法だけでなく、就業後にも役に立つ働き方を身に着けられます。
Webアプリの勉強方法⑵ ：参考書を利用した独学
参考書・参考サイトを使ってプログラミングを勉強する方法も有効なアプローチです。
独学で絶対してほしいこと
独学で絶対にしてほしいことは、目的にRuby on Railsでのアプリ開発を設定することです。
参考書を読んで、サンプルコードを打つだけでは絶対に勉強になりません。アプリを作りましょう。絶対。
オススメの目的となるアプリ作成は下の2つです。
上の二つを作って成果物としてフリーランスの案件も転職のアピールにも使うことができます。
以下で紹介する参考書を使いながら、簡易的なアプリをどんどん開発してみましょう。
そして、基礎としてRuby on Railsのチュートリアルはやることをオススメします。
重要な知識が盛りだくさんなので、何かでつまづいたり、わからなくなったらチュートリアルに戻ると良いです。
それでは筆者・友人が読んだ参考書の中でためになった、Webエンジニアになりたい人向けの参考書を勉強のステップ順で厳選・紹介します。
まずはHTML+CSS
1冊ですべて身につくHTML&CSSとWebデザイン入門講座
圧倒的に人気の書籍ですが、筆者からも本当にオススメしたい１冊ですね。
とにかく綺麗にまとめられていてわかりやすい。
HTMLとCSSの基本はこの１冊で基礎は完璧と言えるほど体系的にまとめてられています。
HTML&CSSはWebのフロント（みんながみているページのデザイン・構成）を作ることができるプログラミング言語です。
変化が目に見えること ＋ 装飾が楽しいこと でプログラミング言語に苦手意識がある人にオススメしています。
スラスラわかるHTML&CSSのきほん 第2版
Webページのレスポンシブに関する基礎知識を体系的に勉強できる良書です。
レスポンシブとは、PCやスマホといった画面サイズの異なる端末からでも整ったWebページを見せるための仕組みです。
色々な大きさの画面でみる時代ならではの必要な知識です。
また、Webページを作成してからサイトを公開するまでの手順も説明してくれていることがポイント高いですね。
Javascript
確かな力が身につくJavaScript「超」入門 第2版
Javascriptを豊富なサンプルで分かりにくい部分まで丁寧に解説された良書です。
JavascriptとはWebページに動きをつけたり、必要なデータを扱ったりとWebページを作り込んでいくために欠かせないプログラミング言語です。
この本を利用して多くのサンプルを模写することが、Javascriptを学ぶ最高の方法だと思います。
これはスポーツでもサラリーマンでも同じことですが、上手なコードを真似する経験の積み上げがプログラミングスキルを上達させます。
Javascriptで挫折経験のある人にもおすすめです。知識だけでなく現場で即使える実践力を手で身につけましょう。
Ruby on Rails（チュートリアルで十分かも）
Ruby on Railsについても好きな参考書を載せておきますが、Ruby on Railsのチュートリアルで十分だと思っています。
Docker
dockerとはサーバを立てずに簡単に開発ができる環境（コンテナと言います）を構築するツールです。
macやwindowsのPCにdockerのコンテナを作理、その中でデータベースやサーバなど必要なものを詰め込んでいきます。
つまり、そのコンテナのなかで完結するのでとても管理しやすく、もし失敗しても壊して作り直すだけで良いんですね！
dockerが身につけば、アプリもコンテナの中で開発していきます。
（ローカルPCでアプリ開発ができるようになったらで良いです）
docker 入門をまず読んで必要なら下の参考書で補いましょう。
環境開発の参考記事も載せておきますね
ためになる参考書はこの二つです。
まとめ
プログラミングスクール、参考書とどちらも定番の勉強方法で、人によって金銭的面でも時間的面でも適した勉強方法が変わります。
今では、情報が溢れているのでWebアプリ開発についての勉強方法について改めてしっかりとまとめました。
Webアプリ開発をしたい方の一助になれば幸いです。