プログラミング備忘録

プログラミングの学習状況をメモしています

25日目

今日の学習

Ruby

正規表現

Ruby本を進めていると、正規表現の章に突入した。

初めて見るものだが、どうやら文字列の抽出や置換が簡単に行えるらしい。

qiita.com

まずはこちらの記事で学習。まだ第一回目の学習しかできていないが、非常に分かりやすかった。

数十分前までは、\d{2,5}[-(]\d{1,4}[-)]\d{4}のような、何の羅列？バグ？と感じるようなものの意味がちゃんと理解できるようになった。

メタ文字

正規表現では、メタ文字と呼ばれる特別な意味を持つ文字を用いて、文字列を検索したりするようだ。

まずは、検索したい文字列の法則を見つけることから始めて、合致する法則の通りにメタ文字を組み合わせて検索をする。

文字クラス

  • \d
    1個の半角数字を表す。

  • [AB]
    「AまたはB」のいずれか1文字を表す。文字数制限はないため、[ABC]のように、増やしても問題ない。
    ＊[a-z]のような場合は、「aまたはbまたはcまたは...yまたはz」という意味になり、ハイフンが文字の範囲を表すことになる。

量指定子

  • {n,m}, {n}
    文字の個数を限定する。{n,m}は「直前の文字がn個以上、m個以下」、{n}は「ちょうどn文字」。
    ▶️「半角数字が2~5個」であることを示したい場合は \d{2,5}のように表現

Ruby上で正規表現を使う

/ /で囲んだ部分が正規表現になる。

text.scan /\d{2,5}[-(]\d{1,4}[-)]\d{4}/

HTML

昨日に引き続き、ドットインストールで学習。

詳解HTML 基礎文法編 (全22回) - プログラミングならドットインストール

詳解HTML フォーム部品編 (全8回) - プログラミングならドットインストール

詳解CSS 基礎文法編 (全33回) - プログラミングならドットインストール

タグを駆使してマークアップすることの意義をProgateではあまり学ぶことができなかったように思う。

見た目が変わらないのにも関わらず、timeタグやarticleタグなどを使う意図は、検索エンジン等に読み取ってもらうためなのだということを知った。

人間から見たときの見た目さえ良ければいいやと思わずに、きちんと文章の意味に応じたタグを使っていかなければならない。

ユーザーからの入力を受け取る input, textarea

メモ的な形で残しておく。

input

placeholderで、入力して欲しい事柄を初期値として表示（入力を受け付けると消える）。 ただし、説明としては以下のlabelを用いた方がよい。

  <input type="text" placeholder="名前を入れて下さい">

for属性とid属性でlabelと入力部品を紐づける。

  <label for="name">名前</label>
  <input type="text" id="name">

また、入力部品をlabelに入れることも可能。紐づけを省略できる。

  <label>名前 <input type="text"> </label>

valueで初期値を設定できる。

  <input type="text" value="hello">

入力された文字が伏字になる。

  <input type="password">
textarea

複数行を受け付ける。

  <textarea></textarea>

初期値はvalue属性ではなく、タグの中に書く。

  <textarea>初期値</textarea>

ドロップダウンリスト

selectタグを使用。

  <label for="color">好きな色</label>
  <select id="color">
    <option>赤</option>
    <option>黄色</option>
    <option>橙</option>
    <option selected>緑</option>
    <option>水色</option>
    <option>青</option>
    <option>紫</option>
  </select>

selectタグの下にoptionタグで選択肢を書く。

optionタグにselectedを加えることで、最初から選択されているものを決められる。上の場合だと、最初から緑が選択されている。

 <select id="color" size="3" multiple>

sizeでは何行文を一気に表示することが決めることができる。

また、multiple属性をつけると、複数選択が可能になる。

チェックボックス（複数選択可）

input type="checkbox"を使う。

  <label><input type="checkbox">赤</label>
  <label><input type="checkbox" checked>緑</label>
  <label><input type="checkbox">青</label>

checked属性をつけると、あらかじめチェックされた状態になる。上の場合だと、緑の項目にあらかじめチェックが入る。

ラジオボタン（一つだけ選択）

input type="radio"を使う。ただし、name属性を使い、値を同じにして、同じグループであるとしておかなければ複数選択できてしまうので注意する。

  <fieldset>
    <legend>一番好きな色</legend>
    <label><input type="radio" name="color">赤</label>
    <label><input type="radio" name="color" checked>緑</label>
    <label><input type="radio" name="color">青</label>
  </fieldset>

同じname属性がついているので、どれか一つしか選択できないようになっている。

fieldset　入力部品をグループ化

fieldsetタグで入力部品を囲む。

キャプションをつけたい場合はlegendタグを使用する。

fieldsetを使用していない画面。味気ない。

f:id:hasegawa_note:20210527172754p:plain

fieldsetとlegendを使用した画面。分かりやすくなっている。

f:id:hasegawa_note:20210527172757p:plain

color, date, number, range

これらは、最新のブラウザでのみ使える入力部品のため、制作現場ではあまり使われないらしい。

色を入力するための部品
<p><input type="color"></p>

日付を入力することができる
<p><input type="date"></p>

数字のみの入力が可能
<p><input type="number"></p>

指定した範囲の数値を直感的に入力できる。
<p><input type="range" min="0" max="5" step="1"></p>

f:id:hasegawa_note:20210527174409p:plain

f:id:hasegawa_note:20210527174412p:plain

f:id:hasegawa_note:20210527174456p:plain

ボタン

<input type="button" value="OK">

<button>OK</button>

どちらでも同じだが、buttonタグを使うとタグの中に画像を入れたりすることができる。

disabled属性で入力部品を無効化

一時的に無効にしたい場合などに使用する。

CSS

CSSで今編集しているところに背景色を入れる

はじめてのCSS (全15回) - プログラミングならドットインストール

復習も兼ねてこちらのコースで学習していた。

f:id:hasegawa_note:20210527121801p:plain

目標となるのは上の写真の形。

f:id:hasegawa_note:20210527121808p:plain

編集中は、background-colorで適当な色を入れておくことで、今編集しているのがどの範囲なのかが視覚的に分かりやすくなったので良かった。

継承

あまり意識したことのなかった概念だったが、言われてみれば...となったのでメモ。

<body>
  <h1>CSSの練習</h1>
  <p>CSSの練習です。CSSの練習です。CSSの練習です。CSSの練習です。CSSの練習です。</p>
</body>

body {
  color: red;
  border: 1px solid blue;
}

f:id:hasegawa_note:20210527180444p:plain

上のようなコードがあった場合、bodyの中身は全て文字色がredになる。h1とpどちらにも適用されている。

しかし、下のborderはbodyの中身全てに適応されているわけではないことが分かる。

これは、プロパティごとに継承の有無が定められているからであり、colorに関しては継承あり、borderに関しては継承なしだからである。

borderのように継承されないプロパティを継承させたい場合は、inheritを使用する。

body {
  color: red;
  border: 1px solid blue;
}

h1 {
  border: inherit;
}

f:id:hasegawa_note:20210527180834p:plain

今度はh1もborderが適応されている。

学習メモ

HTML

  • マークアップ ... コンテンツをタグで囲って要素を作ること
  • 空要素 ... 閉じタグがない要素（imgなど）
  • blockquoteタグ ... 引用を表すタグ。出典URLがある場合はcite属性で表現できる
  • 文字実体参照 ... HTMLで使う記号はそのまま使えないので、別の書き方で表現する
    <であれば&lt;、>であれば&gt;と表現する
  • prタグ ... 範囲内の改行や空白をそのまま反映する
  • codeタグ ... HTMLの中でコードを書く場合に使用するタグ
  • dlタグ ... 説明リストの項目使用するタグ
    子要素はddで、説明を囲う
  • #(パウンド記号) ... 同じページ内にリンクを貼ることができる
    識別子をつけ、リンクをしたい箇所にidで同じ識別子をつける
<a href="about">このページについて</a>

<h2 id="about">このページについて</h2>

VS Code　便利ショートカット

  • control(^)+p ... これの逆バージョンが欲しい...
  • option + shift + ↑↓ ... 現在カーソルのある行を↑か↓にコピー

余談

空要素の最後にスラッシュが自動で入る

VS codeでhtmlを書いていると、保存時に自動で文章が整形され、空要素の最後にスラッシュが入れられているのに気がついた。

見たことのない形だったため、気持ち悪...と思って調べてみたが、どうやら間違いというわけではないらしい。

meta要素（メタタグ）の最後にスラッシュ（／）は必要？ | DOTEKIブログ

個人的にはあると違和感を覚えるので、設定を切りたいのだが、その設定を切るのにも手間取ってしまい無駄な時間を費やしてしまった。

犯人はPrettier

自分でダウンロードしておいて犯人も何もないが、setting.jsonの中にあるhtmlの部分をコメントアウトすると、スラッシュが入らなくなったので解決。

ただ、個人的に最後のスラッシュが気になってしまったというだけで、他の機能に関しては残しておきたいので、やっぱり機能させておいた方がいいかな...？

【コードフォーマッター】PrettierでHTML、CSS、JSのコードを整形してみた - クモのようにコツコツと

とても便利に思える。HTMLだけ別のフォーマッターを使うとかでもいいんじゃないか...。