【プログラミング学習】IT未経験者がウェブカツに入部してみた【1週間経過】
こんにちは。
文系出身でも・未経験でも・プロのプログラマーを目指すブログ。略して「プロプロ」の
あんまん（＠aaii0123）です。
独学でのプログラミング学習に限界を感じ、
「正しい方向に向かって走っているという自信を持って学習したい」
という想いから、散々迷った挙句、オンラインプログラミングスクールの「ウェブカツ‼︎」に入部いたしました。
ウェブカツを選んだ理由については、こちらをご覧ください。
プログラミングスクールで悩んだ末、最終的にウェブカツを選んだ理由 - 文系出身でも・未経験でも・プロのプログラマーを目指すブログ
ウェブカツのサイトはこちらから。
さて、7月25日よりウェブカツの女性割引にて学習を始めて1週間弱（5日間）経過しましたので、
- その間に感じたこと
- どれくらい学習が進んだか
についてまとめます。
5日間受講した感想
まず、本入部してみて最初に思ったのは、
Progateとはレベルが違う・・！
ということでした。
Progateは難しいことはわからなくても、画面上に直接コードを書くことができ、なんとなく、プログラミングやプログラミング各言語がどういうものかを掴むには最高のツールでした。
その反面、どんなに繰り返し受講しても「なんとなくわかった」状態から「（自力でコードが書けるくらい）わかった」という状態にはなれないという大きな欠点があります。
しかし、ウェブカツでは仮入部で体験できる授業の段階から
「Progateではこれやらなかったな」
という内容が盛り込まれていました。
「本入部したら、今度はどれくらいのレベルが学べるんだろう」
そんな期待を胸に本入部したとたん、一気に実践的な内容にパワーアップして驚きました。
HTMLとCSSを、自分のPCにダウンロードしたテキストエディターで記述して、Chromeのブラウザ上で表示させながらwebページの制作を進められている
というだけで、Progateを一生懸命やっていた時よりも前進している、と感じました。
また、Javascriptの入門編では（まだ受講途中ですが）最初に、実務においてコードをどのように書くかについて、具体的にまとめてくれています。
ProgateではJavascriptの演算子や条件分岐の構文などは学んだものの、
実際のサイト制作においてHTMLやCSSとどのように組み合わせて記述するのかは全くわからない（意識もしたことがない）状態でした。
そのことだけでも、Progateに比べてウェブカツがいかに「実務で通用するプログラミング」を意識した内容になっているかを感じました。
学習の進捗
7月25日に受講を開始したばかりなので、まだ導入部分に触れただけという状態ではありますが、５日間でこれぐらい進めることができました。
- HTMLCSS部入門 Lesson16~19（実際のwebページの制作）
- Javascript・jQuery部入門 Lesson1~7
HTMLCSS部入門では、事前にProgateを３周してあったおかげか（笑）
コードを書く量が多くても、それほどつまずくことなく進めることができました。
一方、Javascript・jQuery部入門では、初見で学ぶことが多く進捗はゆっくりです。
（Progateやったはずなのに・・）
ProgateのJavascriptの講座では、Javascriptというプログラミング言語を学べても、それを使ってどのようにwebページに動きをつけるのか、までは学ぶことはできませんでした。
そのため、ウェブカツの授業ではじめて、HTMLとCSSにJavascriptを組み合わせて、入力文字数カウントという動きのある機能を実装する体験をしてちょっと感動（笑）
ウェブカツのおかげで、わずか５日間でHTMLとCSSとjavascriptを組み合わせた簡易なサイトが作れたことに驚きました。
自力で書いたプログラミングのコードでサイトを構築するというレベルにはまだまだ程遠いですが、こうした成功体験を少しずつ積み重ねてレベルアップしていきたいです＾＾
プログラミング初心者の５日間の学び
ウェブカツにたどり着くまでの数ヶ月間、Progateでお利口に（苦笑）勉強していた私ですが、5日間でかなり多くのことを新しく学んだので、最後にまとめます。
HTMLCSS
・section と div の違い
sectionは区切りに文章的な意味合いがある場合に使う（章、節、項）
divタグは区切りそのものに意味がない場合に使う（単なる区切り）
・pタグは段落ごとに囲むのが正しい
・placeholder
フォームに事前に値を入れてどんな内容を入れればいいのかわかりやすくできる
・cols/rows
textareaの縦幅/横幅
・text-decoration:none;
a タグにはデフォルトで下線がつくため、外したい場合指定する必要がある
・ベンダープレフィックス
CSS（Cascading Style Sheet）で、各ブラウザメーカーが独自に拡張した要素を記述するための特殊な接頭辞。
Mozilla Firefoxの「-moz-」
Google ChromeやApple SafariなどWebKit採用ブラウザの「-webkit-」
Microsoft Internet Explorerの「-ms-」
Operaの「-o-」
・box-sizing:border-box;
widthで指定した横幅の中にpaddingの幅・枠線の幅を含めることができる
・min-height:〇〇px;
ボックスの高さの最小を指定することができる。この指定をしないと、ボックスの中の文字の量によって高さがバラついてしまい、見栄えが悪くなる
・overfloat:hidden;
指定したfloatが次の要素にも続けて適用されてしまうのを解除できる
＜コードの記述でつまずいたところ＞
・CSSが反映されない
→index.html の header の linkタグ内の記述に誤り
<link rel="stylesheet" type="text/text/css" href="style.css">
・見出しの「 CONTACT」が右寄りになってしまう
→header h1 のpadding を20px→15pxと小さくしたら直った
・「送信」ボタンのpaddingが反映されず
→ padding: 15px,30px;から padding: 15px 30px;にしたら反映された
（数字の間にコンマいらない）
Javascript
・javascriptの書き方3つ（基本は１。量が多くなる場合は３）
１.<script>タグの間にかく
<script>
alert('ok');
</script>
2.HTMLタグ内にかく
<p onclick="alert('ok');>
</p>
3.外部ファイルを作り、そこにjsをかく
//htmlファイルの<head>タグ内に書いて外部のjsファイルを読み込むことができる
<script type="text/javascript" src="test.js"></script>
・javascriptがかける場所３つ（基本は１か２）
1.<head>タグ内に<script＞タグを使って記述
2.<body>タグ内<script＞タグを使って記述
3.タグ自体の中
・jsの３つの気をつけるところ
1.記述位置は適用したい要素の下以降に記述する
2.全角は「""」「’’」で過去む
3. jsを外部ファイルに書いた場合、そのjs内でCSSファイルなどを読み込む時には
外部ファイルを読み込んだhtmlを起点にしてCSSファイルなどのパスを指定する。
jsファイル起点ではない。
「./css/style.css」✖️ 「css/style.css」○
まとめ
ウェブカツ受講の最初の５日間は、いきなり学びが多くとても充実していました！
今は、もっとプログラミングでできることを増やせるよう早く先に進みたくて仕方ありません。
復習と練習にも気を抜かず、しっかり積み上げていきたいと思います＾＾
