Web プログラミング

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

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

 

今日のタスクはこれ。

もりけん塾(@terrace_tech)のおかげでブログをはじめて約1ヶ月で45記事に…‼

 

このブログが45記事目♬

 

はやいなーブログを毎日更新が出来ている自分を褒めてあげたいけど、もりけん塾(@terrace_tech)のおかげでプラスαの記事とスキルを徐々に身につけているから本当に良き^^!

 

ありがとうございます、もりけんさん(@terrace_tech)♬

 

あと3日で50記事達成…なんだかうれしい…‼

 

記事数と一緒にちゃんとプログラミング言語スキルも上達させるぞー!

 

今日はイレギュラー(後述で報告している件)もあったので、その対応もして若干JavaScriptの勉強時間が少ないので今からやるぞ〜!

 

JavaScriptを知る

今日もこの子と遊ぶー!

昨日の続きから♬

識別子の命名規則

まず、識別子ってなんぞや?

 

識別子とは、要は、スクリプトを構成する要素に付けられた名前のこと

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

 

識別子は名前のようですね‼

 

最低でも知っておいたほうが良い名前は以下4つだそうです。

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

 

Progateではよく「$」を使っていたのをみたけど、これが識別子なんだね!

 

JavaScriptで使っている予約語は識別子として使えないと4つ目にかいていあるけど、予約語はこれ。

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

 

ifやfor、const、elseなどはよくみかけてたけど、こんなに種類があるんだ…!

 

注意

将来的に予約語として採用される可能性のあるワード

  • enum
  • await
  • string
  • eval

これらも使わないように注意しよう…‼

 

読みやすいコードのためにすることは6つ!

  1. 名前からデータの中身が推測できるもの
  2. 長くなりすぎずに、短くなりすぎず
  3. 見た目が分かりやすいもの
  4. 「_」は特別な意味があるので1文字目で使わない
  5. 決められた記法で統一する
  6. 基本的に英単語使用

あとから確認するときに自分でも他者がみてもわかりやすいコードにすることが大事なんだね。

 

エンジニアさんの思いやりが伝わる…!

 

決められた記法は、

  • 変数/関数名→camelCase記法:lastName
  • クラス名→Pascal記法:LastName
  • 定数名→アンダースコア記法:last_name、LAST_NAME

の3つがあるみたい。

 

先頭の頭文字を大文字にするのか、全ての単語の先頭だけを大文字にするのか、また「_」で単語を連結させるのかなどの方法なんだね〜!

 

定数について

変数と違って途中で入れ物の中身を変更することができないのが定数

 

定数を使わない例

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

 

varは「これから変数をかく」だったかな!

 

2日目でvarについての意味を書いたので振り返りやすい…‼

 

参考【もりけん塾2日目】課題『JavaScriptを知る』|デイトラなど今日の報告

続きを見る

 

もりけんさん(@terrace_tech)が

以前こういったツイートをされていましたが、ブログを書くことで自分の学習の振り返りにも使えるので便利!

 

そしてもう一度みるためにもコードを書くようにあとから自分でみて分かるような記事にしたほうが良いな〜^^!

 

 

 

話は定数に戻ります。

varは「これから変数を書く」でconsole.logは「コンソールに表示しろ」なので、100×1.08で消費税を掛けた金額の108を表示させたってことだ!

 

でも問題があるようで…

ココが問題

  1. ただの数値は意味を表さないので誤解が生じることも
  2. 消費税が変更した場合にこまる

ただの数値は自分以外にとっては「謎の値」、これをマジックナンバーというそう!

ちょっと名前はかっこいいけど、たしかに数字だけだとわかりづらそう…

 

これらの問題を解決するのは、

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

「const TAX」にすることみたい!

 

TAXなら消費税って一目瞭然だ!

英単語必要だな〜

 

データ型

JavaScriptで使う主なデータ型!

分類 データ型
基本型 数値型
文字列型
真偽型
シンボル型
特殊型
参照型 配列
オブジェクト
関数

表に書いた方がわかりやすいと思ったけど、ちょっと複雑だったので本の画像をお借りします。

 

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

 

JavaScriptのデータ型には基本型と参照型があるみたい。

 

基本型と参照型の2つの違いは、

値を変数に格納する方法

だそうです。

 

ん〜どういうことだろ?

 

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

 

基本型の場合は直接「値」を格納し、参照型は「参照値」を格納してる違いのようです‼

 

デイトラDAY11|ドットインストールの『Bootstrap入門』

 

7月になったのでドットインストールの有料会員になったのでデイトラの続きDAY11をスタート!

 

(前ちょっとday11した箇所もあるけどおさらい)

 

BootstrapとはTwitter社が開発したCSSのフレームワークのこと。

 

初心者でも簡単にデザインがきれいに作ることができるようです♬

 

Boorstrapのメリット

  • レスポンシブタ対応が可能

 

スマホでもHPでも横幅対応してくれます^^!
とっても便利〜!

 

注意ポイント

  • Internet Explorer 7以下とFirefox 3.6以下はサポート不可

古いと対応できないようです…‼

 

テックアカデミーさんの動画が参考になりました!

 

それでは大まかなBootstrapのことがわかったのでドットインストールへ進みたいと思います♬

ドットインストール動画『Bootstrap』1〜4

Bootstrapをまず使ってみました!

 

ドキュメントにあるスターターテンプレートを使って作業をするのが動画のレッスンです。

 

これらをコピーしてVScodeに貼り付けて、

<h1>Hello, world!</h2>

を少々いじることがレッスン内容。

 

 

これの成果物は以下のようになりました♬

 

 

1枚のシートにhtmlとcssを組み込んで、

  • 文字サイズ
  • 太字
  • 文字のセンタリングや右寄せ
  • 背景色
  • 文字色

などBootstrapに組み込まれているものを使用すると簡単に上記のものが完成♬

 

BootstrapのHPへ

 

ドットインストール動画『Bootstrap』5

要素のサイズを変更していきました。

この青と緑の幅を

  • 青がw-25 h-50
  • 緑がw-75 h-100

にすると上記のようになりました♬

 

ドットインストール動画『Bootstrap』6〜7

余白で色の位置をずらしました。

 

paddingやmarginという余白を使うことで上記のものと位置が変更されました^^!

 

 

BootstrapではボーダーなどCSSで取り扱うものがあらかじめ準備されていました!

 

これ知っているのと知らないのではHP作りとかに大きな差がでるから今知って良かった‼

ドットインストール動画『Bootstrap』8

つづいてボタンの作成へ‼

おお…

普通サイズから小さいサイズ、大きいサイズまでできちゃった…!

 

 

bootstrapだとボタンってこんなに簡単に作れるんだ♬

 

ドットインストール動画『Bootstrap』9

グリッドレイアウトで色の割合を変えることができました。

 

合計12だと一番上や真ん中のようになっているけど、合計12以下や12以上の場合は一番下のようになります。

 

合計の数字は以下のVScodeにある

<div class="col-⭕">

この⭕の部分の数字の合計数です。

 

この数字で色割合が変わるんだー!

報告

先日、占いの鑑定した方からHP制作のお話の連絡がきました〜!

 

静的なHPで1ページものだからHTMLとCSSだけでできる^^!

 

あとは今回使ったBootstrapのものを利用すれば良いかな?

 

サイト制作の流れはこちらのHPを参考にしよう。

元銀行員エンジニアのきたしょー(@KitamuraShohei)さんのWEBサイト制作案件を受注して納品するまでの仕事の流れ【完全保存版】

 

依頼は来たので、

  • 予算感の確認
  • 概算見積もり
  • サイト制作の目的やサイトのコンセプトなどの確認
  • サーバーを取得
  • メールアドレスをもらう
  • Googleアカウント情報を受取る

かな?

 

引用:WEBサイト制作案件を受注して納品するまでの仕事の流れ【完全保存版】

 

明日辺りからこっちもやってくぞー

 

おわりに

急なことに対応できずに時間をかけてしまっているから、事前準備って本当に大事だなと痛感。

 

HP制作において何の準備が必要でどれにお金がかかるのか?

 

これらはお客様にとっては重要事項だからしっかり調べる必要があるなぁ。

 

 

この本を読んで流れを把握しておこう‼

 

もりけん塾(@terrace_tech

Thanks:もりけんさん

 

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

 

-Web, プログラミング

© 2020 Mayu_Yamada