プログラミング勉強サイト「ウェブカツ!!」の、女性割引の要件「月二回、勉強内容をまとめてブログを書くべし」
これがあるので、本登録後一発目の記事を書きました。
まあ、私だと放っておいても書き始めますけどね、ご想像の通り。
この定時報告記事は、はてなブログに投稿するんですが、最初からはてなを意識して書き始めると、どうも書きづらかったです。(←意識しすぎてる)
なので、まずはこのブログ用を書きました。「プログラミングを知らない家族とかに報告用」と思って。
で、これを下敷きに、はてな用に要件を合わせつつ、プログラミングを知ってる方・興味のある方向けに編集して、あっちに投稿しようと思います。
なんか回りくどいけど、二重投稿も楽しいもんだ・・・！
※「ウェブカツ!!」では、学校の「部活動」になぞらえた表現をするので、以下これに倣って書いていきます。
ざっくり勉強内容まとめ
ツイッターに書いた勉強記録をまとめてみました。
サラッと流し見程度でどうぞ。
| 部員種別 | 日数 | 日付 | 時間 | 内容 |
| 仮入部 | 1～3日目 | 2月 | 3 | HTML・CSS入門 Lesson1～15 |
| 4日目 | 3/3 | 2.5 | HTML・CSS鬼練 1～10 自主練 タイピングゲーム構想 |
|
| 5日目 | 3/4 | 1.5 | HTML・CSS鬼練 11～12 自主練 タイピングゲームのHTML・js部分 |
|
| 6日目 | 3/5 | 3.5 | 自主練 タイピングゲーム制作 | |
| 本入部 | 7日目 | 3/6 | 2.5 | HTML・CSS入門 L17～19 視聴、HTML写経 自主練 タイピングゲームのアップロード作業 |
| 8日目 | 3/7 | 2.5 | HTML・CSS入門 L17～19 視聴、CSS写経 | |
| 9日目 | 3/8 | 2.5 | HTML・CSS入門 L16～19ノート取り js・jQ入門 L1～5 |
|
| 10日目 | 3/9 | 0.5 | js鬼練を読む | |
| 11日目 | 3/10 | 0.5 | js・jQ入門 L6視聴、L7途中まで視聴 | |
| 12日目 | 3/11 | 2.5 | js・jQ入門 文字数カウント作成、L7～11視聴、L8ノート取り |
|
| 13日目 | 3/12 | 2.5 | js・jQ入門 L9～11写経 自主練 CSSレイアウト |
|
| 14日目 | 3/13 | 4.5 | 自主練 jQで文字カウント遊び | |
| ～14日目まとめ | 28.5 |
HTML・CSS入門 1周完了 js・jQ入門 1周ほぼ完了 作ったもの：タイピングゲーム(独学js)、 CSS練習、文字カウント遊び(jQ) |
||
うん、なんか色々やってる。
詳しい学習内容
HTML・CSS部 入門
先に説明を置いておきます↓
web文書の構造を決めてあげる言語です。「見出し」「メニュー」「本文」「フッター」などと目印を付けることができます。
これでブラウザや検索エンジンにも伝わりやすくなりますし、後述の「CSS」で見た目を整えるための下地にもなります。
web文書の見た目を整えるための言語です。「文字の大きさ」「背景の色」「枠線を付けるかどうか」「要素の配置」などを指定できます。
これで、webページが人間に見やすくなります。上手にやると、同じ文書でも格段に見やすくなったり、かっこよくなったりします！
仮入部中
最初の部活「HTML・CSS入門」の、Lesson15までは仮入部の状態で視聴できます。ここでは基礎的な内容を学びました。(わたしは復習気分)
少しコードも書きます。
一応仮入部しなくても見れますが、進捗管理が働きません。続ける可能性があるなら、とりあえず登録してから見た方が、二度手間にならないです。
終わったら、ウェブカツブログ掲載の「鬼練」をやったり、
タイピングゲーム作って今の実力を再確認したりしてました。
ひらめいてしまったので作ったタイピングゲーム、個人的物置にUPしました。
CSS雑です💦
プログラミング語タイピング｜うさすくりぷと https://t.co/Vw4CfAUcVB【想定用途】
タイピング練習
煮詰まった時の憂さ晴らし【動作確認】Windows10/Chrome最新版
続く↓#fumizukicode pic.twitter.com/nCTIJsGhvq
— 文月@ウェブカツ1年生 (@fumizuki_k) March 6, 2019
本入部後
で、本入部後に、最後まで学習。
本入部後の内容は、格段に実践的になり、実際に簡単なホームページを作りました。
また、CSSレイアウトの自主練として、こんなの作ってみました(色は適当)↓
HTML・CSS入門 雑感
独学での不足部分や偏りが埋まって、実務ではどうだっていう豆知識や感覚が上乗せされていって、非常に楽しく学習しました。
たとえばカラーコードの書き方が矯正されたり。
CSSは、独学で知っていた内容はほぼ埋まりました。
HTMLもかなり埋まりました。
この先、レスポンシブデザイン(PCとスマホをシームレスに切り替える)の書き方くらいなら知ってるかな？ って所です。
javascript・jQuery部 入門
表の中で「js・jQ入門」と略したやつ。
ここでは、まず書き方の基礎を学びます。
そして、問い合わせフォームに文字数をカウントする機能を付けたり、必須項目が入力されたかチェックするなど、実践的な機能を作りました。
webページに動きを付けられる言語です。クリックしたら画像が拡大する、メニューがにゅるっと出てくる、文字入力すると色が変わる、などなど。私が独学で作ったタイピングゲームサイトも、javascriptで動いています。
「javascript」を簡単に使えるための「ライブラリ」と呼ばれるものです。便利グッズです。
ライブラリなので図書館で例えると、たとえば「webページ」という図書館にある「’うさぎ’の画像」を「ふわっと出現」させたい場合・・・
素のjavascriptだと、全部自力でやるので、いくつか手順を踏みます。こんな感じ↓
・「’うさぎ’の画像」を探す
・画像を0.1秒後に10%濃くする
・画像を0.2秒後に20%濃くする、以下繰り返し
・100%になったら処理を止める
jQueryを使うと「司書さん」がいるようなもので、こう↓伝えるだけで、代わりにやってくれます。プログラムでも1行です。
・「webページ」から「’うさぎ’」を探して「1秒かけて表示」してください！
一通り学習後には、jQueryの練習として何か作りたくて、こんなのを組みました↓ (ひらめいてしまったんです(汗)
プログラミング日記
【14日目 本日4.5h 累計28.5h】#ウェブカツ 休み
自主練 jQで文字カウント遊び詰まって自己解決した点：
classの付け外し(3スイッチ)、img部分のCSS・処理
結局適当な点：
CSSデザイン(jQを触りたいのが主体だから、今日はいいか、、、)#fumizukicode一人で爆笑してる↓ pic.twitter.com/nh1TcaiRuK
— 文月@ウェブカツ1年生 (@fumizuki_k) March 13, 2019
js・jQ入門 雑感
javascriptは、「実務ではこう書く」など勉強になる点もありつつ、基本的には復習、という感じでした。
jQeryは初めましてでしたが、あらかじめjavascriptを知っていたから理解しやすいのだ、とすごく思いました。
動画を見て、写経して、文字カウント作りで一日遊んで(遊びながら検索もして)、これだけで「ああ書ける」って気がしちゃいましたもの。
他のライブラリを身に付ける時も、基礎を知った後はこうやって何か作ると、嫌でも感覚が掴めそうです。
と、分かった気になっています。
全体の雑感・あとがき
ウェブカツでは、全てのレッスンを、頭から順番に見ていきます。ひとつ終わるごとに次のレッスンが開放されるので、飛ばす事はできません。
これ、経験者にはうざったいかもしれません。私も少しはそう思いました。
しかし、経験といっても趣味レベルの私には、知らなかった事が幾つもありました。
特にCSS。今まで単語だけ知って分かった気になっていたのが、単語を組み合わせて表現する方法を知って、世界が広がった感じです。
だから、順番を決めてあるのは有難いシステムだ、と今は思います。
どこから見るか迷わないのも長所です。
このCSSの件と、「プログラミングは勉強だけじゃダメ、練習しろ」を叩き込んでもらったのが、この半月で一番の成果です。
さて、今やっているのは、あくまで入門編。
今のところ、独学で理解できていたり、かじったことのある内容ばかりです。
なので、「簡単！ わかる！ 楽しい！」が前面に出ています。
当然この先、だんだん知らない内容が増えていくので、一体どうなるか、ここからが本番です・・・！
前の記事▼
次の記事▼
コメント