おおお！いよいよ　Bootstrap

他の部署の企画会議でたまたま聞こえた単語、

俺：ブートストラップ？なんなんだろう。。

俺：WEBの会議だから、プログラミング言語かな？

と勝手に思った、それ！

実は言語ではなくてフレームワークでした。

フレームワークは機能の塊？みたいな感じだと思います。

CSSを手打ちするのが面倒だし、高級機能を使うと色々トラブルが発生しやすいから、よく使う機能を事前に用意しておいたのがBootstrap。。。。あってる、、あってますよね？！

簡単にいうとCSSを手打ちしなくても楽に使えるためのもの。

これを使うには getbootstrap　のサイトを参照する必要があります。

BootstrapThe most popular HTML, CSS, and JS library in the world.getbootstrap.com

ドキュメント（マニュアル）はこちらのリンクを参照しました。

今回勉強して思ったのが一つありまして。。。

今までのプログラマーは映画のハッカーさんみたいに全ての知識が頭にあってそれをパパパッパとタイピングする人間だと思いました。

しかし、全部覚えるのもかなり難しいし、覚えなくてもいんじゃないかな？と思いました。

俺：あれ？HTMLも、CSSも、Bootstrapもマニュアルが用意されていて、さらに関連しているのまでサンプルがあるね〜

俺：このマニュアルさえ読めば何とかなれるんじゃないかな？

俺：つまり、言語の基礎を学んで、関連がある言語をうまく混ぜるのが、プログラミング？

俺：本や単語を全部覚える必要はない？？！！

つまり、学校の勉強のように１から１００まで全て暗記する必要はないと思います。

グーグル先生を使ってカンニングしても大丈夫だから！

一応、こんなことを考えながら、今日の勉強分を　githubへアップしました。

  残業完了

今日は予定通りの残業。

でも、考えたより長かったです。

気温も高いし、湿度も高いし、、、

体力的に限界ですね〜

明日（今日か！）、トラブルなしで過ごせるように〜〜〜

  flexbox

後味悪かったcssのflexbox。やっと終わりました。

でも、ちょっと不思議なことを経験しました。

勉強を始まる前。。。

俺：昨日、眠たくて眠たくてやったんだから、何も覚えてないんだろうな〜

　　最悪は最初から見なきゃ。。。。

しかし、続きの動画を見ると昨日より理解しやすく感じました。

本当に理由はわかりませんが、説明を聞くと昨日タイピングしたワードや文章が無意識的に出ました。

あ！

俺、天才じゃないし、ほんの一部の話です。。。

でも、集中してみて、コピペじゃなく面倒でも手打ちしたからかもしれません。

そして、一番難しかったのがこれ！

いまだに、チンプンカンプンです。

flexって、カッコよくするためには絶対必要だけど、その分、上達するには相当な慣れが必要だと思います。

うんんん〜〜

１００回？くらい繰り返したら理解できるかな？

  そして、@media

やっとわかりました！！

ホームページを見たときにブラウザの幅を帰るとコンテンツのデザインやUIが変わるのが不思議でした。

その理由をやっとわかりました。

それはcssの中で@mediaというワードを使って設定します。

俺も、やってみました。

ただのサンプルコードではなくて、ヘッダーメニューがブラウザの幅によって形が変わります。

右が、ブラウザの幅が広い時の画面。

左が狭い時の画面。

メニューが縦になって、Media Queriesの文字色が変わります。

これを応用すると反応型サイトが作れます。

ここまでのソースは　githubへアップしました。

---

1000日のうち、10日。今日で全体の1％が終わりました。

10日では何もできないと思いました。

が、HTMLとCSSをさっと味わうことができました。

こんな短い10日（実際の勉強は20時間程度）でも毎日すれば得るものはありました。

小さいと思ったら小さいですが、この気持ち、忘れないようにしたいです。

  Flexbox

俺：

俺：

俺：

俺：

なんだと思いますか？

flexboxの講座を見て、理解しようと思った私、 覚えようと思った私、応用しようと思った私です。

昨日までのCSSはまるで幼稚園組の難易度なら、今日はいきなり中学生レベル！

なぜ高校生じゃないのか？さらに難しいのが待ってるらしいです。。。

それでも、難しいからなのか、結果が結構かっこいいでした。

flex-direction　を使うことで並びが変わったり。。。

並びの順序をかえったり。。。することができます。

そのほかにもjustify-conten、align-item、flex-wrap　などが新しく出たタグです。

各々なら、なんとかついて行けるかもな〜と思いっきや、この４つのタグの要素を帰ると様々な応用が出来上がります。

問題は頭で想像ができなくて、いちいち打ってみないと見ないと分からない事です。

打ってもなんでこうなるのか理解するまで時間がかかるのが問題です。

魂の半分は頭から出てしまいました。

一旦、ここまでやったのはGithubへアップしておきましたので、、、、もし、興味がある方は。。。。

  退社したのに！！！！

勉強中にスマホのslackがピカピカお知らせを出しています。

俺：嫌だな〜〜〜

俺：予感が良くない〜

俺：見なかったふりするかな。。。？

でも、気になるのは仕方ありません。

結局、メッセージを見たら、予想通りにトラブル発生！！

会社のPCの電源を入れ、仕事に入りました。

終わってみたら、もうこのこんな時間。

ヘトヘトです。

ビールを飲みながら、ブログを書きますが、終わったら寝ます。

「講座を毎日１時間見る」計画は満たせませんでした。

悔しい！！

  CSSプロパティ

今日のCSSは今までの中で、一番難しかったです。

でも、一番面白かったです。

CSSを設定しなかった場合はこのように見えるボタンが。。。。

設定するとかっこよく変わります。

さらに、マウスをこのボタンの上に載せると！！！

このように変わります〜〜〜〜〜

変わりました！

みなさん：だから何？普通じゃん。。。。

俺：ですよね〜〜

　　でも、私は今から、一人でこんなのを作れるから嬉しかったです。

本当に、つまらないボタンひとつだったんですが、今からは作れます。

しょぼくてダサい仕方ありません。

こんな感じで、cssを使ってアニメーション効果を入れてみたり、位置をかえったり固定させたり、HTMLではできないことをいっぱい学びました。

その分、タイピングはしましたが、概念があいまいな部分が多いです。

いつか、この小さな部分が集まって大変な問題を起こしそうです。

でも、それはその時！感がよう〜〜！！

  Githubデビュー

このGithub。

周りの人は絶対必要なものだから、何より早く学んだようが良いって言ってくれました。

俺：プログラミングを勉強するし、ソースコード！！！の管理が必要じゃないかな〜

　　やってみよう！

と思って、適当にやってみました。

グーグル先生のアドバイスを得て、やった初めてのadd, commit, push, pull の結果がこちらです。

link : https://github.com/evernewie/udemy_the_web_developer_bootcamp/tree/css_box_model

隙間の時間にちょこちょこやって、やっとここまでできました。

まだまだ、何が良いかよくわかりませんが、これも引き続きやって行こうと思います。

今日は仕事も少し多かったし、月曜日だし、疲れました。

それでも、楽しかったです。

明日、また仕事。。。。なので、ベットへ行きます。

みなさん、おやすみなさい。

  今日の勉強：ボックスモデル

今日はCSSのボックスモデルについて学びました。

inline, block, inline-block が今日のベストキーワード。

そして、練習問題を！１回目でパス！！！

しました。

ヒントも見なくて、カンニングもしなくて、自分の力だけで１発パス！

その結果がこちらです。

左ののイメージをcssを修正して、右のように変えました。

イメージを丸くして、テキストを中央に配置。

各々の枠に線と色をつける。

俺、１週間でこれができるようになりました。

早い人は数十分でできる内容かもしれませんが、、、

  週末に負けた！

元々は週末は4時間以上、勉強しようと思いました。

それが。。。。それが。。。

結局、自分に負けました。

寝る時間も長くなって、勉強の画面を開くまで、遊びが多くなりました。

甘い俺：良いよ、良いよ。仕事する時間の半分くらい勉強する考えだから、できる。ちょっと遊ぼうよう。

　　　　そうだね〜ちょっとだけだね〜

、、、が、あっという間に3時間になりました。

遊んだ後味も悪くて、またやちゃったの感じで後悔が強かったです。

昨日、反省したばかりなのに。。。

愛する家族との時間、平日の仕事でのストレスなどを考えて週末の勉強時間は考え直すのが良いかもしれません。

意欲だけで欲張ったら、すぐ諦めることになるかも。。。

さ、、来週の仕事のために今日はここで勉強は片付けます。

みなさん、おやすみなさい。

  HTML一次完了

やっと基礎中の基礎HTMLを味わいました。

今までの中で今日のHTMLタグが一番重要だと思います。

Form タグですが、入力内容を次のページまたはサーバーに送信するためのタグらしいです。

概念のために簡単な例でしたが、不思議できた。

いつかはデータベースにこの内容が反映できる日が来るまで、もう少し頑張らないと。。。。

  いよいよCSSへ

CSS!入りました。

色、装飾、位置などデザインに関する要素をコントロールするのがCSSだそうです。

文字の色を変えたり、ボタンの色をかえったり、文字のサイズを調整したり……

HTMLとは違って、CSSを変えたら、ダイナミックに内容が変わります。

しかし！

細かい調整するにはやっぱり、深い知識が必要です。

ボタンでも、条件によって緑色、オレンジ色を変えたり、クリックする前と後の色の差をつけたり…

  CSS：セレクタ

これが、条件や細かいコントロールするための要素らしいです。

ID, class, 親、子孫、兄弟、属性、類似Class、カスケード　などなど　

俺：（一所懸命タイピングして、画面を見る）

俺：お！変わってる変わってる！これが親子関係なんだね。。。へ〜〜

のような行動と反応の連続でした。

しかし、自由自在に使うまではまだまだっぽいです。

少し脱線して、自分が想像したのを画面に出そうとしたら、うまく行くことより変になるケースが多かったです。

それでも、面白いでした。

  ライフサイクル……

今回、1000日間で何が変わるかを考えた際、今までの生活ルーチンにも疑問を持ちました。

なんで一生懸命やったつもりなのに発展がないか、同僚だちから遠くなっていく気がするのかが疑問でした。

そこで自分の24時間を記録しようと表を作ってみました。

まだまだですが、5日間の記録がこちらです。

大雑把に仕事、勉強、日常生活、レジャーに分けてみました。

記録を始まる前はそれでも仕事がメインで、そんなに無駄な時間がないだろうと思いましたが、意外な結果になりました。

仕事は仕方ないですが、隙間時間に遊びが多く、遊びのせいで隙間時間がどんどん伸びていることがわかりました。

俺：あ！会議が辛かったね〜。ちょっとコーヒーでも飲もうか。。。

俺：そうだ、スマホからゲームのお知らせが来たから、ちょっとだけみようか。。

　　お〜ミッションで良いアイテムもらった！

　　クエストひとつだけやってみようか。トイレも行かなきゃ〜〜

　　（便器に座ってゲーム。）

のように休憩だと言いつつ遊ぶ時間が多かったです。

ゲームも、漫画も。

一番恥ずかしいのがプログラミング勉強中でした。

2,30分講座をみて、頭がずきんずきんと痛みます。なぜか？理解できないし、やってもうまく行かないからです。

俺：あ！無理無理！ちょっと休憩しよう。

俺：（勉強のブラウザからタブをひとつ開いてyoutubeかnetflexを開きます。）

俺：リストだけみよう。気分転換。。。

　　（クリック、クリック）

俺：え！この映画出たの？！

　　イントロだけ見よう。

　　（そして、２,30分が経過）

俺：やべ！！

で勉強に戻ります。

今回は危機感を感じたので、戻る気になりましたが、今までは今日はしょうがないな、明日から本格的に勉強しよう〜　のような感じでした。

最低の男。

自分が遊んで10年、20年過ごした時に周りはコツコツ自己開発をやったと思います。

フ〜〜〜。

時間を戻すことはできないが、今から無駄な時間を減らさないと！

自分の習慣も治さないとダメですね〜

今日は週末、ちょっと早くベットへ入ります。

おやすみなさい。

勉強を1日だけ、休むかやるかで。。

テレワークの盲点なのか、ビデオ会議やコミュニケーションが多くなって、実業務の時間が短くなります。

そして、会議やコミュニケーションは意外に神経を使うので、余計に疲れます。

今日は予定にもない会議が多くて、ヘトヘトでした。

甘い俺：んん。。。疲れたし、花金だから、1日、勉強を休んでいいんじゃないかな〜〜

固い俺：１日が2日に、2日が3日に。そして、そのまま休んで計画はさようならになるよ！

甘い俺：わかった、勉強を半分にしよう！

固い俺：そしたら計画に間に合わないよ。。。勝手にしなさい。。ルーザーが嫌いだからはじまったくせに

甘い俺：……

心ではこんな戦いがず〜〜〜っとでした。でも、今日が金曜日だし、昼休みに少し予習もしたし。

固い俺に甘い俺が負けてました。終わった後の所感ですが、負けて気持ちよかったです。

 HTML基礎の続き

今日の分はこのような内容でした。

少しやってみるとHTMLが骨組み、CSSが飾りだと言われる意味がわかりました。

HTMLタグだけで素晴らしいデザインのサイトを作るのはほぼ不可能に近いです。

建物の柱や壁などのような基礎の部分がHTMLの役割です。

見た時はではそうなんだ〜〜程度でぴんとこなかったのが、実際に入力してみると、意味が明確になりました。

それでも全体の内容の中で50%？理解したかな。。。。

正直に100％理解したかったですが、無理でした。

今日の一番難しかったのは　 emmet。

これは良く使うとコーティングの効率が上がるのは間違い無いですが、そのルールを覚えるのが今の私には無理でした。

簡単なルールもありましたが、ほとんどがギブアップ水準。

先生も必須ではないと言われたので、これはパス！

 １週間の感想

まず、休まず5日、勉強しました。

率直に言いますと、5日間の勉強した内容の50%も頭に残ってないです。

しかし、不思議なのは頭から消えた昨日、一昨日の内容が今日の勉強で思い浮かぶのです。

俺：？？？先生、こんなこと言った？初めて聞いたけど。。。

俺：……あ！そっか、言った、言った。そうだそうだ。

そして、手で直せにタイピングすると、より頭に残ります。

昔、学校の先生がよく言った復習が重要ってことかもしれません。

真面目な話はここまでにします。

本音は今から。。。

正直に辛かったです。

仕事が終わって、好きなお酒も飲みませんでした。

1日目はビール飲みながら勉強しましたが、翌朝、頭に何も残ってなかったです。

びっくりしました。頭が腐っているのかアルコールが強いのか。

ここで禁酒がスタート。

勉強時間の想定ミスが超辛かったです。

俺：んん。講座全体が67時間？

俺：そしたら、1日1時間勉強すれば２ヶ月くらいで終わりそうだね〜

俺：OK.毎日1時間くらいなら、行けそうだね。。。

これこれ！大間違い！

動画を見るのが1時間で自分の作業時間は考えなかった！

結局、2時間？くらいの時間が必要でした。基礎の勉強なのに。。。

その時間を確保するために自分が好きな寝る時間を減らすしかなかったです。

 でも。。。

辛いことが多すぎですが、たった１つ、嬉しかったのがありました。

朝、目が覚めた時、自分自身と約束を守ったこと。

なぜかわかりませんが、これ、何より嬉しいし、もう1日やりたい気持ちの原動力になってるかもしれません。

明日は休みですので、ちょっと多めに寝たいですね〜

5/1000　完了。

おやすみなさい。

やっぱり基礎が重要ですかね〜

動画が1時間分でやはり倍以上の時間が必要でした。
説明を聞く、見るときは
俺：あ〜〜お〜〜、そうか、、
です。

簡単に見えて実際にタイピングしたり、応用しようと思ったら
俺：え？！…… あ！！これ間違った
俺：何でカッコがそのまま出るんだ？！！……カッコが一つ多かったか！！
になります。

特に多いのが誤字脱字。そして次はタグと呼ばれるのを開いたら必ず閉じる必要があるんですが、忘れたり。。。
忘れたって言うより、誤字を削除する際に必要なタグも消すケースが多かったです。

年取ったせいか目がよく見えない〜〜と言い訳しますが、PCは優しく理解してくれません。
とにかく、こんな些細なトラブルを解決しながら、講座を見てるので、時間がかかります。

でも、少しもで自分が入力したコードが画面に映るを胸いっぱいになるんです。
不思議に。。。




こんなダサいページを作りましたが、俺にとってはめちゃくちゃかっこよく見えます。
h1, h2, p, listなどなど　勉強しなかったら分からなかったのが今は少しでもわかるようになりました。



それはそれで、知識が蓄積されることと共に体に変化が起きました。
まずは腰と首の痛みがどんどん強くなります。
テレワークで10時間くらい座ってたのが、さらに2時間以上増えたので、結構きつくなりました。
そして！何より目と指の痛みが。。。。OTL
コーティングってこんなに指が痛いのですか？もしかして、体が劣化して指の筋力が落ちた？！
目は完全に老眼のせい！
もう！嫌だ！痛みは！

だからお母さんが勉強は若い時にしておきなさい！！って言ったかもしれません。
なんかちょっと努力しようと思ったら体が悲鳴を出します。


それでも　４/1000までは無事パス。
明日のために今日はここまでにします。
おやすみなさい。

（今日はここを勉強しました。）

一旦、自分との約束は守りました。
今は勉強が終わった直後ですが、ヘトヘトです。
講座の時間が60分で、セッティングしたり、見ながらタイピングしたり、課題のようなことがあってそれを考えて回答を出したら２倍くらい時間がかかりました。

最初だから超簡単な内容だと思いますが、それでも120分。。。
もし、エラーでも発生すると？！
数時間かかるかもしれませんね。。。


そして、もうひとつ！
今回購入した講座が英語を使う先生なので字幕を見る必要があります。
これが意外に問題で、先生のコードを見ながらタイピングする必要がありますが、説明も見なければならない！！！
だから、必ず動画と止める必要がある。。OTL


ここまではネガティブな所感でしたが、今からはポジティブな所感です。

なんかちょっとでもプログラミングはこんなもんか！！
もしかして俺もできるんじゃないか？！
とのことを感じました。

なんかをちょっといじったり、追加すれば、文字の色やサイズが変わります。
知識を持っている方がみると　ちょろいちょろいって言うかもしれませんが、それでも少しウキウキしちゃいました。


でも、今日は本当に疲れましたので、今日はここまでです。

 

驚き、怒り、悲しみなどなど。。。

ですが、初めて決めたゴール、「WEB系技術を身にづける」を実現しようとネットで色々調べました。

しかし、その膨大な領域にびっくりしました。

ネットの情報の量で驚きましたが、みやすいサイトがあって、そちらを参考にしました。

こちら「Developer Roadmaps」です。

frontend, backend, react, angular, aws, dba....

用語も難しいし、その中身を見てからは声も出ませんでした。

どこからスタートすればいいか。。。。？

まずはこれが問題でした。

でも、世の中、自分の同じ悩みを持っている方、いました！

知識がないときはFrontEnd からやったほうが良い！

あは！

そうですか。。。

そこで上記のリンクから FrontEndをクリックしたら、こんなイメージが、ドドン！

これ、全部学ばないとホームページ、作れないの？？！！

もう、ギブアップしなければならないの？！

唖然として、他のサイトを検索してみたら、プロになるには必要ですが、短期間ではかなり厳しいと言われました。

そして、勉強方法も本で学んだ人、Youtubeで学んだ人、有料サイトで学んだ人などなど様々でした。

壁の次は壁、その後は壁。。。OTL

勉強方法は何が良いかな。。と思ったら、

１）知識が０なので、まずはカリキュラムが決まっている勉強方法を選ぶ

２）頭も硬いので、若い人向けではない方法を選ぶ

３）サンプルや誤字脱字が少ない資料を選ぶ。

４）できる限り安い方法を選ぶ

が俺に合うと思いました。

また、調査！

プログラミングの教えサイトの中では　Udemy が有名に見えたので、そこで講座を購入しました。

【世界で70万人が受講】Web Developer Bootcamp 2021（日本語版）

今、割引期間中だったので、1600円で購入！！！

おおお〜〜お得！

講座は約67時間。。。

え〜？！

毎日1時間勉強しても２ヶ月以上かかる。

多いな、長いな〜

でも、すでに決済もしちゃったし、やるしかない。。

一日、隙間の時間を使ってここまで進みました。

今から２ヶ月、WEBの勉強、その中でもHTML,CSS,Javascriptを学びます。

今日はここまでです。

2/1000　前進。