未経験エンジニアのための基本情報技術者のポイントを3つに要約してみた

未経験エンジニアのための基本情報技術者のポイントを3つに要約してみました。

自分のアウトプットとして無理やり3つに絞ったので雑な部分はありますが、そこんとこはご勘弁ください:)

 

①ネットワークとは?

ネットワークってなに?とこどもに聞かれてあなたは説明できますか?

 

なんとなーく理解はしているつもり、だけど他人にきちんと説明はできそうにないみたいな方は多いのではないでしょうか?

僕もその一人でした。

 

結論から言うと、ネットワークとは

 

複数のコンピューターを接続する方法です。

 

複雑な情報処理をする機械であるコンピューターは

そもそも情報がないその役割を果たせません。

そこでその情報をやり取りする相手先、またやり取りするための方法が必要ですよね。

それが、「複数のコンピューター」であり、「ネットワーク」なのです。

 

ちなみに情報を提供する側は「サーバー(server = 提供するモノ)」と言われ、これもまた複雑な情報処理をする機械なのでコンピューターです。

 

ネットワークはなんとなく、とんでもなくデカイ1つのものとしてイメージしてしまいがちですが

実際は「家」「会社」などの一つの小さな集まりごとに一つずつ存在しています。

このネットワークのことをLAN(Local Area Network)と言います。

 

また、インターネットとは

ネットワークとネットワーク(例えば自宅のLANとTwitter社のLAN) の間を繋いで、情報をやり取りできる様にする仕組みを指します。

 

プロトコルとは?

 

プロトコルとは、

通信する上での約束事です。

 

・・・は??

 

ですよね。

わかりやすく説明していきます。

 

①のポイントでコンピュータ同士はインターネットを通じて情報をやり取りしていることを理解しました。

 

では一旦ここで情報のやりとりを「人間同士」で考えてみてください。

 

僕たちは日本に住んでいたら基本的に日本語を使ってコミュニケーション(情報のやり取り)を行います。

ただ、もしフランス語で日本人に話しかけたらその日本人は理解できるでしょうか?おそらく出来ません。

そのため、私たちは

「日本でコミュニケーション(情報のやりとり)をする時は日本語で話そうね」

と言う暗黙のお約束が決まってるのです。

 

これはコンピューター同士でも同じです。

そしてITではこの情報のやりとりのことを「通信」と呼びます。

 

例えば

「ファイル(データの種類)に関する通信を行う時はFTPプロトコルの一種)と言う約束事にしたがって通信しようね」の様な感じです。

 

現在ではTCP/IPと言うプロトコルが、インターネットにおけるデファクトスタンダード(事実上の標準)になっています、

TCP:正しくデータが送られたことを保証する仕組み。

IP:各コンピュータやネットワーク機器に振り分けられたIPアドレスと言う番号によって管理している(住所の様なもの)

 

③暗号化技術とは?

通信経路には危険がいっぱいです。

 

例えば、Amazonで買い物をした時のクレジットカード情報が

見知らぬ人のネットワークを延々と渡り歩いて行く図を想像するとゾッとします。

ではどうすれば安全にデータの通信が行えるでしょうか?

結論から言うと

クレジットカード情報が入ったデータを覗かれてもいい内容に変えて、実際データを受け取ったコンピュータがその内容を元の形に戻す術を知っていたら解決できます。

 

そこで登場するのが暗号化技術です。

暗号化技術は「鍵」を使用し「暗号化」と「復号」を行うことで上記の流れを可能にします。

 

暗号化:データの中身を第三者にはわからない形へと変換してしまうこと。

復号:暗号化したデータを元の形に戻すこと

 

暗号化方式の一つに公開鍵暗号方式があります。

公開鍵暗号方式では、暗号化に使う鍵と、復号に使う鍵が一つのペアでそれぞれは別物になります。

まず、データの受信者側が公開鍵と秘密鍵のペアを用意します。

要は「自分にデータ送る時はこの公開鍵を使ってデータを暗号化してね」としています。

送信者側はその公開されている公開鍵を用いてデータの暗号化を行い、受信者にデータを送信します。

受信者側は秘密鍵を使用してデータを復号します。

暗号化は誰でもできちゃうけど、復号は秘密鍵を持っているコンピュータしかできない、と言うことです。

これにより公開鍵暗号方式は暗号を解くことが非常に困難でセキュリティが高いというメリットを産んでいます。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Simple-calendarを使ってカレンダーをカスタマイズする方法 【Rails】【初心者向け】

Simple -calendarのカスタマイズで非常に苦労したので書き残しておきます。

  

Simple-calendarの導入はうまくできたものの、

既存のテーブルと照らし合わしてそのレコードがある日だけ背景色を変えるという実装が難しかったです。いや今でもあんまりわかってない、ただ実装はできました。

 

カスタマイズした結果がこちら。

https://gyazo.com/0abdfbac226e41cc7e8df189895004ba

 

手順

  1. simple-calendarのgemをインストール
  2. Trainingテーブルにstart_time(date属性)を追加
  3. viewを編集
  4. cssファイルを編集

 

1.simple-calendarのgemをインストール

gem "simple_calendar", "~> 2.0"

ターミナルでbundle install

 

2.Trainingテーブルにstart_time(date属性)を追加

ユーザが何月何日にレーニングしたか、をsimple-calendarと紐付けさせたい。

なぜ、date属性かというと、simple-calendarのeventsが持つ日にちのデータ属性はdate(もしくはdatetime?ここ曖昧です。)だから。

 

3.Viewファイルを編集

rails g simple_calendar:views をターミナルで実行し、作成されたビューファイルからベースを取り出し、cssファイルで

Simple-calendarは、カレンダー上に登録したイベントを表示する。

背景色を変えたいだけなので、イベントは関係なさそうに思うがしっかり関係している。ユーザが何月何日にレーニングしたかというイベントの背景色を変えることで達成できそう。

以下がカレンダーのビューファイル。 

= month_calendar events: @trainings do |date,trainings|
= date
- trainings.each do |training|
.done-training
- training.done

 

4.cssファイルを編集

最後にイベントが追加された箇所(class = "has_events)に背景色のプロパティを与える。

 

 

未だに不明な点

・simple-calendarのeventsが、trainings テーブルのstart_time(date属性)をどうやってこいつがイベントの日にちに該当する値だなと判断しているかが不明

ただdate属性のカラムを参照するから?

 

・イベントが追加された要素にhas_eventsクラスが付与されるが、それはどこから知り得るか?(私はtwitterで先輩エンジニアにご教授いただきました。)simple_calendarのビューファイルを見てもその記述がなかったので。

 

 

今日保存されたレコードを取得するには? 【Rails】

実装したい仕様

・newアクション内で、今日保存されたレコードがあれば、indexアクション

要は、その日にログインしているユーザが筋トレしていたら

「just do it」ページではなく、「you did it」というページを遷移したいということです。

 

手順

  1. trainingモデルにscopeで今日のレコードを取得するメソッドを定義
    特定の日に保存されたレコードを取得するscopeの設定方法
    https://easyramble.com/get-today-record-with-rails-activerecord.html

    scopeとは?

    https://qiita.com/ozin/items/24d1b220a002004a6351

  2. 1で設定したスコープをtrainings_controller.rbで呼び出す。

 

training.rb

class Training < ApplicationRecord
belongs_to :user

scope :created_today, -> { where("created_at >= ?", Time.zone.now.beginning_of_day) }
 
end

 

trainings_controller.rb

def new
@user = current_user
@training = Train.created_today.find_by(user_id: current_user.id)
if @training.present?
redirect_to action: :index
end
end

 

以上です。

 

全く初めての用語だったのでメンターさんに聞きたくて聞きたくて仕方なかったですが

なんとか自力で、いや先人のプログラマーの有り難い記事のお陰で、笑

なんとか実装することができました。

 

 

実は最初に考えていた実装方法は

日付がかわるとtrainingsテーブルのレコードが全削除される(よって「just do it」ページに遷移される)という方法です。

しかし、調べてみるとめっちゃ難しかったのと後々そのレコードを使用したい場合があるかもしれないので今回紹介した方法に変更しました。

曜日別で表示させる内容を変更する方法 【rails】【初心者向け】

現在開発中のトレーニング習慣化アプリでの以下の仕様があります。

・曜日によって表示されるメニューが変わる

 

これを実装していきます。

 

最初の段階では

レーニングメニューはこちらで用意します。

なので seeds.rb を以下のように編集。

TrainingMenu.create([{menu: "腕立て 20 × 3"}, {menu: "スクワット 20 × 3"}
,{menu: "腹筋 20 × 3"},{menu: "懸垂 20 × 3"},{menu: "リバースプッシュアップ 20 × 3"}
,{menu: "パームカール 20 × 3"},{menu: "フロントブリッジ 20 × 3"},])

rails db:seed コマンドでデータを作成。

 

この配列に対してfindメソッドでうまく取り出してやると

その日のメニューの表示ができそうです。

 

ここではDateクラスを用いて、その日の曜日を数値で取得します。

それをfindメソッドの引数にすることで、その日(曜日別)のmenuを取り出します。

 

training_menus_controller.rb

require "date" #Dateクラスをこのファイルで使用
def new
now = Time.now #ここで今日のtimeオブジェクトを取得し変数nowに代入
today = now.wday + 1 #上で取得した変数に対し、今日の曜日を数値で取得するwdayメソッドを当てる。
               日曜日なら0だが、配列のidで取得したいので1を足しておく
@training_menu = TrainingMenu.find(today).menu
#上で取得したtoday(月曜日なら 2 )でtrainingmenuテーブルのレコードを取得し
 カラムを当ててあげることでその値を取り出した
 
end

 

 

以上です。

 

意外と5分くらいで実装できました。

簡単な実装ですが間違いなく力がついてきているのは嬉しいですね。

 

 

 

 

複数の値を持った配列じゃないオブジェクトとは 【Javasqript】【jQuery】

jQueryの配列風オブジェクト(擬似配列)について、非常に難しかったので共有します。

前提条件

  • menu-itemクラスを持つ要素は複数ある状態
let tabs = $(".menu_item");

 

結論から言います、上記のtabs は配列ではありません

これは配列風オブジェクトjQueryで複数のプロパティを持つオブジェクト)です。

 

// 何番目の要素がクリックされたかを、tabsから要素番号を取得
const index = tabs.index(this);

 

ここでtabsに、

配列に変換しなくても、集合したDOM要素から引数に指定したDOMと同じ要素番号を戻すindexメソッドを引数をthisとして記載しています。

ここで、要素番号を取得するということはtabsは配列なのでは?

と疑問を持ちました。

 

しかしtabsは配列ではない、では一体要素番号とは何なんでしょう?

 

tabsの中身を確認するために、ブラウザのコンソールでtabsと入力すると以下の値が出力されます。

 

  1. S.fn.init(3) [a#about.menu_item.active, a#service.menu_item, a#contact.menu_item, prevObject: S.fn.init(1)]
    1. length3

 

太線の箇所に注目してください。

tabs(オブジェクト)にはいくつかのプロパティが存在していることがわかります。そしてその左に番号が振られています。これが要素番号です。

 

よって、indexメソッドを使い、配列でないtabsオブジェクト(配列風オブジェクトとも呼ぶそう)から、要素番号を戻すことができます。

 

まとめると

  • DOM要素を複数取得し、変数に入れると配列風オブジェクトとなる。
  • 配列風オブジェクトには配列のように要素番号が振られている

 

ひとまずは、なるほど、といった所でしょうか?

 

でも、そもそもなぜRubyのように複数の値を変数に入れた時点で

配列に最初から入れないんでしょうか?

どうメリットがあるんでしょうか?

配列風オブジェクトとして扱うことに対するメリットが理解できません。

 

コメントでお教えいただくと幸いです。

 

 

 

 

 

 

 

コントローラのテストで難しい点を解説 【rspec】【初学者用】

この記事ではチャットアプリでテキストの送信機能のテストについて見ていきます。

コントローラーのテストコードの完全な入り口ではなく基本の事前理解が必要です。

messagesコントローラーファイルとそれに対する(完成した)テストコードです。一度目を通してください。app/controller/messages_controller.rb

 
class MessagesController < ApplicationController

before_action :set_group_users

def index
@message = Message.new
@messages = @group.messages.includes(:user)
end

def create
@message = @group.messages.new(message_params)
 
if @message.save
redirect_to group_messages_path(@group), notice: "メッセージが送信されました"
else
@messages = @group.messages.includes(:user)
flash.now[:alert] = "メッセージを入力してください"
render :index
end
end

private

def set_group_users
@group = Group.find(params[:group_id])
@users = @group.users
end

def message_params
params.require(:message).permit(:text,:image).merge(user_id: current_user.id)
end
end

spec/controllers/messages_controller_spec.rb

#〜省略〜
  describe '#create' do
    let(:params) { { group_id: group.id, user_id: user.id, message: attributes_for(:message) } }

    context 'log in' do
      before do
        login user
      end

      context 'can save' do
        subject {
          post :create,
          params: params
        }

        it 'count up message' do
          expect{ subject }.to change(Message, :count).by(1)
        end

        it 'redirects to group_messages_path' do
          subject
          expect(response).to redirect_to(group_messages_path(group))
        end
      end

      context 'can not save' do
        let(:invalid_params) { { group_id: group.id, user_id: user.id, message: attributes_for(:message, content: nil, image: nil) } }

        subject {
          post :create,
          params: invalid_params
        }

        it 'does not count up' do
          expect{ subject }.not_to change(Message, :count)
        end

        it 'renders index' do
          subject
          expect(response).to render_template :index
        end
      end
    end

    context 'not log in' do

      it 'redirects to new_user_session_path' do
        post :create, params: params
        expect(response).to redirect_to(new_user_session_path)
      end
    end
  end
end


 

それでは、躓きそうなところ(私が躓いたところ)を軸にテストコードを読み解いていきましょう。

メッセージを作成するアクションでテストすべきは以下の点です。

  • ログインしているかつ、保存に成功した場合

    • メッセージの保存はできたのか

    • 意図した画面に遷移しているか

  • ログインしているが、保存に失敗した場合

    • メッセージの保存は行われなかったか

    • 意図したビューが描画されているか

  • ログインしていない場合

    • 意図した画面にリダイレクトできているか

 

用語の説明

context

contextは、テスト対象のメソッドをどういう条件で実行するかを記載する。ここでは"ログインしている条件"や"メッセージが保存できる条件"のまとまりをcontextで表して、さらにネスト化している。

 

letメソッド

@paramsの様なインスタンス変数 を let という機能で置き換えることができるメソッド。複数のexampleで同一のインスタンス変数を使いたい場合に利用する。初回の呼び出し時のみ実行され流という遅延評価という特徴を持っている。

let(:hoge) {...}の様に書くと、{...}の値が hoge として参照できる。

 

subject

テスト対象となるオブジェクトが明確に一つに決まっている場合は、 subject 使ってテストコードをまとめる(DRY)することができる。

具体的には、まとめたテスト対象となるsubjectをexpect(subject).to ... の様な形で利用する。

 

 changeマッチャ 

createアクションのテストを行う際に利用し、引数が変化したかどうかを確かめるために利用できるマッチャ。例えば、change(Message, :count).by(1)と記述することによって、Messageモデルのレコードの総数が1個増えたかどうかを確かめることができる。

 

attributes_for メソッド

create、build同様FactoryBotによって定義されるメソッドだが、オブジェクトを生成せずに対象の属性をハッシュで返すという特徴がある。ここでは以下の様になる

attributes_for(:message) 

{text: "hello", image: "abcde.jpg",....}

 

難しいところを読み解く

 3行目

let(:params) { { group_id: group.id, user_id: user.id, message: attributes_for(:message) } }

 paramsのハッシュにそれぞれバリュー を入れている。messageの送信時に必要なデータのカラムは以下の3つです。

・そのメッセージがどのグループに属しているか(group.id)

・そのメッセージはどのユーザが投稿したのか(user.id)

・メッセージの内容(attributes_for(:message)

よってこの3行目は、paramsを呼び出した際にこのletメソッドの{{group_id: ....}}の値が参照できるよ、という記述になります。

 

5行目

context 'log in' do
      before do
        login user
      end

beforeブロックの内部に記述された処理は、各exampleが実行される直前に、毎回実行されます。context "log in "のまとまりの中ではユーザはログインしていることが前提条件なので、beforeブロックの中でloginメソッドを使用します。

またこのlogin メソッドは、deviseをrspecで利用できるよう設定した際に設定されているメソッドです。

 

 

特にrspecを触って間もない方は、一見難しそうに見えますが

ここで読み解いていないテストコードは、一つ一つ見ていけば意外とシンプルで最初の基本に沿って読み解くことができますね。

 

 

 

fakerの使用方法とFactoryBotとfakerの組み合わせ 【rspec】 【初心者用】

自分自身がつまづいたところを元に、fakerの使用方法、factorybotとfakerの組み合わせ方法を見ていきます。

(Gemのインストールは省きます。)

 

まず、factorybotはテスト用のリソースを作成するgem、fakerはダミーのデータを作成するgemでした。

これを組み合わせることで、テストで使うデータを簡単に定義することができます。

 

 

Fakerダミーデータの生成方法
{ Faker::Internet.email }

ここではemail のダミーデータを生成しています。

 

{ Faker::A.B } 

実際にFakerでダミーデータを生成するとなると

大きく分けてAとBに何を入れるかを判断する必要があります

 

ここではemail(これはモデルのカラム名)のダミーデータを作りたいですよね。

 

そこで以下のfakerのGithubページを参照します。

https://github.com/faker-ruby/faker

 

Generatorsから作成したいダミーデータのカラムから、該当しそうなAのページに進みます。ここでは、Faker::Internetとします。

すると、Faker::Intenet.email ,Faker::Internet.free_emailなどBに当たる部分の説明(どのようなダミーデータが生成され得るか)を確認でき、ここから選択します。

 

以上がFakerを使ったダミーデータの生成方法です。

 

 

次にFakerとFactory_botの組み合わせを見ていきましょう。こちらはとても簡単です。

 

factorybotとfakerの組み合わせ

factorybotを適用しているファイル内のデータの定義にfakerを利用するだけです。

spec/factories/messages.rb

FactoryBot.define do
  factory :message do
    content {Faker::Lorem.sentence}
user group end end

 

以上のようにするだけで

buildメソッドなどを用いたときに:messageのcontentカラムにはダミーのデータが入ったインスタンスを生成してくれます。