【プログラミング・Web制作勉強ログ#54】4/29の積み上げ成果

2022年4月30日

今日の積み上げ 140日目成果

#今日の積み上げ 140日目成果

・4/28日報執筆⇒すでに了
・デザインカンプ中級編(PC画面50％前後まで)⇒PC画面(HTML)30%
・スクールのグルコン参加⇒◎
・YouTube、きたラジ、ドットインストール（隙間時間）⇒１本
・断スイーツ(5日目)⇒継続中！
— おかつ🌱鬼修行中 (@o_89965328_k) April 29, 2022

＼宣言した内容はこちらです／

本日の学び

スクールのグループコンサルティングのメモ

・守破離の法則で学習を進めよ
　守破離の法則とは：

プログラミング学習への応用：
「守」⇒お手本のコードを書いて原則を知る・身に着ける
「破」⇒お手本のコードからアレンジをして動きを確認してみる
「離」⇒独自でゼロからコーディングができるようになる

私は合気道を10年くらいやっていたので、「わー守破離の法則懐かしい！」って脳内ドーパミンが出ました。笑
色んなところに応用できるのはそのとおりだと思いました。

・遅延評価勉強法で学習を進めよ
　「知識が必要になった時点で勉強する」方法。必要がない知識は定着しづらい。

・「品質チェックの丁寧さ」が継続案件につながる
　相手（例：Web制作会社のディレクター）がやらなければいけない仕事も巻き取るイメージ。「ここまでやってくれている」という「感動」が信頼につながる。
　※ただし、やりすぎてもタダ働きになるリスクもあるので、バランスが必要。

HTMLコーディング＆Snippetツールへ登録

HTMLをコーディングしながら、多用しそうなレイアウトのテンプレートをVS Codeのスニペットに登録。
いまのところ、Ｄoctype宣言、ヘッダー、メイン、アバウト、市松柄、フレックスボックスを登録しています。

{
	"doctype":{
		"prefix": "doctype",
		"body": [
			"<!DOCTYPE html>"
			"<html lang=\"ja\">"
			"<head>"
			"\t<meta charset=\"UTF-8\">"
			"\t<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">"
			"\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">"
			"\t<title>\"$1\"</title>"
			"\t<!-- 概要 -->"
			"\t<meta name=\"description\" content=\"$2\">"
			"\t<meta name=\"keywords\" content=\"$3\">"
			"\t<link rel=\"icon\" type=\"image/favicon.ico\" href=\"$4\">"
			"\t<meta name=\"robots\" content=\"noindex, nofollow\">"
			"\t<!-- OGP設定 -->"
			"\t<meta property=\"og:url\" content=\"$5\">"
			"\t<meta property=\"og:type\" content=\"website\">"
			"\t<meta property=\"og:title\" content=\"$6\">"
			"\t<meta property=\"og:description\" content=\"$7\">"
			"\t<meta property=\"og:site_name\" content=\"$8\">"
			"\t<meta property=\"og:image\" content=\"$9\">"
			"\t<meta property=\"og:locale\" content=\"ja_JP\">"
			"\t<meta name=\"fb:app_id\" content=\"$10\">"
			"\t<meta name=\"twitter:card\" content=\"summary_large_image\">"
			"\t<meta name=\"twitter:image\" content=\"$11\">"
			"\t<meta name=\"twitter:site\" content=\"$12\">"
			"\t<meta name=\"twitter:creator\" content=\"$13\">"
			"\t<meta name=\"twitter:title\" content=\"$14\">"
			"\t<meta name=\"twitter:description\" content=\"$15\">"
			"\t<!-- CSS -->"
			"\t<link rel=\"stylesheet\" href=\"https://unpkg.com/ress/dist/ress.min.css\">"
			"\t<link rel=\"stylesheet\" href=\"css/style.css\">"
			"</head>"
			"<body>"
			"\t<!-- Java Script -->"
			"\t<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js\"></script>"
			"\t<script src=\"js/main.js\"></script>"
			"</body>"
			"</html>"
		]
	}
	"header":{
		"prefix": "header",
		"body": [
			"<header class=\"header\">"
			"\t<a href=\"#\">"
			"\t\t<img src=\"$1\" alt=\"header_icon\">"
			"\t\t<div class=\"header_title\"></div>"
			"\t</a>"
			"\t<div id=\"nav-open\" class=\"pc-none\">"
            "\t\t<span></span>"
        	"\t</div>"
			"\t<div id=\"nav-content\" class=\"sp-none\">"
			"\t\t<nav class=\"header-nav\">"
			"\t\t\t<ul class=\"nav-list\">"
			"\t\t\t\t<li><a href=\"#\"></a></li>"
			"\t\t\t\t<li><a href=\"#\"></a></li>"
			"\t\t\t\t<li><a href=\"#\"></a></li>"
			"\t\t\t\t<li><a href=\"#\"></a></li>"
			"\t\t\t\t<li><a href=\"#\"></a></li>"
			"\t\t\t\t<li><a href=\"#\"></a></li>"
			"\t\t\t</ul>"
			"\t\t</nav>"
			"\t</div>"
			"</header>"
		]	
	}
	"main1":{
		"prefix": "main1"
			"body": [
			"<section id=\"main\">"
			"\t<div class=\"main-box\">"
			"\t\t<img src=\"$1\" srcset=\"$2\" alt=\"top\" class=\"sp-none\">"
			"\t\t<img src=\"$3\" srcset=\"$4\" alt=\"top\" class=\"pc-none\">"
			"\t</div>"
			"\t<div class=\"message-box\">"
			"\t\t<h1>$5</h1>"
			"\t</div>"
			"</section>"	

		]
	}
	"about1":{
		"prefix": "about1"
		"body": [
			"<section id=\"about\">"
			"\t<div class=\"container\">"
			"\t\t<div class=\"message-area\">"
			"\t\t\t<h2>$1</h2>"
			"\t\t\t<p>$2</p>"
			"\t\t</div>"
			"\t\t<div class=\"image-area\">"
			"\t\t\t<img src=\"$3\" alt=\"about_image\">"
			"\t\t</div>"
			"\t</div>"
			"</section>"
		]
	}
	"ichimatsu-layout":{
		"prefix": "ichimatsu"
		"body": [
			"<section id=\"$1\" class=\"$2\">"
			"\t<div class=\"contaier\">"
			"\t\t<div class=\"service_box\">"
			"\t\t\t<h2 class=\"service_box_txtarea\">$3</h2>"
			"\t\t\t<p class=\"service_txt\">$4</p>"
			"\t\t</div>"
			"\t\t<figure class=\"service_img_wrapper\">"
			"\t\t\t<img src=\"$5\" alt=\"$6\">"
			"\t\t\t<figcaption>$7</figcaption>"
			"\t\t</figure>"
			"\t\t<div class=\"service_img_wrapper\">"
			"\t\t\t<picture>"
			"\t\t\t\t<source media=\"(min-width: 768px)\" srcset=\"$8\" alt=\"$9\">"
			"\t\t\t\t<source media=\"(max-width: 767px)\" srcset=\"$10\" alt=\"$11\">"
			"\t\t\t\t<img src=\"$12\" alt=\"$13\">"
			"\t\t\t</picture>"
			"\t\t</div>"
			"\t</div>"
			"</section>"
			]
	}
	"flex-layout":{
		"prefix": "flexlayout"
		"body": [
			"<section id=\"$1\" class=\"$2\">"
			"\t<div class=\"container\">"
			"\t\t<div class=\"flex_wrapper\">"
			"\t\t\t<div class=\"flexbox\">"
			"\t\t\t\t<div class=\"flexbox_img_wrapper\">"
			"\t\t\t\t\t<picture>"
			"\t\t\t\t\t\t<source media=\"(min-width: 768px)\" srcset=\"$3\" alt=\"$4\">"
			"\t\t\t\t\t\t<source media=\"(max-width: 767px)\" srcset=\"$5\" alt=\"$6\">"
			"\t\t\t\t\t\t<img src=\"$7\" alt=\"$8\">"
			"\t\t\t\t\t</picture>"
			"\t\t\t\t</div>"
			"\t\t\t\t<div class=\"flexbox_txt_wrapper\">"
			"\t\t\t\t\t<h3>$9</h3>"
			"\t\t\t\t\t<p>$10</p>"
			"\t\t\t\t</div>"
			"\t\t\t</div>"
			"\t\t</div>"
			"\t</div>"
			"</section>"
		]
	}
}

本日の反省

「モチベーション」を探す意味：ないよね

そもそも、「モチベーションを探すこと」自体、まだまだ緩い。
やっている目的はなに？なぜそれに力を入れているの？

自分本位の人生を生きたい。他人にコントロールされる人生を送りたくない。

上司のパワハラで体調崩した。
リーダーシップ０の幹部によって仕事をスクラップできず、
年々積みあがるだけの仕事量。
定時後にこなさなければいけない膨大な雑務。
中間管理職まで残業。やつれている。
それを見て、「これ将来の自分やん」と思って
「自分本位の人生を生きる」揺るがない決心を抱いた。

「やるしかない環境」に身を置けば、モチベーションもクソもない。

８月末に退職することは決めているので、自分でお金を稼げなくなるのはいやだ。絶対。
自分にできることをコツコツやって、絶対にやり遂げます。

今日も諦めなかった自分、お疲れ様でした！

Twitterでも勉強ログを呟いています。よかったら覗いてみてください♪

Tweets by o_89965328_k