Nurse_SEのブログ

Nurse_SEのブログ

看護師からSEを目指す! 日記・アウトプット

SE道中日誌_6(ツイートを保存)

今回は、ツイート投稿機能を実装してデータベースへ保存する流れをアウトプットしていきます。

 

【アウトプット】

投稿機能とデータ保存には《new》《create》アクションを使用する必要がある。

〇投稿機能

①《new》をルーティングに設定する。

config/routes.rb

resources : tweets, only: [:index, :new]】に編集する。

 

②《new》をコントローラーに定義する。

app/controllers/tweets_controller.rb

```

def

  @tweet = Tweet.new

end

```

を追加する。

※登録画面作成する際に、form_with をしようするためインスタンス変数を定義する。

 

③投稿画面を作成する。

app/views/tweetsの配下にnew.htmlのview fileを作成、編集する。

```

<h1>投稿する</h1>

 <%= form_with(model: @tweet, local: true) do |form| %>
      <%= form.text_field :name, placeholder: "Nickname" %>

     <%= form.text_field :image, placeholder: "Image Url" %>

      <%= form.text_area :text, placeholder: "text", rows: "10" %>
      <%= form.submit "SEND" %>
    <% end %>

```

ニックネーム、画像、文を投稿できる。

newアクションで定義した@tweetにはTweetクラスのインスタンスが保存されている。modelオプションに指定されているのが、生成されたばかりのインスタンスならリクエストは《create》となる。

 

④《create》をルーティングに設定する。

config/routes.rb

resources : tweets, only: [:index, :new, :create]】に編集する。

 

⑤《create》をコントローラーに定義する。

app/controllers/tweets_controller.rb

```

 def create
    Tweet.create(tweet_params)
    redirect_to '/'
  end

  private
  def tweet_params
    params.require(:tweet).permit(:name, :image, :text)
  end

```

を追加する。

privateメソッドを使用 Class外から呼び出されなくなり、エラーを防ぐ。また、可読性が上がる。

params.requireメソッドで()内、tweetの情報を取得するか選択している。

permitメソッドで()内にキーを指定し指定したキーと値のセット のみを取得する。

 

⑥データ入力に制約を設ける。

モデルファイルに

validates : カラム名, バリデーションの種類】を記述することで使用できる。

app/models/tweet.rb

```

class Tweet < ApplicationRecord
  validates :text, presence: true
end

```

と編集する。

text →ツイート、presence:ture→空ではない? を指している。

ツイートが空欄の場合、ツイートは登録できなくなる。

 

SE道中日誌_5(ツイートを表示する)

今回は、ツイート表示の実装をしていきます。

 

【アウトプット】

CRUDとは

  • C(Create)生成
  • R(Read)読み取り
  • U(Update)更新
  • D(Delete)削除

データの取り扱い時の、基本的な処理の頭文字のことでアクションの設定で処理される。

 

アクションとは

  • index 一覧表示
  • show 詳細表示
  • new 生成
  • create 保存
  • edit 編集
  • update 更新
  • destroy 削除

上記7つがあり、ルーティングで設定することでCRUDが実現される。

 

①モデルを作成する。

※ツイートを保存しようと思うので、モデル名はTweetとする。

rails g model tweet】コマンド実行

 
②テーブル作成する。

※名前(name)、文(text)、画像(image)を保存したい。

db/migrate/20〇〇〇〇_create_tweets.rb を編集する

 t.string :name

 t.string :text

 t.text :image

を追加する。

 
マイグレーションを実行する。

rails db:migrate】コマンド実行

 
④データベースに値を入れる。

rails c】 コマンド実行

(例) ⇒Tweet.create(name: "tanaka",text: "Hello world") という形で入力

 
⑤ルーティングを編集する。

config/routes.rb

 resources :tweets, only: :index 

を追加する。

※resourcesメソッドは全てのアクションへのルーティングを設定する。

※onlyオプションは指定したアクションのみルーティングを設定できるもの。

 
⑥コントローラーを作成する。

※複数のツイートが関連するため複数形でコントローラーを作成する

rails g controller tweets】コマンド実行

 
⑦アクションをコントローラーに定義させる。

app/controllers/tweets_controller.rb

 def index

  @tweets = Tweet.all

 end

を追加する。

 
⑧ビューを作成する。

app/views/tweetsの配下にindex.html.erbを作成し編集する。

 
⑨ルートパスを設定する。

※ツイートの一覧ページへ遷移するようにする。

config/routes.rb

 root to:'tweets#index'

を追加する。

SE道中日誌_4(ライブラリ導入)

今回は、アプリ開発を迅速に進めるためにライブラリを導入していきます。

 

【アウトプット】

ライブラリとは何か?

プログラミングにおける拡張機能のこと。

複雑なプログラムが1セットとなっておりライブラリをアプリに読み込ませることで、実装することができる。

 

RubyGems

Rubyのライブラリを管理するシステムのこと。

RubyRubyGemsにアクセスしてGemを取得できるgemコマンドが使用できる。

 

Gemfile

使用するGemの名前とバージョン情報が記載されたファイルのこと。

GemをインストールするとGemfile.lockというファイルに記録される。

 

Gemfile.lock

インストールされたGemの情報を記録するファイルで、1つのGemのためになんのGemのどのバージョンをインストールしたのか確認できる。

 

〇ライブラリの導入

※今回は、pry-railsというGemを追加する。

テキストエディタでGemfileに gem 'pry-rails' と記載する。

②アプリディレクトリに移動する。

③Gemのインストールを行う。

 ⇒bundle install コマンド実行する。

④ローカルサーバーを起動する。

※ローカルサーバーを起動した際にGemが読み込まれるため

 ⇒rails s コマンド実行する。

SE道中日誌_3(アプリ・db作成)

今回からは、「ツイート機能のあるアプリ」をコマンド、編集、復習、学習したものまで1つずつアウトプットしていきます。

 

・アプリケーションの準備

・データベースの作成

【アウトプット】

〇新規アプリの準備を行う

①アプリを作成したいディレクトリに移動。

cd ~/〇〇〇

Railsのアプリケーションを作成する。

 rails (バージョン) new (アプリ名)(オプション名) (追加するオプション) コマンドで作成できる。

今回は 新規アプリtwitter バージョン7.0 -dオプションMySQLを使用とする。

 ⇒rails _7.0.0_ new twitter -d mysql  とコマンド入力する。

③作成したアプリのディレクトリに移動。

 ⇒cd twitter 

 

〇データベースを作成する

①多くの文字を効率的に表現できるようエンコーディングを変更する。

テキストエディタで、config/database.ymlを開き

encodeing: utf8mb4 → encodeing: utf8 に変更する。

②コマンドでデータベースを作成する。

rails db:create  

 

〇ローカルサーバーを起動しブラウザで確認する方法

rails s  コマンドを実行。

http://localhost:3000 

localhostのリンクから確認する。

SE道中日誌_2

最近、夜中急激に寒くなりましたね ~

少し窓開けておくだけで寒くて目が覚めるぐらい寒いです。。。

季節の変わり目 風邪ひかないようにしたいですね!

 

それではSEへの勉強頑張っていきましょう゜*。(*´Д`)。*° 

 

今、プログラミング言語Rubyの勉強中ですが、課題でだされるWebページ作成でHTML・CSSのformの理解が浅いように感じたので、今回はformについてのアウトプットしていこうと思います。

  【アウトプット】

まず、「form」とは何なのか。

formとは名前や住所を入力したり、アプリにあるようなお問い合わせなどの大きなテキスト入力欄、チェックボックスなどのことです。

 

では、どのように「form」を実装するのか。

実装には、HTML上で「form要素」というのもを使用します。

<form>・・・</form>の中にテキスト入力欄や送信ボタンを作成します。

form要素はブロックレベル要素に分類されます。

 

form要素だけでは、テキスト入力欄を作成するのか、送信ボタンを作成するのか指定されていません。

そこで、登場するのが「input要素」と「type属性」です。

 

input要素とは、テキスト入力欄や実行ボタンを作ることができる要素のこと。

ちなみに、input要素はインライン要素です。

 

type属性とは、テキスト入力欄やチェックボックス、送信ボタンなどの種類選択ができるものです。

 

ここで、「placeholder属性」もご紹介。

placeholder属性とは入力欄に仮の文字を入れることができるものです。

 

それでは実践。

《条件》

・名前のテキスト入力欄 と 住所のテキスト入力欄を作成。

・テキスト欄は縦並びにする。

👆HTMLはざっとこんな感じ👆

 

👆CSSをこうすると・・・

 

名前と住所が横並びになってしまいました…

 

これは、ブロックレベル要素インライン要素が関係しています。

簡単に言うとブロックレベル要素は縦に積み重なるのに対し、インライン要素は横に連なっていきます。

 

input要素がインライン要素であるため、名前と住所が横並びになったという訳です。

 

では、どうしたらよいか

 

インライン要素を、ブロックレベル要素にしてしまいましょう!

ここで使用するのが display(ディスプレイプロパティ) です。

display: block; を対応するCSSに追加することでブロックレベル要素として表示されるようになります。

 

👆display: block; を追加

   すると・・・

 

縦並びにできました!

 

 

 

今回はテキスト欄実装までのformについてアウトプットでした。

まだまだ他の機能もあるのでアウトプットしていけたらと思います!

 

今回はこの辺で、ではまた~ォ'`ォ'` 。+゚ヽ(。・c_,・。)ノ゙。+゚ォ'`ォ'`
          

SE道中日誌_1

こんにちは!

看護師からシステムエンジニア(SE)を目指して日々勉強している者です。

 

SE道中日誌 では、プログラミング学習したことをアウトプットしたりエンジニアになるまでの進捗具合を書いていこうと思います!

 

【自己紹介】

初めましてなので、まずは簡単に自己紹介( ̄∀ ̄)

 

・看護師歴9年の29歳 男性

・子ども2人(2歳、3歳 いずれも男の子)←かわいい(*^~^*)ゝ 

・京都住

・好きな食べ物 ハンバーグ

・9月からTECH CAMPで学習中

 

簡単にはこのぐらいで(笑)

 

SEになろうと思ったきっかけ はシンプルに PCを使ったもの作り をやってみたい!と思ったからです。

 

それと、アプリにこんな機能があったらなぁ 思うことも。。。

だったら自分でアプリ制作したり、編集できるようになったらいいじゃん!

 

と思い立ったのがきっかけです v(。・ω・。)

 

【今まで行ったこと】

「PCを使ったもの作り」 と目標が漠然としていましたし、もの作り=プログラミング?という考えでした。

そこで、初心者が始めるプログラミングで検索 「HTML CSS」がおすすめとのこと!

知識0の自分には  ん?HTML CSSなんじゃそりゃ? となりつつ書籍を購入。

 

さっそく、休日にPCで実践!

本で説明されている通りにしていくだけで、サイトのページができていく!

楽しい O(≧∇≦)O !!
     

ちなみに   

HTML がWebサイトに表示される情報(文字、画像、フォームetc)

CSS  がHTMLの装飾(文字色、サイズの変更etc)

というものでした!

 

 

一応、参考文献載せておきます。

分かりやすかったので、今から始める人にオススメです ヾ(*ΦωΦ)ノ 
          

書籍のサイトは無事出来たのですが、他の人と情報共有できる機能 や 投稿機能 などをつけたい! と思うようになりました。

 

再度、書籍を漁るも 「なんだこれは!?」 と驚き。

 

HTMLとCSSとは、比べれられないほど専門的な言葉や内容が書かれており、もうチンプンカンプン ゚.+:。クラ(@O@)クラ゚.+:。
          
これは1人ではできない!!! と思い意を決して TECH CAMP というプログラミングスクール(オンライン)を受講しました。

 

テックキャンプ |挫折しないエンジニアスクール|離脱率わずか3%

 

やはり、スクールというだけあって分かりやすい!

1カ月ほど経ちましたが、現在「HTML CSS」「Ruby」の基礎を学習できました!

 

 

これから、スクールで勉強していったことを発信していこうと思います!

同じ志、境遇の方も一緒に頑張っていきましょう\(^ ^)/ 

 

ではでは~(´・ω・`)ノシ