2020-05-06

Ruby:macローカル開発環境構築[Homebrew & rbenv編]

Ruby 環境構築

今回は、「Homebrew & rbenv」を使ったRubyの環境構築を行いました。

環境構築って本当に面倒ですよね。。。
この記事が、まだ見ぬエンジニアの助けになれば嬉しいです！

ではいきましょう！

◆環境
MBP16
OS :macOS Catalina(10.15.4)
メモリ :16GB
SSD :512GB
シェル :zsh

◆参考サイト
https://prog-8.com/docs/ruby-env

目標

1.Homebrewのインストール
2.rbenvのインストール
3.Rubyのバージョン変更

Rubyのバージョンをチェックしてみよう

macにはデフォルトでRubyがインストールされています。
以下のコマンドでチェックしてみましょう。

ruby -v
ruby 2.6.3xxxx

現在、rubyはインストール済み、バージョンは2.6.3です！

Rubyを実行してみよう

デスクトップへputs "hello world"と記載したhello.rbを作成します。
「ruby ファイル名」でコマンド実行します。

ruby hello.rb 
hello world

Homebrewをインストールしよう

まずは、macにHomebrewがインストールされているかチェックしてみましょう。

brew -v
zsh: command not found: brew

そうなんです、デフォルトでは入ってない為、以下を実行してあげます。

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

実行内容

Press RETURN to continue or any other key to abort  # <= 途中でEnterキーを押します。
Password:                                           # <= PC端末ログイン時のパスワードを入力します。
Downloading Command Line Tools for Xcode            # <= Xcodeが必要な為、インストールします。
*
*
==> Next steps:
- Run `brew help` to get started
- Further documentation: 
    https://docs.brew.sh                            # <= この文言でインストール完了となりました。

再度、Homebrewがインストールされているかチェックしてみましょう。

brew -v
Homebrew 2.2.15

無事、インストール完了しました！

rbenvをインストールしよう

こちらも、デフォルトでは端末にインストールされているかチェックしてみましょう。

rbenv -v
zsh: command not found: rbenv

残念ながら、こちらもデフォルトではインストールいない為、以下でインストールを実施していきます。

brew install rbenv ruby-build

==> ruby-build
ruby-build installs a non-Homebrew OpenSSL for each Ruby version installed and these are never upgraded.

To link Rubies to Homebrew s OpenSSL 1.1 (which is upgraded) add the following
to your ~/.zshrc:
  export RUBY_CONFIGURE_OPTS="--with-openssl-dir=$(brew --prefix openssl@1.1)"

Note: this may interfere with building old versions of Ruby (e.g <2.4) that use
OpenSSL <1.1.                                   # <= この文言でインストール完了となりました。

rbenv -v 
rbenv 1.1.2

PATHを設定しよう。

以下のコマンドを実行して、シェルを確認します。

echo $SHELL

/bin/zshの場合は、以下を実行してください。

echo 'eval "$(rbenv init -)"' >>  ~/.zshrc
source ~/.zshrc

ちなみに！
/bin/bashの場合、以下を実行します。

echo 'eval "$(rbenv init -)"' >> ~/.bash_profile
source ~/.bash_profile

※こちらを実行しても、画面変化はありません。これで設定は終了です。

Rubyのインストールしよう

まずは、バージョン一覧を取得します。
現時点では、2.7.1が最新ですね。ここでは2.6.5をインストールします。

rbenv install --list

# バージョン一覧が表示されます。
# 〜中略〜
2.6.5
2.6.6
2.7.0-dev
2.7.0-preview1
2.7.0-preview2
2.7.0-preview3
2.7.0-rc1
2.7.0-rc2
2.7.0
2.7.1
2.8.0-dev
# 〜中略〜

以下のコマンドでインストールします。

rbenv install 2.6.5

Installed ruby-2.6.5 to /Users/ユーザー名/.rbenv/versions/2.6.5
# <= この文言が出たら、インストール完了です！

バージョンチェックしてみましょう。

rbenv versions    
  system
* 2.6.5 (set by /Users/ユーザー名/.rbenv/version)　# <= インストール完了です！

インストールが完了したら、以下のコマンドでバージョンを切り替えます。

rbenv global 2.6.5

Rubyのバージョン変更がされたかチェックしてみましょう。

ruby -v
ruby 2.6.3xxxx

え？！変わってない。。。
なぜ？！手順間違えてないのに、、、ネット記事をググること30分。
ここで、私の勘がターミナルを再起動せよ。と言っているような気が。。。実際、再起動してみて、再チェック！

ruby -v       
ruby 2.6.5xxxx

無事、変更されました。。。

ようやく、環境構築が完了しました。
次は、Railsだ。。。チャレンジエンジニアの名の下、頑張ります！

最後まで読んでいただきありがとうございました。

2020-05-06

Rubyの式展開（変数展開）とは

Ruby

本日は、式展開について書いていきます。

式展開は、
「　" "　」で囲まれた文字列に対して、「　#{　}　」で式や変数を埋め込むことが可能となります。

さっそく、確認してみましょう。

name = "酒井"

#ダブルクォーテーション
puts "私の名前は、#{name}です"
>私の名前は、酒井です

#シングルクォーテーション
puts '私の名前は、#{name}です'
>私の名前は、#{name}です

また、式の中で、「#」を利用することも可能です。
ただし！その場合には、以下のような規約があります。
確認してみましょう。

name = "酒井"

#一行で記載した場合
puts "#{ name # です。  }" 
>syntax error

#改行で記載した場合
puts "#{ name # 名前です。
}" 
>酒井

コメントアウト用「＃」は、改行をしないと正しく読み込まれない、ことが分かりました！

最後まで読んでいただき、ありがとうございました。

2020-05-05

シングルクォーテーションとダブルクォーテーションの違い#Ruby

Ruby

本日からRubyについて、勉強していきます！
今回は、素朴な疑問「クォーテーションの違い」について書きます。

初心者としては、違いがあるのかな？と思いませんか。
私も同じでした、どんな違いがあるのか。コードを実行しながらいきましょう！

#ダブルクォーテーション
puts "Hello, run.rb!"
>Hello, run.rb!

#シングルクォーテーション
puts 'Hello, run.rb!'
>Hello, run.rb!

どちらも意図した文字が出力されました。

今度は、改行を表す「\n」を含んでみます。

#ダブルクォーテーション
puts "Hello,world!\nHello, run.rb!"
>Hello,world!
Hello, run.rb!

#シングルクォーテーション
puts 'hello,world!\nHello, run.rb!'
>Hello world!\nHello, run.rb!

なんと！
シングルクォーテーションでは、「\n」が文字列として認識されて出力されました。

そうなんです。
「\n」などの特殊文字を扱う場合は、
ダブルクォーテーションで囲んであげないと正しく認識されないのです。

また式展開の場合も同様で、
ダブルクォーテーションではなと、意図した結果は得られないことが分かりました。

name = "酒井"

#ダブルクォーテーション
puts "私の名前は、#{name}です"
>私の名前は、酒井です

#シングルクォーテーション
puts '私の名前は、#{name}です'
>私の名前は、#{name}です

最後まで読んでいただき、ありがとうございました。

2020-05-04

css「hober」「translateY」を活用したメニュー表示の実装

CSS

本日は、cssの「hober」「translateY()」を用いて、
ヘッダーへのアクションを追加してみました。

個人的にクリックアクションだと、１工程挟むので、
カーソル合わせるだけで簡単に参照できた方が使いやすいな、と思ったからです。

「translateY()」は、要素をY軸方向（下方向）へ移動させるcssとなります！

それでは早速実装してみましょう。

f:id:challenger_soft:20200504153650p:plain

f:id:challenger_soft:20200504153448p:plain

今回も無事実装できました！
ECサイトなどで、タグ管理しているのをみて、
テストしてみたく実験してみました。

ユーザー目線での作成ってなかなか利用して貰わないと意見はいただけないですが、
最低限あると便利だな、と言う機能は実装できるように力をつけていきたいです！

最後まで読んでいただきありがとうございました！

2020-05-03

ブラウザ（chrome）の余白を消す方法

HTML CSS

本日、個人的に学んだことをアウトプットするべく、
まずは、ヘッダー部分を作成しました！

<header>
        <div class="header-logo">xxxx</div>
        <div class="header-list">
            <ul>
                <li>新規登録</li>
                <li>ログイン</li>
            </ul>
        </div>
</header>

が！その途中で、気になる余白がいるんです。
私は、cssで指定していないのに。。。
f:id:challenger_soft:20200503215252p:plain

そこで調べてみると、
なんと！chromeにはデフォルトで、[margin:8px]を付与する仕様になっていました。

body {
    display: block;
    margin: 8px;
}

な、なぜ？！
こちらは、以下の指定をcssへ追加することで消えました！

* {
    margin: 0px;
    padding: 0px;
}

f:id:challenger_soft:20200503221142p:plain

何事とも実践を通して気づくことは本当に多いな、と感じました。

最後まで読んでいただきありがとうございました。

2020-05-02

HTML+CSS+Javascript入門！3回目

HTML Javascript CSS

本日は、javascriptで要素追加を実施しました！

私の中では結構感動しまして、
このような形でアプリケーションの実行がされているのかと納得しました。

簡単な実装、かつ、フロント部分しか見てないですが。
ここにバックエンド処理が加わると色々世界が広がるのか、とワクワクしました。

要素の追加については、「DOM操作」が必要になります。
ざっと以下が概要となります。

DOM(Document Object Model)とは？
htmlのスタイル変更やイベント設定が可能とする「API」です。

API(Application Programming Interface)とは？
ソフトウェアの内容を、他のソフトウェアへ利用することが可能にします。

それではいきましょう！

button.addEventListener("click", function () {
    const list = document.createElement("li");
    list.innerText = "TODO";
    lists.appendChild(list);
});

[addEventListener]でクリック処理を指定して、liの作成を実行しています。
f:id:challenger_soft:20200502231032p:plain
ボタンをクリックすると…

無事、新しいリストが追加されました。

また、今回list.innerText = "TODO";としたのですが、
これを…

フォームを作成
フォームへテキスト入力
ボタンを押す
テキスト入力文字をリストへ追加する

このようにすることで、簡易TODOリストが作れるのでは？と想定しています。
私はスクールへ通ったりはしていない独学派ですが、
上記で作れそうな気がしています！（指摘や実現不可だよ！などご意見いただけると嬉しいです）

最後まで読んでいただきまして、ありがとうございました！

2020-05-01

HTML+CSS+Javascript入門！2回目

CSS HTML Javascript

本日は、HTML+CSS+Javascript入門！2回目となります！

今回は、javascriptでクリックイベントと、
cssのアニメーションでコードを書いてみました。

動画の方が分かりやすいのですが、、、画像でご勘弁ください！

それでは早速いきましょう！

const　＝　定数となります。
定数の値は、再代入NG、再宣言NGと言うことで、
内容変更されないのは、保守面でもこちらがいいですね。

<script>
    const box = document.getElementById('btn2');

    box.addEventListener( 'click',() => {
        box.classList.add('circle');
    });
</script>

HTML内に定義した「id = 'btn2'」を指定して、
クリックするとイベントが発生します。

ちなみに、「'click',() => {};」はアロー関数といい、現場利用も多いそうなので取り入れてみました。
cssで180°回転する処理をつけてみました！
実際の現場ではこう言う使い方は、あまりしないのかもしれませんが。
また、カーソルを合わせると色も変わります。

.circle {
    transform: rotate(180deg);
}

.btn1:hover {
  background: #ccc;
}

f:id:challenger_soft:20200501214516p:plain

無事、実装できました！
本当に一歩ずつですが、新しい事へのチャレンジはワクワクします。

今回も最後まで読んでいただきありがとうございます！