【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.today
とDate.current
は両方今日の日付を取ってきてくれる。Railsのapplication.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')
で確認できる。Rubyのstrftime
メソッドは与えられた雛型で日付を書式できる。 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%!!!
4. きっかけ
登壇するきっかけは、当初登壇する人数が少なく勢いで「よし!やってみよう!」という安易というか。。。そんな理由からでしたが、でも最初から「やります!」と言えば良かったと今は思っています。
まずは「手をあげる!」。これをしないとせっかくの成長する機会を逃してしまう事があるので気をつけないと!
人間はとにかくコンフォートゾーンにいたがるので、そこから一歩外に出ることで学びがたくさんあります!
5. 感想
Lightning Talks(5分くらいの短いプレゼン)という短い間に話したいことを詰め込んで端的に説明するのが難しかったです。資料を作成中に何を入れて、何を削るかの作業に苦戦しました。
登壇時は、緊張して早口になってしまったので良い反省の機会となりました。
また次回、チャレンジします!!!
以上
【PostgreSQL】Debian に PostgreSQL をインストールして外部接続する方法
概要
2020年の8月からフィヨルドブートキャンプでプログラミング学習しているYusukeです。
今回、Debian に PostgreSQL をインストールして外部接続する方法をご説明いたします。
前提
サーバー:さくらVPS
PC:MacBook Air (11-inch, Early 2015)
手順
【LinuxにPostgreSQLをインストールする】
- リポジトリの追加
- クライアント証明書をインストール
- PostgreSQLをインストール
- ユーザー追加
【外部接続を許可する】
- postgresql.confを編集
- pg_hba.confを編集
- 編集後、サービスをリスタート
LinuxにPostgreSQLをインストールする前に
Debianにはバージョンによってそれぞれ下記のようなコードネームがあるのでまずはチェック!
※ちなみにDebianのコードネームはトイ・ストーリーのキャラクターで、Debian1.1だとbuzz(バズ・ライトイヤー)です笑
【コードネーム】
- Debian10系:buster
- Debian9系:stretch
- Debian8系:jessie
【チェック方法】
# cat /etc/debian_version => 10.6
【LinuxにPostgreSQLをインストールする】
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 ドキュメント
以上
【読書】「諦める力」を読んで
「諦める」というと「断念する」や「見込みがない」など一見ネガティブなイメージを持つが、仏教での「諦める」は道理を明らかにしてよく見極めるというポジティブな意味で使われている。
『諦める力』著者:為末大 2016年出版
要約
- 「諦める」という言葉の語源は「明らめる」からきている。自分の才能や能力、置かれた状況などを明らかにしてよく理解し、今、この瞬間にある自分の姿を悟る大切さを為末さんの実体験を基に書かれている。 よく「諦めなければ夢は叶う」と聞くけれど、、、誰でも夢が叶うのか?という問いに対して客観的になり他の選択肢もあることを為末さんは説明している。大事なのは、目的をどう達成するかで、為末さんは100m短距離の競技人口が多く自分より遥かに優れた選手がいる中で戦うより、400mハードルで競技人数が100mより少なく為末さんの身体にあった戦いの方が金メダルが取れるかもと考えて選んだ。重要なのは、目的を諦めなければ手段を変えてもいいということ。
勉強になった点
- 日本人は「せっかくここまでやったんだから、諦めずに頑張ろう」や「もう少しで成功するから、諦めずに頑張ろう」を美徳としている。
- 日本のスポーツシステムは型が決まっていて、何回素振りをやったとか、何球投げた、何本走ったという世界だが、大事なのは目的を達成するために自分で「どう工夫」したかだ。どれだけ頑張るかも必要だが、それよりも「何を」「どう」頑張るかが重要。
- 「やめてもいい」と「やめてはいけない」の間に「やめたくない」という心境がある。
- 人間には変えられないことの方が多い。だからこそ、変えられないままで戦えるフィールドを探すことが重要。
- 最高の戦略は努力を娯楽化させること。
- 全力で試してみた経験が少ない人は、「自分ができる範囲」について体感値がないので、ありえない目標を掲げ自信を失ったり、低すぎる目標を立てたりしてしまう。
- 「どこで勝つ」より「何が勝ちか」をはっきりさせておくことが、自分が本当に勝ちたいフィールドでの勝利につながる。
感想
- 目的を持たずにただ闇雲に頑張っても成果はもちろん出ないが、かといって目標を持って努力しても自分の戦えないフィールドであれば勝てない。。ということを学ばせていただけた1冊。ただ、続けているとわかってきて楽しくなって頑張れていい結果が出るといったことも少なからずあり、重要なのは自分の能力や性格をどれだけ客観視して分析できるのかという点だと思った。ただ、自分のことを理解することが一番難しいかもしれない。。
【Ruby】puts病の私がメソッド化を少しできるようになった話

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

昔から、松岡修造さんに似ているとよく言われますが、決して熱くはないです(笑)
さて前置きです。
前置き
こちらは、フィヨルドブートキャンプ 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のメソッド定義は、def
とend
の間に、実行したい処理を入れます。
defとは define(定義する)の略です。
定義の方法
def メソッド名 メソッドが呼ばれたときの処理 end
4. puts病とは?
@jnchitoさんのきみたちは今まで何のためにRailsでMVCパターンを勉強してきたのか
を読んでまさに自分はputs病だ…と反省しました。
puts 病とは上記の記事にあるのですが、ひとつひとつの処理を逐一、puts
やprint
で出力してしまうことです。
コード例:自分で定義したメソッドなし
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
の中が長すぎると注意を受け、どう修正すればよいかわからず質問しました。そのときに「項目ひとつひとつをメソッド化して最後に出力してみたら?」というアドバイスをいただきコードを修正してみるとコードがスッキリ⭐︎それ以降メソッド化を考えるようになりました。
lsコマンドlオプションの出力結果 「ls -l」コマンドの表示からファイルの属性を理解しようから引用
rubocopに注意を受けたコードのイメージ(mapからendまで実際は50行ほどコードがありました…)
※これから課題に取り組む方もいるのでコードイメージにしています。
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のメソッドについて