【HTML】リンクを埋め込む

連続でHTMLのアウトプットをしていきます。

HTMLにリンクを埋め込む(その1)

HTMLで下記のようにリンクを埋め込むにはaタグとhrefを使う。
yskmtg’s blogはこちら

  • aタグ:「anchor(アンカー)」の略

  • href: 「hypertext reference」の略で、直訳すると「ハイパーテキストの参照」。 hrefとはa(アンカー)タグの属性の一つで、いくつかあるaタグの属性の中でも一番重要なもの!主にhrefでリンク先の場所を指定することが役割になっている。

<a href="URL">yskmtg's blog</a>

同じタブで開くのではなく、違う新しいタブでページを開きたいときは、target属性の値を使う。

target属性の値を_blankにする。

<a href="URL" target="_blank">yskmtg's blog</a>

こうすることで別のタブにリンク先を表示してくれて便利!


HTMLにリンクを埋め込む(その2)

次に同じページ内にリンクを飛ばす方法。 例えば「このサービスについて」の見出しにリンクをつけて、同ページ内の「このサービスについて」の説明場所に飛ばせたい。

  • リンクを貼る側は、herf属性と「#(パウンド記号)をつけて、その後に好きな識別子をつける」
<a href="#about">このサービスについて</a>
  • このサービスについて」の説明場所にはidを貼り付ける
<h2 id = "about">このサービスについて</h2>
<p>このサービスについての説明このサービスについての説明このサービスについての説明このサービスについての説明このサービスについての説明</p>


HTMLにリンクを埋め込む(その3)

最後に同じページ内で一番上に戻る方法。
ページの先頭に戻るには、href属性を単に#とするか#topと書いてあげるとリンクをつけられる。

<p><a href= "#top">先頭に戻る</p>

【HTML】表の表現

今日はHTMLを少し復習したのでアウトプットしていきます。 省略されているタグをつい忘れてしまう、、、

HTMLで表を作成する

下記の表をHTMLで作成するには?

出来事
2020 HTML学習開始
2021 Ruby学習開始

まず、どんなタグが必要か?

  • table: 表の全体

  • thead: 「table head」の略で見出し部分

  • tbody: 「table body」の略で本体部分

  • tr: 「table row」の略でテーブルの各業を表す

  • th: 「table header cell」の略で見出し部分の各カラム部分を表す

  • td: 「table data cell」の略で本体部分の各カラム部分を表す


実際にコードを書いていく

<h2>学習沿革</h2>

<table> # 表を作成する宣言
  <thead> # 表の見出し部分
    <tr>
      <th></th> # 見出しの各カラム
      <th>出来事</th> # 見出しの各カラム
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>2020</td> # テーブル本体の各データ
      <td>HTML学習開始</td> # テーブル本体の各データ
    </tr>
    <tr>
      <td>2021</td> # テーブル本体の各データ
      <td>Ruby学習開始</td> # テーブル本体の各データ
    </tr>
  </tbody>
</table>

省略されているタグを一眼で理解できるように学習継続していきたい!

【Rails】Railsのモデルテストとシステムテストを書いてみる(test-unit)

先日フィヨルドブートキャンプでテスト技法について学習したのでブログにまとめます。 今回のプラクティスでRailsの課題用に作成されたappにモデルテスト(単体テスト)とシステムテスト(結合テスト)を書く課題があったので学習して学んだ点を書いていきます。


まず、テストで使うtest-unitですが、これはruby標準のテスティングフレームワークで、minitestをベースにしたものです。

単体テスト

どのような単位でテストを行うかはプログラミング言語の種類や開発者、プロジェクトの方針によっても異なります。ただ、多くの場合はクラスやメソッド、関数など、言語仕様上ほかのプログラムから一つのまとまりとして扱われる最小の単位ごとに行われることが多くそれを単体テストと呼びます。

結合テスト

単体テストに対して複数のモジュールを組み合わせて正しく連結できるかどうかを調べるテストを「結合テスト」「統合テスト」「連結テスト」「インターフェーステスト」などと呼びます。システム全体を対象に行うテストは「システムテスト」というそうです。


■結論(テストを書いて思ったこと)

テスト課題をして、テストする項目をどこまでテストするかは要件や考え方にもよって人それぞれなので難しいな〜と思いました。例えば、本のappのテストで目的はDBから何らかの値を画面に表示できているかをテストするのであれば全ての項目(タイトル、内容、著者、作成日など)をテストしなくてもよかったりします。調べるポイントを見極めて、何がテストできていればOKなのかを判断するのは難しい! 私は全てをテストしようとしていました...笑 また、テストが通ったのでOKではなく、失敗することを確認するまでが1つのテストで失敗するテストを怠ってはいけないと反省しました。

■モデルテスト(単体テスト)で学んだ点

  • 不要なファイルや使っていないfixture、変数は削除する

  • Time.zone.todayDate.currentは両方今日の日付を取ってきてくれる。Railsapplication.rbファイルのタイムゾーンの設定から日付を持ってくるのでTokyo時間の設定にしているか要確認!

  • created_onとは?:作成日(date)。created_atが作成日時で、created_onは日にちだけ返すメソッド

self.from_omniauthメソッドの単体テスト
def self.from_omniauth(auth)
  find_or_create_by(provider: auth.provider, uid: auth.uid) do |user|
    user.name = auth.info.name
    user.email = auth.info.email
    user.password = Devise.friendly_token[0, 20]
  end
end
  • self.from_omniauth(auth)の引数に何が入っているのか調べると、omniauth_callbacks_controller.rbファイルのgithubメソッドに記載してあるUser.from_omniauth(request.env['omniauth.auth'])request.env['omniauth.auth']の部分が渡されている
  • request.env['omniauth.auth']というリクエストパラメータには、OmniAuthによってHashのデータ構造に似たOmniAuth::AuthHashというクラスのオブジェクトが格納されている
  • OmniAuth::AuthHashクラスのオブジェクトのテストモードをOmniAuth.config.test_mode = trueで設定する
  • モック(テストサンプル)を作るにはmock_authを使うと、結合テスト中に認証プロバイダごとの認証ハッシュなどを返すことができる

参考:[Devise How-To] OmniAuth: 結合テスト(翻訳)|TechRacho(テックラッチョ)〜エンジニアの「?」を「!」に〜|BPS株式会社

class UserTest < ActiveSupport::TestCase
  test '#self.from_omniauth' do
    OmniAuth.config.test_mode = true
    OmniAuth.config.mock_auth[:github] = OmniAuth::AuthHash.new(
      {
        provider: 'github',
        uid: '12345',
        info: {
          name: 'carol',
          email: 'carol@example.com'
        },
        credentials: {
          token: Devise.friendly_token[0, 20]
        }
      }
    )
  assert User.from_omniauth(OmniAuth.config.mock_auth[:github])
end

システムテスト(結合テスト)で学んだ点

  • 削除した項目を確認するテストはassert_no_textを使って削除した項目がないことを確認できる

  • 今日の日付がviewで表示されているかを確認するときは、assert_text Date.current.strftime('%Y/%m/%d')で確認できる。Rubystrftimeメソッドは与えられた雛型で日付を書式できる。 Date#strftime (Ruby 3.0.0 リファレンスマニュアル)

  • 同じ画面にユーザ名が2つ:例えばAさんでログイン中とコメントの作成者にAさんと表示されていた場合にコメントを削除するテストでは、with inでclassの範囲指定して記載されているのかを確認するテストができる ※画面に表示されている数だけ調べたい場合であればassert_text 'Aさん', maximum: 2とテストを書くこともできる

within '.class名' do
  assert_no_text 'Aさん'
end

まとめ

  • テストは失敗することも必ず確認してテストを書くようにする。

【LT会】フィヨルドブートキャンプ『初めてのLT会 vol.6』で登壇した話

1. 概要

2020年の8月からフィヨルドブートキャンプでプログラミング学習しているYusukeです。

2021年1月23日(土)に開催されたフィヨルドブートキャンプ『初めてのLT会vol.6』で初めて司会進行と登壇をさせていただきました!今回は登壇+登壇するまでの感想を記載します(登壇内容には触れません)。

2. 前提

フィヨルドブートキャンプでは、3ヶ月に1回ほど有志がLT会を開催しています。
2021年1月23日(土)に開催したLT会は第6回目の開催で、登壇者は私を含め8名いました。 私は、現在学習しているSinatraというWebアプリフレームワークで作成しているメモアプリについてプレゼンしました。

スライド:『初めてのアプリ作成』 speakerdeck.com

3. 結論

登壇して間違いなく良かったです!最初は緊張したり、準備大変そう〜と思い躊躇していましたが、準備段階も含め学習しているSinatraとWebアプリの知識が深まりました。 そして声に出してプレゼンすることで更に知識が定着しました。 やはり学習の定着で一番効果がある相手に説明することはとても大切だと実感しました!
※「他の人に教える」は学習定着率が90%!!!

f:id:yskmtg:20210124153131p:plain

career-ed-lab.mynavi.jp

4. きっかけ

登壇するきっかけは、当初登壇する人数が少なく勢いで「よし!やってみよう!」という安易というか。。。そんな理由からでしたが、でも最初から「やります!」と言えば良かったと今は思っています。
まずは「手をあげる!」。これをしないとせっかくの成長する機会を逃してしまう事があるので気をつけないと!
人間はとにかくコンフォートゾーンにいたがるので、そこから一歩外に出ることで学びがたくさんあります!

www.lifehacker.jp

5. 感想

Lightning Talks(5分くらいの短いプレゼン)という短い間に話したいことを詰め込んで端的に説明するのが難しかったです。資料を作成中に何を入れて、何を削るかの作業に苦戦しました。
登壇時は、緊張して早口になってしまったので良い反省の機会となりました。 また次回、チャレンジします!!!

以上

【PostgreSQL】Debian に PostgreSQL をインストールして外部接続する方法

概要

2020年の8月からフィヨルドブートキャンプでプログラミング学習しているYusukeです。

今回、DebianPostgreSQL をインストールして外部接続する方法をご説明いたします。

前提

サーバー:さくらVPS
PC:MacBook Air (11-inch, Early 2015)

手順

LinuxPostgreSQLをインストールする】
  1. リポジトリの追加
  2. クライアント証明書をインストール
  3. PostgreSQLをインストール
  4. ユーザー追加


【外部接続を許可する】
  1. postgresql.confを編集
  2. pg_hba.confを編集
  3. 編集後、サービスをリスタート


LinuxPostgreSQLをインストールする前に

Debianにはバージョンによってそれぞれ下記のようなコードネームがあるのでまずはチェック!
※ちなみにDebianのコードネームはトイ・ストーリーのキャラクターで、Debian1.1だとbuzz(バズ・ライトイヤー)です笑

【コードネーム】

  • Debian10系:buster
  • Debian9系:stretch
  • Debian8系:jessie

【チェック方法】

# cat /etc/debian_version
=> 10.6


LinuxPostgreSQLをインストールする】

1. リポジトリの追加

まず、リポジトリのパスを記載するためのファイルをtouchで作成。

# sudo touch /etc/apt/sources.list.d/pgdg.list

次にリポジトリのパスを作成したファイルに記載する。
※下記は"deb http://apt.postgresql.org/pub/repos/apt/ buster-pgdg main"という文字列をechoでファイルに書き込んでいる。

# sudo sh -c 'echo "deb http://apt.postgresql.org/pub/repos/apt/ buster-pgdg main" > /etc/apt/sources.list.d/pgdg.list'

そして、認証キーを追加する。
※buster(コードネーム)の左には半角スペースがあること
※私はDebian10系なのでbuster(コードネーム)と記載

# apt/ buster-pgdg main

2. クライアント証明書をインストール

まず、PostgreSQLの公式リポジトリを信頼するためのキーを取得する。

# sudo apt-get -y install wget ca-certificates

下記は成功画面

Reading package lists... Done
Building dependency tree       
Reading state information... Done
ca-certificates is already the newest version (20190110).
ca-certificates set to manually installed.
wget is already the newest version (1.20.1-1.1).

0 upgraded, 0 newly installed, 0 to remove and 0 not upgraded.

成功したらkeyを自分のPCへ追加する。

# wget --quiet -O - https://www.postgresql.org/media/keys/ACCC4CF8.asc | sudo apt-key add -

3. PostgreSQLをインストール

インストールする前にリポジトリをアップデート!

# sudo apt-get update
# sudo apt-get upgrade

アップデート後にいよいよインストールする。
※最後の数字はバージョン

# sudo apt-get install postgresql-10

インストールされているかPostgreSQLのバージョンを確認。

# psql --version
=> psql (PostgreSQL) 10.15

PostgreSQLをインストールすると、自動的にデータベースの管理ユーザー「postgres」ユーザーが作成されるので、postgresでPostgreSQLにログインできる。

# sudo su - postgres

4. ユーザー追加

まず、先ほど同様にrootでログインする。

# sudo su - postgres

ログイン後にユーザーを作成する。

# createuser --pwprompt --interactive 設定したいユーザー名

パスワードを聞かれるので2回好きなパスワードを入力して「y」を押す。

Enter password for new role: 
Enter it again: 
Shall the new role be a superuser? (y/n)

ユーザーを作成できたので、ログインする。
※Uの後はユーザー名を入力。私のユーザー名はyusukeに設定。

# psql -U yusuke -d postgres -h localhost

パスワードを入力すると無事にログイン完了!

postgres=# 



続いて外部(自分のMac)からの接続を許可します。

【外部接続を許可する】

1. postgresql.confファイルを編集

まずは、postgresql.confファイルに入る。
※数字の10はPostgreSQLのバージョン

# vi /etc/postgresql/10/main/postgresql.conf

postgresql.confの59行目付近のlisten_addressesの記載を'localhost'から*に変更
コメントアウトを外すのを忘れない。(頭の#は消す)

listen_addresses = '*'

2. pg_hba.confファイルを編集

まずは、pg_hba.confファイルに入る。
※数字の10はPostgreSQLのバージョン

# sudo vi /etc/postgresql/10/main/pg_hba.conf

次にpg_hba.confファイルの認証を受け付けるIPの範囲を追記する。
※私はローカルIPアドレスではなく、グローバルIPアドレスでできましたが、ローカルIPアドレスでもできる方はいます。

# IPv4 local connections:
host    all             all             127.0.0.1/32            md5
host    all             all             xxx.xxx.xxx.xxx/0       md5 #自分のIPアドレス+/0を追記

★ターミナルでのグローバルIPアドレスの調べ方

# curl inet-ip.info
=> xxx.xxx.xxx.xxx

3. 編集後、サービスをリスタート

ここまで編集できたらリスタートをする。

# /etc/init.d/postgresql restart

自分のMac側で以下のコマンドを実行し、外部接続を試す。

# psql -U ユーザー名 -d postgres -h ホスト名(さくらVPSの)

これで、postgresユーザーのパスワードを入力し、ターミナル画面で下記の画面になれば外部接続完了!

postgres=#


もし下記のエラーが出てしまったら

psql: error: could not connect to server: Connection refused
Is the server running on host "tk2-xxx-xxxxx.vs.sakura.ne.jp" (xxx.xx.xxx.xxx) and accepting
TCP/IP connections on port 5432?

対処法

  • さくらVPSでポート5432をパケットフィルタ設定で下記のように解放する。

参考URL:パケットフィルタ | さくらの VPS ドキュメント

f:id:yskmtg:20201224053650p:plain

以上

【読書】「諦める力」を読んで

「諦める」というと「断念する」や「見込みがない」など一見ネガティブなイメージを持つが、仏教での「諦める」は道理を明らかにしてよく見極めるというポジティブな意味で使われている。

『諦める力』著者:為末大 2016年出版

f:id:yskmtg:20201223224814p:plain

Amazonリンク

要約

  • 「諦める」という言葉の語源は「明らめる」からきている。自分の才能や能力、置かれた状況などを明らかにしてよく理解し、今、この瞬間にある自分の姿を悟る大切さを為末さんの実体験を基に書かれている。 よく「諦めなければ夢は叶う」と聞くけれど、、、誰でも夢が叶うのか?という問いに対して客観的になり他の選択肢もあることを為末さんは説明している。大事なのは、目的をどう達成するかで、為末さんは100m短距離の競技人口が多く自分より遥かに優れた選手がいる中で戦うより、400mハードルで競技人数が100mより少なく為末さんの身体にあった戦いの方が金メダルが取れるかもと考えて選んだ。重要なのは、目的を諦めなければ手段を変えてもいいということ。

勉強になった点

  • 日本人は「せっかくここまでやったんだから、諦めずに頑張ろう」や「もう少しで成功するから、諦めずに頑張ろう」を美徳としている。
  • 日本のスポーツシステムは型が決まっていて、何回素振りをやったとか、何球投げた、何本走ったという世界だが、大事なのは目的を達成するために自分で「どう工夫」したかだ。どれだけ頑張るかも必要だが、それよりも「何を」「どう」頑張るかが重要。
  • 「やめてもいい」と「やめてはいけない」の間に「やめたくない」という心境がある。
  • 人間には変えられないことの方が多い。だからこそ、変えられないままで戦えるフィールドを探すことが重要。
  • 最高の戦略は努力を娯楽化させること。
  • 全力で試してみた経験が少ない人は、「自分ができる範囲」について体感値がないので、ありえない目標を掲げ自信を失ったり、低すぎる目標を立てたりしてしまう。
  • 「どこで勝つ」より「何が勝ちか」をはっきりさせておくことが、自分が本当に勝ちたいフィールドでの勝利につながる。

感想

  • 目的を持たずにただ闇雲に頑張っても成果はもちろん出ないが、かといって目標を持って努力しても自分の戦えないフィールドであれば勝てない。。ということを学ばせていただけた1冊。ただ、続けているとわかってきて楽しくなって頑張れていい結果が出るといったことも少なからずあり、重要なのは自分の能力や性格をどれだけ客観視して分析できるのかという点だと思った。ただ、自分のことを理解することが一番難しいかもしれない。。

【Ruby】puts病の私がメソッド化を少しできるようになった話


できないことができるようになるって最高です!(ガッツポーズ) 

f:id:yskmtg:20201209012926p:plain

昔から、松岡修造さんに似ているとよく言われますが、決して熱くはないです(笑)
さて前置きです。

前置き

こちらは、フィヨルドブートキャンプ Part 1 Advent Calendar 2020 adventar.org

の9日目の記事です。8日目の記事は@altoさんによるTyporaのススメでした。
Part2 もありますのでぜひご覧ください。
 フィヨルドブートキャンプ Part 2 Advent Calendar 2020 - Adventar

概要

今年の8月からフィヨルドブートキャンプでプログラミング学習しているYusukeです。
初心者レベルの記事で恐縮ですが、今回Ruby学習を通じて学んだメソッド化(自分でメソッドを定義する)について書いていきます。

1. メソッドとは

オブジェクト指向言語において、オブジェクトに対する操作のこと。

Wkipediaから引用

まだ、オブジェクト指向でコードを書けない私としては下記の理解です。
メソッドは色々な処理を一つにまとめて定義したもの。処理を一つにまとめることで共同利用することができる。

2. メソッドの種類

Rubyには、メソッドの種類が2種類あります。
※一般のプログラミング言語でいう標準で入っている「組み込み関数」とユーザが自分で定義する「ユーザ定義関数」のことです。インスタンスメソッドやクラスメソッド、関数的メソッドのことではありません。

  • Rubyが用意してくれているメソッド(puts,p,each,uniq,sumなどなど)

  • ユーザーが自分で定義するメソッド

この記事では、ユーザーが自分で定義するメソッドに当たる方を説明します。

3. メソッドの定義

Rubyのメソッド定義は、defendの間に、実行したい処理を入れます。
defとは define(定義する)の略です。

定義の方法

def メソッド名
  メソッドが呼ばれたときの処理
end

4. puts病とは?

@jnchitoさんのきみたちは今まで何のためにRailsでMVCパターンを勉強してきたのか を読んでまさに自分はputs病だ…と反省しました。
puts 病とは上記の記事にあるのですが、ひとつひとつの処理を逐一、putsprintで出力してしまうことです。

コード例:自分で定義したメソッドなし

puts 'Hello, Ruby.'

result = 0
(1..5).each do |number|
  result += number
end
puts result

puts 'Goodbye, Ruby.'

# Hello, Ruby.
15
Goodbye, Ruby.

コード例:自分で定義したメソッドあり

def output_practice
  rows = practice
  puts rows
end

def practice
  rows = []
  rows << 'Hello, Ruby.'
  result = 0
  (1..5).each do |number|
    result += number
  end
  rows << result
  rows << 'Goodbye, Ruby.'
end

if __FILE__ == $0
  output_practice
end

# Hello, Ruby.
15
Goodbye, Ruby.


5. puts 病では何がだめなのか?

逐一結果を出力してコードを書くと下記のようなデメリットがあると考えました。

  • コードが長くなると読みにくい(同じ処理が重複してさらにコードが長くなる)

  • 変更する箇所が出てきた場合、全ての値を修正しないといけない (メソッドにしていれば値も使いまわせる)

  • 追加したい処理が出てきた場合に修正が大変 (ロジック本体と画面出力が密結合しているため)

  • putsで出力してしまうと、テストコードを書きづらい

6. なぜメソッドを定義できなかったのか?

メソッドを定義してどう呼び出すのかわからず、putsやprintを使った方が早く結果を知ることができ、次に進めたからだと思います。
今思い返せば、テストもせずロジックも組まずコードを書いていたことでより時間がかかってしまっていたと反省してます。。。

7. 自分で定義するメソッドを使えるようになったきっかけは?

きっかけはRubyの課題途中でいただいたアドバイスです。
LinuxのlsコマンドをRubyで実装する課題のとき、lオプションの表示では、ファイルの種類、許可属性などなど多数の項目を出力する必要があります。
私はそのlオプションのコードをmapの中に全て詰め込みループでひとつひとつをprintで出力していました。
ですが、rubocopにmapの中が長すぎると注意を受け、どう修正すればよいかわからず質問しました。そのときに「項目ひとつひとつをメソッド化して最後に出力してみたら?」というアドバイスをいただきコードを修正してみるとコードがスッキリ⭐︎それ以降メソッド化を考えるようになりました。

l_option.each do |file|
  print ファイルの種類
  print ファイルの許可属性
  print ハードリンク数
  print 所有者と所有グループ
  print ファイルサイズ
  print タイムスタンプ
  print ファイル名
end
# mapでループしてprintで出力していました。
  • 修正後のイメージ
def ファイルの種類 end
def ファイルの許可属性 end
def ハードリンク数 end
def 所有者と所有グループ end
def ファイルサイズ end
def タイムスタンプ end
def ファイル名 end

def output_with_l_options
  puts ファイルtotal

  file_names.each do |file_name|
    ファイルの種類
    ファイルの許可属性
    ハードリンク数
    所有者と所有グループ
   ファイルサイズ
   タイムスタンプ 
   ファイル名
  end
end

# 最後にオプションlであれば、output_with_l_optionsメソッドを呼び出すようにしました。

上記は修正後のイメージの方が長くなってしまっていますが、実際のコードは修正後の方がコードの重複がなく、コード数も短くスッキリしていて読みやすくなっています。

8. メソッドを定義するようになると

  • ロジックが組みやすく、どこでメソッドを呼び出せば良いか考えるようになりました。

  • 同じ処理を書かなくて済むのでコードもスッキリして読みやすくなすくなりました。   

9. まとめ

まだまだRubyのコードを書く際に同じ処理を使ってしまうことや、ロジックがきれいになっていないこともあるので、引き続き学習してオブジェクト指向でコードが書けるよう精進していきます!

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


参考資料
ゼロからわかる Ruby 超入門
プロを目指す人のためのRuby入門
きみたちは今まで何のためにRailsでMVCパターンを勉強してきたのか
【Ruby入門】Rubyにおけるメソッド(関数)の使い方
Let'sプログラミング
Rubyのメソッドについて