プログラミング

文系の大学生が独学でウェブ開発を覚えるならどの順で勉強すればいいか

独学でITエンジニアを目指すならこの3つは勉強しておこう』という話を書いた後、経営学部に通っているという大学生の方からコメントを頂きました。

QUTの大学院にてITの専攻にいこうかと考えられていたそうで、”大学卒業までに学んだ方がいいITに関する知識”について知りたいとのことで、

つきたい職種に関しましては、個人的にスマホゲームの開発に関われると嬉しなと思いつつ、エンジニアとしての仕事内容がいまいちわかっていないためかウェブの開発にも少し興味があり欲張りな感じになっています。
もしよろしければ、ウェブ開発の分野についてアドバイスを頂けると嬉しいです。

これまで貰ったコメントやメールから察するに、どうやらこのブログを読んでくれる人の中には(以前の私のように)『文系だけどITに転向したい人』が多いみたいなので、今日は文系の大学生が独学でウェブ開発を覚えるならどの順で勉強すればいいかについて詳しく書きました。

タイトルに『文系の大学生』とありますが、

  • プログラミングをゼロから覚えたいけど
  • (「大学へ通わないといけない」みたいな)時間の制約があって
  • 大金払ってオンラインのプログラミングスクールに通えない

みたいな状況にいる人も対象です。

『読むのがめんどくせーよ』という方へ

あなたのために記事の内容を図にしました。

前半

プログラミング・ウェブ開発独学マップ1

後半

プログラミング・ウェブ開発独学マップ2

1点だけ捕捉。この記事を書いた目的はあくまで独学でウェブ開発を覚えるならどの順で何をすべきかを示すだけで、別に『これ全部自分で勉強しないといけないよ』とかそういったつもりはありません。(実際、私もウェブ開発者として働き始めたときは上記のステップ2までしか勉強したことがありませんでした)

現実的に言って、これ全部を一人で勉強できる人はほとんどいないと思いますし、全部独学で覚えるのは(安上がりですけど)必ずしも最良の選択肢だとは思いません。大抵の人は学校(あるいは最近だとオンラインのプログラミング教室)で講師なりからコードに対してフィードバックをもらいつつプログラミングを覚え、学校(あるいはインターン先)で開発プロジェクトをこなし、それから就職先を探すことになるでしょう。

が、そういった学校へ通う前に、一番基礎的な部分だけでも(教科書を買うなりして)自分で覚えた方がお財布に優しいのでお勧めです。私はオーストラリアの大学院でITの勉強をしたのですが、当時を振り返ると

『正直、あの講義にあんだけのお金を払ったのはもったいなかったな』

としばしば感じてしまいます。オーストラリアの学費ってめちゃ高いんですよ。オーストラリアの留学エージェントの皆さん、またこの話をしてごめんなさい。

なので、ウェブの世界に足を突っ込んでみようと言う方にはとりあえずステップ1だけでも挑戦される事をおすすめしたいです。かかる費用はせいぜいプログラミングの教科書1〜2冊分程度(3,000〜6,000円?)ですので、『やっぱりプログラミング自分に合わないな〜』と後で思っても経済的な損失はそれほど大きくありません。専門学校や大学に何十万、何百万も突っ込むことに比べれば。

以下、各ステップの詳細。

ステップ1:まずは簡単なウェブサイトを自分のPCで走らせてみよう

まずは本やネット上でチュートリアルを見つけて、それに従って簡単なウェブサイトを作ってみましょう。

HTML、CSS、Javascript(できればjQueryも)、データベース、サーバーサイド言語×1の基礎を学べる教材を見つけて、それ通りに学習できたら理想です。もし見つからなかったら2つ以上の教材を順にこなす形でも大丈夫です。

(私は大学院生時代にDummiesが出したHTML、CSS、JavaScript、PHP、MySQLの基礎をカバーした本を見つけ、学期の合間にそれを使って勉強しました)

ステップ1の目的はフロントエンドとバックエンドの基礎を覚えることです。この段階で『次のGoogleは俺が作る』みたいな野望はまだ持たなくて結構です。特にCSSの要素のポジションなんかは初心者の内はハマりやすいので、完璧主義を捨てて取り組む事をお勧めします。

サーバーサイドの言語にはPHP、Node.js、Python、Rubyといったスクリプト言語を勧めます。理由は…

  • コンパイルが要らない言語なのでサクサク開発できる
  • 大企業からスタートアップまでさまざまなタイプの職場で使われている

JavaやC#を選んでも全然問題ないのですが、ウェブ開発未経験者向けの教材でこれらの言語を取り扱っている教材は比較的少ないため挙げませんでした。(ずっとソフトウェアエンジニアとして働き続けるのなら、いずれはコンパイル型の言語に触ることになるかと思いますが)

ステップ2:ポジションに関係なく覚えるべき知識・技術を身につけよう

『ポジションに関係なく必要な知識・技術』とは…

プログラミング・ウェブ開発独学マップ3

これらはいずれも専門学校や大学(院)で情報工学を専攻すると習う機会がある分野です。

多分、この図を見て多くの人が『えー、こんなに覚えなきゃいけないことがあるのかよ』と感じてるのではないでしょうか。

ご心配なく。数だけ見ると多いですけど、一つ一つを覚えるのにはそれほど時間はかかりませんし、この段階ですべてを丸暗記するほど勉強する必要はありません。このステップで概要を押さえて、あとは実際にウェブサイト/アプリを作る際に復習しつつ理解を含めていくのを勧めます。教科書を読んでるだけではなく手を動かした方が記憶に残りますので。

(『一つ一つを覚えるのにはそれほど時間はかからない』と言いましたがデータ構造とアルゴリズムは例外です。これはIT・CSの大学生向けの本を買ってじっくり取り組む必要のある分野です。あなたが今後学校に通ってプログラミングを覚える予定なら、データ構造とアルゴリズムはその時までとっておくのもありです。)

ステップ3:フレームワーク+それに関連した技術を覚えよう

プログラミング・ウェブ開発独学マップ2

このステップの最終目的はバックエンドかフロントエンドのフレームワークを一つ使えるようになることです。ここまで終わらせることができたなら、あなたは…

  • HTMLやCSSといったウェブ開発の基礎がわかり
  • (ウェブ開発に関連する)ネットワークやソフトウェア工学の知識もあり
  • バックエンドかフロントエンドのフレームワークを一つ使いこなせるようになっている

はずです。

もちろんバックエンドとフロントエンドの両方に挑戦されてもいいのですが、まずはどちらか一方を終わらせる事を勧めます。

バックエンドの場合

バックエンドを選ぶのでしたら、フレームワークを覚え始める前にMVCパターンについて理解しましょう。MVCパターンとは

MVCModel View Controller モデル・ビュー・コントローラ)は、ユーザーインタフェースをもつアプリケーションソフトウェアを実装するためのデザインパターンである。

アプリケーションソフトウェアの内部データを、ユーザーが直接参照・編集する情報から分離する。そのためにアプリケーションソフトウェアを以下の3つの部分に分割する。

  1. model: アプリケーションデータ、ビジネスルール、ロジック、関数
  2. view: グラフや図などの任意の情報表現
  3. controller: 入力を受け取りmodelとviewへの命令に変換する

(自分で説明するのが面倒なのでWikipediaから引用してきました)

バックエンド開発者がMVCを知っておかないといけない主な理由は…

  • MVCに従ってクラスや関数を書くことで、どのファイルにどんな情報があるかがわかりやすいから
  • アプリをMとVとCに分割することで、アプリを疎結合(loosely-coupled)な状態にしやすくなるから(結果、コードを更新したりテストを書いたりするのが楽になり、複数の開発者で開発しやすくなる)

MVCの概念が頭に入ったら、あなたがステップ1で覚えたサーバーサイド言語に関連したパッケージ管理ツールについて知りましょう。具体例を出すと…

  • PHP→composer
  • Node.js→npm/yarn
  • Python→pip
  • Ruby→gems

そして次はいよいよフレームワークの習得です。方法は…

  1. まずは参考書あるいはチュートリアルをネットで見つけて、一通り基礎を覚える
  2. 模擬サイトを作る

ここで付け加えておきたいのが、教材(参考書など)に書いてある事を丸暗記しようとせず、基礎を一通り押えたらすぐに『模擬サイトを作る』を実践することです。

理由は…

  • 情報のインプットを行う時よりもアウトプットを行う時の方が、人の脳は物事をよく覚えてくれるから。(脳科学者でもない私がこんなこと言っても説得力無いでしょうから、この話の根拠が気になる方は『脳 記憶 アウトプット』みたいなキーワードを使い、勝手にネットでお調べください)
  • フレームワークの使い方を丸暗記しなくても、公式ドキュメントが読めればすぐに使い方を確認できるから(英語が苦手な方は…リーディングだけでもいいので英語を勉強しましょう)

上述の言語に関連するフレームワークの中で代表的なものは…

  • PHP→Laravel
  • Node.js→Express
  • Python→Django
  • Ruby→Rails

そしてあなたが選んだフレームワークでテストまで書けるようになれば、バックエンド開発者として働きだす為の予備知識・技術は充分身についています。後はさっさと現場で揉まれましょう。

フロントエンドの場合

フロントエンドの場合も、最終目的地はモダンなフレームワークを一つ覚えることです。

が、フレームワークの習得を始める前にまずはnpm・Yarnについて覚えましょう。これらはJavaScriptのパッケージ管理ツールで、フロントエンド開発で使うJavaScriptのライブラリ・モジュールのインストールや更新に使う道具です。

npmとYarnについて覚えたら、次にお勧めしたいのはCSS、Bootstrap(最も人気のCSSフレームワーク)、SASS(変数や括弧をつかって、CSSをよりプログラミング言語に近い形で使うための言語)について覚えることです。

『CSSはもうステップ1でやったじゃん』と思っている方もいるかと思いますが、あれはあくまで基礎を覚えるのが目的です。フロントエンド開発者を目指すなら、ここで復習を兼ねてまだ使ったことのないプロパティについて練習しましょう。

(具体的に何を覚えるべきかを書くと記事が長くなりすぎるのでここでは割愛)

それが終わったところでようやくフレームワークの習得が始まります。フロントエンド開発で使うフレームワークの中で代表的なものはReact、Vue、Angularです。

で、どれが一番いいのかって?私はReactしか使ったことがないので客観的にどれが一番使いやすいかは知りませんが、これら3つのダウンロード数の比較ならnpmtrends.comで調べられます。

React, Vue, Angular、需要を比較。どれが一番人気?

(青がAngular、オレンジがReact、緑がVueです。Reactが他を引き離して圧勝してますね。)

最後に…

記事の中でも既に述べましたが、プログラミング未経験者がこれらを独学で全部やるのはかなりキツいですし、全部終わらせなくても一応ウェブ開発者として仕事を見つけることは可能です。あくまで『どの順で勉強すべきか』が話の趣旨だということをお忘れなく。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください