こんにちは。もきおです。
IT系の専門学校を通わなかったけど、ITの分野に興味を持ちその中でWeb系のエンジニアに興味を持った方はたくさんいると思います。
自分もその一人です。
自分はIT系の授業を受けたこともなく、なおかつ全く別の業界で働いていて、ITに興味を持ち独学を進めてきました。
自分と同じような境遇でこれから初めてWeb系を勉強するためのロードマップを用意しました。この記事を通して挫折しにくく、効率的に勉学に励んでもらえたらと思っています。
Web系はまずフロントエンド、サーバーサイドと言う二つに分かれます。これらの意味を押さえてからロードマップをお伝えしていきます。
フロントエンドって何？
フロントエンドを簡略して説明します。
フロントエンドとは Webページの表面部分。Webページはどれも文字や画像が見やすくオシャレに並んでいますよね。まさしくそれがフロントエンドです。
このページの先頭をコピペしてきた文を用意しました。
僕ら人間から見るとこの文を見て『見出し』は「何からやればいい？Web系エンジニアになるための勉強の道のり」だとなんとなく判断できますよね。
そして『本文』が「こんにちは。〜」や「IT系の専門学校を〜」だということも理解できます。ただ、パソコンにとって『これが見出し』『これは本文』と理解できません。
これをパソコンに理解させることができるのです。それがマークアップ言語です。基本的にHTMLというマークアップ言語を用いると、ただの文に『これは見出し』『これは本文』と意味をつけることができます。
これで<h1>で挟んだ文は『見出し』 <p>で挟んだ文は『本文』だとパソコンが理解できるようになりました。
ではWebページに表示させてみます。
このようにWebページに表示させると この<h1>や<p>といった記号は表示されません。でもパソコンの中でそれぞれの文の意味を理解している状態になりました。
『見出し』と命令した文は『見出し』っぽく文字が大きくなっていますね！
さて次にCSSと呼ばれる。スタイルシート言語です。マークアップは意味付けでしたね。スタイルシート言語は配置やカラーなど見た目、雰囲気を操作できます。
試しに簡単なCSSを書いてみました。内容は
『h1の文字の大きさを150％にして、文字の色を茶色にする。背景色をカデットブルーにする。』
『pの内容を中央揃えにする。』
と言う意味です。では実際にWebページに表示させてみます。
見た目がすごく変わりました。『h1』と『p』が命令通りの内容に変更されているのがわかりますね！
他にもJavaScriptと言う表面上で動作するプログラミング言語がありますが今は割愛します。
このようにマークアップ言語による意味付け、そして意味付けたものを利用してスタイルシートで色や配置などを自由に作ることができる技術がフロントサイドです。
サーバーサイドって何？
続いてサーバーサイドについても簡略に説明していきます。
先ほど、フロントエンドはWebページの表面上の部分と表現しました。サーバーサイドは中身。言うならば『裏側』です。
例えばツイッターを見てみましょう。
先日立ち上げたばかりの自身のツイッターページです。ツイッターには投稿機能だったりいいねした数が表示されたり、コメント機能だったりがありますよね。
これらの機能はマークアップやスタイルシートでは表現することができません。
いいねの数を計算してデータとして保存しているのも投稿したら記事が増えるのも全てサーバーサイドと呼ばれるプログラミング言語によって成り立っているのです。
サーバーサイドのプログラミング言語は山ほどあります。主流はPHP、Ruby、Pythonなどですね。
それぞれの言語に長所と短所があります。なので勉強する際は慎重に選ぶ必要がありますね。
だいぶざっくりとしていましたが以上がサーバーサイドの簡略説明でした。
Webエンジニアへのロードマップ概要
これまででフロントエンドとサーバーサイドについて理解していただけたかと思います。
この二つを見比べて思った事はありませんか？
それはフロントエンドの方がわかりやすそう！と言う事です。
これはなぜか？フロントエンドは表面上のもの、つまりは目で見てわかるものだからです。
サーバーサイドでの例で挙げた『Twitterのいいね数』などはどこで計算されているのかよくわかりませんよね。
それにはサーバーサイドのプログラミング言語の知識に加えて、データベースなどの知識も必要になってきます。
フロントエンドは程々でいい。そしてすぐサーバーサイドへ移れという記事をよく見かけますが、その程々がどれほど勉強したらいいのかもよくわからないですね。
そこで僕はそこを具体的に目標設定していきます。
まずフロントエンド→サーバーサイドの流れで勉強するのは正しいと思います。いきなりサーバーサイドを勉強しても訳がわからず挫折してしまう可能性が高くなるからです。
ITの勉強は果てしないです。だから勉強を進めていく上で『努力』と『正しい進め方』が重要なんです。
Webエンジニアへのロードマップ(前編)
いよいよ本編です！
フロントエンドの学習目標は『Webクリエイター能力認定試験資格』の取得を目指しましょう！
この資格には２段階あって『スタンダード』と『エキスパート』があります。
スタンダードはWebサイト制作の基礎、HTMLの基礎、CSSの基礎。ページ作成の実践を学ぶことができます。
エキスパートではそれぞれの応用。そしてWebデザインを学ぶことができます。
エキスパートにはWebデザインの分野も入ってるので『ただ作れる人』ではなく『見やすいWebサイトを作れる人』になれますよ！
勉強方法としてはそれぞれ公式テキストが販売されています。それらを読んで勉強、実践すればそれだけで合格点を取ることは可能です。
自分の場合スタンダードの公式テキストを１ヶ月読んで資格取得。エキスパートの公式テキストを３週間ほど読んで資格取得しました。
お金を稼げるようになるまでに勉強を諦めてしまう人はたくさんいます。
でもこのような資格取得という具体的な目標。そして達成感が次なるやる気を引き立ててくれますよ！
フロントエンドの勉強はここで一区切りしていいと思います。次のサーバーサイドに勉強をシフトしていきましょう！
Webエンジニアへのロードマップ(後編)
ここでの最終目標は自作Webアプリケーションを作成する事です。
色んなサーバーサイドのプログラミング言語があると言いましたがここではPHPを取り上げて進めていきます。
おすすめしたい参考本があります。それは『気づけばプロ並みPHP改訂版 ゼロから作れる人になる！』です。
PHPを操作するにはpcに環境設定をしなければそもそも実践することさえできません。
この本ではpcの環境設定からPHPを使ったプログラム作成、データベースの基礎知識を学びながらショッピングサイトの開発をすることができるのです。
自分はこの参考本と併用でドットインストール(月額1000円ほど)を使って独学に励みました。
この本を学ぶだけでも自作Webアプリケーションを考えて作る事は可能です。
この本を終えてすぐ自作Webアプリケーションを作成するのもいいですし、PHPを深めるためにドットインストールの勉強を進めたり、もっと視野を広げて勉強を進めたい場合はWordPressや、SQL、JavaScriptなどの多面的な知識を深めていくといいでしょう。
まとめ
以上が僕がおすすめする効率的なWebエンジニアになるための勉強ロードマップでした。挫折せず継続してさらなるステップアップを目指しましょう！
コメント