2022/03/1(火) JSprimer (コメント)

コメント

  • コメントはプログラムとして評価されないため、ソースコードの説明や注釈を書くのに使われます。
  • コメントの書き方には、一行コメント複数行コメントの2種類があります。

①一行コメント

  • 一行コメントは、一行分をコメントとして扱いたい時に用います。
  • // 以降から行末までがコメントとして扱われ、プログラムとして評価されることはありません。
// 一行コメント
// この部分はコードとして評価されない
// console.log("この部分はコメントとして扱われ、表示されません");

②複数行コメント

  • 複数行コメントは、複数行まとめてコメント扱いとしたい場合に用います。
  • /**/で囲まれた範囲がコメントとして扱われます。
/*
   複数行コメント
   途中に改行を含むことができます。
   囲まれている範囲がコードとして評価されません。
   console.log("この部分はコメントとして扱われ、表示されません");
*/
  • ただし、複数行コメントの中に、ネストさせて複数行コメントを書くことはできません。構文エラーになってしまいます。
/* ネストされた /* 複数行コメント */ は書けない */  //=> 構文エラーになります。

③[ES2015] HTML-likeコメント(非推奨)

  • ECMAScript 2015(ES2015)から後方互換のための仕様として追加されたコメントです。
  • 後方互換とは、例えると、古い製品の仕様を新しい製品でも使えるようにすることです。
  • 以前は、JavaScriptをサポートしていない古来のブラウザが誤ってjsのコードをテキストとして表示されるのを防ぐためにHTMLに似たコメント機能を使って、jsのコードをコメントアウトしていました。
  • しかし現在では、JavaScriptに対応できていないブラウザはないので、使う必要はありません。
  • 古い本や解説サイトを参考にしたであろうサイトが現存するため、そのコードが理解できるようにと配慮された仕様になります。

HTML-likeコメントが追加された歴史的経緯

これは本文ではなくてAnnex(付属文書)に記述されている、いわゆる後方互換、歴史的な事情の維持のための文法です。古来のブラウザ(IE3とか、MS-DOSとかそういうレベルの時代)ではscriptタグに非対応で、プログラムがまるごと文章中に表示されてしまう可能性がありました。そこで、scriptの中身をコメントアウトして書くことがマナーでした。

<script language="javascript">
<!--
  document.bgColor = "brown";
// -->
</script>

日本の一般人にまでインターネットが普及した時代にはもう不要のマナーだったかもしれませんが、古い本や解説サイトを参考にしたであろうサイトが現存します。これをある程度解釈できるようにという配慮がこのHTML-likeコメントです。

JavaScriptにはあまり知られていない「5種類」のコメントがある

参考

JSPrimer

HTML-likeコメントが追加された歴史的経緯

JavaScriptにはあまり知られていない「5種類」のコメントがある

2022/03/1(火) JSprimer (JavaScriptとは)

JavaScriptとは

JavaScriptは、主にウェブブラウザの中で動くプログラミング言語です。 ウェブサイトで操作をしたら表示が書き換わったり、ウェブサイトのサーバーと通信してデータを取得したりと主にユーザーに見える部分の動作を担う言語です。仕様は、ECMAScriptによって動作が決められています。

ECMAScriptとは?

ECMAScriptJavaScriptの仕様を定義したものです。仕様とは決まりごとのことで、ブラウザなどがJavaScriptを読み込んだときに、どのような文法を解釈しなければならないか、処理がどのように動くべきかといったことを決めたものです。

  • 関数宣言の書き方はこういう文法になる
  • 変数が宣言されたとき、JavaScriptエンジンはこういう動作になる
  • StringやArrayオブジェクトにはこういうメソッドがある

サバイバルTypeScript.

  • 例えば、上記のようなJavaScriptにおける基本的な決まりを定めているものです。
  • ECMAScriptでは、どの実行環境でも共通な動作のみが定義されているため、基本的にどの実行環境でも同じ動作をします。
  • まとめると、ECMAScriptとは、どの実行環境でも共通な動作のみが定義されているJavaScriptの核となる仕様のことです。

  • ECMAScript」はどの実行環境でも共通の部分を表す
  • JavaScript」はECMAScriptと実行環境の固有機能も含んだ範囲を表す
  • まとめると、JavaScriptでは、基本的な共通の使用であるECMAScriptに独自の実行環境の固有機能を加えたものであると考えると分かりやすいでしょう。

JavaScriptの言語的な特徴①大文字と小文字を区別する

  • JavaScript大文字小文字を区別します。
  • 同じnameでもNAMEnameでは、別々の名前として認識されるということです。

JavaScriptの言語的な特徴②予約語を持つ

  • JavaScriptには特別な意味を持つキーワードのことを予約語と呼びます。
  • 予約語と同じ名前の変数や関数は宣言できません。

JavaScriptの言語的な特徴③文はセミコロンで区切られる

JavaScriptは、文(Statement)ごとに処理していき、文はセミコロン(;)によって区切られます。 特殊なルールに基づき、セミコロンがない文も、行末に自動でセミコロンが挿入されるという仕組みも持っています。しかし、暗黙的なものへ頼ると意図しない挙動が発生するため、セミコロンは常に書くようにします

  • 基本的には、文をセミコロン(;)で区切るように記述していきます。
  • スペース、タブ文字などは空白文字ホワイトスペース)と呼ばれ、文に記述しても挙動に影響はありません。

JavaScriptの言語的な特徴④strict mode

JavaScriptにはstrict modeという実行モードが存在しています。 古く安全でない構文や機能が一部禁止されています。

  • use strictという文字列をファイルまたは関数の先頭に書くことで、strict modeが有効になります。
"use strict";
// このコードはstrict modeで実行される
  • "Module"の実行コンテキストでは、このstrict modeがデフォルトの仕様となっています。
  • strict modeでは開発者が安全にコードを書けるように、レガシーな機能や構文を禁止したり、明らかな問題を含んだコードに対しては早期的に例外を投げたりすることでJavaScriptの落とし穴を一部ふさいでくれます。

JavaScriptの言語的な特徴⑤実行コンテキスト: ScriptとModule

  • JavaScriptの実行コンテキストとして"Script"と"Module"があります。
  • 実行コンテキストとは、実行環境のことです。
  • "Module"の実行コンテキストは、デフォルトがstrict modeとなり、古く安全でない構文や機能は一部禁止されています。

コンテキストとは?

同じコード記述やプログラム上の要素が、その置かれているプログラム内での位置や、実行される際の内部状態などによって異なる振る舞いをしたり、異なる制約を受けたりすることを指してコンテキストということがある。 コンテキストe-Words

  • (変数)の中身によって異なる処理を行う場合はstate
  • (変数)の中身によらず同じ処理を行う場合はcontext
  • contextの「状態」が「りんご」でも「バナナ」でも「グラボ」でも何であっても、カートに入れて、レジ通して、支払して、バッグに入れるという一連の「処理」は変わりません。

プログラミングでよく見かける"コンテキスト(context)って何?

参照

JSPrimer

サバイバルTypeScript

コンテキストe-Words

プログラミングでよく見かける"コンテキスト(context)って何?

2022/02/20(日) ゼロからわかるRuby超入門Chapter4

配列

  • 配列は、要素と呼ばれる複数のオブジェクトをまとめるための部品
  • 配列自身もArrayクラスのオブジェクト
  • 配列に入る個々のオブジェクトを要素と呼ぶ
  • 配列に新たに要素を追加したり、既に入っている要素を削除したり出来る
  • 配列では、種類の異なるオブジェクトを1つの配列にまとめることが出来る
  • 配列名は慣習的に複数形の単語にする(複数のオブジェクトが要素として格納されるため)
# 配列名は複数形
sugers = ["白砂糖", "黒糖", "角砂糖"]
coffee_beans = ["Brazil", "Kenya", "Nicarragua"]
even_numbers = [2, 4, 6]

# 種類の異なるオブジェクト(型の異なるオブジェクト)を1つの配列にまとめる
somethings = ["カフェラテ", 400, false] 
=> ["カフェラテ", 400, false]

# 配列に入っている要素は、それぞれ異なる型のオブジェクト
somethings[0].class
=> String
somethings[1].class
=> Integer
somethings[2].class
=> FalseClass


# 配列はArrayオブジェクト
somethings.class
=> Array

["カフェラテ", 400, false].class
=> Array

配列に入っている要素を取得する

  • 配列の特定の要素を取得する際は、インデックス番号を指定する
  • インデックス番号とは、配列の複数ある要素から1つを特定することが出来るように、0から1,2と順に要素に割り当てられた番号のこと。
  • 1番後ろの要素を取得する場合は、「-1」を後ろから2番目の要素を取得する場合は「-2」をインデックス番号として指定する
  • インデックス番号で指定する以外にもlastメソッドで配列の先頭の要素を、firstメソッドで配列の末尾の要素を取得できる。
drinks = ["コーヒー", "カフェラテ", "紅茶", "カルピス", "オレンジジュース"]
=> ["コーヒー", "カフェラテ", "紅茶", "カルピス", "オレンジジュース"]

# インデックス番号を指定して、特定の要素を取得する
drinks[0]
=> "コーヒー"
drinks[1]
=> "カフェラテ"
drinks[2]
=> "紅茶"
drinks[3]
=> "カルピス"
drinks[4]
=> "オレンジジュース"

# 取得した要素オブジェクトのクラス
drinks[4].class
=> String

# 配列の末尾の要素を取得
drinks[-1]
=> "オレンジジュース"

drinks.last
=> "オレンジジュース"

# 配列の先頭の要素を取得
drinks.first
=> "コーヒー"
  • 配列に対して、対応する要素がない場所から取得しようとすると、nilオブジェクトが返る。
  • nilオブジェクトは、何もないことを表す。
# drinks配列は要素を5つ持つので、インデックス番号は4まの要素しか存在しない=>nilオブジェクトが返る
drinks[5]
=> nil

配列に要素を追加・削除する

  • 要素を追加するメソッド
    • pushメソッドは、配列の末尾に要素を追加する
    • unshiftメソッドは、配列の先頭へ要素を追加する
    • >>は、配列の末尾に要素を追加する
# 配列の先頭に要素を追加
drinks.unshift("キャラメル・マキアート")
=> ["キャラメル・マキアート", "コーヒー", "カフェラテ", "紅茶", "カルピス", "オレンジジュース"]

# 配列の末尾に要素を追加
drinks.push("マンゴー パッション ティー フラペチーノ")
=> ["キャラメル・マキアート", "コーヒー", "カフェラテ", "紅茶", "カルピス", "オレンジジュース", "マンゴー パッション ティー フラペチーノ"]
  • 要素を削除するメソッド
    • popメソッドは、配列の末尾から要素を1つ削除する
    • shiftメソッドは、配列の先頭から要素を1つ削除する
# 配列の末尾から要素を1つ削除
drinks.pop
=> "マンゴー パッション ティー フラペチーノ"#=> 削除した要素を戻り値を返す
drinks
=> ["キャラメル・マキアート", "コーヒー", "カフェラテ", "紅茶", "カルピス", "オレンジジュース"]

# 配列の先頭から要素を1つ削除
drinks.shift
=> "キャラメル・マキアート"#=> 削除した要素を戻り値を返す
drinks
=> ["コーヒー", "カフェラテ", "紅茶", "カルピス", "オレンジジュース"]

配列の足し算・引き算

  • 配列の足し算は、2つの配列をつなげた新しい配列を作成します
  • 配列の引き算は、元の要素から引く配列の要素を取り除いた新しい配列を作成します。
# 配列の足し算
a1 = [1, 2, 3]
a2 = [4, 5]
a1 + a2 #=> [1, 2, 3, 4, 5]

# 配列b1にしかない要素を取得する(引き算で)
b1 = [1, 2, 3]
b2 = [1, 3, 5]
b1 - b2 #=> [2]

配列の全要素に繰り返し処理を行う

drinks
=> ["コーヒー", "カフェラテ", "紅茶", "カルピス", "オレンジジュース"]
# 配列の要素に繰り返し処理
# 配列オブジェクトdrinksの全要素を表示する
irb(main):033:0> drinks.each do |drink|
irb(main):034:1* puts drink
irb(main):035:1> end
コーヒー
カフェラテ
紅茶
カルピス
オレンジジュース
=> ["コーヒー", "カフェラテ", "紅茶", "カルピス", "オレンジジュース"]
  • eachメソッドは配列の全要素を繰り返し処理するメソッド
  • 配列の各要素はインデックス番号0番から順にdrinkという変数に格納され、puts処理が行われます。それが要素数分、繰り返される。
  • 配列の要素数がいくつであっても、eachメソッドを使えば全要素を繰り返し処理を実行できる(要素数によってプログラムを書き換える必要がない)
  • breakを使って、繰り返し処理を途中で終わらせることができる。ある条件に達すると、繰り返しを終了するなどして使用する。
  • nextは、ある特定の回の時に繰り返し処理を中断して、次の繰り返しに処理を移す
  • 繰り返す範囲を指定する場合は、Rangeオブジェクトを指定します。
# 繰り返し処理を途中で終わらせる
[1, 2, 3].each do |x|
    break if x == 2 # xの値が2である時、繰り返し処理を終わらせる(処理終了)
    puts x
end
#=> 1

# xが2の時だけ繰り返し処理を中断する
[1, 2, 3].each do |x|
    next if x == 2 # xの値が2である時、繰り返し処理を終わらせる(処理終了)
    puts x
end
#=> 1
#=> 3

# 3~5の数値を繰り返し処理する
(3..5).each do |x|
    puts x
end
#=> 3
#=> 4
#=> 5

参考

ゼロからわかるRuby超入門 chapter4

2022/02/19(土) ゼロからわかるRuby超入門Chapter3

比較メソッド(<>または、<=>=)

比較メソッドは、<>または、<=>=のことです。 具体的に言うと、左右の数値や文字列の大小を比較して、条件を満たす場合にtrueを、満たさない場合にfalseを戻り値として返すメソッドです。下記の例からも分かるように大小を比較するメソッドですが、比較結果は数値ではなく、trueとfalseでのみ出力される部分に注意が必要です。👈🏻

irb(main):002:0> 1 < 2
=> true #=> 実行結果としてtrueオブジェクトで置き換えられる
irb(main):003:0> 1 > 2
=> false

また、変数に入った数値を比較することも出来ます。この比較メソッドは、if文の条件式などで使われます。

irb(main):004:0> wallet = 500
=> 500
irb(main):005:0> wallet >= 500
=> true
irb(main):006:0> wallet = 300
=> 300
irb(main):007:0> wallet >= 500
=> false

文字列の文字数を比較することも出来ます。

irb(main):008:0> 'ruby' >= 'put'
=> true
irb(main):009:0> 'ruby'.length >= 'put'.length
=> true
irb(main):010:0> 'ruby' < 'put'
=> false

等しい、等しくないを判断できる比較メソッド(==!=)

比較メソッドには、<>または、<=>=の他にも==!=があります。==は、等しいかどうかを判断して等しい時にtrueを返す比較メソッドです。対して、!=は、等しくない時にtrueを返す比較メソッドです。つまり、==を使った時にfalseになる条件の時!=を代わりに使用するとtrueが返るということです。使いたい条件によって、使い分けましょう。

== !=
等しい時 true false
等しくない時 false true

📌 <>または、<=>=の比較メソッドは、特に大小を比較します。そのため、文字列の文字数の大小を比較できます。 ==!=の比較メソッドは、数値オブジェクトだけでなく文字列オブジェクトの等しい、等しくないを比較できます。つまり、文字列そのものが等しいかを比較できるのです。

# 文字列同士が等しいのかを調べることも可能。
irb(main):011:0> 'ruby' == 'ruby'
=> true
irb(main):012:0> 'ruby' != 'ruby'
=> false
irb(main):013:0> 'ruby' != 'ruby  '
=> true
# 空白を入れると同じ文字列として見なされない。
irb(main):014:0> 'ruby' == 'ruby   '
=> false
# 空白を入れると同じ文字数の文字列として見なされない。
irb(main):016:0> 'ruby'.length == 'ruby   '.length
=> false
# 文字数は同じでも異なる文字列は、falseと判断できる
irb(main):017:0> 'ruby' == 'konn'
=> false

末尾に?が付くメソッド

末尾にが付くメソッドは、trueかfalseの真偽値を返します。 ?を含めてのメソッド名なので、?を省略すると、エラーとなってしまいます。

Rubyで使われる記号の意味(正規表現の複雑な記号は除く)

メソッド 意味
include? 含むかどうか(部分一致)。配列であれば、等しい要素を持つ時に、文字列であれば、文字列中に部分文字列が含まれていればtrueを返す。
empty? 入れ物が空かどうか(String, Array, Hash, Set)。文字列が空 (つまり長さ 0) の時、配列であれば、自身の要素の数が 0 の時にtrueを返す。
nil? nilかどうか
  • nil = 「何も存在しない」という意味。ここで間違えやすいのは、Rubyでは、「数字の0」や「空集合」や「false」などをnilとして扱っていないことです。

if文を使った条件式

  • if文は条件を満たした(true)時に処理を実行し、条件を満たさない(falseとnil)時は処理を実行しません 【Ruby】 論理演算子(!, &&, ||, not, and, or)をまるごと学ぼう!
  • インデント(スペース2つ分)を用いるとプログラムを読みやすく、見やすく書くことができます
  • unlessifと反対の動きをします。条件が満たされない(false)の時に処理し、条件を満たす(true)の時は処理を実行しません。
  • if文の条件式に数値オブジェクト文字列オブジェクトを指定した場合は、条件式が常にtrueの状態になります。

後置if(if修飾子)

  • ifを使って、複数行で書いたプログラムを1行で簡潔に書くことができるものです。
  • 条件を満たした時の処理が1行で収まるときに使います。他にも、以下のような時に使います。
# 後置ifの使い方
条件式がtrueの場合に実行したい処理 if 条件式

# 後置unlessの使い方
条件式がfalseの場合に実行したい処理 unless 条件式

条件式で条件を満たさない時にも処理を実行する(処理を分岐)

  • 条件を満たさない時の処理を記述するのにelse節を使う
if 条件
    # 条件を満たした時の処理
else
    # 条件を満たさない時の処理
end
  • ifで分岐する処理を3つ以上にする場合、elsifとelseの両方を用います。
  • elsifはif以外の別の条件を書くことができます。
if 条件①
    # 条件①を満たした時の処理
elsif 条件②
    # 条件①を満たさないけれど、条件②を満たした時の処理
else
    # 条件①②の両方とも満たさない時の処理
end

論理演算子を用いて複数の条件を実現する

論理演算子とは?

論理演算子とは、「真」と「偽」の2つの値だけで行う計算(論理演算)を表す記号のことです。Rubyの論理演算子には、「!, &&, ||, not, and, or」が用意されています。 論理演算子を使用すると、複数の条件式を組み合わせて判定することができます。

  • A || Bは、左辺(A)を評価して真ならその値を返し、偽なら右辺(B)の値を返す

  • A && Bは、左辺(A)を評価して偽ならその値を返し、真なら右辺(B)の値を返す

【Ruby】 論理演算子(!, &&, ||, not, and, or)をまるごと学ぼう!

条件によって、複数の選択肢から1つを選んで分岐する方法(case)

order = 'パフェ'
# 条件の候補に合致する処理を実行させる(case)
case order
when 'カフェラテ' # 変数orderの値がカフェラテの時(候補①)
    puts 'カフェラテ'
when 'モカ' # 変数orderの値がモカの時(候補②)
    puts 'モカ'
else # どの選択肢(カフェラテでもモカ)でもない時(候補①②以外)
    puts '取り扱っていません'
end
    

決まった回数だけ繰り返す(timesメソッド)

# 3回繰り返す処理(繰り返す処理が複数行ある時)
3.times do
    puts 'モカ'
    puts 'ください'
end
    
# 3回繰り返す処理(繰り返す処理が1行のみの時)
# ブロックをdo ~ endではなく、{}で記述できます
3.times { puts 'カフェラテください'}

条件を満たしている間ずっと繰り返す(whileメソッド)

biscuit = 0
# ビスケットが5つになるまでずっと繰り返す(繰り返しの条件)
while biscuit < 5
    biscuit += 1 # 変数biscuitの値に1を加えて再度代入する
    puts  "ポケット叩くとビスケットが#{biscuit}" # 式展開を使っているので、""を使う
end

#=>ポケット叩くとビスケットが1つ
#=>ポケット叩くとビスケットが2つ
#=>ポケット叩くとビスケットが3つ
#=>ポケット叩くとビスケットが4つ
#=>ポケット叩くとビスケットが5つ

paiza.io

参考

ゼロからわかるRuby超入門 chapter3

Bootstrap

Bootstrapとは?

Bootstrapとは、レスポンシブなモバイルファーストなウェブサイトを構築するためのオープンソースCSSフレームワークです。

「ボタンにはこのCSSが良いだろう」「フォームはこれが良いだろう」といったCSS/JSを集めて、一つのパッケージとして提供してくれています。

Bootstrap

Bootstrapとレスポンシブデザイン

Bootstrapはブレークポイントグリッドシステムによって画面サイズに合わせてレイアウトを変更し、コンテンツを配置することでレスポンシブデザインに対応しています。

ブレークポイント

ブレークポイントとは、「レイアウトをユーザーの使用端末や閲覧画面のサイズに合わせてレスポンシブに変化させるための基準」のことです。 f:id:Trial_and_error:20211019132931p:plain

このように、「何をいくつ分のブロック(グリッド)で表示するか」をコントロールすることで、デザイン性・自由度共に高いコンテンツを作成することができるのです。そしてbootstrapでは、グリッドシステムを上手く使うことで簡単にレスポンシブデザインを実現することができます。

ヘッダーでは、Navbar (ナビゲーションバー)を使用することで、簡単にレスポンシブデザインを適用できます。また、body部分では.containerを用いることで、レスポンシブデザインを適用できます。

.container は段階的コンテナを生成します。ウィンドウの横幅に応じて段階的に横幅が変動します。xs(~575px)の時は 100%、sm(576~767px)の時は 540px、md(768~991px)の時は 720px、lg(992~1199px)の時は 960px、xl(1200px~)の時は 1140px 固定となります。コンテナはセンタリングされます。

Navbar (ナビゲーションバー)

とほほのBootstrap 4入門 - コンテナ - とほほのWWW入門

bootstrap導入後の例

<button class='btn btn-primary'>テスト</button> 

と記述した場合、bootstrapを導入していると

f:id:Trial_and_error:20211019133013p:plain
このようにある程度見栄えが整ったボタンが出来上がるのです。この「class='btn btn-primary'」の部分がbootstrapに認識され、それに適合したレイアウトを適応させてくれています。

bootstrapはその他にも、画面を12分割して配置を指定できるグリッドシステムや、レスポンシブデザインなど始めとする、多くの便利な機能を提供しています。

Bootstrapのver4系をインストールする

↑WebpackerがインストールされてないRails5以前のアプリを対象にしたBootstrap4を導入する手順

Railsアプリで Bootstrap 4 を利用する - Qiita

GitHub - twbs/bootstrap-rubygem: Bootstrap 4 rubygem for Rails / Sprockets / Hanami / etc

導入手順

Gemfile


Gemfileでbootstrapを指定してインストールする。

Bootstrapは※jQueryに依存するため、(デフォルトでjQueryがインストールされない)Rails5.1以上ではjquery-railsもGemfileに追記する。

gem 'bootstrap', '~> 4.1.1'
gem 'jquery-rails'
# Gemfileに追記したgemをbundleでインストール
# bundleでインストールすることにより、gemのバージョン管理がしやすくなる
$ bundle install

※注意点

sprockets-railsがv2.3.2.以上である必要がある。

# sprockets-railsのバージョン確認方法
$ bundle show |fgrep sprockets-rails
  * sprockets-rails (3.2.1)

jQuery


Rails5.1以降のバージョンではRailsインストール時にjQueryが自動でインストールされなくなりました。他のライブラリの導入に影響が出る弊害を無くすためです。

しかし、別途jquery-railsgemをインストールすることで、jQueryを使用することが出来ます。

BootstrapJavaScriptはオプションでjQueryを使用できます。Rails 5.1以降を使用している場合は、jquery-railsgemをGemfileに追加できます。

# gemfileに追加することで、jQueryを使用できる
gem 'jquery-rails'
# bundleコマンドでインストール
$ bundle install

さらに、マニフェストファイル上で、jQueryrequireすることによりjQueryを使用できるようになります。

//= require jquery3

application.scss(マニフェストファイル)


アセットパイプラインを介してファイルを利用できるように設定します。Railsアプリの作成時に生成されるapplication.cssapplication.scssにリネームするなどして、.scss(Sass構文の場合は.sass)ファイルを用意する。

# .cssファイルを.scssファイルにリネームする(拡張子の変更)
$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss

app/assets/stylesheets/application.scss(どのファイルからも読み込まれるstylesheetsファイル)でbootstrapファイルが読み込まれるようにimportさせます。

つまり、わざわざCSSの記述を個別に書くのではなく、bootstrapをimportして全てのファイルで読み込まれるapplication.scssファイルで読み込むことで、全てのページでbootstrapが適応されることになります。

//カスタムブートストラップ変数は、ブートストラップの前に設定またはインポートする必要があります。
// Custom bootstrap variables must be set or imported *before* bootstrap.
@import  "bootstrap" ;

※注意点

  • Sassファイルでは*= require*= require_treeを削除する
  • Sassファイルではインポートに@importを利用する
  • Sassファイルで*= requireを利用すると他のスタイルシートではBootstrapのmixinや変数を利用できなくなる

application.js(マニフェストファイル)


Bootstrapと依存関係をapplication.jsに追記します。

# どのアセットファイルを読み込むかを記述する
//= require jquery3
//= require popper
//= require bootstrap-sprockets
  • Bootstrapのtooltipsやpopoverは配置をpopper.jsに依存しているので、importする必要があります。
  • bootstrapの依存gemにpopper_jsが指定されているため新たにインストールは不要です。(自動でインストール済み) Bootstrap gemはpopper_jsに依存してます。
  • コンパイルを高速化したい場合はbootstrap-sprocketsの代わりにbootstrapを指定します。

  • popover(ポップオーバー)とは? 対象の要素をクリックしたときに小さな領域を表示するJavascriptです。対象の要素をもう一度クリックすると表示が消えます。 f:id:Trial_and_error:20211019133155p:plain

  • tooltips(ツールチップス)とは? ツールチップは、ユーザーがオブジェクトの上にカーソルを置くと自動的に表示され、クリックしたりカーソルを移動したり、ある程度時間が経過したら画面から消えます。 補足的な説明など、さらに情報を加えたほうがわかりやすいときに使われます。 f:id:Trial_and_error:20211019133214p:plain

参照

GitHub - twbs/bootstrap-rubygem: Bootstrap 4 rubygem for Rails / Sprockets / Hanami / etc

Railsアプリで Bootstrap 4 を利用する - Qiita

Bootstrap

Bootstrapのレスポンシブとは何か?使い方の流れもあわせて紹介 | #site_titleBootstrapのレスポンシブとは何か?使い方の流れもあわせて紹介

とほほのBootstrap 4入門 - コンテナ - とほほのWWW入門

ナビゲーションバーの実装

【入門】レスポンシブWebデザインとは?概要と作り方を丁寧解説 | カゴヤのサーバー研究室

font-awesomeとは?Railsアプリケーションで、font-awesome-sassというgemライブラリをアプリケーションにインストールする

font-awesomeとは?

Font Awesomeとは、Viewファイルで特定の文字列を指定して、ライブラリで用意されているアイコン(webアイコンフォト)を表示することを可能にしたツールです。

Font Awesome

例えば、

コード内に、

<i class='fa fa-check'></i>

という文字(=コード)を記述することで、「✔️」というアイコンを表示させることができるようになるのです。

Webアイコンフォントとは?

ウェブページ上で文字と同じように表示できるアイコンのことで、Font Awesomeで用意されています。通常のアイコンは画像なので拡大するとぼやけてしまいますが、画像でアイコンを貼るのと違い、拡大してもぼやけませんし、cssを使って色もサイズも簡単に変えることができます。

font-awesome-sassとは?

font-awesome-sassとは、無料で使えるwebフォントアイコンであるFont Awesomeを簡単にrailsで使えることができるようになるgemです。

font-awesomeの導入からwebアイコンを表示させるまで

手順

  1. font-awesome-sassgemライブラリをインストール

  2. Font Awesomeを使って、Webアイコンの表示させる

手順1. font-awesome-sassgemライブラリをインストール

① Gemfileに追記する

gem 'font-awesome-sass', '~> 5.12.0'

gem 'font-awesome-rails' では、font-awesome5系に対応していないので gem 'font-awesome-sass'を使用する必要があります。

$ bundle insall

マニフェストファイルでfont-awesomeを読み込ませる(import)

font-awesomeマニフェストファイルであるapp/assets/stylesheets/application.scssに読みこませる。

@import "font-awesome-sprockets";
@import "font-awesome";
  • font-awesome-sprocketsファイルには、フォントファイルへのパスを見つける機能が入っています。ですので、importする必要があります。つまり、これをimportしてしまえば、自動でフォントファイルを探してくれるので、一つ一つフォントファイルをimportする必要がなくなり便利です。
  • scssファイルには*= requireなどのSprocketsディレクティブの記載が残っていると、@importで定義した内容がうまく読み込めずbootstrapが反映されないので注意してください。

アセットパイプライン - Railsガイド

//= requireと@importの違い

どちらもマニフェストファイルで、アセットファイルを読み込み結合するために記述します。

//= とは?

JSのマニュフェストファイルでは//=で始まる行をアセットパイプラインに指示を与えるための特別な行として扱っています。

//= requireとは?

指定したJSファイルの内容を記述した位置に取り込みます。(拡張子は省略できます。)

//=require_treeとは?

JSファイルで指定されたディレクトリ配下の前ファイルの内容を結合し、記述した位置に取り込みます。「.」と記述すると指定されたディレクトリ配下のの全ファイルの内容を結合します。

※この記述は一番下に記述することが大切です。

ディレクティブは記載した順に実行されますが、require_treeでインクルードされるファイルの読み込み順序は指定できません。従って、特定の読み込み順に依存しないようにする必要があります。もしどうしても特定のJavaScriptファイルを他のJavaScriptファイルよりも結合順を先にしたい場合、そのファイルへのrequireディレクティブをマニフェストの最初に置きます。requireおよび類似のディレクティブは、出力時に同じファイルを2回以上インクルードしないようになっています。[Railsガイドより]

アセットパイプライン - Railsガイド

例えば、以下の場合

//= require jquery3
//= require popper
//= require bootstrap-sprockets

//= require jquery3よりも前に//= require_tree .を記載した場合、//= require_tree .で読み込んだファイルでjqueryのコードを参照しているとjquery3が読み込まれる前に評価されるためメソッドが未定義となりエラーになるケースが発生します。 そのため、//= require_tree .一番下の行に記載している必要があります。

@importとは?

SCSSのマニフェストファイルで読み込むアセットファイルを指定する場合に使用します。

//= requireと@importまとめ

  • //= requireJSマニフェストファイルで使用
  • @importSCSSマニフェストファイルで使用

手順2. Font Awesomeを使って、Webアイコンの表示させる

Font Awesomeの使い方

Font Awesomeのアイコンはビューファイルで下記のように記述すると表示させることができます。

<i class="接頭辞名 fa-アイコン名"></i>

接頭辞名はversion5から5種類になり、アイコンごとに異なります。

① 使いたいアイコンフォントを探す

f:id:Trial_and_error:20211018113626p:plain

アイコン一覧から使いたいアイコンを選びます。アイコンが決まったら、使いたいアイコンをクリックします。

② アイコンフォントのコードをコピー

f:id:Trial_and_error:20211018113712p:plain アイコンの詳細ページが開きます。下にスクロールして、というコードをまるっとコピーします。

③ アイコンを表示させたい位置に貼付け

コピーしたコードをHTML内のアイコンを表示させたい位置に貼り付けます。これだけで以下のようにアイコンフォントを使うことができます。

<p><i class="fab fa-twitter"></i>ここにアイコンを表示</p>

これで、ツイッターのアイコンが表示されるようになります。

その他の操作

アイコンの大きさを変える

<i class="fas fa-tasks fa-lg"></i>

FontAwesomeでは、アイコンの大きさを簡単に変えることができます。以下のコードを i class="〜"内に書くことでサイズを大きくすることができます。

  • fa-lg (1.333…倍)
  • fa-2x (2倍)
  • fa-3x (3倍)
  • fa-4x (4倍)
  • fa-5x (5倍)
<p><i class="fas fa-bomb fa-lg"></i></p>
<p><i class="fas fa-bomb fa-2x"></i></p>
<p><i class="fas fa-bomb fa-3x"></i></p>
<p><i class="fas fa-bomb fa-4x"></i></p>
<p><i class="fas fa-bomb fa-5x"></i></p>

ヘルパーメソッドicon

アイコンの表示の記述を簡単に書くことができるヘルパーメソッドです。

icon('接頭辞名', 'アイコン名')

# 例
<%= icon('far', 'clock') %>

上のコードは下記のコードにコンパイルされます。

<i class="far fa-clock"></i>

詳しい使い方は、以下参照↓

saruwakakun.com pikawaka.com

参考

アセットパイプライン - Railsガイド

font-awesome-sassの使い方を徹底解説!

GitHub - FortAwesome/font-awesome-sass: Font-Awesome Sass gem for use in Ruby/Rails projects

Bootstrapとfont-awesomeをRailsにインストールするやり方 GitHubを参考に - Qiita

【保存版】Font Awesomeの使い方:Webアイコンフォントを使おう

Ruby on Rails のgemとは?

gemとは?

gemとは、GitHubで公開されている、Ruby用のライブラリを指します。

Railsの開発では、利用したいgemライブラリをGemfileという定義ファイルに記載して、$bundle installコマンドでgemfileに記載したgemライブラリのソースコードを取得(インストール)します。

Gemfileに記載したライブラリ(gemライブラリ)をbundlerと言うパッケージ管理ツールでインストールすることで、様々なライブラリのバージョンや依存関係を管理して、扱いやすくしてくれます。

もしこのbundlerが無ければ、都度gem install ライブラリ名でバージョンを指定して、ライブラリ同士のエラーが出ないようにライブラリのバージョンを手動で管理しなければなりません。

Gemをインストールする際に、Gemのバージョンを確認する方法

RubyGems.org | your community gem host

↑公式のGemを検索するrubygems