プログラミング完全初心者からサイト模写まで~学習方法・内容のご紹介~
移転しました。
はじめに
約1か月前、あることを思い立ちweb系プログラミング言語の学習を始めました。
やっぱりもう少しブログの見た目をオシャレにしたいね
— つっちーさん (@tekitoudeyokune) May 1, 2019
プログラミングの勉強を始めました。まずは自分のブログの見た目をオシャレにすることを目標にします。
— つっちーさん (@tekitoudeyokune) May 6, 2019
自分のブログを見ていて、ふと「トップページがダサい...」と思ったのがきっかけです。
プログラミングを学ぶと自分でももっとオシャレなブログを作れるんじゃないかと思ったわけです。
しかし私はこれまでプログラミングというものに全く触れてこなかった完全初心者なので、どのように勉強を進めたら良いか分かりません。
これからプログラミングの勉強を始めたいと思っている方も、どのように勉強したら良いか悩んでいる人も多いと思います。
そこで、今回は私がこれまでに学習してきた内容を紹介したいと思います。
学習方法
progate
progateはプログラミングの学習サイトで、私は1番初めにprogateから学習を始めました。
しかし、結局progateはあまり続かなかったです。
なぜかというと、progateは私にとっては親切すぎると思ったのが理由です。
以下にprogateのデメリットを紹介します。
デメリット
先にデメリットからの紹介になりますが、自分にとってはこれが大きかったかなと思います。
progateは穴埋め形式で、いわば計算ドリルのような感覚でコードを書くので、サクサク学習は進むのですが、実践感覚がなかったです。
実際に自分でコードを1から書いていく学習を想定していたので、私には不向きなのかなと思いました。
メリット
逆に、とりあえずプログラミングを触ってみたいという人にはおススメです。
先にデメリットを書いてしまいましたが、progateは素晴らしい学習サイトだと思っています。
自分も初めはprogateから入って良かったと思っています。
次はメリットについても見ていきます。
特にprogateの良いと思った点
✔どこが間違っているかすぐ分かる
コードを間違えたとき、何行目が間違っていますよ～という風に教えてくれるので、間違い個所を探すのに長時間悩むことはないと思います。
✔サイトのデザインが良い
可愛いキャラの解説やスライドも凝っていて分かりやすい。RPGのようにクリックしてスライドを進めていくので、学習者が置き去りになりにくいシステムになっています。
✔環境を整える必要がない
プログラミングをするには通常、「エディター」というコードを書くためのアプリが必要で、事前にインストールしておく必要があります。
progateの場合は、学習サイトの中にコードを書くスペースが用意されているので、自分でエディターをインストールする必要がありません。
これらのメリットがあるので、まずはprogateでプログラミングを触ってみるのは良いと思います。
自分はHTMLとCSSの初級編までやりました。
「HTML & CSS 学習コース 初級編」コースを修了しました。
— つっちーさん (@tekitoudeyokune) May 15, 2019
ドットインストールで勉強した後だったのですぐ終わりました。https://t.co/Ct6XXr0z3j #Progate
私は同時に後述のドットインストールでの学習も進めていたので、progateでの学習は良い復習にもなりました。
progateは中級編から有料なので、初級編まで学習したあとは放置状態になっています。
ドットインストール
progateと同じくドットインストールも初級編は無料で中級編から有料となっていますが、私はドットインストールで継続して学習していくことに決めました。
ドットインストールのページURL：
ドットインストールはより実践的なプログラミングを学ぶことができるので、今後プログラミングを使っていくことを考えたときに、こちらの方がメリットが大きいと考えたためです。
ドットインストールでプログラミングを学習することのメリットを見ていきます。
メリット
✔実践的な内容を学べる
私にとってはこれが一番大きかったと思います。
実際にコードを書くためのアプリ(エディター)を使用して学習するので、コードを書いているという実感を持ちながら学習することができます。
ちなみにドットインストールでは、アプリはインストールの方法や使い方も詳しく解説されています。
さらに、ドットインストールでは、学習の早い段階(無料で学べる範囲)で「ディベロッパーツール 」の解説があります。
ディベロッパーツールを使うことによって、文字や画像の配置が視覚的に分かりやすくなります。
これを早い段階で知っておけたのは良かったと思います。
✔作成したページを保存しておける
学習した内容を後から見直したいとき、作成したhtmlファイルやエディターを開くだけですぐに見直すことができます。
学習の中で同じパーツやレイアウトが出てきてもコピペで使い回せます。
上記に挙げたこれらの理由から、ドットインストールで学習を進めています。
学習内容
初級編
ドットインストールでは初級編の最後でこんなページを作成します。
(注：ドットインストール https://dotinstall.com/lessons のレッスンで作成したページです。)
基本は動画を見ながら、解説と同じようにコードを入力していきます。
そして動画の通りにならなかったら戻して間違い個所を探すといった流れです。
レッスンの順序としては、はじめてのHTML→はじめてのCSS→実践！ウェブサイトを作ろうの順番通りに学習を進めるのが良いと思います。
中級編
概要
中級編では、HTMLとCSSのさらに詳しい解説と、レスポンシブデザイン、アニメーションについて学べます。
レスポンシブデザインは、デスクトップPC、タブレット、スマホの各画面の表示幅に対応したデザインで、今のwebページはほとんどが対応しています。
なのでこのレスポンシブデザインを学ぶことは重要です。
サイト模写をする際にもこの知識があれば役立ちます。
Bootstrapのレッスンもこの中級編になります。
個人的には、このBootstrapのレッスンぐらいから、プログラミングが凄く楽しくなってきました。
だんだんプログラミングの知識がついてきたからでしょうか。
といってもしっかりとした知識はついておらず、分かった気になっているだけだと思いますが、「成長している感覚」を味わうことは学習を続けるうえで重要ですね。
学習時間
下図がドットインストールでの学習時間です。
動画視聴時間は8時間くらいですが、途中で止めたり見直したりしているので、学習時間はその3倍くらいで、トータル20~30時間くらいだと思います。
学習期間はだいたい1ヶ月くらいなので、毎日1時間程度のペースですね。
基本的に私は平日フルタイムで仕事をしているので、帰宅してから1時間程度勉強していました。
これくらいの学習時間が確保できれば、とりあえずはweb系プログラミング言語の基本をひと通り学習することができると分かりました。
サイト模写
簡単なサイトの1ページを模写するだけで、おそらく10時間くらいかかりました。
ちなみにこれまでの学習でサイト模写が1番大変でした。
模写したのはairbnbのサイトです。
こちらが実際に模写したページです(少しぼかしてます)。
こちらのサイトはBootstrapを使って模写しました。
Bootstrapを使えば手っ取り早くデザインができると言えど、やはり初めての模写は分からないことだらけでした。
分からないところが出てきたら、その都度Bootstrapのホームページや他の人のブログ等を参考にして進めました。
正直なところ、1から１００まで全て調べるくらいの勢いでした(笑)
ドットインストールでひと通り勉強したのでそんなに苦戦しないだろうと思っていましたが、動画を見ながらそれ通りにコードを入力するのと、実際に自分で考えながらコードを入力していくのとでは大きな差がありました。
やっぱりアウトプットは大事ですね！
それでも完璧な模写はできていませんが、とりあえずそれっぽい見た目のものはなんとかできました。
このサイト模写を通して、自分の自信にも繋がったと思います。
まとめ・今後の予定
今回、私がこれまでにプログラミングを学習してきた方法と内容についてご紹介しました。
完全初心者でも1ヶ月くらい勉強すれば、プログラミングの基本(HTML、CSS)が少し分かるようになりました。
今後やっていくこともまとめます。
・サイト模写
あともう1ページ、模写の練習をしようと思います。
こちらは来月くらいになる予定ですが、Wordpressでブログを開設し、もっと見た目をオシャレにしていきたいと思っています。
・写真サイトの運営
趣味で写真を撮っているので、写真に特化したサイトを作ろうと思っています。
最後まで読んでいただきありがとうございました。
