転職

【初心者向け】独学でのプログラミング勉強法【体験談あり】

悩む人
プログラミングを独学で勉強したいけど、何から手をつければ良いのかわからない...。具体的なツールややり方が知りたい!

こんな悩みに答えていきます。

 

本記事の内容

ココがポイント

・【準備】プログラミングを勉強する環境を作る

・【基礎】HTML/CSS編

・【応用】Bootstrap編

・【応用】Javascript編

・まとめ

 

今回は独学でプログラミングを勉強する方法を解説していきます。

 

僕自身もプログラミング初心者でしたが、今ではほとんどの企業HPなどを模写コーディングできるようになりました。

 

そこで今回は、僕自身がプログラミング初心者の時に行っていた勉強法をご紹介します。

 

本記事の方法で学習を進めることで、独学でも十分に「ランサーズ」や「クラウドワークス」などで稼ぐことも可能です。

 

また、あなたがもしエンジニアに転職したいと思ったときの助けになると思います。

 

それでは、本題に入っていきましょう。

 

※0円プログラミングスクールという選択肢あり

TechAcademyでは現在1週間の無料体験を実施していますので、この1週間を利用して基礎を固めるという手もありです。

>>TechAcademyの無料体験はこちら

 

【準備】プログラミングを勉強する環境を作る

まずは、プログラミングを集中して勉強できるような環境を作りましょう。

 

初心者はドットインストールがおすすめ!

プログラミングを独学する上で、書籍を買ってする方法もありますが、まずはプログラミングの無料学習ツールを活用しましょう。

 

本記事でおすすめするのは「ドットインストール」という学習サービスです。

 

ドットインストールは、プログラミング言語はもちろん学習環境の整え方までを2〜3分程度の動画学習をすることができます。

>>ドットインストールで学習環境を整える(全5回)

※ちなみにWindowsでも可能ですが、プログラミング学習はMac推奨です。

 

簡単な企業HPを作る程度であれば、無料プランで問題ありません。以降の説明は無料プランを軸に解説していきます。

 

1.【プログラミング基礎】HTMLとCSSを学ぶ

学習環境が整ったらいよいよコードを勉強しましょう。

 

ドットインストールで学ぶとわかるのですが、動画を見ながら実際に手を動かしながら学習した方が早く習得できます。

 

とはいえ、最初はそんなに複雑なコードはありませんのでご安心ください。

 

ちなみにHTMLとCSSについてはこちらの書籍も非常に分かりやすいです。

カラーページで図解説明も豊富なので、購入して損はないと思います。

 

1-1.HTMLの基礎を学ぼう

最初はHTML(HyperText Markup Languageの略)を学んでいきましょう。

>>ドットインストール[はじめてのHTML(全14回)]

 

HTMLは簡単に言うとサイト上の文字部分のことです。

上の画像がHTMLのコードで、下の画像が実際に表示されるページです。

 

このようにHTMLは、サイトを表示したときの文字部分を表していることがわかると思います。

 

ただ、ここで説明しているのは非常にシンプルな部分のみなので詳しくはドットインストールで学習を進めましょう。

>>ドットインストール[はじめてのHTML(全14回)]

 

1-2.CSSでデザインの基礎を学ぼう

さて、HTMLを学習しただけだとページ自体に色や動きは全くありません。

 

なので「ん、なんかショボい...」と感じると思います。

 

そこでページ自体に色や少しの動きをつけるのがCSSです。

>>ドットインストール[はじめてのCSS(全15回)]

 

先ほどのコードにCSSを適用するとこんな感じになります。

 

この画像では文字に色を入れているだけですが、CSSを勉強するとより自由度が増していきます。

 

例えば、文字の大きさやボタンの設置など普段Webサイトでよく見かけるデザインを作ることが可能です。

 

このあたりからコードによっては複雑になりがちですが、その反面コードを書くのがとても楽しくなると思います。

 

僕自身もCSSを学んだ時は、「コード一文でこんなこともできるのか!」と感動しました(笑)

 

【厳選】おすすめプログラミングオンラインスクール3選」でも紹介していますが、プログラミング学習は挫折しやすい傾向にあります。

 

そんな中でも「楽しさ」を見出しながら学習するとステップアップも早いです。

>>ドットインストール[はじめてのCSS(全15回)]

 

2.【応用】Bootstrap編

CSSの基礎が学べたら次は応用していきましょう。

 

2-1.より簡単に様々なデザインができるBootstrap

応用編の一つがBootstrapです。

>>ドットインストール[Bootstrap4入門]

 

CSSの部分でサイトのレイアウトの方法が理解できたと思います。

 

しかし、サイトでよく見るボタンなどのレイアウトを一からコードを書いていると非効率的になりがちです。

 

そこでサイトのレイアウトを効率的にするのが「Bootstrap」です。

 

BootstrapはウェブサイトやWebアプリケーションを作成するフロントエンドWebアプリケーションフレームワークである。タイポグラフィ、フォーム、ボタン、ナビゲーション、その他構成要素やJavaScript用拡張などが、HTMLおよびCSSベースのデザインテンプレートとして用意されている。出典:Wikipedia

 

要はサイト内のボタンやメニューのレイアウトをテンプレート化してあるフレームワークです。

 

CSSの基礎を学んだ上でBootstrapを使いこなせるようになると一般的な企業HPなどは作成できるレベルになります。

>>ドットインストール[Bootstrap4入門]

 

3.【応用】Javascript編

CSSやBootstrapでもサイト自体に動きをつけることはできますが、それでも単純なものしかできません。

 

3-1.サイトに動きをつけるJavascript

最後はJavascriptという言語を学びましょう。

>>ドットインストール[はじめてのJavascript(全11回)]

 

Javascriptはサイトに高度な動きをつけることができます。

 

例えば、当ブログもそうですがページをスクロールしていくと右下あたりにページトップに戻れる矢印ボタンがあると思います。

 

これもJavascriptの一つです。

 

こういった何気ないページスクロールも企業HPや自社HPを作成する上で、必須になってきます。

 

ただ、Javascriptはこれまで学んできたHTMLやCSSよりも難易度は格段に上がっていきますので、根気強く反復で学ぶようにしましょう。

>>ドットインストール[はじめてのJavascript(全11回)]

 

ポイント

※ぶっちゃけ、Javascriptまである程度理解してコードを書けるようになると「ランサーズ」や「クラウドワークス」で案件を取得して月5万は稼げると思います。

 

まとめ:繰り返し学び続けましょう

今回の内容をまとめておきます。

ココがポイント

Step1:HTMLを学ぶ

Step2:CSSでサイトデザインを学ぶ

Step3:Bootstrapでデザインを効率化

Step4:Javascriptでサイトに動きをつける

この流れで学習することで、世の中のHPはほとんど作成することができるようになります。

 

このレベルまでくると自分のサイトを作ったり、「ランサーズ」や「クラウドワークス」で案件を取得して副業として稼ぐこともできます。

 

ただ、ここで注意してほしいのが120%挫折するので「繰り返し学び続けること」が非常に大事です。

 

プログラミングスキルは「継続することが大事!」これだけは忘れないようにしてください。

 

※0円プログラミングスクールという選択肢あり

TechAcademyでは現在1週間の無料体験を実施していますので、この1週間を利用して基礎を固めるという手もありです。

>>TechAcademyの無料体験はこちら

 

今回はこれで以上です。

 

プログラミングを学習する環境を整えるのは、非常に簡単です。

 

とりあえず学習を開始してみることをおすすめします。

 

では、また次回!

 

-転職

© 2021 tomoblog Powered by AFFINGER5