Web プログラミング

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

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

 

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

 

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

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

 

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

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

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

 

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

 

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

 

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

 

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

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

 

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

 

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

 

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

 

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

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

  1. サーバーから送られてきたファーストバイトをブラウザが受け取ってから描画されるまで
  2. 解析、DOM構築、レンダリング、レイアウトフローなど
  3. SEO
  4. アクセシビリティ

 

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

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

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

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

  • サーバー:Web上のマンションのようなもの
  • ファーストバイト:最初のバイトまでの時間(TTFB)は、Webサーバーまたはその他のネットワークリソースの応答性の指標として使用される測定値
  • ブラウザ:パソコンやスマートフォン等を利用してWebサーバに接続するためのソフトウェア。ウェブページを表示したり、ハイパーリンクをたどったりするなどの機能
    例.Google Chromeやsafariなど

ということだから、

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

 

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

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

 

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

引用:TECH ACADEMY

 

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

 

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

 

まずはHTMLの解析から。

 

 

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

 

  • 変更したい箇所をデベロッパーツール内で右クリック
  • Edit as HTMLを選択
  • 画面が切り替わったら変更した場所を削除
  • 変更したい内容を入力
  • Macなら⌘command+Enterキーで画面が変更される

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

デベロッパーツールで変更できること

  • web上に表示されている文章の変更
  • <p>から<h2>など変更可能

 

次はCSSの解析。

 

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

 

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

 

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

 

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

.btn:hover{

opacity:1;

}

が追加。

 

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

 

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

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

 

他にも

  • border-redius
  • margin
  • padding

など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を加えて名前をつけてあげてますね、このシートは。

section名は"section-2"

と指定されていますね。

 

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

document.getElementById(id);

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

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

この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つの流れがある。

  1. Loading:DownloadとParseの2つの処理がある
  2. Scripting
  3. Rendering:CalculateStyleとLayoutの2つの処理がある
  4. Painting

 

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

HTML⑤レイアウトフロー

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

 

おわりに

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

もりけん塾(@terrace_tech

Thanks:もりけんさん

 

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

 

-Web, プログラミング

© 2020 Mayu_Yamada