Day1: 導入

この記事は373 Advent Calendar 2017の1日目の記事です。

一人相撲です。よろしくお願いします。

何するの

一日一記事書きます。お題は特に決めてないのですが、基本的にポジティブな内容のものを書く予定です。

本当は今日までに色々とネタをストックしておく予定だったんですが、全くストックがないので勢いでいきます。

なぜやるの

「ブログ書きてぇな～」と思ったからです。基本的にきっかけがないと動けないタイプなので、きっかけをどうにか見出しました。

今日はなんなの

上でも書いたようにネタがないので、導入をネタにしました。

これからゆるーく書いていくので、よろしくお願いします。

終わりに

373 Advent Calendar 2017、2日目はid:r4k9が担当です。よろしくお願いします。

RubyでFizzBuzz（15進数編）

15進数にして一桁目をみればええやん、という考え方。
modと似たような考え方だけど、こっちの方が気持ちよく書けるね。

(1..100).each do |n| 
  case n.to_s(15)[-1]
  when "3","6","9","c"; puts "fizz"
  when "5","a";         puts "buzz"
  when "0";             puts "fizzbuzz"
  else;                 puts n
  end
end

「ドットインストール Sass入門」をざっくり一周した

メモ。

学んだこと

1 Sassとはなにか？

CSSを効率的に書くための記法
2つの記法がある

• .sass: Ruby/Hamlっぽい
• .scss: CSS3っぽい

今はscssの方が主流

2 はじめてのSass

// scssは子要素のスタイル指定を以下のように入れ子で書ける
#main {
  width: 90%;
  p { // -> #main p
    font-size: 14px;
  }
}

3 自動で変換させてみよう

# 変更があった場合、自動で変換を走らせる
sass --watch (監視ディレクトリ):(変換先ディレクトリ)

4 入れ子構造を使ってみよう

• /* ~ */: 変換後のCSSにも残るコメント
• //: 変換後のCSSに残らないコメント

// 疑似要素の書き方の例
// '&'は親要素を表すセレクタ
a {
  &:hover { // -> a:hover
    font-weight: bold;
  }
}

5 変数を使ってみよう

// '$'で変数宣言ができる（'='ではなく、cssと同じように':'で宣言）
$baseFontSize: 14px;

p {
  font-size: $baseFontSize;           // -> 14px
  .sub {
    // 計算も行える
    font-size: $baseFontSize - 2px;   // -> 12px
  }
}

6 文字列を扱ってみよう

// 文字列は""で囲う
$imgDir: "../img/";
#main {
  // 文字列結合は'+'でできる
  background: url($imgDir + "bg.png");  // -> ../img/bg.png

  // 文字列内で変数展開する場合は'#{変数}'とする
  background: url("#{$imgDir}mg.png");  // -> ../img/bg.png

  p {
    // '{}'内は評価せよという意味合いなので、計算も行える
    font-size: #{12 + 12}px;            // -> 14px
  }
}

7 色を扱ってみよう

// CSSで解釈できる記法で色を指定できる
$brandColor: red;

p {
  // 指定した分明るくする
  color: lighten($brandColor, 30%)
}

lighten()などの、ビルトイン関数はModule: Sass::Script::Functionsで確認できる

8 @if文を使ってみよう

$debugMode: true;

// scssでの条件分岐
#main {
  @if $debugMode {
    color: red;
  } @else {
    color: green;
  }
}

9 @for,@while文を使ってみよう

// scssでのforループ
@for $i from 10 through 14 {
  .fs#{$i} { font-size: #{$i}px; }
}

// scssでのwhileループ
$i: 10;
@while $ i <= 14 {
  .fs#{$i} { font-size: #{$i}px; }
  $i: $i + 1;
}

10 リストを扱ってみよう

// リストはカンマ区切りで宣言
$animals: cat, dog, tiger;

@each $animal in $animals {
  .#{$animal}-icon { background: url("#{$animal}.png"); }
}

11 関数を使ってみよう(1)

12 関数を使ってみよう(2)

$totalWidth: 940px;
$columnCount: 5;

// scssでの関数作成の例
// 横幅とカラム数から、カラム1つ分の横幅を計算
@function getColumnWidth($width, $count) {
  $padding: 10px;
  $columnWidth: floor($width - ($padding * ($count - 1)) / $count);

  // 変換時にコンソールに値を出力する
  @debug $columnWidth;

  @return $columnWidth;
}

.grid {
  float: left;
  width: getColumnWidth($totalWidth, $columnCount);
}

13 ファイルを分離させてみよう

分割したファイルは'_‘で始まるファイル名にする

// "_settings.scss"を読み込む
@import "settings";

// "_functions.scss"を読み込む
@import "functions";

14 @mixinを使ってみよう

@mixinで定義したコード片が、@includeで挿入した箇所で展開される

// 引数や、デフォルト値をつけることもできる
@mixin round($radius: 4px) {
  border-radius: $radius; // 引数がなかった場合、4px
}

.label {
  font-size: 12px;
  @include round(5px); // -> border-radius: 5px;
}

15 @extendを使ってみよう

スタイルの継承

// 返還前のscssファイル
.msg {
  font-size: 12px;
  font-weight: bold;
  padding: 2px 4px;
  background: red;
  color: white;
  
}
.errorMsg {
  @extend: msg;
  background: red;
}

.warningMsg {
  @extend: msg;
  background: orange;
}

これがCSSになると以下のようになる

// 変換後のcssファイル
.msg .errorMsg .warningMsg {
  font-size: 12px;
  font-weight: bold;
  padding: 2px 4px;
  background: red;
  color: white;
  
}
.errorMsg {
  background: red;
}

.warningMsg {
  background: orange;
}

共通するプロパティは一つのルールセットに、差分だけが新たなルールセットに、と合理的なコードとして生成される。

感じたこと

• 想像以上にプログラミングライクに変数、制御文、関数を書けるので驚いた
• そのプログラミングライクな部分は'@‘できっちり区別されているので、コードの見通しも良かった
• @extendを利用したscssが生成するcssが、かなり合理的な構造をしていて感動した
• 個人的にもscssならガリガリ書いていけると感じた
• 制御文や関数が作るブロックと、cssが作るブロックが同じ'{}‘なのが少しだけ気になった（いつかどこかでそれが原因でハマりそう）
• はてブロがscssのシンタックスハイライトに対応していない……

「ドットインストール PHP入門」をざっくり一周した

メモ。

他言語と共通している、既に理解している部分は省略

学んだこと

1 PHPを使ってみよう

PHPとは、webアプリケーションを作るためのプログラミング言語

2 はじめてのPHPプログラム

PHPはHTMLに直接埋め込んで書くことができる
<?php ?>と書くと、phpを埋め込める
文字列出力はecho "hoge"
文の区切りはセミコロン

3 ビルトインWebサーバーを使ってみよう

php -S IPアドレス ポート番号　でビルトインwebサーバーが立ち上がる
エラーが発生した場合、コンソールがエラーを吐いているので確認（ビルトインwebサーバーの場合）

4 変数とデータ型について理解しよう

変数定義 $hoge = "hoge"
使うときもそのままecho $hoge
var_dump()で型と値を確認できる

5 定数を使ってみよう

定数定義 define(HOGE_FUGA, "abc")
定数名は大文字スネークケースで
変数と違って$をつけない

自動的に定義される定数

__LINE__  // 行数
__FILE__  // ファイル名
__DIR__   // ディレクトリ

6 数値の演算をしてみよう

PHP5.6以降は**演算子でべき乗

7 文字列を扱ってみよう

""（ダブルクォート） : 特殊文字(\n, \t) 変数が展開される
''（シングルクォート）: 展開されない
変数展開の際は、{$name}や${name}という形で変数であることを明示できる
文字列連結の基本はドット"hello" . "world"

8 if文で条件分岐をしてみよう

• elseifはスペースなし（else ifではない）
• ===で型も含めた比較

9 真偽値について理解しよう

falseになる場合

• 文字列: 空、"0"
• 数値: 0, 0.0
• 配列: 要素の数が0
• null

10 switch文で条件分岐をしてみよう

11 while文でループ処理をしてみよう

12 for文でループ処理をしてみよう

13 配列を使ってみよう

# 連想配列
$sales = array(
  "taguchi" => 200,
  "fkoji" => 800,
  "dotinstall" => 600,
)

// PHP5.4
$sales = [
  "taguchi" => 200,
  "fkoji" => 800,
  "dotinstall" => 600,
];

# 配列
$colors = ["red", "yellow", "green"]
var_dump($colors[1]); // -> red

14 foreachを使ってみよう

# keyとvalueを取り出す
foreach ($sales as $key => $value) {
  echo "($key) $value";
}

# valueだけ
foreach ($colos as $value) {
  echo "$value";
}

# endforeachを使う
foreach ($colors as $value) :
  echo "$value";
endforeach; //HTMLに埋め込むときにスッキリする書き方

15 関数を使ってみよう

返り値と引数に型宣言が必要ない

16 ローカル変数を理解しよう

17 便利な組み込み関数を使ってみよう

strlen();     // 文字数
mb_strlen();  // マルチバイト文字数
printf()      // 指定したフォーマットで表示

count()       // 配列の要素の数
implode()     // 指定した文字で配列を結合して表示

18 クラスとインスタンスを理解しよう

フィールドへのアクセス

$hoge->name（変数）、$hoge->fuga()（メソッド）

19 クラスを作ってみよう

コンストラクタ

__construct()というメソッドで定義

20 クラスを継承してみよう

21 アクセス権について理解しよう

22 staticキーワードを使ってみよう

staticな変数・メソッドへのアクセス

クラス名::変数・メソッド名

23 抽象クラスを使ってみよう

24 インターフェースを使ってみよう

25 外部ファイルを読み込んでみよう

読み込みの方法

# require → 読み込みに失敗したらエラー
require   

# include → 読み込みに失敗しても処理続行
include       

# ~_once → そのファイルが読み込まれているかをチェックして、読み込まれていた場合スキップ
require_once 
include_once 

# autoload → クラスが未定義だった場合に、自動的に読み込む
autoload

26 名前空間を使ってみよう

名前空間の接続はバックスラッシュで行う
名前空間に別名をつけることができる

27 例外処理をしてみよう

28 フォームからのデータを処理しよう

# 定義済みの変数
$_SERVER['REQUEST_METHOD']  // リクエストメソッドが何か
$_POST['(フォームの属性)']   // フォームからpostされてきた内容が入っている

29 Cookieを使ってみよう

# 定義済みの変数
$_COOKIE['(key)']   // setcookieで設定したvalueを引っ張ってくる

30 セッションを使ってみよう

$_SESSION['(key)']  // sessionに設定したvalueを引っ張ってくる

感じたこと

• 文字列連結がドットなせいで、フィールドへのアクセスが面倒だなと感じた
• 変数にいちいち$をつけるのも若干面倒だなと感じてしまった
• HTMLとの組み合わせで、見た目上スッキリとforeachなどが表現できるのは良い
• 型推論なのはいいけど、関数の返り値と引数に型宣言がないのは少し不安
• 想像していたよりは、自分が身に付けた他言語の知識が使い回せて、そこは安心した

手作り豆腐

前々から作ろうと思っていて、昨日ついににがりを注文し、本日届いたので早速作ってみました。
豆乳200mlとにがりをマグカップに入れ、よくかき混ぜた後にアルミホイルで蓋をし、ヘルシオの手動加熱→蒸しで25分。

何分初めて作るものなので、固まるかどうかすら不安だったのですが、いざ作ってみると、思った以上に豆腐らしいぷるぷるさに感動しました（正直、もっとトロトロのものができると思っていました）。

味見したところ、甘みが強くてとても美味しかったので、よく冷やしてネギやらショウガやらまぶして、醤油を垂らして冷奴でいただこうと思っています。
日本酒飲みながら食べると美味しそうだなぁ。テンション上がってきた。

次はティラミスに挑戦。
とにかく好きなものを手作りすることで人生を豊かにしていくスタイル。

すぐやるって言ったのにやれなかったリスト

今年のスローガンは「変化」です。
関連して、「やるって思ったことはすぐやる」という大きな目標がありました。

一月も下旬に差し掛かろうとしているので、すぐやれなかったリストを作りたいと思います。

• セーターの洗濯
• パソコン下取りの、発送用ダンボール探し
• クレジットカード支払の切り替え
• ティラミスを作る
• 仕事を辞める話を社長にする
• 転職の準備
• 電池を捨てる
• 携帯の契約内容変更

並べてみると、総じて「その瞬間やらないと全然問題ないけど、いつかやらないと結構面倒なことになる」ことが揃っています。

こういうことをすぐやらないのが今までの自分であり、変えたい自分であり、そして現在の自分でもあるので、やはり変えていかねば。

日本科学未来館

日本科学未来館 (Miraikan)

11月にぐるっとパスを買っていました。

ぐるっとパスとは

「東京・ミュージアム ぐるっとパス2016」は一冊2,000円で都内79の美術館・博物館等の入場券・割引券が綴られたお得なチケットブック。2ヶ月間利用可。

公益財団法人東京都歴史文化財団

というもので、要は買うとめっちゃ文化的な生活が捗りますよというものです。
対象の施設が思ったよりも多くて、そういう施設をめぐる人が好きな人は是非購入をおすすめします。自分も、妻が買ってきて、そこで初めて知ったクチでした。

その期限が近付いていたのもあって、今日は日本科学未来館へ行ってきました。
まず、お台場が久しぶりでめちゃくちゃテンション上がりましたね。

常設展では、「数理の国の錯視研究所」という錯視の展示が楽しかったです。
よく見る螺旋や色の濃さの平面錯視もそうなのですが、以前動画で見たことのある鏡に映すと全く違う形に見える模型を生で見ることができたのが最高にテンションが上がりました。

youtu.be

「ニュートリノの観測」では、スーパーカミオカンデの模型があったのはもちろん、おぼろげだったニュートリノの説明が割とガチめな感じされていて、「ここ子供向けの展示じゃねぇな」と思いました。

「ノーベルQ―ノーベル賞受賞者たちからの問い」では、未来館を訪れたノーベル受賞者からの直筆の問いかけが展示されていました。やはり研究者は共通して「どんな小さなことにも疑問を持つこと、好奇心を持つこと、問い続けること」を忘れないのだな、ということがわかります。大学生あたりに読んでほしい。

講演は時間がなくて最後まで見られなかったのですが、「折りたたみ」に関する科学は聞いてて非常に楽しかったです。

その他の展示も、一つ一つ見ごたえのあるものばかりで、いつの間にか閉館時間が迫ってきてしまい大変でした。

このような博物館や展示系の施設は、おそらく自分が独身のままでは一度も行かなかったであろうということを考えると、色々な場所へ誘ってくれる妻にただただ感謝です。

知的好奇心、忘れずに生きていこうな。