KeiIchiのブログ

プログラミング学習で、日々学んだことを書いていきます!

mapメソッドとは

mapメソッドとは

配列の要素の数だけブロック内の処理を繰り返し、結果として作成された配列を返すものです。

配列.map { |変数|
 # 実行したい処理

例えば

array = [1, 2, 3]
array_map = array.map { |x| x * 2 }
puts array_map 
#実行結果
[2, 4, 6]

となります。

ハッシュにmapメソッドを使用した際には、返り値は配列になるということを理解しておく必要がある。

今回は以上になります。

参考にさせていただいた記事

Rubyのmap, map!メソッドの使い方

rubyで文字抽出の際に使用できるsliceメソッド

sliceメソッドとは 文字列、配列の中から任意の範囲を抽出することができます。

基本的な書き方は以下のようなもの

string.slice(index)
string.slice(index, length)

第一引数で、指定した値の位置にある文字列の抽出ができます。 第二引数を指定すると、開始位置からの長さを決めることができます。

string = "こんにちは"
puts string.slice(2)
puts string.slice(2, 2)

実行結果は以下のようになります

"に”
”にち”

今回は以上になります。 下記の記事を参考にさせていただきました。

Rubyで指定した範囲の文字列を抽出・削除する:slice, slice!

String can’t be coerced into Integer

変数同士の計算を行っていた際に、String can’t be coerced into Integerというエラー文を見つけ

それについて調べたので、書いていきます。

結論として、stringクラスとintegerクラスの四則演算の挙動が異なるため生じているエラーでした。

例えば
text = "はい”
num = 3

puts text * num
#出力結果
はいはいはい

となりますが、

text = "はい"
num = 3

puts num * text
#出力結果
String can’t be coerced into Integer

となり、型が違うからというエラーとなります。 rubyは組み込み言語であり、クラスごとに使用できるメソッドが異なることを理解しておかなければならないなと感じました。

下記の記事を参考にさせていただきました。 ありがとうございます。

参考記事

文字列の繰り返しで良く出る String can’t be coerced into Integer

rubyのchompメソッドについて

ユーザーからの出力を得るために、getsメソッドを利用していたのですが、その時に取得した値をputsを用いて 出力すると、末尾が改行されており、その解決策を探していると chompメソッドを記述していなかったことが原因でした。 以前は、あまり理解しないまま、おまじないのようにgets.chompと記述していたので、chompについて調べました。

はじめに自分が書いたプログラム

text = gets
puts "#{text}を入力しました"
#出力結果
text
を入力しました

textには入力された値と改行する指示が含まれています。よって出力結果が上記のようになります。

#出力結果
textを入力しました

と表示させたければ、gets.chompを使用します。 chompメソッドは、文字列の末尾から改行を取り除いた値を返します。

text = gets.chomp
puts"#{text}を入力しました"
#出力結果
textを入力しました

とても初歩的なことでしたが今回は、以上になります。

参考記事

Rubyのchompメソッドで文字列末尾の改行文字を削除する方法【初心者向け】

レスポンシブデザインを適用させるため用いるviewport

いつも、魔法の言葉のように以下の記述を書いて、レスポンシブデザインを適用させていたので 少し深ぼって調べてみました。

<meta name="viewport" content="width=device-width,initial-scale=1.0">

viewportは表示領域のことで、webページの横幅がviewportとなります。このビューポートを指定し忘れて、私のwebページをスマホで見た際に、文字などがとても小さく表示されてしまいました。

width=device-viewport とは、閲覧している画面サイズに合わせてサイズ変更するという意味になります。

initial-scaleとは、そのページが表示されてたときの倍率の設定です。指定しない場合は、デフォルトでは1に設定されます。

ほとんど下記の記事内容を、復唱させていただいた形になりますが、大変分かりやすかったです。

参考文献

viewportを理解して正しいレスポンシブデザインを設定しよう

diagrams.netを用いて作成した、環境図のリンクを作成する方法

現在ポートフォリオの、環境図をdiagrams.netを用いて作成し、その環境図をどのようにして githubのREADME.mdに反映させようか調べたので、書いていきます。

私が採用した方法は、diagrams.netで、そのファイルのリンクを作成して、そのリンク先を(画質がとても綺麗でした)gyazoで撮影し、 そのマークダウン用のリンクをgithubに貼り付けることにしました。

リンクを作成する手順

  1. 左上の、Fileをクリック
  2. 下に移動していって、publishをクリック、またはホバーするとLinkという文字が出てくるので、そこをクリック
  3. createを押したらリンクができるので、次にpreviewボタンを押して、リンク先に移動します(リンク先では、backgroundの格子のようなデザインがなくなって表示されます)

とても簡単でした。

以下の記事を参考にさせていただきました。大変助かりました。

参考記事

draw.io使い方まとめ

@mixin(ミックスイン)の使い方

現在PFのレスポンシブデザインを作成しています。 その際に@mixinを使用したいと考えているので、その内容について、紹介したいと思います。記事は以下のものを参考にさせていただきました。

@mixin(ミックスイン)の基本的な使い方

再利用したいスタイルを@mixin 名前 {}の形式で定義した上で、利用したい位置で@include 名前で呼び出します。

@mixin Box-width {
  width: 100%;
}
.box1 {
 @include Box-width;
 background-color: white;
}

コンパイルされたCSS

.box1 {
 width: 100%;
 background-color: white;
}

とても便利だと思います。今回は以上になります。