プログラミング

【ロードマップ 】プログラミング基礎理解【初心者向け】

プログラミング学習をしている人が近年増えています。

プログラミングの学習では、どのような手順で学ぶべきかを知っているかいないかで、学習効率が変わります。

プログラミング学習を始めたいが、どのような流れで学習すれば良いのかわからない」といった人向けに、学習サイトや無料動画を含めた、挫折をなるべく防いだロードマップを作成しました。

この記事はこんな人にオススメ

 ✅ プログラミングの基礎理解を深めたい

 ✅ 副業でプログラミングを始めたい

 ✅ 簡単なWEBサイトが作れるようになりたい

 ✅ 案件獲得までのプログラミングスキルの向上

プログラミング学習に入る前に、なぜ今プログラミング学習が人気なのか、始めるべき理由を知りたい方は以下の記事を参考にしてください。

HTML/CSSの基礎理解

まずはHTMLとCSSの基礎理解です。

無料プログラミング学習動画を見ながら実際に手を動かすことをお勧めします。

同時にオンラインサイト学習(基礎は無料)を取り入れ、理解できなかった知識や学習の振り返りを隙間時間で埋めて行きましょう。

基本的には無料教材を活用しながら進められる学習を本記事では紹介いたします。

※独学では心配という方は、おすすめプログラミングスクールを紹介しますので以下からチェックしてみてください。

【アイデミープレミアムプラン】

初心者からAIエンジニアへ!オンラインAIプログラミングスクール Aidemy Premium

【WebCamp】

転職成功率98%。転職できなければ全額返金。DMM.comグループならではの非公開求人も多数

【ZeroPlus】

→ 日本初フリーランス特化型プログラミングスクール、新規無料相談も可

無料動画学習しながら手を動かす

ここでの学習動画はテックアカデミーというプログラミングスクール が無料で公開している動画です。

ボリュームはありますが細かく解説していますでの、しっかり理解して行きましょう。

・HTML基礎理解に関しては以下の記事を参考にしてください。

・CSS学習はこちらの動画を参考にしてください。

はじめてのCSS(34本)

こちらも動画学習をしながら手を動かす事がオススメです。

オンライン学習サイトの学習を取り入れる

無料動画学習で一通り理解できたら、下記のオンライン学習を取り入れ分からなかった所の見直しと復習によるスキル強化を行ってください。

無料動画を見終わった方ならサクサク進めるかと思います。

大手オンラインプログラミング学習サイトの2つを紹介します。

ドットインストール

ドットインストールは動画による学習スタイルなので、内容が頭に残りやすいのが特徴。

また、動画も3分ほどの長さのものがほとんどで、内容も初心者向けとなっています。

動画を見ながら自分で手を動かしてコーディングなどの作業を進めることで、頭に残りやすく、より確実にスキルを身につけることができるのです。

ドットインストールで学ぶメリット

 環境構築から学び、プログラミングの基礎・応用を動画教材で学べる。「3分動画で無理なく勉強できる」プログラミングの無料学習サイト。

プロゲート

Progateはオンラインプログラミング学習サービスです。

「初心者から、創れる人を生み出す」理念とする。プログラミング初心者のハードルを出来る限り下げた、入門的学習サイト。

いつでもどこでもプログラミング。まとまった時間がなくても大丈夫。アプリならスマホゲーム感覚で楽しく始められます。

プロゲートで学ぶメリット

 プログラミング初心者に優しく、環境構築不要、プログラミングの基礎から応用をスピード重視で勉強できる。「初心者から創れる人を目指す」入門的プログラミング学習サイト。

上記二つのサイトはどちらも初心者向けとなっております。

自分自身にあったサイトを選び学習を行ってください。また、両方を学習する方も多いようです。

独学での学習は身近に聞ける人が少ない為、複数の教育ツールでの学習を行う事で、つまずいた箇所を再度見直すことも出来ます。

最近ではオンラインスクールの「デイトラ」が人気です。

実際の仕事で活かせるスキルが身につけられ、挫折しにくいことが人気の理由です。

レスポンシブデザインをする

PCなのかスマホなのか、Webサイトを利用する機器によってディスプレイの大きさが変わるため、どんな画面サイズでもわかりやすい画面表示が必要です。

このように効率的に「切り替え」する考え方や具体的な手法を、レスポンシブWebデザインといいます。

始めてのレスポンシブデザイン入門編(19本)

レスポンシブ対応をする事で、どのデバイスからの訪問でも見えやすく、ユーザーにとって使いやすく、なおかつパフォーマンスを統一しておく事が重要です。

またレスポンシブ対応させることで、PC・スマホ・タブレットなどのあらゆるデバイスから同じURLでアクセスできることからURLの正規化、サイト評価の統一など、SEO効果が期待できます。

もちろんURLがひとつに統一されるため、SEO効果の観点からも、リンク効果が高まりやすいと考えられます。

スポンサーリンク

Bootstrapの理解

Bootstrap (ブートストラップ、Twitter Bootstrap) とは、Web制作者の作業を楽にする目的で作られた、Webサイト構築用のCSSひな形セットの名前です。JavaScriptでの動的調整も含まれており、実体としてはいくつかのCSSファイルとJavaScriptファイルです。

https://support.sugutsukaeru.jp/ja/customize/website-planning/218.html

Bootstrapはオープンソースで開発され、誰でも無償で使えます。

最新バージョンは、モバイル対応を強く意識して作られています。「すぐ使えるCMS」では、サンプルテンプレートにこのBootstrapを使ったものがあります。

Bootstrapの理解をする事で、、

✅おしゃれなWebサイトを自作できるようになる

✅テンプレートやフレームワークを使用する事で作業時間の短縮になる

✅「グリットシステム」で様々なデバイスでの対応が可能になる

Bootstrapで作成されたサイト例

 ・Johan Holmberg

 ・Atomico.

 ・CRI

Bootstrapの基礎学習は以下の動画を参考にしてください

・Bootstrap 入門 #01:コンテナとスペーシング

・【Bootstrap入門】Bootstrapでレスポンシブなサイトを1時間で作る

どちらの動画も無料動画とは思えない程わかりやすく、丁寧に解説をしています。

Bootstrapのコツを掴んだら、案件獲得までのスキルへグンと近づきます。しっかり理解しておいて下さい。

模写コーディングでスキル爆上げ

模写コーディングのメリット

 ✅今まで学んだことのアプトプットができる

 ✅サイトの骨組み・構造を把握するのがうまくなる

 ✅コーディングのパターンが体感的に身に付く

 ✅実務の擬似体験ができる

では実践編です。最初は難しいと思いますが、以下のWebサイトを模写コーディングしてみて下さい。

(Google Chromでコードは見ずに出来るだけ自分の力で制作して下さい)

お疲れ様です!ここまで来れたらあなたは案件獲得までに必要なスキルを取得しています。

具体的には「1万〜3万の案件を獲得できるかな」というスキルの状態です。

ちなみにクラウドソーシングサイトでの案件獲得方法は以下の記事を参考にしてください。

これ以上を目指すなら、さらなるプログラミングスキルの向上が必要です。

Web系プログラミング言語は他にも、JavaScript・PHP・Ruby・Java等があります。

更なるスキルの向上を目指すなら、上記の言語のマスターに励んで下さい!

-プログラミング