ヒントをもとに、チャットワークやSlackのようなWebサイトの形を作る練習。
Flexboxの考え方で、
display: flex; や
justify-content: space-between;や
align-items: center; などを使って要素を配置。
その要素の中に子要素を配置し、
さらにその中に孫要素を配置して……という感じ。
フォームを作るところで、横幅が100%のテキスト入力フォームを作るために、
親要素でpaddingを指定。
ここはmarginだとうまくいかない。
見栄えを良くするために、子要素でもpaddingを使ったり。
その後、次のLESSONへ。
マウスなどを使って視覚的に分かるやすく操作できるのがGUI（グラフィカルユーザインターフェース）で、それと対照的なのがCLI（コマンドラインインターフェース）。
Macの場合はターミナルを使ってPCを操作することができる。
GUIと比べて、多くの操作を実行することが可能。
ターミナルを起動すると、
hukudabe@hukudabenoMacBook-Pro ~ % のように表示される。
hukudabe … ユーザー名
hukudabenoMacBook-Pro … コンピューター名
~ … カレントディレクトリ
% … 入力待ち（プロンプト）
をそれぞれ表している。
ディレクトリ … ファイルが入っているフォルダ
ルートディレクトリ … その階層構造の一番上にあるディレクトリ（Macは/）
カレントディレクトリ … 現在作業をしているディレクトリ
ホームディレクトリ … 新規にターミナルを起動した時に作業中となるディレクトリ（デフォルトは「/Users/hukudabe」）
絶対パス … ルートディレクトリから指定するパス。
/Users/hukudabe/Desktop/メモ.txt のように指定する。
相対パス … カレントディレクトリから指定するパス。（/で始めてはいけない）
Linuxコマンド … PCへ操作を命令するためのコマンド。
pwdコマンド … カレントディレクトリを確認する。
（print working directory）
lsコマンド … ディレクトリやファイルの一覧を表示する。
（list segments）
ls [中身を表示したいディレクトリのパス] で表示できる。
ls とだけ実行するとカレントディレクトリの中身を表示。
cdコマンド … カレントディレクトリを移動する。
cd [移動したいディレクトリのパス]
cd とだけ実行するとホームディレクトリに移動。
HTMLやCSSはデータ処理のできないマークアップ言語。
プログラミング言語ではデータ処理が可能。
デスクトップの「Ruby」フォルダ内のtest.rbを実行する場合、ターミナルで
cd Desktop/ruby
ruby test.rb などと実行すると可能。
Rubyファイルでのコメントアウト
#を入力すると、以降改行されるまでコメント扱いとなる。
irbコマンド … ターミナルから直接Rubyのプログラムを動かすことが出来る。
（interactive Ruby）
文字列を生成するには「”」か「’」で囲む。
“あいう” + “えお” とすると
“あいうえお” のように文字列が連結される。
メソッドは、プログラミングにおける何らかの処理をまとめたもの。
lengthメソッド … 文字列が持つメソッドで、文字列の文字数を数える。
hukudabe.length のように使う。
数値は計算などを行えるもので、「”」や「’」で囲む必要はない。
演算子 … 値の計算や比較などに使用する記号。+、-、<、>など
代数演算子 … 演算子の中でも特に計算を行うもの。
+ 足し算
- 引き算
* 掛け算
/ 割り算
% 剰余
文字列と数値は別の種類の値なので、連結できない。
to_sメソッド … 数値が持つメソッド。数値を文字列に変換する。
（string）
20.to_s などと記述すると ”20″になる。
to_iメソッド … 文字列が持つメソッド。文字列を数値に変換する。
（integer）
数字以外の文字列の場合はすべて数値0に変換される。
式展開 … 文字列の中に式を入れることができる機能。
文字列の中で#{20 + 30}のように記述する。
このとき必ず「”」で囲む。「’」だとダメ。
puts “1日は#{24 * 60}分です”
→ ”1日は1440分です” と出力される。
変数 …値を入れる箱のようなもの。名前をつけられる。（変数名）
number = 3 のように記述。
Rubyにおいて、=が1つの式は必ず、「右側の値を左側の変数に代入する」という意味。
fruit = “りんご”
puts fruit
=>”りんご”
再代入 … 一度値を代入したあとの変数に、別の値を再度代入すること。
プログラム中に何度でも再代入が可能。
自己代入演算子 … 自分自身に代入する自己代入を、通常の演算子を用いた書き方を省略して記述することができる。
number = number + 1 は
number += 1 と表せる。（ほか、-= *= /= %=）
変数には命名規則がある。
やってはいけないのは、数字で始める、日本語を使う、スペースを含める、予約語（文法などで予め決まっている単語）を使うこと。
大文字で始める、_で始める、は避けるべき。
変数の中身が分かりやすい名前をつける。
直径10cmの円の面積を求める式の場合、
(10 / 2) * (10 / 2) * 3.14 とするよりも、
chokkei = 10
(chokkei / 2) * (chokkei / 2) * 3.14 の方が値の修正も楽で読みやすい。
minutes = 5
“#{minutes}は#{minutes * 60}秒です。” でもよいが、
minutes = 5
seconds = minutes * 60
“#{minutes}分は#[seconds}秒です。” の方が分かりやすい。
putsメソッド … ターミナルに値を出力するメソッド。
getsメソッド … ターミナルに値の入力機能を起動するメソッド。入力された値は文字列としてプログラムに渡される。
記述した行を読み込むと入力機能が起動し、ターミナル画面は入力待ちの状態になる。
入力された値を出力すると末尾が改行される。
chompメソッド … 文字列が使用できるメソッド。文字列の末尾に存在する改行を取り除いた文字を返す。
input = gets.chomp
バックスラッシュ記法 … \から始まる文字の記法。文字列の中で、ただの文字ではなく改行やタブなどを行う。
\n 改行
\t タブ
\b バックスペース
\\ バックスラッシュ
3日目はここまで。
こうして振り返ると、思った以上にたくさんの内容をやってきてるんだな……。
しっかり復習しないといかん。
