【完全初心者向け解説】プログラミングの始め方(4)学習手順編【もう迷わない】

ウサギ
ウサギ

プログラミングをはじめたいなーと思ったんだけど、何から初めていいか、わからない。

プログラミングを頑張るぞ!という気持ちはあるけど、最初の一歩をどうしたらいいんだろうか。

プログラミングの始め方を知りたいです〜

イヌ
イヌ

なるほど!

プログラミングの始め方を知りたいんだね!

順を追って説明するね〜!

ウサギ
ウサギ

やった〜!

プログラミングの始め方(3)基礎理解編を読んでない人は、まずは前の回を読んでね〜

本記事の内容

この記事では「プログラミングの始め方(4)学習手順編」についてを解説します

プログラミング学習の始め方

  1. 目標設定編:エンジニアとして就職する
  2. 環境準備編:パソコンを用意する
  3. 基礎理解編:プログラミングとは
  4. 学習手順編:基礎学習→簡単なWebアプリを作る← こちらの記事
  5. 実践練習編:自分のWebアプリを作り、本番リリースする

本記事の信頼性

イヌ
イヌ

・小規模の開発会社、上場企業2社の合計3社で、エンジニアを経験

・正社員、フリーランス合わせて10年以上エンジニアとして活動

・現在、フリーランスエンジニアとして時給5桁で活動中

読者のみなさんへのメッセージ

この連載記事は「プログラミングを始めたいけど、最初の一歩が踏み出せない。なにから始めたらよいかわからない」という人向けに書いています。

この連載記事を読み終わったら、

  1. どう目標設定したらよいか
  2. 具体的なプログラミングの始め方
  3. エンジニアとしてのキャリアの重ね方

がわかるようになります。


イヌはプログラミングを学んで、人生が大きく動き出しました。

あなたもプログラミングを学ぶことで、その可能性があります。

昔の自分が知っておきたかったことを、この連載でお伝えしますので、最後までお読みいただけると嬉しいです。


この記事は「プログラミングの始め方(4)学習手順編」です。

前回の記事「プログラミングの始め方(3)基礎理解編」をまだお読みでないかたは、こちらからお読みください。

学習手順:基礎学習→簡単なWebアプリを作る

最低限の基礎学習を終えたら、できるだけ早いタイミングで、動くもの(簡単なWebアプリ)を作ります。

できるだけ早いタイミングで。というのがポイントです。

プログラミングの知識は、信じられないぐらい多いです。

すべてを理解してから、Webアプリを作ろうとしたら、いつまでたってもすすめません。

ちょっと無理かなと感じるかもしれないですが、まずはWebアプリをつくるというゴールからはじめましょう。

JavaScriptで作るミニアプリがドットインストールで公開されているので、このあたりを参考にすると良さそうです。


とはいえ、何から始めたらいいのかという話ですね。

まずは以下の流れです。

JavaScript → HTML → CSS → Git → GitHub → GitHub Pages

いろいろわからない言葉があると思いますが、この流れで学ぶと、自分の作ったアプリを世界に公開できます。

インターネットに公開するということは、世界中からあなたのWebアプリが見れるのです。

自分にできるかなと思いますよね。

大丈夫、できます。

できなかったら、 Twitter で @mention ください。フォローしますよ。

JavaScript

最初にJavaScriptなの?と思う人もいると思います。

HTMLとCSSから始める人も多いですよね。

これが割と落とし穴です。

JavaScriptとHTML / CSSと比べた場合、JavaScriptのほうが難しいです。

HTML / CSSはなんとか行ったけど、JavaScriptで一気に難しくなって、脱落する人が多いです。

なので、苦手なものから食べる。じゃないですが、難しいことから初めて、まずは最初の山を超えてから、なだらかにHTMLやCSSに入っていくことをおすすめします。

以下はJavaScriptの参考記事です。

HTML / CSS

次にHTMLとCSSです。JavaScriptより理解しやすいと思います。

HTML

HTMLはいろいろなタグがありますが、このタイミングで厳密に覚える必要はありません。

Web制作だと、SEOの観点で比較的厳密にHTMLタグを設置しなければいけませんが、Webアプリの場合は、SEOはあまり関係ないので、厳密さは不要です。(正しいマークアップをすること自体は良いことなので、しなくていいわけではないですよ。)

最低限、ブロック要素とインライン要素、div、span、ul、li、inputなど、Webアプリで利用するタグを理解すればOKです。

以下はHTMLの参考記事です。

CSS

CSSも厳密に学ぼうとすると色々ありますが、ポイントは「レイアウト」です。

装飾的な部分は一旦置いておいて、最初は「display: flex」を使いこなせると楽です。

レイアウトがある程度配置できるようになると、Webアプリを作りやすくなります。

ある程度CSSを勉強してから以下のサイトをやってみると、直感的にflexを練習できるので、おすすめです。

FLEXBOX FROGGY

以下はCSSの参考記事です。

Git

次は Git です。このGitというのは、バージョン管理システムです。

とても難しそうですね(笑)

例えば、Excelで説明してみましょう。

Excelファイルに、日付とか名前とかつけて、複数ファイルを保存したりしますよね?

  • 家計簿.xlsx
  • 家計簿_昔の.xlsx
  • 2020年11月_家計簿.xlsx
  • (コピー)2020年11月_家計簿.xlsx

のような感じ。見たことあります?

このように、複数のファイルを残して管理すると、

  • どのファイルが最新か?
  • 必要なファイルがどこにあるか?
  • 「家計簿.xlsx」と「家計簿_昔の.xlsx」の違いはどこか?

のようなことを、スッと確認することができないです。

ファイルが多くなればなるほど、難しくなります。

この問題を解決するのが、Gitというバージョン管理システムです。

Webアプリをつくるようなエンジニアは、全員Gitを利用できるといっても過言ではないぐらい、利用されています。

最初はとっつきにくいですが、一度利用になれると、Gitなしではコードを書くのが不安になるぐらい、便利なものです。

次に続くGitHubを利用するときも必須ですし、エンジニアとして働く際も必要な技術ですので、この段階で学んでおきましょう。

別途、Gitの初期設定は必要ですが、最初は以下のコマンドだけ覚えればOKです!

  • git add . or git add -A
  • git commit -m 'ここにコミットメッセージを書く'
  • git push origin master or git push origin main

Progateドットインストールでも講座があります。

また、以下のサイトがわかりやすくておすすめです。

※ 「入門編」「発展編」までOKです。場合によって「逆引き Git」も参考になります。

サル先生のGit入門

GitHub

GitHubは、Gitで管理しているソースコードを複数人で開発するためのプラットフォームです。

似たようなサービスで、BitbucketBacklogGitLabなどがあります。

このGitHubは、さまざまな企業に利用されており、GitHubの利用方法がわかれば、先ほど上げた他のサービスでも、問題なく利用できます。

とはいえ、最初はGiHub特有の機能は使わなくてOKです。

例えば「プルリクエスト」という機能がありますが、この機能は後回しでOKです。

まずは、Gitで管理しているプロジェクト(必要なファイルやフォルダをまとめて管理しているコトやモノをプロジェクトと呼びます)を、GitHubにアップロードします。

そうすると、GitHub上で、あなたの手元のPCで開発していたソースコードがアップロードされます。

これでバックアップにもなりますし、次に続く GitHub Pages にも繋がります。

GitHub Pages

GitHub Pages は、GitHub のリポジトリから HTML、CSS、および JavaScript ファイル を直接取得し、任意でビルドプロセスを通じてファイルを実行し、ウェブサイトを公開できる静的なサイトホスティングサービスです

GitHub Pages について

難しい言葉が色々並んでいますが、簡単に言うと

「GitHubにコードをアップロードすると、Webサイトが表示できるようになる」

ということです。

HTML / CSS だけですと、Webサイトですが、JavaScriptもアップロードできるので、簡単なWebアプリであれば、公開することができるということです!

なかなか、Git / GitHub / GitHub Pages をすべて通して、学べるコンテンツがあまりないので、大変ですが、ググりながらうまいこと頑張ってみてください!

イヌ
イヌ

プログラミングの始め方(4)学習手順編でした!

プログラミング、難しいけど、人生変わるよ!

一緒にがんばりましょ〜

ウサギ
ウサギ

難しいけど、がんばるぞ!

第5回目の記事の楽しみだ!

またね〜

プログラミング学習の始め方

  1. 目標設定:エンジニアとして就職する
  2. 環境準備:パソコンを用意する
  3. 基礎理解編:プログラミングとは
  4. 学習手順:基礎学習→簡単なWebアプリを作る← こちらの記事
  5. 実践練習:自分のWebアプリを作り、本番リリースする← 次はこち

コメントを残す

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