Web開発まとめ

Web開発で気になった用語をまとめる

HTML

• 空要素は開始タグのみの要素（brなど）
• hr要素は区切りを表す
• dl要素の中にdt要素（用語）、dd要素（説明）を記載するのが説明リスト
• h1は一つのページで一回だけ使用
• フォントサイズを小さくする目的で見出しは使用しない
• アンカータグについて
  • アンカータグの属性にtarget="_blank"を付けると新規ページでリンクが開く
  • アンカータグの属性にrel="noopener"を付けるとセキュリティ面で有用（ルールとして覚える）
  • アンカータグのhrefに"#id名"を付けるとページ内リンクとなりid名に飛ぶ
• small要素は著作権表記する際に使用する
  • ©は©️を表す（文字実態参照と言う）
• span要素とdiv要素
  • span要素は意味を持たない要素で特定部分にcssをあてるために使用する
  • span要素はインライン要素（幅と高さの指定不可）で改行されない
  • div要素は意味を持たない要素でブロック要素（幅と高さの指定可能）で改行される
  • divの中にspanは記載可能だが逆は不可
• table要素の中にtr（行）、td（列）タグでテーブルを表現できる
  • 属性border（線）, colspan（横に結合）, rowspan（縦に結合）がある
• フォームの作成はformタグから属性action="パス" method="POST"を記載
  • input要素の属性について
    • type=text, password, submit（value属性とセットで）, radio（checkedで初期値）, checkbox（value="1"はセット、checkedで初期値）, required（入力制限、max-length="5"とセットで使用すると文字数制限となる）
    • name（サーバに渡す名前）
    • placeholder（初期値）
  • プルダウンメニューの作成
    • select要素の中にoptionタグで選択項目を記載
    • optionタグのvalue属性にサーバに渡す名前
    • selectタグにselected属性（初期値）を記載
  • ラベルを使うことでラベル部分をクリックしても選択できるようになる
• ファビコンとはブラウザタブのアイコンのことで<ink rel="icon" href="パス"で設定
• メタデータとはページの付加的なデータでname="description"でSEO対策

CSS

• インライン＞内部参照＞外部参照の順に適用される
• 背景画像の設定
  • background-image: url(パス);
  • 繰り返さないためにはbackground-repeat: no-repeat;
  • 中央寄せはbackground-position: center;
  • htmlのimg要素は重要画像、cssのbackground-imageは背景画像の使い分け
• ボックスモデル関連
• marginの上下は相殺される
  • marginの左右、padding、borderは相殺されない
  • widthとheightにmarginは含まれない
  • 指定がないとwidthはautoとなりブラウザや親要素の幅となる
  • 指定がないとheightはautoとなりコンテンツの高さとなる
  • marginは負の値とautoが使えるがpaddingは使えない
• 一つの要素に複数のクラスの指定が可能class="xxxA xxxB"
• 擬似クラスについて
  • a:link（通常時）, a:visited（クリック後）, a:hover（選択時）, a:active（クリック時）の順番で記載する
  • スマホでhoverは使用不可
• display: inline-block;は要素の並び方はインライン要素の動作となるが、要素の中身はブロック要素の動作をする（＝改行が入らずに要素が横並びになる）

Flexbox

• flex-directionプロパティで横縦の並びを指定
• flex-wrapプロパティで折り返しを指定
• justify-contentプロパティで水平方向の位置を指定
• align-itemsプロパティで垂直方向の位置を指定
• align-cotentプロパティで複数行の垂直方向の位置を指定
• flex-flowプロパティでflex-directionとflex-wrapを同時に指定
• いずれも親要素に指定し子要素に適用される

グリッドレイアウト

• minmax(最小値, 最大値)
• repeat(auto-fill, 値)で親の大きさに合わせて繰り返し、親にスペースが余る場合空のグリッドが作られる
• repeat(auto-fit, 値)で親の大きさに合わせて繰り返し、親にスペースが余る場合余白が作られる

レスポンシブ対応

• viewportとは各端末画面の横幅

Bootstrap

• CSSフレームワーク（特にレスポンシブ対応に有用）
• 基本的には公式サイトのコードをコピペして作成していく （クラス名意識）
• グリッドシステムとはグリッドレイアウトのように格子状にレイアウトしていくもの
• グリッドの列数は12（colを全て足すと12になるがポイント）
• クラス名に特定のキーワードを指定するだけでCSSが適用されるためCSSの記述量を軽減できる

JavaScript

• jsファイルの先頭に"use strict";と記述することで厳密なエラーチェックが行われるため推奨
• constは初期化時に値を代入する必要がある
• 変数var宣言は古い書き方で推奨されない（今はletのみ）
• 変数の二文字目以降の単語の先頭は大文字とする（colorNameなど）
• \エスケープシーケンスにより'を文字列として扱う
• ifの時に==で「違う型で同じ値のもの」を比較するとtrueとなるため、同じかどうか比較する時は===で厳密比較をする
• ifとswitchは基本的にifを使用すれば良い
• whileとdo whileの違いは条件判断が後ろで最低一回ループするのがdo while
• 配列の繰り返しは「配列.length」で長さを取得した分だけ回す
• 連想配列のvalueの取り出しは「連想配列.key」「連想配列[key]」の二方法がある
• 連想配列のkeyは""で囲まなくて良い
• 連想配列の繰り返しは「for(変数 in 連想配列){処理}」となる
• 関数は「function 関数名(引数) {処理}」となる
• 関数名を持たない関数を関数リテラル、匿名関数、無名関数、と言う
• Functionコンストラクター「new Function (引数, 処理);」←あまり使われないので参考
• アロー関数「(引数) => {処理}」関数リテラルの省略記法
• DOM関連
  • DOM操作とはWebサイトを（リロードせずに）動的に書き換える記述
  • 要素、属性、テキストなどのオブジェクトをノードと言う
  • メソッドについて
    • idをキーに要素を取得
      • document.getElementById(id名) *指定したidが存在しない場合はnullを返す
    • タグをキーに要素を取得（配列に似たデータを返す）
      • document.getElementsByTagName(tag名) *指定したtagが存在しない場合は配列に似た空データを返す
    • name属性をキーに要素を取得（配列に似たデータを返す）
      • document.getElementsByName(name名) *指定したnameが存在しない場合は配列に似た空データを返す
    • class属性をキーに要素を取得（配列に似たデータを返す）
      • document.getElementsByClassName(className名) *指定したclassNameが存在しない場合は配列に似た空データを返す
    • ノードの追加
      • document.createElement(elementName) *要素の作成
      • document.createTextNode(text) *テキストの作成
      • element.appendChild(node) *最後の子要素として追加
    • ノードの置換
      • parentNode.replaceChild(newChaild, oldChild) *指定した子ノードを置き換える
    • ノードの削除
      • element.removeChild(child) *指定した子ノードを取り除く
• イベントとイベントハンドラについて
  • イベントとはブラウザ上でユーザーが行う動作のこと
  • イベントハンドラとはイベントの発生をきっかけにして何らかの処理を行うこと
  • イベントとハンドラの関連付けの方法
    • オブジェクト.onイベント = () => {処理（ハンドラ）}; *onプロパティを使う方法
    • オブジェクト.onload = () => {処理（ハンドラ）}; *loadイベントを使う方法
    • オブジェクト.addEventListener(イベント種類, () => {処理（ハンドラ）}, false); *addEventListenerを使う方法

Ruby

• RVMとはRubyバージョン切り替えソフトウェアのこと
• 二単語以上の変数（関数）名は小文字のスネイクケース（price_cost）で記述する
• 定数は全て大文字で記述する
• 変数（整数）.to_fで整数を小数に変換（整数に変換は変数.to_i、文字列に変換は変数.to_s）
• 文字列の中に変数を入れたい時（式展開）→"文字列#{変数}"とする
• 小文字を大文字にする（!を付けると変換保持）→文字列.upcase（!）
• インクリメントは変数 += 1
• falseとnilは偽、それ以外は真
• 文字列が空の場合trueとなるのは、変数（文字列）.empty?
• 文字列の中に特定の文字が含まれている場合trueとなるのは、変数（文字列）.include?("特定の文字")
• elsifとなり、「e」がない点注意
• unlessを用いると条件式が偽の時に実行する（ifの逆でelsifがなく、無理に使う必要はない）
• 偶数か判定する→if 値.even?
• 奇数か判定する→if 値.odd?
• if, def, each, class, moduleの最後のendを忘れない
• メソッドの戻り値は最後に評価された式となりreturnは不要
• 配列の様々なメソッド
  • 配列.reverseで逆順に並ぶ
  • 配列.shuffleでランダムに並ぶ
  • (0..25).to_aで0から25までの要素を持つ配列を作成
  • 配列.push(要素)で末尾に要素を追加（配列 << 要素でもOK）
  • 配列.popで末尾を削除し返す
  • 配列.shiftで先頭を削除し返す
  • 配列.uniqで重複削除
  • 配列.join(セパレート)でセバレートで結合
  • 配列.sortで昇順ソート
  • 配列.sizeで個数（配列.lengthでもOK）
• ハッシュの様々なメソッド
  • ハッシュはキーにシンボルを用いた方が早いので シンボルを用いる（単純にキー: 値とすれば良い）
  • ハッシュ[:キー]で値の取り出し
  • ハッシュ.delete[:キー]で値の削除
  • ハッシュ.each { |k, v| puts v}で全ての値の取り出し
  • ハッシュ.keysでキーの一覧
  • ハッシュ.valuesで値の一覧
  • ハッシュ.has_key?(:キー)でキーが含まれているかチェック
  • ハッシュ.size（ハッシュ.lengthでもOK）
• 繰り返し処理のeachについて
  • 繰り返し処理はforではなくeachを使う
  • 以下二通りの書き方
  • 配列.each do |i| 処理 end
  • 配列.each {|i| 処理} endは不要
  • next if ~がtrueであれば次のループへ（＝continue）
• クラスについて
  • クラス名の先頭は大文字
  • インスタンスの作成はクラス.new
  • インスタンス変数の作成はinitializeメソッドと@変数
  • インスタンス変数の読み書きをするメソッドをアクセサと言う→attr_accessor :変数
  • クラス変数は@@変数名（クラス自体に値を保持する）
  • クラスメソッドはdef self.メソッド名（クラスから直接呼ぶ）
  • クラス内の定数を外から呼び出す際はインスタンス::定数
  • クラスの継承はclass 子クラス < 親クラス
  • praivateメソッドはメソッドの上にpraivateと記述する（デフォルトはpublicメソッド）
  • モジュールとはクラスのようにメソッドや定数をまとめられるもの
  • モジュールはインスタンスや継承不可
  • モジュールはmodule モジュール名の中でdef self.メソッド名とする
• 例外は以下参照

begin
  例外が起きうる処理
rescue => ex
  例外が発生した場合の処理
  ex.message
  ex.class
ensure
  必ず実行する処理
end

MySQL

• クエリは大文字小文字区別されない
• クエリの最後に;を忘れない
• select文で*よりカラムを指定した方が実行速度が早い

Rails(RoR)

• テーブル名はモデルの複数形にする
• railsプロジェクトの作成
  rails _バージョン_ new プロジェクト名
• 必要なgem（ライブラリ）をインストール
  bundle install
• webサーバーの立ち上げ
  rails s
• コントローラーの作成
  rails g controller コントローラー名 メソッド名
• モデルの作成
  rails g model モデル名（単数） DBカラム名:型・・・
• マイグレーションファイルのDBスキーマをDBに反映させる
  rails db:migrate
• 初期データの登録
  rails console
• ルーティングの設定（URLとアクションを紐付ける）
  
• routes.rb上で設定
• コントローラー上のメソッドの上にprivateと記述しpermitを用いることで悪意のあるデータによるDB書き換えリスクを軽減できる（ストロングパラメーターの設定）
• viewの共通化するコードは_ファイル名としてまとめる（リファクタリング）
• controllerの共通化するコードはファイル上部にbefore_actionとしてまとめる（リファクタリング）
• turboによりAjax風の処理をrailsで実装できる（フロントの処理を軽減できる）

Git/GitHub

• .gitignoreには共通設定とリポジトリ毎の設定をする
• gitの管理はディレクトリ毎に行う
• ステージとリポジトリの差分はgit diff HEAD
• コミットの取り消しはrevert（上書きのためこちらを推奨）とreset（なかったことにする）
• 一つ前のブランチに切り替えるにはgit checkout -
• リモートブランチの表示はgit branch --remote(-aでリモートとローカルの両方を表示)
• リモートブランチの削除はgit push --delete origin xxx
• ローカルブランチの削除はgit branch --delete xxx

参考文献
中村 祐太 Yuta Nakamura, 2023, 「ウェブ開発入門完全攻略コース - HTML/CSS/JavaScript. プログラミングをはじめて学び創れる人へ！」, udemy, （2023/8/15取得，https://www.udemy.com/）．