頑張る主婦！プログラミング Support by ウェブカツ‼️ vol.5.5[テトリス風ゲーム 全コード公開]
このブログは
ウェブカツ＆プログラミング歴5ヶ月半の人による
・他のプログラミング初心者に送りたいこと
・自身の学習記録
などをまとめたものです。
JavaScriptで作るテトリス風ゲーム
See the Pen aboyvrV by hitoro (@hitoro) on CodePen.
※Resultを押すとゲームで遊べます（×1はレイアウトが崩れています）が矢印キーで画面が勝手にスクロールされてしまいます。改善方法がわからず申し訳ありません。
上記のコードはツイート後に書き換えたものになりますので、ツイート内の動画と異なる点がございます。
自主練テトリス、とりあえず完成した〜〜〜！！！
— ひとろ＠ウェブカツ‼ (@hitoweb) 2019年8月28日
こんなシンプルなゲームでも作るんめっちゃ難しいんや。。。
動かせない範囲を設定するのが難しかった。
壁突っ切っていくし、壁にブロックが触れたら空中でブロック浮いたまま止まっちゃうし。
細かいところ修正が必要。#ウェブカツ女性割引 pic.twitter.com/kzwF2rQINw
ゲーム概要
・4つの正方形を組み合わせた7種類のブロックを使用する
・ブロックの可動範囲はグレーの壁の内側の横10×縦20列の黒い部分
・ブロック1つ落ちるごとに落ちる速さが少しづつ速くなる
・←→キーで左右移動、↓キーで速く落とす、↑キーでブロック回転する
・一列揃えて消すごとにスコアが入る
・まとめて消す方が高得点に繋がる
・次に落ちてくるブロックが右上に表示される
HTML・CSSはウェブカツのHTML/CSS部を頑張ってきている人には特別難しいことはないと思います。ただ一つ、ウェブカツでは出てきていないタグがあります。
<canvas>というものです。
グラフィックやアニメーションの描画領域を表します。描写領域だけなので実際の描写はJavaScriptで行います。
<canvas width= "200"; height="300" >のように
単位はつけません。
対応しているcssファイルにmarginやpaddingのように単位（px）をつけると拡大されてぼやけて表示されレイアウトが崩れます。
（参考） http://www.htmq.com/canvas/002.shtml
以下jsファイル内のコードについて、順を追って説明していきます。
（0）落ちてくるブロックを作る
＼こんな形のブロック達を使いますよー／
と宣言し、配列データ（ブロックを）を作成して初期化します。
多次元連想配列の形式でブロックを箱に入れていきます。
0が空欄、1がボックスのある箇所を表しており、これがどのブロックなのか視覚的にわかります。
それぞれに色を指定します。
（1）スタンバイ画面
ここでゲームのバック画面を作ります。
getElementByIdで('back')を指定し、HTMLの中の<canvas id='back'>と関連付ける。続いてgetContextで描画機能を有効にする。('2d'がつくのはお決まりです)
壁の中の色や線の色の指定をします。
（2）ゲームスタート
背景が黒い('back')と、透明の('game')、2枚のスクリーンを重ねて透明の方にブロックを描きだしています。
ここではまず('game')を指定して要素を取得し、('2d')でブロックをかけるようにします。
ゲームが始まる前に一旦クリアしないと前のゲーム画面が残ったままなのでclearします。
runとはゲームが動いている状態（処理が走る）です。
全てのマス目に100という値を持たせます。
そして壁の部分にだけ99という値を持たせます。
後々ブロックは100のところだけ動けるという関数を作ります。
Math.floor(Math.random() * ◯ );
でブロックとその向きがランダムに出現するように設定します。
次のブロックを右上に表示させます。((7)を参考)
（3）ブロックを表示する
落下中のブロックは白い線で目立つようにしました。
bcolor[type] とすることで(0)で指定したブロックの形と色を対応させて表示します。
ここでのm:横方向、n:縦方向を表します。
例）T字のブロックの場合
mが左上から順に4個まで読み込む[0,0,0,0]
nが上から4列まで読み込む
[//
[0,0,0,0],
[1,1,1,0],
[0,1,0,0],
[0,0,0,0]
],
座標に1の値を持つところに枠線と色をつける
fillRect,strokeRectの引数の、前の2つはブロックを置く座標。
1つのブロックのサイズが20で作っているので座標を1表すのに*20している
後ろの2つは縦横20ずつ塗るという意味
（4）移動するための消しゴムモード
2Dコンテキストが消しゴムのようなモードに切り替わり描いた部分が消えます。
動作上ではそのまま形をキープして移動しているようにみえますが、
消す→次の場面に表示する、というのを繰り返しています。
（参考） globalCompositeOperationについて
http://www.htmq.com/canvas/globalCompositeOperation.shtml
（5）横移動と回転
ここでの(e)とは押したキーが何かを判断するための引数となっています。
ブロックを動かすので取得したいのは手前側の透明な('game')のスクリーンです。
動かす前に現在の座標と向きを一旦箱に保存しておきます。
消してから移動します。
keyCodeとは・・・
[←] 37 [ ↑ ] 38 [→] 39 [ ↓ ] 40
とコードが決まっているのです。
回転させるときの (iturn+1)%4; とあります。
％とは割った時の余りを表します。
なので上下左右それぞれに0〜3の数字を持たせて向きを変えています。
checkは(8)で説明します。
（6）下へ移動
('game')画面取得して('2d')で描けるようにします。
先ほどと同様現在の座標と向きを保存します。
消してから移動しますが、移動できるのか確認しています。
移動できるなら新しい場所に描き、できないなら移動前の場所に戻します。
当たり判定用の配列に設定します。
当たり判定とは・・・
移動したい方向に壁やブロックがあるとき、ブロックの上に乗ったときに動けないことを伝えないといけません。この判定がうまくできていないとブロックが壁を突っ切っていって、もはや何のゲームかわかりません。
stateという変数に値をいれて判断します。
0〜6ーブロック
99ー壁
100ー何もブロックがないところ
横一列のなかに99も100もなければ何かしらのブロックが入っている
＝＞1列揃った！！！
ということがわかります。
alineは(9)、scoreCalcは(11)で説明します。
（7）次のブロックの表示
次のブロックを表示する箇所('next')を取得します。
ここでも前のブロックが残って表示されないように一旦クリアします。
次のブロックをランダムで表示させます。
次ブロックが表示されるたびに（落ちるたびに）スピードをあげていきます。
初期値は1000ミリ秒で1マス落ちるのですが、50ミリ秒ずつ速くしていきます。
100ミリ秒より速くならないように設定しています。
（8）移動可能か調べる
移動したい場所にブロックが置けるかどうかを調べます。
引数は（置きたい場所の左からの座標,上からの座標,ブロックの回転向き,ブロックの種類)
範囲外のところには置けないようにします。
bx＋m（横方向の座標）が<0（左の壁を指す）、＞11（右の壁を指す）の場合はfalse
bx＋n（縦方向の座標）が<20(下の壁を指す)の場合はfalse
また100（空欄を指す）じゃない場合はfalseという意味です。
これで壁を突っ切らず、ブロック同士が貫通せず表示できます。
（9）揃った列を消して下にずらす
左上のマス目から順に全てのマスをチェックしています。
（6）の当たり判定の話にでていたように、
1列全部100でも99でもない ＝＞ 1列揃った！！
という判定が行われています。
列が揃ったら消えて残ったブロック達を下にずらします。
ここでデクリメント(--) を使うんですね。
インクリメント(++)はよく出てきますがデクリメントはどこで使うんだろうとずっと思っていました。
for文の引数はlineの「l」を取って列を消しています。
（10）ずれたブロックを表示する
canvasを取得 → 全部消す → もう一度表示
clearRectまではこれまでの説明と同じです。
次のfor文は100でも99でもないところ、つまり列が揃ったところに上書きしています。
（11）スコア計算
switch文で消した列が1列の場合は100点としていっぺんに多く消すとより高得点が出せます。
スコアがゲーム画面上部に表示されるようにinnerHTMLで書き換えています。
（12）自動落下
テトリス風ゲームの一番大事なのは自動落下ですよね。
runの間（ゲームが動いている間）はdown下に動く関数を実行することで、自動落下を再現することができます。
以上でテトリス風ゲームのコードの説明です。
最後までご覧いただきありがとうございます。
自分自身jsの理解が甘く、無駄なコードや、説明が不十分でわかりづらい点、誤っている点、多々あると思います。
今後も積極的に知識を入れて恐れずアウトプットに挑戦していけるように精進してまいります。
◆ウェブカツ記録◆
ウェブカツでプログラミングを学習し始めてから早5ヶ月半がたちます。
進歩状況
▼前回のブログはこちら
・オブジェクト指向部Lesson4
8月後半ウェブカツはやっていません。
少し気分転換して勢いをつけてまた頑張りたいなと思ったのでテトリス風ゲームを作ることになりました。
勉強時間
ウェブカツ → 180h
補足 → 24.5h
合計 204.5h
（自主練を含めた総勉強時間266h）
ウェブカツ、補足時間はほぼ増えておりません。自主練に多く費やしました。
8月末は19時間プログラミングと向き合うことができました。
▼女性割引を使ってプログラミングを学べるスクール
ウェブカツのサイトはこちら
頑張る主婦！プログラミング Support by ウェブカツ‼️ vol.5[締め切りにクライアントが求めるものを作るには。]
このブログは
ウェブカツ＆プログラミング歴5ヶ月の人による
・他のプログラミング初心者に送りたいこと
・自身の学習記録
などをまとめたものです。
締め切りにクライアントが求めるものを作るには。
締め切りに条件以上の素晴らしいものが仕上げるのが一番ですが、
手順を怠ると締め切りにすら間に合わない、という事案が発生します。
①最低限の機能を持ち合わせたサービスを製作。
②期限までの余った時間でデザインを考えたり、機能を膨らませる。
イメージ的にはこんな感じ。
0〜10の数字で例えると
0のところからとりあえず1、5、10の機能を大まかに作り、
間の2〜4、6〜9を作り、
余った時間で小数点以下の数字の機能を組み立てていく。
大工さんが家を作るのとは違いプログラミングは後から変更したり、組み替えたりが容易にできます。
ところが私は履き違えてしまいました。
やりたいこと盛りだくさんのサービスを端っこからいちから作ろうとして結局何にもならない、使い物にならないものになってしまい、わけのわからないバグに立ち向かえず諦めてゴミとなってしまう。
1〜2の間に0.1ずつ細かいところで悩んでやってたらいつまでたっても10にはたどり着かず、4.5とか中途半端で諦めてしまっているのが現状の私。
かずきちさんも以前から仕事はスピードが大切だとおっしゃっています。
私はWeb系の仕事を1年以内に始めたいと思っています。
今後自分自身のスピード感も高めていけるよう意識改革していかねばなりません。
◆ウェブカツ記録◆
ウェブカツでプログラミングを学習し始めてから早5ヶ月がたちます。
▼前回までのあらすじはこちら。
進歩状況
・オブジェクト指向部Lesson1〜3
これまでやっていたWEBサービス部アウトプットが完成したわけではありません。自分の進み具合に満足が行っておらず、やる気が下がってきてしまいました。
プログラミングに対するやる気を取り戻すため、柔軟な脳を得るため、新しい刺激で脳の活性化を図るため、今回オブジェクト指向部に突入することにしました。
勉強時間
ウェブカツ → 175.5h
補足 → 22.5h
合計 198h
（自主練を含めた総勉強時間247h）
8月前半は13時間の勉強時間でした。
熱中症になり何もできない日があったのが残念です。
体調管理をしっかりして、取り戻して行きたいと思います。
▼女性割引を使ってプログラミングを学べるスクール
ウェブカツのサイトはこちら
プログラミング Support by ウェブカツ!! vol.4.5 [こんな装飾できるんだよアピールはいらない]
このブログは
ウェブカツ＆プログラミング歴4ヶ月半の人による
・他のプログラミング初心者に送りたいこと
・自身の学習記録
などをまとめたものです。
こんな装飾できるんだよアピールはいらない
プログラミングを学び始めて4ヶ月半。
Webサービス部アウトプットとして日記を作成しています。
Webサービス部アウトプットとして日記を作成しています。
なーんかごちゃごちゃしてんなw
下手に画像入れるの一切やめました。
ボタン一つにしてもより立体的に見えるように影をつけたリッチデザインから
最近では無駄なグラデやエンボス加工などは排除して
シンプルなものが求められています。
最近では無駄なグラデやエンボス加工などは排除して
シンプルなものが求められています。
そのため
遅い回線でも速やかに表示される
シンプルで軽いサイト
が求められてきています。
WEBサイトにも流行ってあるのだなあと思い、シンプルなデザインに変更しました。
プログラミングを学ぶ上でこういった考え方も必要なのだと思います。
機能が先、デザインは後！！！
デザインに凝ってる暇あったら機能を整えろ。
◆ウェブカツ記録◆
ウェブカツでプログラミングを学習し始めて約4ヶ月半が経ちます。
▼前回までのあらすじはこちら。
進捗状況
・WEBサービス部Lesson25
・TEST部Lesson7
(前回と同じです)
アウトプット中なのですがなかなか思うように機能の実装ができずに滞ってしまっています。
復習として過去の動画を見返したりしています。以前に比べて理解度が増していることを実感できました。
勉強時間
Day128 自習1.5h ウェブカツ165.25h＋補足18h＝183.25h
— ひとろ＠ウェブカツ‼ (@hitoweb) 2019年7月24日
Udemyでずっと前に購入してた動画見た。サイトを作る上で同じ目的のサイトを見まくっていいところを真似していける調査力が必要！
明日明後日はおやすみします！！！！
デ ィ ズ ニ ー 行 っ て き ま す ！#ウェブカツ女性割引
ウェブカツ → 165.25h
補足 → 18h
合計 183.25h
（自主練を含めた総勉強時間231h）
ほぼ自主練だったのでウェブカツの勉強時間は進まず。
トータル時間数は毎月減ってきているのが残念ではありますが、
以前に比べてコードに対するなんじゃこりゃ感が減ってきました。
7月、幼稚園生の息子は夏休みに突入し（てしまい）ました。
愛用のmacにいつジュースをこぼされるか気が気でなりません。
Day128(7/24)を最後にプログラミングノータッチ😭😭😭
— ひとろ＠ウェブカツ‼ (@hitoweb) 2019年7月29日
プログラミング始めてから4日間も触ってないのは初めて。
やばいぞこれは。。
しかし
私は辞めませんので！！！！
このままフェードアウトなんて絶対しないぞ！！！！
空白の4日間ということで勝手ながら7/29をDay129とさせていただきます。
プログラミングを始める頃、半年でウェブカツを卒業しよう！！って思ってたのに
想像以上のレベルの高さで卒業の’そ’の字も見えてきません。
周りのウェブカツ生の進捗スピードには驚かされますが、
自分のスキルをあげるために自分のペースでやっていこうと思います。
8月、息子がいる中でどれだけ時間確保できるかわかりませんが、
「ママパソコンばっかり・・・」
と子供に寂しい思いをさせないように気をつけたいと思っています。
早く夏休みA・KE・RO！！！
▼女性割引を使ってプログラミングを学べるスクール
ウェブカツのサイトはこちら
プログラミング Support by ウェブカツ!! vol.4 [元気がいちばん！家族の健康を支えるのも主婦の仕事]
このブログは、
ウェブカツ＆プログラミング歴4ヶ月の人による
・他のプログラミング初心者に送りたいこと
・自身の学習記録
などをまとめたものです。
健康が土台にあるからこそ
関西では梅雨入りが遅く、変な天気の日が続きました。
私は台風による低気圧によって調子悪い＆風邪気味で免疫力が落ちていました。
1週間つきっきり看病をして、見事に私も感染してしまうというカオスな初夏となりました。
健康が第一ということ。
忘れてはいけないことですね。
感染してしまったものは仕方ないので、次なる感染を防ぐためにマスク手洗いうがいを、もっともっともっと！！徹底しておけばよかったと後悔しました。
プログラミングや勉強に限らず体調が優れない時は無理にしても非効率になって疲れてしまうだけなので、無理せずに休みましょう。
◆ウェブカツ記録◆
ウェブカツでプログラミングを学習し始めて約4ヶ月が経ちます。
▼前回までのあらすじはこちら。
プログラミング Support by ウェブカツ!! vol.3 [おすすめのインプットの進め方] - 【ひとろ】ウェブカツ‼でプログラミング学習
進捗状況
・WEBサービス部Lesson25
・TEST部Lesson7
新しく始まったTEST部ですが、WEBサービス部を最低１回はやり終えた段階で視聴するのがおすすめだと思います。実際のテストがどういうページで行っていくのかがとてもわかりやすく紹介されています。
環境構築の段階なのですが、実はいまここで詰まっております。
初めてサイト内で質問をしました。即日お返事をくださっていたので驚きました！
実はお恥ずかしながらいまだにクリアできていない状況なのでいち早く突破していきたいと考えています。
プログラミングができる人はググる力があるということですね。
勉強時間
ウェブカツ → 165.25h
補足 → 15.5h
合計 180.75h
（自主練を含めた総勉強時間219h）
Day118 ウェブカツ165.25h＋補足15.5h＝180.75h
— ひとろ＠ウェブカツ‼ (@hitoweb) 2019年7月14日
アウトプット大苦戦中、、！
もう一周WEBサービス部固めてからにしようかな。#ウェブカツ女性割引 pic.twitter.com/UBHCh6Y6Pk
（あと半月で他の月との差をどれだけ縮められるか。）
画面の作成に関しては進めてはいないけれど、
ちょこちょこと空いた時間にコードをなるべく見るようにしていた結果、WEBサービス部のデータベースとの接続関連の関数だったり、ところどころですが
「あっなるほど！そういうことだったのか！」と
繋がることがありました。
それも自分の中では大切な一歩です。
7月後半、実りのある半月にしたいと思います。
▼プログラミングスクール
ウェブカツのサイトはこちら（女性割引ユーザーです）
【初心者向け】プログラミング Support by ウェブカツ!! [PHP Notice: Underfined variable: を倒せ]
このブログは、
ウェブカツ＆プログラミング歴3ヶ月半の人による
・他のプログラミング初心者に送りたいこと
・自身の学習記録
・わからないこと、困ったことの解決方法
などをまとめたものです。
今回の内容は、多くのウェブカツ先輩方も苦戦を強いられた
「ウェブカツWEBサービス部のアウトプット」についてです。
プログラミングでWEBサービス作成
アウトプットにたどり着くまで
プログラミングをはじめて1ヶ月。
(2019/04/23)WEBサービス部解禁！！！
↓
(2019/05中旬)大苦戦・・・っ！！！L10〜12あたりで訳わからなくなる。
× このまま進んだってわからないところが増えるだけ
○ わからなくても先に進んでOK！あとからわかる
ウェブカツ受講生の先輩の言葉を聞いてとりあえず先に進んでみることに。
↓
(2019/05中旬)1周目：動画を見て全体のボリューム掴む（うーんやっぱわからん）
↓
(2019/05下旬)2周目：ところどころ手を動かしてやってみる（あれ？少し読めるようになってきた）
↓
(2019/06中旬) 無 事 突 破 ！ ！ ！ ！
↓
(2019/06下旬)アウトプットで日記作成中（今ここ）
WEBサービス部で苦戦して進めない方はわからなくても進んでみましょう！！
アウトプットの内容
現在日記サービスを作成しています。
DBに反映されない
「入力フォームに文字を入れて投稿してもデータベース（以下DB）に反映されない」
という事象で数日間悩まされました。
それも記事の内容だけ。
下はDBのdiaryテーブルの中身を表示しています。
[diary_text]のカラムに薄いグレーで「NULL」（ヌル：空文字といって値がないということを指す）と記載があります。
title、create_date(作成日)などのカラムには反映されています。
初心者に多い単なる打ち間違いや「;」の抜けなど必死に探しましたがなかなか見つからず・・・。
今回無事に突破することができたその方法とは？！
解決方法
DBにdiary_textのデータのみ入らなかった原因、
それは．．．
47行目が抜けていた（つまり変数を定義していなかった）！！！
そのphp.logを見てみると（文字が細かくてすみません）
205、208行目 PHP Notice: Underfined variable: diary_text とあります
日本語で「注意： 未定義の変数です」という意味になります。
変数を定義すれば問題なくDBに保存ができました！
数日間悩んで悩んで解決した時の嬉しさったら！！！
進歩はかたつむりですが、また一歩、前日の自分より進めたのでOKです。
「他人と比べない。比べるなら昨日の自分と。」
ウェブカツはツイッターで受講生と繋がることができます。
他の人の進捗ツイートを見て
「おおおおおお自分も頑張ろう！！！！！」となればOKです。
コードがうまくかけない時、
思ったような表示にならない時、
思ったような表示にならない時、
レッスン動画についていけない時、
バグが出た時、、、
壁にぶち当たることも多々あります。
「自分にはプログラミングは向いていないんじゃないか」
と挫折しそうになることがありますが
プログラミング以外の世界でも同様に言えることだと思いますが、
昨日の自分より
1週間前の自分より
1ヶ月前の自分より進めていたらOKです。
【Brackets】インデントの数を変更する方法
こちらはBrackets初心者に向けた記事です。
Bracketsを使用してコードを書いていますが、
デフォルトではインデントとしてスペースが4つ入ります。
4つも空白が入ると入れ子がだんだん増えてくると見づらくなります。
▼スペース4つ
▼スペース2つ
入れ子が多くない箇所なので大差ないように見えますが、スペースが4つだと3行目9行目がギリギリ入らなくて折り返して表示されてしまっています。
インデントの数の変更する場所は
画面右下、「スペース：4」と書かれた場所です。
数字のところをクリックすると変更できます。
ちなみに「スペース」の文字のところを押すと「タブ幅」の変更ができます。
タブ幅が4だと
このようになります。
おしまい。
プログラミング Support by ウェブカツ!! vol.3 [おすすめのインプットの進め方]
このブログは、
ウェブカツ＆プログラミング歴3ヶ月の人による
・他のプログラミング初心者に送りたいこと
・自身の学習記録
などをまとめたものです。
おすすめのインプット進め方
ウェブカツWEBサービス部に入ってから
扱うファイル数が爆発的に増え、
それぞれのファイルの中で関数を扱うようになり、
あっちのファイル、こっちのファイル、、、
と複数ファイルにまたがって解説されるようになります。
他のウェブカツ生、またはプログラミングを学ばれている方にも
ぜひ活用してもらえたらと思い、
今回は「Evernoteを活用したノート作り」等についてまとめました。
Evernoteを使うメリット
スクリーンショットのやり方
いろんなやり方がありますが私がもっともやりやすいと思うのは
指定する範囲をクリックボードに保存するやり方です。
①「 command + shift + control + 4 」を押す
② カーソルが十字に変わる
③ 範囲を指定する
④ カシャ！と音がなりクリップボードにコピーされる
⑤ 貼り付けたいところに 「 command + V 」で貼り付けする
他にもやり方はいろいろありますので「mac スクショ」などで検索して
ご自身でやりやすい方法を見つけてください。
下記写真の様に
左のウェブカツのレッスン動画をスクショで撮り、
右のEvernoteに貼り付け、解説を書きます。
このやり方で現在落ち着いています。
操作スペースを増やす
動画、コード、ブラウザなど同時に見たい画面がたくさんあります。
レッスンによってはPHPMyAdminでDBを操作したりターミナルを使用したりしますので、移動時間を少しでも節約できるように、簡単に行き来できるように、
複数の操作スペースをつくりました。
（トラックパッドの設定にもよりますが）
4本指で上にあげると下記の画面になります。
画面上部の4つの画面中、主に右から3画面を使用します。
タップして選択して開きます。開いた状態で3本指スライドすると画面の移動ができます。これが非常に便利です。
の順で並べています。
複数の操作スペースを作る方法
便利なショートカット
自分の備忘録として。
- 英字と日本語の切り替え
⇨「command」+「スペース」
- カーソルの後の文字を消す（＝Windowsの「Delete」）
⇨「fn」+「delete」
- 開発者ツールを開く
⇨「cmd」+「alt」+「 I 」
- 上下移動
⇨「cmd」+「ctrl」+「↑（↓）」
◆ウェブカツ記録◆
ウェブカツでプログラミングを学習し始めて3ヶ月が経とうとしています。
▼前回までのあらすじはこちら。
前回の◆ウェブカツ記録◆まではエクセルで記録をしておりましたが、macに乗り換えてからはStudyplusで記録し始めました。
下記のようにレッスン別で記録するようにしています。
どこまで進んだか？
・WEBサービス部 Lesson21途中(全25回)
この1ヶ月間で進んだところはWEBサービス部のLesson11〜21です。
Lesson10〜12あたりが全く理解できなくて進んでは戻って進んでは戻って・・・を繰り返していました。
また5/27の週はmacを購入したために環境構築にかなりの時間が取られてしまいました。
勉強時間
これまでのウェブカツのトータル勉強時間 → 145.75h
（ウェブカツ → 14h（5月後半）＋17.75ｈ（6月前半）
動画の視聴時間、動画に伴うコーディング）
補足も含めた総合勉強時間 → 180.25ｈ
（補足時間 → 3.5ｈ）
この1ヶ月間で35時間ほどプログラミングと向き合うことができました。
仕事しつつ、家事しつつ、3歳男の子を育てつつ・・・
という現在の私のライフスタイルではこれくらいは保っていきたいです。
もっと限界切り詰めていけばさらに勉強時間確保できるとは思うのですが、
今は息子がいる時間は息子とのふれあいを大事にしたいとも考えています。
しばらくWEBサービス部のインプットばかりになってしまっていたので、
早くWEBサービス部を完了し、アウトプットに入りたいと思います。
ウェブカツ女性陣がプロジェクトに走り出した話
ウェブカツ女性割引ユーザーのみならず、ウェブカツ女性陣によるプロジェクト計画の話が持ち上がっています。
今朝の@ukaprogさん、@suzume0100さん、@saika00さんのやりとり見て私も思いました！女性部員どんどん増えてきたし、実績作りたい人多いと思うし。なんなら会社作ります？笑 https://t.co/5uhbhYyQIk
— ここと@プログラミング学習中 (@cocoto_st) 2019年6月12日
ここ数日、slackの中で多くの意見が飛び交っています。
これが実現できる時がくるといいなあ。。
メンバーに負けないよう積極的に行動していこうと思います。
▼ウェブカツのサイトはこちら
