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

 

 

 

 

 

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

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

 

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

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

 

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

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

 

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

 

 

学習期間

 

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

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

 

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

 

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

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

 

僕の失敗談

 

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

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

 

 

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

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

 

プログラミング用語

 

 

心配いりません。

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

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

 

 

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

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

がんばりましょう。

 

プログラミング学習方法

 

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

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

 

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

 

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

 

です。

 

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

 

 

がおすすめです。

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

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

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

 

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

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

 

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

 

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

 

 

 

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

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

参考書などを買うと１冊で２０００～３０００円程度してしまうので、こちらのほうがお得です。

 

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

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

 

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

 

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

 

HTML/CSS

 

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

 

を行いましょう。

 

を行いましょう。

 

レスポンシブデザイン

 

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

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

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

 

を行いましょう。

 

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

 

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

 

 

 

をご覧下さい。

 

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

 

Javascript・jQuery

 

 

を行いましょう。

 

 

を行いましょう。

 

PHP

 

 

 

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

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

 

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

 

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

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

テキストエディタは

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

 

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

関連

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

 

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

 

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

 

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

 

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

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

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

 

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

 

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

関連

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

 

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

 

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

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

 

 

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

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

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

 

模写をしてみよう。

 

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

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

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

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

 

 

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

 

 

Twitterを活用しよう。

 

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

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

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

 

学習後の進む道

 

 

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

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

継続努力が不可欠です。

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

 

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

 

 まとめ

 

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

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

それでは。