【もりけん塾13日目】LP制作までの学習方法

もりけん塾生になって12日目のねこらのん（@nekoranon256）です。

知人からLP制作の案件を貰っているとのことをもりけん塾で伝えると、学習よりもさ気に約束事を達成すべきということをアドバイスいただいたので学習の路線変更。

そして今日のタスクはコレ。

#今日の積み上げ 予定
・ロードマップの分からない単語を調べる
・ロードマップを期間で分ける作業に今日入りたい
・ #寿司打

行動すればするほど基礎的なところが欠けているときづかせてくれたので早くとりかかれるようにしたい😊#プログラミング初心者と繋がりたい

— まゆ👘プログラミング初学者で栄養士 (@nekoranon256) July 7, 2020

今日の勉強報告を記事にまとめています。

タッチタイピングをはやくするための指標『寿司打』

エンジニアやライターなどPC作業をしているとタッチタイピングが早い方がタスクを終わらせるスピードはもちろん早くなる、という理由から毎日寿司打を25分やっています。

最初にした頃に比べるとはやくなりました。

最初は5000円も行かなかったので1週間程度続けていると5000円程度のスピードがアップすることがわかりました。

ただ問題点として寿司打で表示される文字になれるから頭が対応できるということがあるので本当にスピードが上がっているのか？

という点に関してちょっと疑問…笑

LP作成依頼完了までの、もりけん塾『修正ロードマップ』

昨日、もりけんさんにロードマップを修正したのでみてくださいと伝えるとJavaScriptの学習するよりも先にLP作成の依頼があるならそちらが優先ということでロードマップがまるっと変更。

最低限必要だと言われた知識でしたが変更内容にある中での単語が分からないためそちらを調べていると、なかなか進まない…

ということから調べながらスキルをみにつけていかなきゃ間に合わないと気付きまた路線変更。

ネット情報の取捨選択ができていないのでこうなるんだろうな…基礎的知識があれば振り回されることは無いんだろうと実感。

LP作成完了までのタスク①HTML

HTMLのLP作成完了までのタスクは以下の4つ。

これらをまとめていきます。

HTML①サーバーから送られてきたファーストバイトをブラウザが受け取ってから描画されるまで

この言葉の意味がよく分からないので分解！

単語で不明なものや頭の整理のために以下に記載。

ということだから、

サーバーから送られてきた指標とされる測定値をwebブラウザ上に表示させられるまでってことかな？

HTML②解析方法、Progateでデベロッパーツールの使い方

HTMLの解析方法は一体なんでしょうか？

どのようなコンテンツ構成になっているかを記述されているコードを見て確認することができ、またパソコン画面やスマホ画面などの任意のサイズの画面でどのように表示されているかを確認することも可能となっています。

引用：TECH ACADEMY

つまりデベロッパーツールを使ってブラウザ上に表示されているHTML&CSSを読み解きどのように解析されているか分かるかということかな。

このことからProgateの検証ツール（デベロッパーモード）の使い方を再度理解しながら学習！

まずはHTMLの解析から。

赤の「」内をデベロッパーツールで変更しました。

この方法は文章だけでなくタグも変更可能。

次はCSSの解析。

ちょっとわかりにくいけどフェイスブックのボタンの透明度を0.8→1.0に変更。

透明度が「Twitterで登録」や「新規登録はこちら」よりも透明ではないことがわかります。

デベロッパーツールのstyleという場所にある「:hov」をクリックすると上記画面が表示されます。

hoverにチェックをいれると、

が追加。

ちなみにopacityを0.1にした結果のフェイスブックは透明すぎてほとんどわからない状態です。

web上にある内容を変更してもとに戻したい時は再読読み込みをすればもとに戻ります。

ショートカットキーはcommand＋RでOK。

他にも

などCSSの内容を変更することが可能です。

もともとないものを追加することも可能。

「LEAEN TO CODE.LEARN TO BE CREATIVE.」の背景色を入れることも可能です。

方法はCSSのデベロッパーツール右側にある「+」をクリックすると追加したい場所のCSSタグが追加されるので画像のように入力するのみ。

これでProgate学習「デベロッパーツールの使い方」の大まかな学習は終わり。

参考：Progate

HTML③Document Object Model (DOM) 構築

Document Object Model (DOM) はHTML および XML ドキュメントのための API（アプリケーションプログラミングインタフェースの略）。

DOMとはJavaScriptでhtmlの要素を操作するための仕組みのこと

ファイルの特定の部分に目印を付けて「この部分」に「こういう事をしたい」という処理を可能にするための取り決めがDOM

引用：JavaScript初心者でもすぐわかる！DOMとは何か？

API とは、アプリケーション・ソフトウェアを構築および統合するために使われるツール、定義、プロトコルです。

引用：Red Hat

ソフトウェア同士の機能共有を目的

引用：BOXIL

DOMの際にセット出でてくる「ノード」も一緒に覚える必要がある。

ノードは以下のとおりです。

• ノード
• 親ノード
• 子ノード
• 兄弟姉妹ノード

 

引用：JavaScript初心者でもすぐわかる！DOMとは何か？

ノードは各要素の全体のことを表していて、その中にあるまとめ役が親要素。その中にあるものが子要素になるようです。

また関連するもので親要素の下にあるものが兄弟姉妹ノードでそのルールに従ってコードを記載。

sectionである親要素と兄弟姉妹ノードにIDを加えて名前をつけてあげてますね、このシートは。

と指定されていますね。

ID名を指定するメソッドは以下のように定義されている。

document.getElementById(id);

idはタグについているID名だ。

これを用いて「section-2」を取得して、その文字色を赤色に変更してみよう。

1	document.getElementById('section-2').style.color = 'red';

このJavaScriptをブラウザで実行すると図5のようになる。

黄色の背景に入っている(section-2およびその子ノード全体の)文字色が赤くなっているのが確認できる。

引用：JavaScript初心者でもすぐわかる！DOMとは何か？

CSSとは表記の仕方が違いますね‼ちょっと混乱しそう。

ちなみにgetElementById はHTMLのタグ内で指定したid名にマッチするドキュメント要素を取得するメソッドだそうです。

子ノードの指定方法は以下のとおりです。

子ノードを指定するメソッドは以下のように定義されている。

var nodeList = elementNodeReference.childNodes;

• elementNodeReferenceは基準ノードを指している
• nodeList は基準ノードについている子ノード全てを指す

このようにしてDOMはHTMLとJavaScriptと繋ぐ役割があるんですね‼

DOMのルールである階層構造、指定したノードやその親や子などを自由にJavaScriptから操作ができることを忘れないようにする‼忘れたらまたこの記事に戻る。

HTML④レンダリングの流れを理解

ウェブ開発者はレンダリングを理解する必要があるそうです。

レンダリングはもりけんさん（@terrace_tech）に指示していただいた内容ではじめて聞きました…！

でもレンダリングってなんでしょう？

レンダリングは「もとになる情報を整形して表示すること」

引用：https://wa3.i-3-i.info/word1358.html

レンダリングは以下の4つの流れがある。

ダウンロードしたファイルを読み込んで、JavaScriptで実行しレイアウトツリーを構築後にレンダリングの結果を描画するとwebブラウザ上に最終的にフレームと呼ばれる描画になることがレンダリングだそうです。

HTML⑤レイアウトフロー

レイアウトに変更が加えられる前にブロック要素やインライン要素がページに表示される方法をレイアウトフローと呼びます。

おわりに

やってくたびに終わらない…って気づくけどこの短時間に詰め込める集中力を身に着けようと思った今日でした^^!

もりけん塾（@terrace_tech）

Thanks：もりけんさん

もりけんさんの『武骨日記』へ