【300時間でやりきる!】Webエンジニアになるまでに学習すべきこと全部まとめました-サーバーサイド編

この記事ではプログラミングを全く知らない状態から「ある程度読める・ちょっと書ける」状態になることを目指します。

 

前回のフロントエンド編ではHTML/CSSからJavaScriptのフレームワークのReact.jsを使ったコンポーネント設計までを解説しました。そして第三弾の今回はサーバーサイドの言語とフレームワークのRubyとRuby on Railsを扱います。Rubyの他にもPHPやPythonなどもありますが、日本で初心者から学ぶのであればRubyが一番だと思っています。フレームワークに関しては、Ruby on Railsはすこしハードルが高いという意見もあります。確かにSinatraというフレームワークのほうが簡素で、とっつきやすいと思います。ですが、初めからハードル高くてもRuby on Railsからはじめて、Railsチュートリアルを2周する方が効率的に習得できると思っています。

 

さて、おさらいとして、このシリーズ、記事でお話しすることは以下の通りです。

 

話すこと
  • Webエンジニア(フロント、サーバー)になるためのステップ
  • どんなステップを踏めばいいのか
  • 各ステップにおいてなにをすればいいのか、どんな本を読めばいいのか
  • 独学において注意すべきこと、大事なことはなにか
  • 振り返って出来る/出来ない のチェックリスト

 

逆にこの記事では詳しく話さないことは以下のとおりです。

話さないこと
  • 細かいプログラミング言語、技術、仕様の話
  • Web制作スキルに関すること、デザイン関連など
  • お金をとって教材を公開すること

 

そして、全行程として以下を解説します。基礎編、サーバー編はそれぞれをご参照ください。

  • PCの仕組み:20時間
  • Webの仕組み:30時間
  • データベース(DB):5時間
  • SQL(基礎):20時間
  • セキュリティ(基礎):10時間
  • HTML,CSS(基礎〜応用):30時間
  • JavaScript(基礎):30時間
  • git, github:5時間
  • jQuery(基礎):20時間
  • React.js(基礎〜実践):30時間
  • Ruby(基礎):20時間
  • Ruby on Rails(基礎):50時間
  • アルゴリズム(基礎):10時間
  • エンジニアの仕事、大事なこと:1時間
  • かんたんに何か作って公開してみる:20時間

 

もしかしたら既に学習をしていたり、仕事をされている方にとっては当たり前!というところもあるかもしれません。そういう方は各ステップを飛ばしていただいて構いません。

 

サーバーサイド学習にあたって大事なこと

this-is-point

学習に入る前にサーバーサイド学習にあたって大事なことをお話しします。

 

それはアプリケーションを構成する全体像を理解しながら学習を進めるべき、ということです。フロント以上にサーバーサイドの勉強には関連する技術がたくさんあります。以下はRubyist Magazinからの抜粋ですが、黄色い枠のところが主にサーバーサイドが絡んでくる分野です。

引用元:RubyとRailsの学習ガイド2019年版

 

インフラの技術も含まれますが、サーバーサイドとあわせて学習しておくと、実務で大変役立ちます。全てをはじめから学習しようとするとパンクしてしまうので、今回はあくまでRuby と Ruby on Railsだけですが、インフラの技術にどんなものがあって、それとアプリケーションがどのようにつながるのか?程度は知っておきましょう。

 

ちなみに、DBやHTTPなどの通信周りは第一弾の基礎編でおさらいしました。これらの前提知識がないとサーバーサイドの勉強はスカスカの基礎のうえに知識を詰め込むようなものです。このあたりに不安がある方は基礎編をご参照のうえ、基礎を勉強しましょう!

【300時間でやりきる!】Webエンジニアになるまでに学習すべきこと全部まとめました-基礎編

2019年9月28日

 

Ruby(基礎)

Rubyは日本発のサーバーサイドのプログラミング言語で、日本でコミュニティが活発で、Web上にはたくさんの日本語の情報があります。この「日本語で情報がたくさんある」ということは意外と大事です。例えばわからないことがあったときにググっても外国語の記事ばかりだと、読むのに時間がかかりますよね。以前、AngularというJavaScriptのフレームワークを触っていた時に、マイナーなバグを踏んで探せど情報が少なく、また英語ばかりで大変でした…。Rubyの場合、たいていの問題に対応した日本語の情報があります。初心者でも学習しやすいといえます。

 

ちなみにサーバーサイドの言語としてはRuby意外にJavaやPHP、Pythonなどが挙げられます。これらをはじめに勉強するのもアリだと思います!ただ、勉強するのであればその言語を使ってアプリケーションの構築まで一気通貫で学ぶべきです。言語の文法を覚えたところで、現場で使えなければ意味がありません!よくある初心者の失敗として、「たくさんプログラミング言語覚えればいい!」という考えがありますが、間違いです。最初は現場で使える状態のプログラミング言語が最低一つあれば十分です。

 

Rubyを今回は例にとってお話しします。まず文法に触れるのにはやっぱりProgateで書きながら覚えましょう。

入門Ruby 直感的に理解しやすく、高い生産性を誇る サーバーサイド言語 – Progate

 

あわせてRubyの基礎を網羅的に解説している以下の本どちらか1冊で十分なので読んでおきましょう。Progateで扱わない書き方を解説しています。

 

Rubyを手元で手軽に実行するために IRB(Interactive Ruby) を使えるようにしておきましょう。IRBは手元のPCでRubyを実行することができるプログラムのことです。本を片手に手元の環境で実際にRubyがどのように動くか?を試しましょう。

入門20分ではじめるRuby

 

ちなみに、Rubyの書き方で分からないところがあればRubyリファレンスを参照するようにしましょう。「Ruby {メソッド名}」などで検索すると、Qiitaなどの技術記事がたくさん出てくると思いますが、中には不正確なものもあります。プログラミングに関しては、基本的にリファレンスに書いてあることが正しいです。たまに情報が古かったり、曖昧だったりしますが…。早いうちからリファレンスを参照するクセをつけておきましょう。

参照Ruby リファレンス

 

このセクションの目標

IRBを使いながら、Rubyの文法をおおかた理解し、読めるようになる。

 

Ruby on Rails(基礎)

さて、本シリーズ最大のポイントです…!正直これまでは基礎文法の勉強だったり、手軽に環境構築して動かしたりできたと思います。しかし、Ruby on Railsは学習範囲が広範にわたる、かつ理解に難しい内容もたくさんあります。なので、しっかり基礎を抑えつつ、一つ一つ理解していきましょう!

 

そもそもRuby on Railsとは?については以下の記事がわかりやすいです。わからない方は学習に入る前にご一読ください!

参照Ruby on Railsとは?初心者でもRubyとの違いや特徴がわかる!

 

さて、早速Ruby on Rails(以下、Rails)の基礎の学習です。プログラミング言語の基礎勉強と同じでRailsにも文法や書き方があります。環境構築の前に、Railsってこんな感じなのかー、という雰囲気をつかみましょう。基本的にはRubyが書ければ大丈夫ですが、Rails独自のメソッドもあるので、Ruby + Rails両方かけるようになる必要があります。

入門Ruby on Rails5 Webサービス開発に必須の Rubyフレームワーク – Progate

 

Railsの基礎を勉強したら、早速実践に入りましょう。Railsアプリケーションがどのように作られるのか?を実際に作りながら学んだほうが効率的です。Railsチュートリアルは環境構築も不要なAWSというクラウド上でアプリケーションを作っていきます。正直中盤からいきなり難易度があがるので、解説記事をググりながら進めましょう。もしわからないところがあれば、Railsの本を参考にしながら、基礎知識を固めつつチュートリアルを進めましょう。

実践Railsチュートリアル

 

Railsチュートリアルは最初読むだけでも構いません。全体を通してどんなことをするのか?を理解してから実際にアプリケーションを作り初めてもいいと思います。その場合でも実践をやはり2周はしましょう。同じことでも繰り返すことで知識の定着につながります!さらに、書いたコードは自分のGithubにリポジトリを作成してあげておきましょう。あとで振り返りにもなりますし、他の人に自分の勉強範囲を公開するのに役立ちます。

 

あわせて、Railsの設計についても勉強しましょう。Railsがかけるようになっても、実際にアプリケーション構築に際して必要な設計の知識は別で必要になります。以下の本が参考になります。どちらか一冊で十分だと思いますが、チュートリアルのお供に読むと体系的にRailsアプリケーションの構築の理解に役立ちます。

入門現場で使える Ruby on Rails 5速習実践ガイド

入門Ruby on Rails 5アプリケーションプログラミング

 

さらに、Railsのさらなる理解のためには、よく使われるRuby Gemsにも触れておきましょう。gemと呼ばれて使われますが、つまりはよく使われる機能を便利に、簡潔に使えるようにしてくれるツールのことです。ちなみにRails自体もGemsのなかで配布されています。Ruby GemsはRailsチュートリアルでもいくつか触れられていますが、他にもRspecやKaminari、ransack、omniauthなども基本的に使い方をさわっておくといいでしょう。

 

最後にRailsで重要なことが、テストです。RailsチュートリアルでもMinitestが使われますが、しっかりとテストをかけるようになっておきましょう。テストはそのアプリケーションの挙動、仕様を担保するために必要なものです。「こう動く」ということを人がチェックするのではどうしても抜け漏れがあります。そこをプログラムが保証してくれれば、毎回人がチェックしなくても「動くアプリケーションであること」を確認できますよね。チームで作る場合はもちろん、個人でもテストを書くクセをつけましょう。ちなみに、JavaScriptでもテストはあったほうがよく、jestがよく使われています。

 

アルゴリズム(基礎)

続いてはプログラミング言語、フレームワークとは離れてアルゴリズムの基礎についてです。アルゴリズムとは簡単に言えば「計算方法」のことです。例えばデータベースからデータ一つとってくるのでもたくさんの方法があります。例えばその方法を一つしか知らないのと、たくさんの計算方法のうちから最適なものを一つ採用するので大きな違いです。どんなアルゴリズムがあって、書いているコードではどんなアルゴリズムが使われているのか?をおおまかにでも理解できると、より深くプログラミング、技術を使うことができます。

 

最近では競技プログラミングも人気で、数学的な問題をプログラミングを使って効率的に計算する機会が増えました。せっかくなのでプログラミングを勉強しながらアルゴリズムの学習をしてみましょう!

 

RubyやJavaScriptを使って数学パズルをときながらアルゴリズムの基礎に触れるのに最適な一冊です。プログラミングの勉強にもなるのでおすすめです。

入門プログラマ脳を鍛える数学パズル

 

より詳しいアルゴリズムの学習は以下のサイトがおすすめです。数学が苦手だったひとでも理解しやすく解説してくれます。

入門一週間で身につくアルゴリズムとデータ構造

 

最後は競技プログラミングの紹介です。日本ではAtCoderやCodeforcesが有名です。無料で始められて過去問をベースに勉強もしやすいです。数学ができるに越したことはないですが、最初は数学パズルのようなものなので基本的な算数ができればなんとかなります!雰囲気はこちらの記事でおおかたつかめるので、気になった人はぜひやってみてください。

入門競プロはいいぞ

 

エンジニアの仕事、大事なこと

business-image

プログラミング学習とは少し脱線しますが、エンジニアの仕事において大事だと思うことを少しお話しさせていただきます。もしプログラミング学習をエンジニアの仕事のためにされているのであれば、参考にしつつ学習を進めてください!

 

ポイントは3つです。一つ目は、自分がどんな仕事をしたいのか?を明確にしてそれに対してどんなことをすればいいのか、を具体化しましょう。例えば、ざっくりとエンジニアという仕事といってもたくさんの種類があります。私はWebサービスを開発していますが、他にもスマホアプリやWebサイト制作、大規模アプリケーションなどにもエンジニアがあります。そしてそれぞれにおいてフロントエンド、サーバーサイド、インフラ、デザインなどに分かれている場合もあります。「なんでもいいからエンジニア!」というのでもいいですが、はじめに志望先を絞ってから学習した方が圧倒的に効率的です。もし汎用的にプログラミング学習をするのであれば、この記事シリーズはそれぞれの大事なポイントをかいつまんでいるので、こちらを通しでやっていただくのがいいかと思います。

 

二つ目は、就職活動にも関係しますが、あなたのスキル、できることを明確にしましょう。そのためにポートフォリオだったり、やってきたこと、わかることを公開することをオススメします。このあと少しお話ししますが、Github PagesやHerokuなら簡単に無料で静的Webサイトを公開できます。学習のなかででてきた課題などを実際にこれらのホスティングサービスを使って公開して、具体的にあなたが何ができるのか?を明確にしておくと、就職活動においては企業側があなたを判断しやすくなります。結果的にそれが足りない、と言われるかもしれません。そうであれば具体的に足りなかったことをさらに突き詰めて学習、アウトプットすればいいだけです。スキル、できることを明確にしないと正確なフィードバックも得られません。あなた自信を明確に表す何かを作りましょう!

 

最後は、エンジニアという仕事は人柄がとても大事ということです。よくエンジニアは人と関わらないからコミュニケーション能力が低くても良いと言われます。しかし、エンジニアは他の仕事と同程度にコミュニケーション能力が重要です。仕様やコード、製品に関して時には人とぶつかりながらも、いいものを作っていく仕事です。伝える能力、聞く能力、仕事を進める能力すべてのベースにあるのはコミュニケーション能力だと思います。技術はもちろん大事ですが、コミュニケーションをおろそかにせず、しっかりとチームでいいものを作れるように努力しましょう。特に最初のうちは素直に色々と吸収して行動しまくることが重要だと思っています。

かんたんに何か作って公開してみる

 

かんたんに何か作って公開してみる

study-image

シリーズ最後は、何か作って公開するというざっくりとしたテーマです。ですが、これまでで一番重要かもしれません。なぜなら、いくら学習してもそれを使えるようにしないとただの知識で終わってしまうからです。いくらいいデインでも、いかに効率的なクエリでもそれを使ってくれる人がいて初めて意味をもちます。

 

プログラミング初学者の場合、エンジニア就活においてポートフォリオとして活用するためになにかを作って公開できるようになっておくべきです。面接の場で実際のアプリケーションを触ってもらうこともたまにありますし、書類選考の段階でデモURLをのせておけば好印象を持たれます。

 

公開するといっても特に難しい知識を覚える必要はありません。まずは最低限の方法で構いません。方法はいくつかありますが、オススメはHerokuです。HerokuとはWeb上で使えるPaaSと呼ばれるアプリケーションサービスのひとつで、これを使うことでアプリケーションを簡単に公開することができます。通常アプリケーションの公開にあたっては、インフラ、サーバー、ドメインなどを一つずつ設定する必要があります。また、ホスティングにあたっても費用がかかっていました。しかし、Herokuを使えばそれらを無料でしかも非常に手軽に行うことができます。

 

詳しいデプロイの方法は以下の記事を参考に進めてみましょう。

【HEROKUとは】これを読めばOK!デプロイの仕方まで徹底解説

 

Herokuで公開するアプリケーションとしては何を作るべきでしょうか?もしWebエンジニアとして就活をするのであれば、以下の点を抑えたアプリケーションを作れるようになりましょう。

  • CRUD(作成、読み取り、更新、削除)を備えたもの
  • ライブラリを使いながらでも使いやすいUIを意識したもの
  • 掲示板やSNSなどありきたりなものではなく、自分らしさをアピールできるもの
  • 作成の過程にあたってはGithubでPR(Pull Request)をわけながら一つものを作る
  • 環境構築方法、アプリケーションの使い方、利用方法をREADMEに書いておく
  • レスポンシブデザイン
  • できれば独自ドメイン
  • 最低限のセキュリティを意識する

 

おそらくここまでの学習を終えた方なら大方は理解できるはずです。分からないところがあれば、その箇所は改めて勉強しましょう。この他にも抑えておくと評価されるポイントはいくつかあるのですが、最低限↑ができれば独学でも十分学習している、とみなされます。むしろスクール出身者でもこれらを意識してすべてできていない方がほとんどだと思います。

 

特に大事なのは経過を見せることです。スクールでも卒業課題などでポートフォリオを作ったりします。そしてそれを就活で見せても響かなかったりするわけです。何故でしょうか?それは、教えられて出来るのは当たり前で、過程としてどんなことを意識できているのか?一人になったときにどこまでできるのか?を企業側は見たいからです。逆に言えばそれを抑えておけば、独学でも十分に評価されます。

 

まとめ

これでサーバーサイド編は以上です。ポイントをかいつまんで、学習すべきステップを解説してきました。実際にこれらを全て学習を終えたから大丈夫!というわけではなく、実際に「できる」ところまで落とし込まないといけません。ただし、学校のテストとは違うので何も見ずに出来るようになる必要はありません。ググりながらでもいいので、何かを作れるようになっておくことが初学者の一旦のゴールです。

 

ここまでお話しした内容に自信があれば、あとは実務の中で経験を積む方が成長スピードは早いと思います。完璧になってから就活する、という方がたまにいらっしゃいますが、あまりオススメしません。まずは早い段階から現場にでて、経験をつんだほうが学べることはたくさんあります。そこで失敗がたくさんあるかもしれませんが、早いうちに失敗しておけばその後の成長幅も大きくなります。

 

ぜひ、プログラミングを楽しんで、たくさんコードを書いていきましょう!エンジニアはとても楽しい仕事です。プログラミング学習、エンジニア就活で分からないことがあれば、いつでもご連絡ください。できる範囲でご相談に乗ります。

 

人気記事【2019年最新版】Twitterで評価の高いスクール5選

 

人気記事【未経験あり】いまWEBエンジニアに人気転職サイト4選