プログラミングって実際何を勉強するの？初心者向けにプログラミング学習の全体像をまとめてみた。

プログラミングをこれから勉強する人に、プログラミング学習の全体感をわかりやすく提示する。

今回の記事の目的はこれです。

最近は、まわりの知り合いにもプログラミングに興味を持つ人が増え、プログラミング学習について質問されることも増えてきました。そして、IT関連のバックグラウンドがない友人からよく言われるのが「何をどこまで勉強すればいいのか、全体感がわからない」という質問。

私も実際に勉強する前は、具体的に何を勉強するのかいまいちイメージが持てなくて、とても不安に感じていました。ウェブ関連の知識が全くなかったので、イメージが湧かず、

「プログラミングを勉強するって、何をどの程度やればいいの？」

「これを学んだら、こういうことが出来るようになるよっていう、わかりやすい説明がどこかにないものか・・」

と思っていました。当時の自分は、「全体感が見えない＝学習のゴールが見えない」ことを不安に感じていて、プログラミングの勉強を始める際の、心理的なハードルになっていました。

そして、エンジニアとしてのスタートラインに立つために必要な一通りのことを学んでみて、改めて「全体感を把握しておくことの重要性」を認識しました。

例えば何かの製品を作るとき、最初に全体の設計図が見れた方が、安心感もあるし、効率的に作業を進められる気がしませんか？逆に、全体の設計図がない状態で、個別のパーツを作っていくのは、ゴールまでの距離が分からないレースに参加するような不安があります。。

今回の記事はボリュームもあるし、初心者の方は、少し読むのに骨が折れるかもしれません。でも、最初にプログラミング学習の全体の設計図を見ておくことは、きっと後々の学習でも役に立つと思うので、ぜひ最後まで読んでいただけたら嬉しいです。

これから書いていく内容は、私がTECH::EXPERTで2ヶ月半学習した内容をベースに作成しています。ご参考までに、カリキュラムの中ではRuby on Railsを使って、以下のようなアプリを作成しました↓↓

・ツイッターアプリ
・映画のレビューサイト
・個人アプリ開発（1週間で簡単なグルメブログを作成）
・チャットアプリ
・メルカリのコピーサイト（私の時は4名でチーム開発を実施）

正直、ある程度知識が積み重なっていかないと「？？？」という部分もあると思うし、実際にやってみて理解できることも多いと思います。とはいえ、ざっくりとでも学習内容の全体イメージを持っておくことは、安心感や効率的な学習につながると思います。

それでは、プログラミング学習の流れと全体像をお伝えしていきますね。

プログラミング学習の流れ

ステップ1. 環境構築

基本的には、パソコンとインターネットがあればOKです。

ターミナル、テキストエディタ、コマンドラインツールはすべてパソコンからダウンロードできます。

ターミナルから、コンピューターに色々な指示を出したり、RubyやRailsなどの開発に必要なソフトをダウンロードできます。テキストエディタは、実際にコードを打っていく場所です。この3つが用意できれば、Ruby on Railsでアプリケーションを開発する準備は完了です。

まだわかりづらいと思うので、簡単にそれぞれが何かという説明をしていきます。

ターミナルは、コンピューターに直接命令をするリモコンのようなものです。プログラムを記述したファイルを読み込み、プログラムとして実行するにはコマンドラインというツールが必要となりますが、Macにデフォルトでインストールされているコマンドラインが、ターミナルです。

ちょっとわかりづらいかもしれませんが、開くとこんな感じ。フォルダを移動したり、ファイルに書かれたプログラムを読み込んで実行したりできます。

Macをお使いの方は、Control + スペースのスポットライト検索で、「ターミナル」と入力すると出てきますよ。

テキストエディタとは、ファイルにコードを記述していくためのソフトウェアです。私は、SublimeText3というテキストエディタを使っていました。

Sublime Text3は、プログラミング開発に特化したもので、エンジニアには非常に人気が高いエディタの一種です。無料で利用できるので、こちらからダウンロードしてFinderのアプリケーションに移動させれば、すぐ使える様になります。

実際にコーディングすると、こんな感じで色付けも出来て使いやすいですよ。

テキストエディタにコードを書いて保存し、ターミナルでプログラムの内容を実行する、というのがプログラミングの基本的な流れです。

コマンドラインツールのインストール。Ruby on Railsでプログラミングをする場合、ターミナルとテキストエディタのに加えて、データベース(MySQL)やRuby on Railsのソフトウェア自体のインストールをしておく必要があります。

（具体的には、最初にコマンドラインツールをインストールし、その後、Homebrew、rbenv、ruby-build、MySQL、 Ruby、Ruby on Railsのインストールをする必要があります。）

本記事の目的は、初心者が、プログラミング学習の全体感を把握できるようにすることなので、この場での詳細な説明は避けますが、ターミナル、テキストエディタの他に、データベースとRailsで開発を行うためのソフトウェアも用意する必要があることだけ理解しておいていただければOKです。

すべてインストールするだけなので、やり方は色々な記事で紹介されてますし、プログラミングスクールでは、この開発環境の構築の仕方から、丁寧に教えてもらえます。

ステップ2. アプリケーションの作成

例えば、ブログを書かれている方には馴染みの深いワードプレスは、PHPという言語を使って作られたアプリケーションです。気になる方は、Xサーバーにログインして、ファイルマネージャーを開いてみると、ワードプレスのアプリケーションがどうなっているか見ることができます。

自分のサイトのドメインをクリックすると、大量のファイルが格納されたフォルダにたどりつきます。このファイルが、ワードプレスと言われているウェブアプリケーションの正体。フォルダの中のファイル一つ一つに、PHPで書かれたコードが入っていて、ブログを書いたり表示したりする時に、フォルダの中の該当するファイルが読み込まれて、画面が表示されたり、ブログ記事がアップされたりしています。

私が学習したのはRubyですが、Rubyを使って作られているアプリケーションで有名なのは、クックパッドやTwitter、楽天市場など。

私たちが普段使っているウェブアプリは、すべて同じ構成になっていて、画面を表示したり、データを送信したりしている裏側で、ワードプレスと同じようにフォルダの中の大量のファイルが読み込まれて動いています。このアプリケーションを作っているのが、エンジニアです。一人で開発できる簡単なアプリケーションもあれば、大人数で分担して一つの大きなアプリを作っているものもあります。

▼Cookpad▼

▼楽天市場▼

私たちが普段使っているウェブアプリの裏側がどうなっているか、少しイメージが湧いたでしょうか？

では、アプリケーションを作るために学習すべき内容について解説していきます。

もしかすると、「結構多いな・・」という圧迫感を感じた方もいるかもしれません。確かに、全く新しいことをゼロから勉強するわけなので、最初は大変かもしれません。でも、これも本当に慣れなんですよね。車を運転する時も、最初は、アクセルとかサイドブレーキとかの名前と機能を覚えて、使い方を覚えて、何度も運転しているうちに、自然と運転が出来るようになっている。最初はわからなくても、触っているうちにだんだん理解できるようになるので、安心してくださいね。

ウェブアプリケーションというのは、すごくシンプルに言うと、パソコンの画面とサーバーをつなぐ、「データの流通機構」というイメージです。すべてのウェブアプリは、画面とサーバーをつないで、指定されたデータを表示したり、送信されたデータをデータベースに保存することで成り立っています。実はとてもシンプル。

HTML、CSS

まず、プログラミングで一番最初に学習するのがHTMLとCSSです。ドットインストールやプロゲートで勉強している方も多いのではないでしょうか。HTMLは、画面に表示するページの骨組みを作るためのもの、CSSは、HTMLを装飾していくためのものです。いわゆる「フロントエンド」と言われているものがこれ。HTMLとCSSを学習すると、ウェブページの見た目やデザインを自分で作ることができるようになります。

Ruby、Ruby on Rails

Rubyは日本人の開発者が作ったプログラミング言語の一つ。日本語のチュートリアルなどの情報も多く、記述も他の言語よりシンプルで少なくてすむので、初めてプログラミングを学習する人にはとてもおすすめです。

Ruby on Railsは、Rubyで書かれたWebアプリケーションフレームワークで、Webアプリケーションを簡単に作れるようにする骨組みのことです。フレームワークを使用することで、開発者はより少ない労力で開発を行うことができます。

HTMLとCSSが、表示された画面の見た目を作るのに対して、Ruby on Railsは、サーバーとデータのやりとりをして、指定された情報を表示したり、入力されたデータをサーバーに保存したり、ウェブでの決済や、ユーザー登録・ログインなどの処理を行うためのフレームワークです。いわゆる「サーバーサイド」といわれているのがこれにあたります。

Ruby on Railsを学ぶことで、サーバーとデータをやりとりすることで実装できる「ユーザー新規登録・ログイン」「写真やメッセージの投稿」「指定したページの表示」「ウェブでの決済」など、様々な機能を含んだサービスが作れる様になります。

javascript、jQuery

javascriptを使うと、ユーザーの動きに応じて、ウェブページに動きをつけられるようになります。（たとえば、ホームページで画像が流れるスライダーや、ユーザーがカーソルを合わせると新しいタブが開く仕掛けは、javascriptやjQueryで記述されています。）

jQueryは、javascriptの「ライブラリ」と呼ばれるもので、「javascriptで書かれたお役立ち機能を、ひとまとめのパッケージにして使いやすくまとめたもの」というイメージです。javascriptよりも、さらに簡単に、ウェブページに動きをつけることができます。

ウェブページに動きをつける以外に、サーバーとの通信をしなくても即座に画面にデータを表示する「非同期通信」という方法で、より早い情報処理ができるという使い方もあります。非同期通信は、今世界的にも需要が増えているので、javascriptを学んでおくことはとてもおすすめです。

サーバー（MySQL）とデータベース設計

アプリケーションを作成するためには、データを保存しておくためにサーバーを用意して、データベースを作成する必要があります。MySQLというのは、オラクル社が提供しているサーバーの名前で、世界中で使われているサーバーの中でもとてもメジャーなものです。無料でインストールすることができます。

下の画像は、私がテックエキスパートで、ツイッターアプリを作成した際に、MySQLに作成したデータベースの一部です。

データベースは、エクセルの表の様な設計になっています。
例えばこのデータベースは、ツイッターで投稿された「本文」「画像URL」「投稿日時」を保存するために作っています。

これはシンプルなアプリなので、データベースもシンプルですが、何百万、何千万という人たちが利用するアプリでは、情報を効率的に保管・抽出するために、いかに効率的なデータベース設計ができるかが、とても重要になります。（そうしないと、データの取り出しにとても時間がかかったり、アプリを更新・改良していく時の障害になったりします）

このように、サーバーをインストールして、そこにデータベースを設計する方法や、サーバーの操作をするために必要なSQLという言語を学びます。

ちなみに、写真では、データベースの中身を見やすく表示してくれる「Sequel Pro」というアプリを使って表示しています。ご参考まで。

Git、Github

Gitは、作成したコードの変更履歴を管理したりすることができるツールです。Gitのすごいところは、たとえ上書き保存をした後であっても、好きな時に、過去の特定のセーブポイントまで戻ることができるところ。

例えばExcelで作業をしていて、「あとで必要になるかもしれないから、今の状態のファイルも残しておきたい」という場合、今のファイルを保存して、さらに名前を変えて新しいファイルで作業を継続しますよね。この場合、エクセルのファイルがどんどん増えていってしまい、管理が大変になってしまいます。

Gitを使えば、一つの作業ファイルで、過去のコードの履歴を閲覧したり、戻りたいところまでコードの状態を戻したりすることができます。具体的には、Gitをインストールして、Gitの中にフォルダを作成し、コードを保存することでGitを使ったコードの管理ができるようになります。説明だけ読んでもピンと来ないかもしれませんが、Gitを実際に使ってみると、便利さに手放せなくなりますよ。

さらに、エンジニアが実際の開発現場で複数人で作業をするときは、Githubというウェブサービスを利用します。世界中のエンジニアが使っている、コードの共有のためのドロップボックスのようなもサービスをイメージしていただくと、わかりやすいかもしれません。

Githubには、世界中の人が開発した、あらゆるウェブアプリのプロダクトやコードが保存・公開されています。Githubに自分のアカウントを作成すると、世界中の人が公開しているコードを見たり、自分のコードを公開することができます。
また、他の人とコードを共有したり、他の人が更新したコードをダウンロードしてさらに作業したり。エンジニアが世界中どこにいても、複数人でのウェブアプリ開発ができるのは、このGithubがあるからと言っても過言ではありません。

GitとGithubの使い方を学ぶことで、自分の書いたコードを効率的に管理したり、世界中の人と一緒にチームを組んで、アプリ開発ができるようになります。

ここまでが、webアプリケーションを作成するために学習すべき内容の大枠です。

なんとなくでも、アプリ開発のために学ぶべき学習項目と、それを学ぶことで何ができるようになるかが、イメージできるようになったでしょうか？

ステップ３. ウェブアプリを本番環境にリリースする

さて、アプリの再生が完了したら、次はいよいよアプリを「本番環境」にリリースして、ユーザーにアプリを使ってもらえる状態にします。

ウェブアプリ開発では、コードを書いてアプリを開発をするための「開発環境」と、インターネット上にリリースして、ユーザーに使用してもらうための「本番環境」に分かれています。（正確にいうと、開発したアプリが正常に動作するかどうかをテストするための「テスト環境」もありますが、この場では割愛します）

本番環境にアプリケーションをリリースするためには、インターネット上にサーバーを設置し、開発したアプリケーションを配置する必要があります。AWS（Amazon Web Service）は、本番環境でのサーバーの設置を非常に簡単にしてくれるサービスです。

本番環境にアプリケーションをリリースするためは、そのための手順や設定についても、学んでおく必要があります。

終わりに

いかがでしたでしょうか？

プログラミング学習の全体感、ウェブアプリ開発をするために必要なステップと学習内容が、少しでも理解しやすくなっていたら嬉しいです。

今回の記事の学習内容は、私がテックエキスパートで2ヶ月半、プログラミングを学習して学んだ知識をベースにお伝えしています。

TECH::EXPERT

エンジニアとして転職するために必要な知識を、集中的に学ぶというコンセプトのスクールなので、アカデミックな知識よりも、エンジニアとして開発現場で働く際に必要な知識・スキルを、集中して学べるプログラムになっています。

開発環境の構築、アプリケーションの開発から本番環境にリリースするまでの、実践的な内容について、本格的に学んでみたいという方には、とてもおすすめなので、ご興味があればぜひ検討してみてください。

何かご質問や、聞きたいことがあれば、遠慮なくご連絡くださいね。

これからプログラミングを学習してみたい、という方の参考になれば嬉しいです。

それでは。

—————