こんにちは！Physical Therapistで現在プログラミング学習中のまっすです。
プログラミングの学習をして約5ヶ月過ぎました！ようやく、1つの目標であった自分のWebサイト(massublog)を開設することができました(*^^*)
Webエンジニアの知り合いもおらず、完全独学での勉強でした。
いま思えば、もっと『効率の良い勉強方法』をしていれば1,2ヶ月くらいで作成できたんじゃないかと思っています(^_^;)
今回は同じ悩みをもった未経験者・独学で勉強している方にWebサイトを作成する勉強プロセスをわかりやすく解説していきたいと思います(*ﾟ∀ﾟ)
初心者が独学でプログラミングを勉強するおすすめの方法
ここからは、プログラミング超初心者が完全独学で勉強し、Webサイトを開設するまでの効率のよい流れを解説します！
まずは、自分がプログラミングするのに向いているかどうかをチェックしたほうがいいでしょう！
まずはProgateを無料登録しましょう
正直、独学で続けるのは結構大変だと思います(^_^;)
『エラー』といって思う通りに表示されないことが多く、完全独学だと正直悩みまくります！
その際、完全独学だと自分自身で調べて解決していかないといけません！プログラミングが好き！や向いていない人では独学は難しいと思います(..)
プログラミンが向いているかいないかの判断は『Progate』の無料版がおすすめです！最近のプログラミングを勉強しようとした人はほとんどが聞いたことのある名前だと思います。
Web版だけでなくスマホでも利用できるアプリ版もあり気軽に取り組めます。
独学に自信がない人には
そんな方はプラグラミングスクールに登録し、メンターと呼ばれる方に指導してもらうことをおすすめします！
誰かに相談できると勉強も効率よくでき、理解力も深まりますよね！
ProgateのHTML＆CSSを勉強する
Progateの無料版を登録したらまずは、HTML＆CSSコースの勉強をしましょう！
Webサイトを作成するには必須の項目なのでこれができないとサイトは作れません。
Progateがおすすめのポイントは初心者がつまずく環境設定がなく始められる点です。
ここで自分が向いているかいないかを判断しましょう！
続けられそうと思うなら有料版に登録するのもありですね(^^)
ProgateはできればWeb版をすることをおすすめします。すき間時間にアプリ版をするのもいいですが、Web版の方が項目も多く、実際にコードといわれるものを打ちながら作業できます。アプリ版では選択方式で並び替える感じでの勉強方法になります。
HTMLを勉強するとWebサイトの骨格部分の理解ができ、CSSを勉強するとその骨格部分を装飾・レイアウトをすることができます。
ProgateのJavaScriptを勉強する
HTML&CSSの無料版をした後はJavascriptの無料版を勉強しましょう！
HTMLやCSSだけでもWebサイトを作成することができますが、最近のWebサイトでは動き(アニメーション)があり、検索結果をリアルタイムに表示したりするにはJavaScriptを学ぶ必要があります。
アニメーションとはドロップダウンリストや画像を切り替えるスライドショーなどのページのちょっとした動きのあるパーツのことです。
また、HTMLやCSSはプログラミング言語ではありません！JavaScriptは1995年に誕生したれっきとしたプログラミング言語です。
ここでやっとプログラミング学習の一歩になるんですかね(*ﾟ∀ﾟ)
JavaScriptを勉強した後は
JavaScriptの勉強後もプログラミング学習を続けられると思ったら次はProgateの有料版の登録を行いましょう！
HTML＆CSSとJavaScriptの有料版を勉強しながらjQueryの勉強がおすすめです！
jQueryとはJavaScriptのライブラリと呼ばれるものです。『ライブラリ』とは、ある程度まとまったプログラムをあらかじめ作ってくれているファイルのことです。簡単にいうと色々コードを書かなくてもJavaScriptを使えるよって思えばいいんじゃないでしょうか(*ﾟ∀ﾟ)
Progaetは何度も周回したほうがいいの？
よくTwitterなどで『何周くらいすればいいですか？』と質問している方がいますよね！
私の考えは1周でいいんじゃない？やっても2周だと思います(*ﾟ∀ﾟ)
その理由は何周もして基礎上げをすることは大事だけどProgateでやる基礎が全てではないと思うからです！2周するなら違うサイトや本でいろんな基礎を高めた方がいい！
私は1周しかしませんでした！実践しながら学べばいいんです！！
ドットインストールをやってみよう
Progateを何周もするならドットインストールのHTML、CSS、JavaScriptの無料版を勉強しましょう！こちらは動画で学ぶことができます。
はじめにドットインストールをする人がいますが、テキストエディタなどの環境設定が必要であり、動画もかなりあっさりしているので初心者はProgateから始めることをおすすめします！
ドットインストールで勉強する際にはテキストエディタの設定が必要ですが、こちらも無料でVisial Studio Code入門という項目があり、設定から使用方法まで学べます！
ここまで毎日コツコツとしていれば1ヶ月もかからずに済ますことができると思います！
ある程度学習したら模写をしましょう
これまでのことを一通りできれば簡単なサイトなら模写ができるようになっているはずです！
プログラミング学習ではアウトプットが非常に大事だと思うので、一度模写をしてみましょう(*ﾟ∀ﾟ)
- Write
- はにわまんの作成されたサンプル
- JINのテーマの1つ
理由はwriteはブログ型、はにわまんさんのサンプルはコーポレート型、JINのテーマは2コラム型といったWebサイトでよくみかける型でありシンプルで作成しやすそうだったからです(*ﾟ∀ﾟ)
模写のおすすめのやり方はまた別の機会に紹介しますね！
模写以外でアウトプットするなら
自分の学習したことのアウトプットをするなら
忍者CODEさんのサイトで問題集をすることをおすすめします(*^^*)
基礎的なところから細かいところまで今まで学んだことをアウトプットできます！
無料版でも十分な内容ですが、有料版では質問などもできてさらにおすすめです(*^^*)
最近では『JavaScriptの屋敷』とよばれるECサイトの作成の練習ができる教材も公開されており、Web作成をする方はぜひ一度見てみて下さい！
自分の好きなデザインで作ってみよう
模写がある程度できるようになれば、デザインさえあればコーディングができるってことですね！そこで、今度は自分で好きなデザインを作成してコーディングをしてみましょう(*^^*)
ちなみに私はこのサイトの原型を作成しました！
この時に頭の中でサイトの構成を考えてしまったので後から手直しが多くありました(；´Д｀)
なので紙にさらっと書くだけでもいいので構成を考えておくことをおすすめします！
WordPressも勉強しよう
WordPressとは、サイトの作成やブログの作成などができるCMS(コンテンツ管理システム)の1つで、無料のソフトウェアです。Web関連技術が無い人でもサイト管理や記事投稿ができるため、世界中のサイトの約4分の1はWordPressで構築されていると言われています。
WordPressは必須ではありません！
しかし、私は自分のオリジナルデザインのブログ型サイトを作成したかったのでWordPressを利用することにしました！
WordPressに関してはドットインストールでWordPressの項目があるのでそちらで勉強されることをおすすめします。
WordPressはPHPというプログラミング言語で動いています。PHPのことを知らなくても利用することは可能ですが、WordPressのファイルには、便利なPHP関数がたくさん定義されています。
自分なりにカスタムしたい場合にはやはりPHPの知識がある方がいいと思います！
PHPの勉強はProgate、ドットインストールで可能です。JavaScriptの勉強をしていれば似ているなって印象がするのではないかと思います(*ﾟ∀ﾟ)
ここまで勉強するのに1〜2ヶ月程度あれば可能であると思います！
私の場合は欲張ってしまい、有料会員の間にたくさん勉強しようといろんなプラグラミング言語やライブラリをやってしまいました。
今考えればサイトを作成するだけならする必要がなかったと思います！
余裕があればSassは勉強しておくと便利ですよ！
追伸
Progateは有料会員から無料会員に戻っても学習した内容は消えないようです！なので私のように欲張らずに自分にとって必要なプログラミング言語を学ぶことが効率の良い勉強方法につながると思います(*ﾟ∀ﾟ)
まとめ
- Progateの無料版でHTML＆CSSをする
- Progateの無料版でJavaScriptをする
- ドットインストールの無料版でHTML・CSS・JavaScriptをする
- Progateの有料版でHTML＆CSS、JavaScript、jQueryをする
- 模写をする。余裕があれば忍者CODEをする
- 自分のデザインでコーディングしよう
- ブログのサイトを作りたいならWordPressを勉強しよう
- PHPを勉強しよう
- Webサイトを作るなら完全独学は可能です！
