Techcamp 転職 参加の記録

73期 2020年3月9日開始

3月26日(木) 14日目 「SassとHaml」

 ブログ更新が翌日の朝になっている。というのもSassとHamlの勉強をしていたが、何ともコロナのニュースが煩過ぎて全く集中できず、夕方に中断して一旦情報収集と分析を行った。まず、東京の感染者が25日に41人、26日昼時点で45人と日本での増加率が過去最高になったという事。そして小池都知事の土日外出自粛要請を皮切りに埼玉千葉神奈川が東京への県民の外出自粛要請を出した。結果東京のスーパーで生鮮食品の品切れが起きるなど軽いパニックになり、夕方にはTECHCAMPでも土日の休校アナウンスがあった。

 我慢ならなかったのは「昨日オリンピックの延期が決まったので国が隠していた感染者を発表した」という妄言がそこかしこで飛び交っていた事だ。あまりにも幼稚で稚拙な根も葉もない噂に腹の虫が暴れてしまい勉強が手につかなくなった。

 私が見ていた限りの自治体公表の数値では世界と比較して日本の感染者率は依然として驚くほど低い。アメリカイタリアが一気に5万人を突破していき欧州諸国で軒並み1万人を超えていく中、日本は1200人、日毎の増加数も数十人程度だった。検査数の少なさを指摘する声も多いが感染者数が増加したら検査数が増加するんであって、その逆ではないということと、死亡者数はどうやっても誤魔化せないということ、何よりも仮に感染者数を隠していたとして40人ずつ毎日発表することに一体どんな政治的根拠があるんだろうか。歴史の教科書にどんなふうに載るか考えない政治家がいるとでも。。

 そんなことを思いながら、再度一次情報の数値と専門家の意見を収集した。その結果分かったのは、小中高の停止を受けて当時の感染者が100に満たなかった米国へ、またヨーロッパの安全と思われた国々へ避難を兼ねて渡航した家族旅行者が3月の10日前後に帰国しており、それらの方々が潜在的なキャリアになっている可能性のあること。また、それらを含めて、東京においての濃厚接触のあったクラスターが20を超えていること。それらの今現在の実際の感染状況が数字で上がってくるのに、最長後2週間を要する事。それが小池都知事の4月8日までの外出自粛の根拠らしい事、そんな事が分かった。

 恐らく、来週の月曜あたりの感染増加数と1週間後の来週金曜日までの増加率を見ればある程度の予想はつくだろう。首都閉鎖になるのなら、目に見えて明らかな数字が1週間で出るはずであり、またそうでない場合はあまりに想定外の感染経路でもない限り2週間後の数字も大差ないはずであろうと思っている。

 

 

本日の勉強

復習ドリル

mixin

&(アンパサンド)

BEM

ERB

haml

 

 

Sass

 

変数が使える。 $から始める

変数名: 値;

$section-color: rgb(30,30,30);

section {

  background-color: $section-color;

 

パーシャル Sassファイル

ファイル名を_(アンダースコア)から始める

読み込むには、@import “ファイル名” と記述

@import "reset";  /* _reset.scssを読み込む */

@import "header"; /* _header.scssを読み込む */

 

変数を別ファイルに定義して使う

定義するファイル、

_variable.scss (ファイルを作る)

$mainYellowColor: #FFEC00;

 

mixin まとまったスタイルを定義 @mixin mixin名() {}

_clearfix.scss (ファイルを作る)

@mixin clearfix() {

  &:after {

    content: '';

    display: block;

    clear: both;

  }

}

 

&(アンパサンド) 擬似要素であるafterが適用されているセレクタ

 

 

BEM

CSS設計、厳格なクラスの命名規則が特徴。

Block、Element、Modifierの頭文字で、ページを構成する要素をBlock、Element、Modifierのどれかに当てはめてクラスを命名する

 

Block

大元となるブロック要素。Blockの命名には名詞を使用。

Element、Modifierは、このBlockを起点に命名

 

Element

Blockに属する子要素です。1つ以上のElementによって、Blockは構成される。

Elementの命名には名詞

 

Modifier

Blockまたは、Elementに特別な修飾をする要素。Modifierの命名には形容詞

 

  • BlockとElementをつなぐ場合は、アンダースコア2つでつなぐ
  • Modifierにつなぐ場合は、ハイフン2つでつなぐ

 

sample.html

<nav class='HeaderNav'>

  <ul class='Menu'>

    <li class='Menu__list'>TOP</li>

    <li class='Menu__list'>CONTACT</li>

    <li class='Menu__list Menu__list--backBlack'>ABOUT US</li>

    <li class='Menu__list'>SERVICE</li>

   </ul>

</nav>

 

&(アンパサンド)で階層にする

sample.scss

.Menu {

  list-style: none;

  &__list {

    background-color: #3BD1EC;

    color: #FFF;

    float: left;

    font-size: 30px;

    padding: 2% 1%;

    text-align: center;

    width: 23%;

    &--backBlack {

      background-color: #000;

      color: #3BD1EC;

    }

  }

}

 

 

ERB クラスを使うためには require 'erb' する必要があります。

require 'erb'

ERB.new($<.read).run

 

Haml HTMLよりも簡単に書くためのビューテンプレートエンジン。.html.erbではなく.html.haml

gem 'haml-rails'

bundle install

rails haml:erb2haml  #変換 erb → haml