Web プログラミング

【もりけん塾8日目】課題『JavaScriptを知る』|デイトラday12

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

 

今日のタスクはコレ。

タスク量が増えると「ひゃー」ってなるので焦らない。

ここが私にとって最も大切。笑

 

詰め込みすぎないようにやってこ。

JavaScriptの本を読む

今日はJavaScriptの「リテラル」です。

 

リテラルとは?

リテラルは「データ型に格納できる値そのもの」また「値の表現方法」のこと。

 

・数値リテラル

①整数リテラル
10進数リテラル:日常的に使用するもの
16進数リテラル:0〜9+A(a)〜F(f)
8進数リテラル:0〜7
2進数リテラル:0〜1

②浮動小数点リテラル

・文字列リテラル

・テンプレート文字列

・配列リテラル

・オブジェクトリテラル

・関数リテラル

・未定義値

・ヌル

 

リテラルは大きく分類されているのでそれぞれまとめていきます。

 

数値リテラル

 

数値リテラルで整数リテラルの2進数、8進数、16進数のリテラルの頭にはそれぞれ

  • 0b(ゼロ+ビー)
  • 0o(ゼロ+オー)
  • 0x(ゼロ+エックス)

をつける必要があるようです。

 

引用:山田 祥寛. 改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで (Japanese Edition) (Kindle の位置No.972). Kindle 版.

親しみやすさで上記の表現方法は決めて良いそうです。

 

文字列リテラル

つづいて文字列リテラル。

 

文字列リテラルはシングルクォート(')かダブルクォート(")で囲む必要がある。

 

文字列内にシングルクォートを用いている文だった場合はダブルクォートを使うなどで対応する。

 

引用:山田 祥寛. 改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで (Japanese Edition) (Kindle の位置No.972). Kindle 版.

 

特別な意味を持つ文字を「\+文字」という形式で表現しこの文字のことをエスケープシーケンスという。

引用:山田 祥寛. 改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで (Japanese Edition) (Kindle の位置No.998). Kindle 版.

 

テンプレート文字列

テンプレート文字列で、

  • 文字列への変数の埋め込み
  • 複数行にまたがる文字列

の表現が可能になるそうです。

 

引用:山田 祥寛. 改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで (Japanese Edition) (Kindle の位置No.1015). Kindle 版.

$があるだけで違いますね…!

 

配列リテラル

配列はデータの集合のことで複数の値を管理可能な仕切りがある入れ物。

 

電車みたいな感じかな?
1号車という入れ物、2号車という入れ物…

 

配列リテラルは

[ ]

ブラケットを使うそうです。

 

引用:山田 祥寛. 改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで (Japanese Edition) (Kindle の位置No.1041). Kindle 版.

オブジェクトリテラル

オブジェクトリテラルは各要素に文字列キーでアクセス可能な配列のこと。

 

ハッシュ、連想配列などと呼ばれる場合もある。

 

オブジェクト内の個々のデータはプロパティと呼ばれ、文字列や数値などの情報、関数(手続き)を格納できる。

 

格納されたプロパティのこと→『メソッド』と呼ぶ

 

関数リテラル

関数とは入出力の口を持った処理のかたまりのこと。

 

未定義値

未定義値はある変数の値が定義されていないことを表す値のこと。

 

  • ある変数が宣言済みであるものの値を与えられていない
  • 未定義のプロパティを参照しようとした
  • 関数で値が返されなかった

上記のケースで返されるそうです。

 

ヌル

該当する値がないことを意味するヌル(null)という値がJavaScriptにはある。

 

nullの意味は「空である」。

 

意図した空の場合は「null」でそうじゃない場合は「undefined」という区別がある。

 

 

 

デイトラDAY12|ドットインストールの『Bootstrap入門』続き10~15

 

ドットインストールBootstrap、今日は動画10からスタート。

 

このあたりからいよいよ…

 

ねこらのん!
HP作ってる…!

 

というトキメキがちょっと抑えきれなくなっています。笑

 

『Bootstrap入門』10~15

ドットインストールでこのようなヘッダーを作りました!

 

なんかすごい、HP制作している感じでとても楽しい…!

 

0→1が好きなんだなぁとここで気づく。

 

 

コードたったこれだけしか打ってないのにヘッダーができちゃうんですね…楽しい…

 

PC対応の画面

 

レスポンシブ対応、しちゃってる…!

 

スマホ対応

 

いつもWordPressのプラグインを使って簡単に表を作ってるけど、表もできちゃうんですね…‼

 

 

コードはこちら。

 

 

表を作るときに必要なものは、

  • table
  • tr
  • th
  • td

でした。

 

「TABLE」とは<tr>、<th>、<td>などと組み合わせて表を作成するためのタグです。表の基本的な構造は<table>~</table>の中に<tr>~</tr>で表の横部分を指定し、その中に<th>~</th>や<td>~</td>で表題や縦軸を指定してセルを定義します。この時ヘッダセルのテキストは、一般的なブラウザでは太字になりセンタリングされます。

引用:クロノドライブのHTML辞典Chrono Drive(クロノドライブ)

Progateでは表を作る項目がなかったので、デイトラをやってよかったです。

 

現役エンジニアさんのツイートで「今でさえも見たこと無いCSSに会う」とか見た気がするので、多くのコードを目にすることは大切なんだと感じました。

Emmetでショートカットでスピードアップ

はにわまんさん(@haniwa008)の記事によるとVScodeではショートカットがあるようで…楽に早く出来るようです。

 

引用:「はじめて」でも簡単!Emmetの使い方とよく使うパターン集

いちから打っていると時間がかかるけど、以下のことを知っているだけでスピード感が違いますね…‼

 

チートシートも紹介されていたので、こちらに貼っておきます^^

 

Emmetのチートシート

 

Web制作案件に必要なこと

web制作案件を獲得しましたが、獲得したままじゃなくてスムーズに抜けがないように勧めたいと思いリストを作成しました‼

これを見ながら終わったことを確認していこう…!

 

参考にしたのはきたしょー@元銀行員エンジニア(@KitamuraShohei)さんのこちらの記事^^

とてもわかりやすかった…ありがとうございます♬

 

寿司打

 

タイピングが遅いと仕事も遅いからはやくなるために毎日最初の25分でタイピングやってるけど…まだ損。笑

 

最初は5,000円だったけど今やっと8,920円になったから、進歩していると思う!

 

とはいっても無目的のまま走ることはあまりよくないなぁっと思っていた所、なんと現場での実戦経験がある雑食エンジニアの勝又健太(@poly_soft)さんが寿司打やったというツイートを見つけました^^!

 

 

こちらが勝又健太(@poly_soft)さんが黙々と打っているちょっとシュールな動画。

 

 

早すぎて私との差が果てしない…1秒も違う…

この1秒が仕事のスピードを左右すると思うと毎日のタイピングを欠かさず続けていこうと思う。

 

 

勝又さんの寿司打の結果

 

今日の私のタイピングと勝又健太(@poly_soft)さんの差を縮めたいので表にします。

勝又健太(@poly_soft)さん
金額 15,060円
得:5,060円
8.920円
損:1,080円
6,140円
正しく打ったキー数 757回 534回 223回
平均キータイプ数 5.5回/秒 4.1回/秒 1.4回/秒
ミスタイプ数 54回 55回 1回

一緒にお寿司食べに行ったら、彼は得して私は損する状況を打破したいので毎日タイピングしよう。笑

おわりに

今日はJavaScriptのリテラルについて知りました‼

腑に落とそうとはしているけど全然だ…

1回では理解できないと思うから、こんな感じのものがあるというニュアンスでやってこ^^!

 

もりけん塾(@terrace_tech

Thanks:もりけんさん

 

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

 

-Web, プログラミング

© 2020 Mayu_Yamada