viewsこんにちは、株式会社Gizumoの大石です。「どうやったらWebエンジニアになれるの?」「学習方法がわからない...」とプログラミング学習に苦戦している未来の同志のためにこの記事を贈ります。いっても、あまり力んで書くとガッチガチのポジショントークみたいになってしまうので、受験勉強に悩んでいる高校生にざっくりとした受験対策を教える大学生ぐらいの温度感でお送りします。この記事を指標に充実した学習をすれば、駆け出しエンジニアとしてプログラミングの基礎を効率よく習得できるエントリーレベルの記事です。月額980円(ドットインストールの月額課金費用)+書籍代(必要な人のみ)WebエンジニアとはWebエンジニアは、皆さんが普段お使いのインターネットを通じて使う便利なWebサービスを開発することを仕事としています。Rails)でできています。Webエンジニアは大別するとフロントエンドエンジニアとバックエンドエンジニアに分かれます。フロントエンドエンジニアはユーザーに見える部分の開発をします。バックエンドエンジニアはサービスが自動で動く裏側の仕組みを開発しています。最初からどちらもできるエンジニアになることは難しいため、どちらからキャリアをスタートしたいか検討してみてくださいね!例えば「デザインがきれいなWebサイトや凝ったアニメーションの演出があるWebサイトを作ってみたい」という人はフロントエンドを志望してみるといいかもしれません。「ECサイトのようなユーザーに便利なサービスの開発に携わりたい」「将来的に自分のサービスを開発したい」という人はバックエンドを志望してみるといいと思います。下記はフロントエンド・バックエンドそれぞれでエンジニアとして仕事につくために習得しておきたい技術の一例です。難しそうな用語が並んでいてますね!でも全部わかっていてやったことがあるなら駆け出しエンジニアじゃないので心配しないでください。JavaScriptはフロントエンド・バックエンドどちらを志望するとしても共通で学習するものになります。HTMLHTMLはWebページに表示する文字(タイトル、リスト、リンク)や画像などを定義して、ページの骨組みをつくるものです。現在はHTML5というバージョンが使われています。下記はHTMLの一例です。<div>はじめてのマークアップ</div></body></html>CSSCSSは、HTMLで作ったページの骨組みに対して装飾をしていくものです。大きさ・太さ・色などを自分の好きなようにデザインすることができます。現在はCSS3というバージョンが使われています。下記はCSSの一例です。*/}※HTMLとCSSはマークアップ言語と呼ばれるもので、プログラミング言語ではありません。HTMLとCSSは条件によって処理を分岐させたり、処理を繰り返すといった「コンピューターへの命令」ができないのです。(今はふーん、そうなんだぐらいでOK)JavaScriptJavaScriptはブラウザを操作することができるプログラミング言語です。JavaScript自体はいろいろなことができるのですが、わかりやすい例としてはHTML/CSSでできたWebサイトに動きをつけることができます。数秒ごとに画像が変わるスライド、クリックするとページの1番上に戻るボタンなどWebサイトを華やかに動かしてくれます。短いですが以下の<script></script>の間に書かれている部分がJavaScriptです。World!"と書かれた小さいウィンドウが表示されます。World!');</script></body></html>※JavaとJavaScriptとまったく別の言語なので、JavaScriptをJavaと呼ばないよう注意してください。JavaScriptはJSと略して書くことが多いので「ジェイエス」と呼ぶ人が多いです。【HTML&CSSの学習ステップ】それでは学習に入っていきましょう。エディターと呼ばれるプログラミングを入力するためのツールを使ってウェブサイトを作ったり、JavaScriptを使って動くミニアプリを作りながら学習していくところからスタートします。この記事では3分動画を見ることで、はじめての人でも無理なくプログラミングの学習ができる『ドットインストール』というプログラミング学習サービスをご紹介します。ドットインストールのインストラクションに身を任せてドンドン学習していきましょう!ドットインストールの「ウェブサイトを作れるようになろう」のレッスンパックを下記の順番に行い、Firebaseを使って作成したサイトを公開してみてください。本格的なプログラミング言語の学習になります。基礎を理解するようにしてみてください。ドットインストールで以下の順番に学習していき、JavaScriptを使ってミニアプリを3つ作成してみてください。(全18回)プログラミング言語を使ってミニアプリを作成した経験が身につきましたね!プログラミングで「モノ」を作ってみる楽しさは感じられましたか?理解が難しいと感じた部分があればもう一周してみましょう。以上で共通の学習内容は終わりです。フロントエンド・バックエンドそれぞれの学習手順の紹介に入っていきます。フロントエンド志望の方フロントエンド志望の方は上記のJavaScriptのミニアプリを作成するレッスンをすべて受講してください。その後、仕事で使うツールとしてjQuery、Vue.jsを学習してみましょう。jQueryjQuery(ジェイクエリー)は、JavaScriptを簡単に扱うことができるようにするライブラリ(よく使われる機能やプログラミングの部品を集めてひとまとめにしたもの)です。JavaScriptでプログラミングしようとするとたくさんコードを書かないといけないところを、jQueryを使うと短く書けたりするようになります。document.getElementsByClassName('test-list');jQueryで書くと以下のように書くことができます。$('.test-list');簡単な例ですが、短くなりましたね。jQueryにはたくさんのプラグイン(さくっと使えて機能が拡張できる便利なプログラム)が容易されていて、コピペして使うだけでも非常に豊かなアニメーション表現やUIの実装が可能になります。Vue.jsVue.js(ビュージェイエス)はJavaScriptフレームワークのひとつで、SPAを開発する時に主に用いられます。SPAを開発できるJavaScriptフレームワークはいくつかありますが、本記事ではVue.jsを紹介します。Application」の略で、1ページでコンテンツの切り替えができるWebアプリケーションのことを指します。通常のWebアプリケーションでは、欲しい情報にアクセスするためにリンクをクリックしてページ遷移する必要がありました。SPAではページ遷移を行わずにひとつのページで欲しい情報を表示するなどのコンテンツの切り替えができるため、サクサク動いて使い勝手の良いユーザー体験(UX)をもたらすことが可能となります。・Vue.jsで作成されたサイト集Vue.jsは、シンプルで学習がしやすいこととSPA開発の普及から人気急上昇中の技術となっています。【jQuery・Vue.jsの学習ステップ】ドットインストールを使って下記の順番でレッスンを受講してください。(レッスンが見つからない場合はサイト内検索してね)JavaScriptのミニアプリで作っていないものをすべて作る。高度なWebアプリケーションを作るためにはバックエンドのプログラミング言語を習得する必要があります。Webアプリケーションを作成するための言語はいくつかありますが、本記事ではPHPを紹介します。学習ステップではPHPとともに、現在最も広く使われているデータベースのMySQL、PHPフレームワークのLaravelを学習する手順にしています。ここからTerminal(Windowsの方はPowerShell)という黒い画面にコマンド打ち込んでで操作をしていくことが増えます。抵抗感を持たずに取り組みましょう!エラーが出た場合は慌てずに入力内容が間違っていないかを確認してみてね:)PHPPHP(ピーエイチピー)は、現在Webのバックエンド開発で最も利用されているプログラミング言語です。みなさんが一度は使ったことがあるであろうメルカリ、Yahoo!、ZOZOTOWNなどはPHPによって作られています。Web業界では伝統的にECサイトやソーシャルゲーム開発によくPHPが開発言語として用いられています。フロントエンドの学習で紹介したJavaScriptはブラウザ側で動作するのに対して、バックエンドの言語はサーバー側で動いています。JavaScriptはユーザーから動いているのが見えるのに対して、PHPはどのように動いているかは見れません。World!";また、PHPの大きな特徴として以下のようにHTML内にスクリプトを埋め込むことができます。</body></html>MySQLMySQL(マイエスキューエル)は、現在世界で最も広く使われるデータベースです。情報が整理されてデータベース内に入っているわけですね。私たちユーザーがこういった商品はないかと検索すると、Amazon側が検索にマッチする商品の情報をデータベースから選んできて私たちに見せてくれるといったことがプログラミングされています。データベースはSQLと呼ばれる言語を使って操作することができます。LaravelLaravel(ララベル)は、現在最も勢いのあるPHPフレームワークです。Laravelを使うと、掲示板のような簡単なWebアプリケーションであればほぼ自動生成することができます。自由度が高くてカスタマイズがしやいことで人気を博しています。フレームワークとは:フレームワークは、頻繁に使われる基本的な機能がまとめて用意されているプログラミングをするための枠組みです。PHPのみで高機能な機能を開発することは非常に手間がかかりますが、フレームワークを使うと少ないコード量で高機能なWebアプリケーションの開発が可能になります。現在のWebサービスのほとんどがフレームワークを使って開発されています。【PHPの学習ステップ】バックエンドの学習ではサーバー環境を構築する必要があります。ドットインストール内の「サーバー環境を作れるようになろう」のレッスンパックから下記を学習して開発環境を構築できるようになってからPHPの学習に進んでみてください。(「いちばんやさしい教本」)その他推薦図書プログラミング言語の学習とは別に推薦図書を3冊ほど挙げておきます。どれも一般的に良書と呼ばれているものです。内容は難しく感じるものが多いかもしれませんが一読の価値があります。関心のあるものから手に取ってみてください。脆弱性が生まれる原理と対策の実践プログラミング以外で身につけたほうがいいことブラインドタッチ(キーボードを見ずにタイピングすること)を身に着けておきましょう。必要というわけではありませんが、できるとタイピングスピードが劇的に早くなります。最初は意識しながらタイピングすることになりますが、慣れると無意識で高速に入力できます。キーボードの「F」と「J」にくぼみがついています。」に右手の人差し指を置き、左手中指から小指は「D」「S」「A」に置き、右手の中指から小指は「K」「L」「;」にそれぞれ順に置きます。これがホームポジションといってブラインドタッチをするための手の位置になります。あとは入力する時にホームポジションから指を「ハ」の字型に動かすだけです。最初は手元見ながら入力して、慣れてきたら画面を見ながら入力していきましょう。Keyboard」(略称HHKB)というものがあります。このキーボードのシリーズには強者向けの「無刻印」モデルがあり、キーボードにアルファベットが記載されていないというものがあります!ブラインドタッチができる人用のストイックなキーボードです。打鍵感も気持ち良いので気になる人は家電量販店などで一度試し打ちしてみてね。エンジニアになるためにプログラミングスクールに通う必要はありますか?必須ではありません。独学でもエンジニアになることは可能です。昨今のプログラミングスクールは受講料が高騰しています。日本のエンジニアの総人口が増えることは喜ばしいことなのですが、パソコン1台でスタートできる手軽さがプログラミングの良いところです。初学者の方は大金を用意してスクールに通わなければエンジニアになれないという訳ではありません。プログラミングスクールに行くことを検討している方はリーズナブルな方法はないか再度検討してみてください。筆者は職業訓練校をオススメします。採用担当者として職業訓練校出身の方とお話する機会をいただきますが、言語の基礎知識を学び、ポートフォリオの作成指導を受けた基礎的な技術をお持ちの方にお会いできることが多く、実際に職業訓練校を卒業後に弊社でエンジニアになっているメンバーが何名もいます。HTML/CSSのよるコーディングやJavaScript、PHP、Rubyなどが学習できないか事前に調べてみてください。Javaが学べるところが多いと思いますが、Javaから学んだとしてもそれは遠回りになることではありません。下記は、良心的な受講料で、カリキュラム内容が濃く、レビューやサポートが手厚いと筆者が考えているスクールです。当該スクールの卒業生の方とお話した時の技術的な理解、ポートフォリオのクオリティ、カリキュラム内容、筆者周辺の方の評判など総合的にオススメしています。Webエンジニアはプログラミングがどれだけできるかが実力の証明なのでポートフォリオの開発やGitHubにソースコード載せることに時間を集中させることをオススメします。※ドットインストールさんは基礎的な学習内容をわかりやすく、コンパクトな時間に圧縮した優れた学習コンテンツをご提供されています。筆者も独学のスタートはドットインストールさんにお世話になりました。本記事の内容は弊社の研修内容ではありません。筆者から初学者の方向けのオススメ学習方法です。Gizumoという会社のCOOをやっています。「人の未来を創る」をビジョンに、プログラミング未経験・初中級者を対象としてエンジニア育成事業を行っています。エンジニア輩出実績多数。2018年3月に資金調達をしました。