katotatsu1213のブログ

プログラミング学習の過程を記録しようと思います

テキストエディタについて

テキストエディタとは文章を作成、編集するためのソフトウェアのこと

開発の際は、テキストエディタを使ってファイルにコードを記述していく

 

今回はVScodeについて

マイクロソフトによって開発された無料で利用できるテキストエディタ

プログラミング開発に特化している

 

まずはインストール

ダウンロードページにてDownload for Macをクリック

ダウンロードしたものをアプリケーションフォルダに移動

その後に開く

開けない場合はシステム環境から許可を出す

次に拡張機能の導入

今回導入したのは

  • Japanese Language Pack for Visual Studio Code
    • 日本語表記にします。
  • HTML Snippets
    • HTMLタグ、CSSタグの入力を補完してくれます。
  • Ruby
    • Rubyの構文をチェックし、間違った箇所を指摘してくれます。
  • zenkaku
    • 全角スペースを知らせてくれます。
  • Code Spell Checker
    • コードのスペルをチェックしてくれます。

上記のものです。

WEBアプリケーションとプログラミングについて

Webアプリケーションとはインターネット上で利用できる、ある目的を持ったサービスのこと

例えば動画を見るだとか予約をするとかそういった目的

 

また混同されがちなのがネイティブアプリケーション

スマホにダウンロードや・インストールして使用するアプリケーションでWebアプリとは違う

しかし、基本となる技術が似ているのでWebアプリを学ぶことでネイティブアプリケーションにも対応しやすくなる

 

また、Webアプリを開発することはWebアプリを動かすためのプログラムを作ることプログラムとはコンピューターを動かすための指示書

 

プログラミングはプログラムを作成して、コンピューターがプログラムを実行するという一連の流れのこと

RUbyのブロックについて

お疲れ様です!

 

今日はrubyのブロックについて復習しようと思います。

ブロックはeach文でいうdo~endの間のことです。また、|hoge|と囲まれた部分がブロック引数となります。

 

まず復習としてブロックには記述の仕方が2種類あります。

ここからは例を参考にしていきます。

ages = [10, 15, 20]

ages.each do |age|

  puts age

end

という感じで先程のdo~endの形です。

そしてもう一つが{}を用いた記述になります。

ages.each {|age| puts age}

といった形になります。

こちらの記述方法でも改行は一応できます。

特に使い分けとしてはdo~endの場合は長いコードとなる場合、{}の場合は1行程で記述できる場合に使い分けるのがいいのかと思います。

 

ここまでで基礎的なブロックの書き方を復習しました。

Rubyにはたくさんのメソッドがあり、多くのメソッドにブロックが用いられていますが自分で定義したメソッドにもブロックは使えます。

yieldを使用することでメソッドに渡したブロックを使うことができます。

簡単なコードを例にすると

def num

  puts 10

  yield

end

 

num do

  puts 25

end

 

と記述してターミナルにて出力結果を確認すると10と25が出力結果として出てきます。

なのでyieldを使うとメソッドに紐付けたブロックの処理が実行されていることが確認できます。

yieldはかなり高度な開発時に使う場面があるみたいなのでとりあえず今回は基礎の基礎ということで実際に実務に移った時にさらに学ぼうと思います。

 

ではまた!

 

条件分岐と繰り返し処理について

お疲れ様です。

今日はrubyについて少しまた学びましたのでそちらのアウトプットをしていこうかと思います。

 

まず条件分岐について今まではif文やunless文を使って条件式を成立させていましたが今回はcase文を学びました。

case文も条件式ですがif文などと比べるとかなり記述がスマートになりました!

if文ではelsifに続いて条件式を記述しますがcase文では例を出すと

 

country = "japan"

case country

when "japan"

  puts "こんにちは"

when "america"

  puts "hello"

else

puts "..."

end

という形でcase countryの部分が条件の対象となり、whenで指定した値とcountryの中身が一致するかで条件を判定します。

実際にコードを書いてみるとかなり記述がシンプルになりました。

並列する条件が多数ある時に使用するんだなー程度で覚えておこうかと思います。

 

次が繰り返し処理です。

今まではtimesメソッドやeach文を使って繰り返し処理を行っていました。今回はwhile文を学びました。

今まではある回数繰り返し処理をしたり、配列内の値の数だけ処理をしていましたがっ今回は指定した条件式がtrueであれば永遠に繰り返し処理を行うというものです。

下記にコードの例を載せます。

 

while 条件式

  条件式がtrueの時に繰り返す処理

end

といった形です。

つまり条件式がtrueであれば先程説明した通り永遠に繰り返し処理を行います。

ここで大事なのが無限ループです。

無限ループを起こしてしまうとコンピューターに大きな負荷がかかってしまうので、繰り返し処理を実装する場合は、特に注意が必要だなと思いました!

 

実際に無限ループを回避する方法としてはbreakを記述します。

each文やwhile文などの繰り返し処理の中に記述していきます。

書き方としては繰り返し処理の中にif文を用います。

条件式である値などになったら、つまり条件式がtrueの時の処理としてbreakを記述するだけでその繰り返し処理から抜け出すことができます。

 

今日は色々とやることがありあまり学習できなかったので明日は学習もしつつ転職活動にも力を入れていきたいと思います。

 

ではまた!

レスポンシブWEBデザインについて

お疲れ様です!

今日はレスポンシブWEBデザインについて記事を書いていこうと思います!

 

まずレスポンシブWEBデザインとはPCやタブレットスマホなどの様々なデバイスの大きさに対応したデザインのWEBサイトを作成する方法です。

 

私自身は練習用のサイトフォルダとファイルを作成しました。

ちなみにHTMLコードを書くことをマークアップCSSのコードを書くことをスタイリングと呼ぶらしいです。現場ではよく使われるらしいので覚えておこうと思います。

また、WEBフォントについても学びました。

インターネット上にデータがあって、サイト表示時にそれを読み込んで使用されるフォントの総称らしいです。

 

では話が少し逸れてしまいましたが、まずは表示領域を設定する方法です。

レスポンシブ対応をするためには画面幅が異なるデバイスに対してWebサイトの表示領域の設定をする必要があります。この表示領域はviewportと呼ばれていてこれを指定しないとPC画面用のサイトをスマホで見るとただ縮小した形になってしまうので非常に見ずらくなってしまします。

 

viewportを設定するためには、htmlファイルのheadタグ内に記述を追加します。

contentプロパティにwidth="devise-widrh"を指定してブラウザの大きさをPCやスマホなどの機器の大きさに合わせることができます。

また、initial-scaleは、画面の拡大率を指していて拡大率は「1.0」に今回は設定したので拡大はおこなわれません。

 

では次に画面サイズごとにCSSを切り替える方法です。

記述としては今回の例でいうとmax-wodth: 500pxと記述するとこれは画面幅が最大500pxの時、つまり画面幅が500px以下の時という意味になります。

この記述の後にレイアウトや文字の大きさなどをデバイスの幅に合わせて調節していきます。

max-widthの話になりますが、min-widthというものもあり、これは画面幅が500px以下の時という意味になります。

またこういった表示された画面幅に応じて適用するスタイルを切り替える機能をメディアクエリと言います。メディアクエリによって規定されるスタイル適用の分岐点をブレークポイントと呼びます。

例えばmax-width: 500pxであれば500pxがブレークポイントとなります。

実際にこれらを使ってPCサイズ、タブレットサイズ、スマホサイズなどのサイズごとにCSSの適用するサイズを変えることができます。

 

コードの編集が終わったらブラウザの検証ツールを使って様々なデバイスのサイズで確認です!!

 

普段学生の時とか結構スマホ対応されていないWEBサイトが多く感じてましたけど最近はどれもレスポンシブ化されていますね。

多分できて当たり前なんだろうなと思いました。

ではまた!

お疲れ様です!

昨日アウトプットするの忘れてしまった!

結構自分で決めたことをサボるとストレス感じる気がします。

 

前回の続きをアウトプットしようかと思います。

前回はvisit 〇〇_pathでトップページに遷移することを表現しました。

次は、ページ先にサインアップページへ遷移するボタンがあるか確認するコードです。

どういった記述をしたかというと

expect(page).to have_content('X')

と記述しました。

実際にvisitで訪れたpageのなかにXという文字列があるかどうか判断しています。

もちろんXの部分には"新規登録"を選択しています。

ちなみにpageはvisitで訪れた先のページの見える分だけの情報が格納されています。

 

次のステップは新規登録ページに移動するのとユーザー情報を入力するを考えます。

新規登録ページへは先程のvisitを使用して遷移先のパスを指定して表現します。

実際にブラウザに文字列を入力することを再現する必要があり、この時に使用するのがfill_inです。

fill_in 'フォームの名前', with: '入力する文字列'

のように記述することでフォームの入力を行うことができます。

ブラウザにて検証ツールを使い該当のidやフォームの名前を確認しコードを編集します。

 

続いてサインアップボタンを押すとユーザーモデルアカウントが1上がることを確認するために

find('クリックしたい要素').click

と記述します。

これで実際にクリックを表現できます。検証ツールを使い要素の確認をして編集します。

また、ユーザーモデルカウントが1上がるに対しては

expect{ 何かしらの動作 }.to change { モデル名.count }.by(1)

と記述することによって、モデルのレコードの数がいくつ変動するのかを確認できます。changeマッチャでモデルのカウントをする場合のみ、expect()ではなくexpect{}となることを学びました。

 

次にトップページへ遷移したことを確認するを取り組みます。

current_pathを使用して

expect(current_path).to eq(root_path)

と記述しました。

current_pathは現在いるページのパスを示してくれるものです。

 

次はカーソルを合わせるとログアウトボタンが表示されることを確認するテストコードです。

hoverを使って表現しました。

find('ブラウザ上の要素').hoverとすることで特定の要素にカーソルを合わせた時の動作を再現できます。

 

では最後にサインアップページへ遷移するボタンや、ログインページへ遷移するボタンが表示されていないことを確認するテストコードを記述していきます。

今回使うコードがhave_no_contentです。これは文字列が存在しないことを確かめるマッチャです。

なのでexpect(page).to have_no_content("存在して欲しくない文字列")と記述しました。

実際にターミナルに確認のためコマンドを打つと勝手にブラウザが起動して確認してくれる様子がわかります。

 

次回はできたら明日は、レスポンシブWebデザインについて学ぼうと思います。

ちなみに今転職活動中ですが面接ってやっぱり慣れなんですかね結構言いたいこと忘れてつまりながら話すとぎこちない気がして...。

恥ずかしくなってしまいます。

 

ではまた!

お疲れ様です!

前回まで単体テストコードについて学んできたので今回は結合テストコードについて復習していこうと思います。

 

まず、概要になりますが単体テストは機能ごとにテストを行うもので、今回復習する結合テストはユーザーの操作を再現してテストを行うものです。また、結合テストコードを実行するためにもSystem Spec(システムスペック)という技術を使用します。

これは結合テストコードを記述するための仕組みで大枠の記述はRSpecと変わりません。System Specを記述するためには、CapybaraというGemを用います。実際にはデフォルトでrailsには搭載されています。

では実際にテストコードを記述していきます。

 

rails g rspec:system usersとコマンドを入力してユーザー新規登録に関するテストを行うためにファイルを生成します。

まずはexampleを整理します。

新規登録できる場合とできない場合また、どのようなケースがあるか考えました。

この時、ポイントとしてユーザー目線であまり細かく考えずに、ブラウザでどのような操作をすると、どうなるのかを考えました。

実際に作業した内容を載せます。

  • ユーザー新規登録ができるとき
    • 正しい情報を入力すればユーザー新規登録ができてトップページに移動する
    • トップページに移動する
    • トップページにサインアップページへ遷移するボタンがある
    • 新規登録ページへ移動する
    • ユーザー情報を入力する
    • サインアップボタンを押すとユーザーモデルのカウントが1上がる
    • トップページへ遷移したことを確認する
    • カーソルを合わせるとログアウトボタンが表示される
    • サインアップページへ遷移するボタンや、ログインページへ遷移するボタンが表示されていない
  • ユーザー新規登録ができないとき
    • 誤った情報ではユーザー新規登録ができずに新規登録ページへ戻ってくる
    • トップページに移動する
    • トップページにサインアップページへ遷移するボタンがある
    • 新規登録ページへ移動する
    • ユーザー情報を入力する
    • サインアップボタンを押してもユーザーモデルのカウントは上がらない
    • 新規登録ページへ戻される

こんな感じでテストコードを書く前のステップとしてかなりこの洗い出しが重要に感じました。

ではまずトップページに移動をそう再現するかといったところですがvisit root_pathとすることで僕の場合はトップページに遷移することを表現しました。

RequestSpecにあるgetに似ていますが、getはリクエストを送るだけでvisitはそのページへ遷移することを意味します。

 

少し長くないそうなんのでまた明日更新します!

ではまた!