Programming WEB

[完全初心者でも失敗しない]WEBプログラミング学習の始め方

2020年2月1日

 

 

 

 

困ってます
プログラミングって最近よく聞くけど、難しそうだし何から始めていいか分からないんだよね。

 

そう言った疑問にお答えしようと思います。

この記事を最後まで読んでいただけるとプログラミング学習の全体像や学習の進め方がわかります。

 

こんにちは、Ronpeee(@ronpeee0809)です。

独学でHTML/CSS/Bootstrap/Javascript(基礎)/PHP(基礎)を学び、模写やイメージサイトを作れるようになりました。

 

そう言う僕も、数ヶ月前まで完全初心者でした。

独学でしたので今振り返るとかなり遠回りもしましたが、今から始めるならこうしてたなという方法をまとめました。

 

プログラミングに興味がある。けど、何から始めていいか分からないという方は是非読み進めていただければ幸いです。 

 

 

学習期間

 

学習期間は3か月集中して行えればベストです。

6か月あれば余裕をもって学習できます。

 

効率よく学習を行えば、独学でもコードを書いたり、迷った時に自分で解決策を検索する能力がつきます。

 

もちろん6か月でプログラミングの世界がすべて分かることは不可能です。。。

ただ、壁にぶつかった時に解決する方法を手にしておけば、どんどん成長可能です。

 

僕の失敗談

 

僕は2019年の夏から学習を始めました。

しかし、今思えばかなり遠回りをしたと思っています。

 

原因

・同じ所を何周も学習し、インプット>アウトプットの構造になっていた。

・何日かサボるとダラダラとした学習になり、次始めるとまた復習になってしまった。

 

なので、分からないところでズルズル悩まないでください。

短期集中でどんどんアウトプットするのが、最強の勉強法だと気づきました。

 

プログラミング用語

 

困ってます
HTMLとかCSSとかいろいろ名前があるけどそんなにいろんな言語覚えられるの?

 

心配いりません。

実際プログラミング言語というものは様々ありますが、考え方の共通点も多いです。

完全にすべて覚えるのは不可能なので、その都度知識を増やしていきましょう。

 

参考

HTML : Hyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ)の略で、Webページを作るための最も基本的な言語。ちなみにHTMLはマークアップ言語と呼ばれる。

CSS :  Cascading Style Sheets(カスケーディング・スタイル・シート)の略で、Webページのデザインを指定するための言語。HTMLとCSSの組み合わせにより普段見ているWebページができている。

Javascript: Webページに動的な表現を行う。処理はユーザー側で行われる。

PHP :  Webページに動的な表現を行う。処理はサーバー側で行われる。 

Bootstrap : CSSを手軽に統一感のあるデザインができるようにしたもの。

jQuery : Javascriptを使いやすいように拡張したもの。

 

まだまだ他にもプログラミング言語はありますが、とりあえずこの辺りが出来れば問題ないです。

いやいや!充分多い!と思われるかもしれませんが、必ず点と点が線になる日が来ます。

がんばりましょう。

 

プログラミング学習方法

 

それでは早速プログラミングの学習方法を見ていきましょう。

趣味で行うのか、フリーランスや就職かで少し方向性が変わってきます。

 

プログラミングの学習目的を考える

 

僕は独学で、スクールにも入らず参考書も買わず学習しました。その方法が、

 

Progate (Web上でプログラミングを学べる学習サイト)

ドットインストール (5,000本以上の動画を見ながら学べる、プログラミング学習用のWebサイト)

Youtube

です。

 

フリーランス・転職を考えている人は

 

東京フリーランスさんの 30DAYSトライアル(通称:デイトラ)

 

がおすすめです。

早くフリーランスになったり転職したいという方は、はじめからこちらでの学習をおすすめします。

この後の記事は読まなくて大丈夫です(笑)

このトレーニングをこなせるともう怖いものなしです。

 

ただ完全初心者にはハードな面もあるので、いきなりは難しいから挫折!だけは気をつけて。

じっくり挫折せずに続けていきたいという方はこの後の説明にお付き合いください。

 

Progateとドットインストールの比較

 

まず、progateとドットインストールを簡単に比較してみると

 

ポイント

Progate:月額1080円(税込)

メリット

・かわいいデザインで、ゲーム感覚でプログラミングに触れることが出来る。     

・サイト上で学習できるので、開発環境の準備がいらない。

・アプリなら通勤・通学中や、すき間時間に気軽に学習できる。

デメリット

どんどん進めるので理解したつもりになりかねない。

 

ポイント

ドットインストール:月額1080円(税込)

 

メリット

・1つが3分程度の動画学習サービスになるので、飽きが来ない。

・テキストエディタに入力するので、実際のコードを入力するイメージがつきやすい。

デメリット

・エディタを準備しないといけないので、少しハードルが高い。

 

どちらも無料で使用できるレッスンもあります。

でも、将来的に実務に生かそうとなると有料会員になるのは必須かと思います。

参考書などを買うと1冊で2000~3000円程度してしまうので、こちらのほうがお得です。

 

ただ、よく陥ってしまうのが、Progateやドットインストールを同じところを何周もしてしまうことです。

必ず学習したら、模写などにアウトプットするという意識は忘れないようにしてください。

 

さぁプログラミング学習をはじめましょう

 

それでは、具体的な学習をスタートさせましょう。

 

HTML/CSS

 

実際の学習方法ですが HTMLとCSSの知識は必須です。

(注意)ドットインストールで学習を進める場合はテキストエディタが必要になりますので、先に目次5に目を通してください。

 

Progateを使用の場合

・HTML & CSS 学習コース初級編

・HTML & CSS 学習コース中級編

を行いましょう。

 

ドットインストールを使用の場合

・はじめてのHTML(全13回)

・はじめてのCSS(全14回)

を行いましょう。

 

レスポンシブデザイン

 

次にレスポンシブデザインについて学びます。

レスポンシブデザインとは、近年PCやスマホやタブレットといった様々な画面のサイズに対応したデザインのことです。

レスポンシブデザインの方法を知ることで、どの端末にも対応したきれいなサイトを構築することが出来ます。

 

Progateを使用の場合

・HTML & CSS 上級編

・ドットインストールを使用の場合

・詳解CSS レスポンシブウェブデザイン編(全8回)

を行いましょう。

 

ここでCSSのフレームワークであるBootstrapも併せて学習することをおすすめします。

 

Bootstrapはレスポンシブデザインのためにあるといっても過言ではないぐらい優秀です。

 

ドットインストールを使用の場合は

・Bootstrap4 入門(全22回)

 

Youtubeの場合

・たにぐちまことさんのともすたチャンネルの「Bootstrap4入門」

 

をご覧下さい。

 

ともすたチャンネルはかなり有益ですので、これ以外の動画も目を通しておくといいと思います。

 

Javascript・jQuery

 

Progateを使用の場合

・JavaScriptⅠ~Ⅴ

・jQuery初級編・中級編・中級編道場コース

 

を行いましょう。

 

ドットインストールを使用した場合

・はじめてのJavaScript (全11回)

・詳解JavaScript 基礎文法編 (全26回)

・jQuery入門 (全20回)

 

を行いましょう。

 

PHP

 

Progateを使用の場合

・学習コースPHPⅠ~Ⅳ

 

ドットインストール使用の場合

・ PHP入門 (全30回) 

 

ただしドットインストールでは、ローカル開発環境の準備が必要になります。

PHPはProgateの方が初めての方にはおすすめです。

 

テキストエディタを準備しょう。

 

テキストエディタとはテキストを編集するためのアプリケーションです。

ProgateではWebサイト上で操作するので必要ないですが、ドットインストールではテキストエディタが必要になります。

テキストエディタは

ポイント

・文字入力の短縮

・機能の追加

などのメリットがあり、ここではマイクロソフト社が開発したVisual Studio Code(VSCode)のダウンロードをおすすめします。

 

より詳しくは関連記事をご覧ください。

関連
テキストエディタの選び方[おすすめはVSCode]

 

 Chromeディベロッパーツールの使おう。

 

GoogleクロームにはChromeディベロッパーツール(検証ツール)という、自分や他のWebサイトがどのようにコードが作られているか確認できるツールが準備されています。

 

起動の仕方は、確認したいページで右クリックを行うと「検証」というメニューが表示されます。

ショートカット

Mac :Control+Option+C

Windows:Ctrl+Shift+C

 

するとChromeディベロッパーツールが起動します。

左上にある矢印マーク(四角に←のようなマーク)をクリックすると「選択モード」になります。

そしてページの確認したい部分をクリックするとコードが表示されます。

 

いろいろなコード入力方法が学習できるので、模写の際にも参考して下さい。

 

詳しくは関連ページをご覧ください。

関連
[初心者必見]Googleディベロッパーツールの使い方[検証機能は便利]

 

ローカル開発環境を整えよう。

 

PHPを学習するには実はローカル開発環境を整える必要があります。

ローカル開発環境を整えようといいながら、僕はサーバーに契約することをおすすめします。

 

ローカル開発環境とは

自分のパソコンに構築する仮想環境のことです。

Webサイトを作った時には、実はWebサーバーというものを通して 世界中の方のパソコンに表示されるようになります。

ただサーバーには、契約が必要になります。

自分のパソコンに同様の機能を持たせることができるのがローカル環境です。

 

僕は、「XAMPP」や「vagrant」といったローカル開発環境を準備しましたが、ブログを始めるのにサーバー契約しこの方法が手っ取り早いなという結論です。

ProgateでPHPを学習してもっと学習意欲がわいたらサーバー契約するのがおすすめです。

もちろんお金をかけたくない場合は、ローカル開発環境を準備してください。

 

模写をしてみよう。

 

ここが一つの大きな課題です。

普段目にしているWebサイトの中で、自分のマネしたいページを見つけて模写してみましょう。

今までProgateやドットインストールではできたつもりでも、急激に難しく感じるかもしれません。

でも、コードの書き方は正解が一つではありません。

 

困った時は

ググる

Chromeディベロッパーツールを活用

 

を繰り返すことで成長できます。

 

 

Twitterを活用しよう。

 

Twitterには同じ悩みや志を持った方々が必ずいます。

そういった方の情報を得たり、自ら発信することで情報収集やモチベーション維持が可能になります。

積極的に活用し、プログラミング学習に活用してください。

 

学習後の進む道

 

学習後の進路

  • WEB関連に転職
  • フリーランス
  • ラウドソーシングなどで副業
  • 趣味としてのプログラミング学習

 

といったスキルアップが望めます。

注意してもらいたいのは、これまでの学習内容は基礎中の基礎です。

継続努力が不可欠です。

道のりは長そうだなぁと感じるかも知れません。でも大丈夫!楽しみながら学習を始めてください。

 

きっと学習の先にはワクワクする体験が待ってます。

 

 まとめ

 

まとめ

  • 3カ月集中!(でも無理はしないで。)
  • 同じところを何周もせずにインプット<アウトプット重視!
  • 分からないことがあればググる!
  • Twitterは情報の宝庫!

長くなりましたが、最後まで読んでいただきありがとうございます。

プログラミング学習楽しんでください。

それでは。

 

 

 

 

 

-Programming, WEB
-,

Copyright© Ronpeee blog , 2021 All Rights Reserved.