写真投稿アプリの作成過程

お疲れ様です。

今日は前回の記述通りに写真投稿ができるアプリの実装について記述していこうと思います！

まず、前回のアプリとの違いはアクションの数が3つから7つになりました。

前回

・index

・new

・create

今回

・index

・new

・create

・destroy

・edit

・update

・show

といった感じです。

つまり今回は削除や編集、詳細表示などが追加されました。

また、今回はテーブルが3つあります。

投稿機能のテーブル、ユーザー機能のテーブル、コメント機能のテーブルとこれらの関係性を示すことで、複雑なデータをシンプルに記述する方法を学びました。

前回と同様にアプリの雛形を作成します。この時、前回は特に気になってすらいませんが実はデータベースは運用環境というものがあり3つの環境ごとに使い勝手が違います。

開発環境、テスト環境、本番環境とそれぞれの環境ごとに設定の変更が必要になります。

ではまず、投稿機能から実装していきます。

前回と同じでモデルやらコントローラーを作成していきます。

ルーティングの設定をする際に今回はresourcesメソッドを記述します。これは7つのアクションへのルーティングを自動生成するメソッドです。また今回はonlyオプションも記述します。これは指定したアクションのみのルーティングを自動生成します。

なぜこのわざわざ記述するのかという疑問はありましたが、開発において不要なアクションを設定しておくとエラーの原因にもなるので記述しました。

次にビューに関してですが新しい知識としてレイアウトテンプレートとyieldメソッドを学びました！

レイアウトテンプレートとはビューファイルの共通部分をまとめたものです。

レイアウトテンプレートに、headの情報やヘッダー、フッターなどのすべてのビューで共通となる部分を記述しておくことで、各テンプレートファイルは個別の見た目を記述するだけでよくなります。

これに対して、各テンプレートファイルを展開するためのメソッドがyieldメソッドです。

yieldを記述することで、indexアクションの場合はテンプレートファイルのindex.html.erbの内容が、newアクションの場合はnew.html.erbが、yield記述部分へ展開されるようになります。

また、今回はフォームからデータを保存する際にストロングパラメーターを使用します。

ストロングパラメーターとは、指定したキーを持つパラメーターのみを受け取るように制限するものです。

ストロングパラメーターを使用する理由は、受け取るパラメーターを制限しなければ、仕様以外のパラメーターも使われてしまうためです。この状態だと、意図しないデータの更新をされる可能性が発生します。

たとえば、他人のログインパスワードを変更するパラメーターを追加で送信すれば、勝手にパスワードを変更できてしまうのです。

これを回避するために、ストロングパラメーターを使用し、パラメーターを制限する必要があります。

今回はプライベートメソッドとしてストロングパラメーターを定義しました。

プライベートメソッドを使用することで外部から呼ばれては困るメソッドを下売りできたり可動性が向上します。

例えば、繰り返し同じメソッドは集約できるのでコードがシンプルになります。

ここまで前回では記述しなかった内容を学びましたが長くなりそうなので今回はあとバリデーションについて話して終わりにしようと思います。

バリデーションとはデータを登録する際に、一定の制約をかけることをいいます。例えば文字数制限や登録されているメアドは登録できないなどをモデルディレクトリ内の各ファイルに記述する必要があります。

これで欲しい情報のみをデータベースに保存できるようになりました。

今日の復習内容は以上になります。

では！！

オリジナルアプリの作業内容と最近思ったこと

お疲れ様です！

今日はオリジナルアプリでREADME.mdにデータベース設計をマークダウン記法で記述していましたが要件定義やアプリの機能や概要など簡単な説明の雛形を作成しました。

自分でアプリケーションの説明を記述していて思ったのは要件定義の際にもっと深くユーザー視点で考えながらオリジナルアプリの作成を進めればよかったなと感じています。

ただ、今は転職をするためにアピール材料として作成しているのでこういうちょっとしたことはメモなどにも残して、次回アプリを作成する際や実際の業務で同じ後悔をしないように意識していきたいと思います。

今週でプログラミングスクールのカリキュラムも終了して本格的に転職活動も始まるので悔いを残さないように学習に励もうと思います！

また、学習の合間に転職活動の準備も行い気持ちのいいスタートダッシュを切れるようにがんばります！

今日は少し短いですがこの辺で終わりにします！

ありがとうございました！

Ruby on Railsについての基礎と学びながら実装したアプリケーションについて

お疲れ様です！

今日はrailsについて学びながら最初に作成した簡単なアプリについて復習がてら話していこうと思います！(土日の学習内容)

実際に作成したアプリはコメント投稿アプリです。

railsコマンドを使用してアプリケーションの作成をします。この時、-dオプションも使用してデータベースの管理システムをmysqlにしました。

基本今までmysqlで作成しています！

アプリを作成したらまずrails db:createでデータベースを作成します。作成したSequel Proでデータベースの中身をわかりやすく視覚化して確認できるように

しています。

ここでRailsアプリケーションの流れを学びいざアプリ開発の一歩目を踏み出しました！

流れとしてリクエストに対してルーティングで振り分け、コントローラーでリクエストを処理してクライアントにビューをレスポンスとして返します。

この時にデータベースにあるデータを取り出したりまたは保存する際などはコントローラーからモデルを通してコントローラーに戻りビューに流れるといった感じです。

言葉足らずもしくは違うと思った方はコメントお願いします！

ではアプリ開発に移ります。まずはルーティングの設定から行いました。この時にルーティングの設定の記述方法は色々と種類があるので是非調べてみてください。

次にコントローラーを作成しました。

この時に自分でファイル作成するのではなくrails g contorollerコマンドを使用して作成するとエラーが少なくなります。

例えばファイル名にスペースが入ってしまったりclass名の記述ミスがあったりと最初からつまずいてしまうのでできるだけ避けるために使用していました。

ちなみにrails g controller コントローラー名(複数形) index

とするとコントローラー内にindexアクションが生成されます。

次にビューの作成を行いました。

この時ブラウザに表示できるのはHTMLファイルだけですがrubyを埋め込むことができるERBというテンプレートエンジンという仕組みを使用します。

実際にRubyの記述を埋め込む際は<%= Rubuコード %>という形で画面上に表示できるようにします。

また、今まで学習してきた条件分岐や繰り返し処理など表示しない記述の場合は

<% Rubyのコード %>と行った形で記述します。

次に投稿した内容つまりデータを管理するためにモデルの作成を行いました。

この際にコントローラーでの使用したrails gコマンドを使用しました。

モデル名は命名規則により単数系で入力しました。

モデルを作成するとマイグレーションファイルも作成されるのでカラム名やカラムの型を編集してマイグレーションを実行しました。

次にトップページは完了したので次は新規投稿ページを作成します。

先程と作成する順序は一緒ですが新規投稿となるのでnewアクションを使用します。

また、先程と違う点はフォームを作成してデータを送信できるように編集する必要があります。

Railsではヘルパーメソッドを使用してフォームやリンクの実装を行います。

実際に慣れてくるとパスの指定やRubyの埋め込みなどの記述がシンプルになるので可読性も上がりました。

フォームが完了したらサーバー側のアクションの追加などを行って無事データベースに投稿内容が表示され保存も完了しました。

今日の作業内容は夜にあげます！

明日の復習内容はさらにアクションを増やした写真投稿型アプリの学習内容について話せればなと思います。

では！！

Ruby基礎中の基礎を復習

こんばんは！

今日はRubyの復習した内容といつも通りオリジナルアプリの進捗を書いていこうと思います！

よろしくお願いします。

・値

Rubyには値というものがあります。

これは数字や文字など、プログラムで扱うデータのことです！

また、値の種類を明確に分けて扱います。

例えば文字列という値は文字を扱うものです。

文字列生成のためには"(ダブルクォーテーション)または'(シングルクォーテーション)で囲みます。

また、違う文字列同士を連結させたい時は+(プラス)でつなぎます。

次に学んだのがメソッドです。

メソッドはプログラミングにおける何らかの処理をまとめたものです。

プログラム中にメソッド名を記述するとそのメソッドの処理を実行できます。

色々なメソッドがあるので今回は割愛します。

ちなみに最初に知ったメソッドはlengthメソッドで文字列の数を数えてくれるものです。

また、文字列とは変わって数値(数を表現する値)も値として扱えます。

実際に演算子などを用いて比較したり計算したり可能です。

・変数

Rubyには変数というものがありこれは値を入れる箱のようなものです。

この箱に名前(変数名)をつけて何回も同じ値を使ったりと記述の短縮が可能です。

実際にアプリを作るときはインスタンス変数をよく使いました！

これについてはまた今度更新します！

あと今まで数学での＝(イコール)って等しい意味を持っていましたがプログラミング言語では右の値を左の変数に代入するといった意味で最初はすごい困惑しました。

　　　　　　　　↓

　　解釈間違ってたらすみません！

あと命名規則があってとりあえず最初は慣れないけど数をこなしているうちに慣れたなーと思いました。

・配列

配列についてですがこれは複数の値を順番で管理できるものです。

その順番を添字というんですけどこれが本当に慣れない！！

0から数えるなんて正直今でもなんか気持ち悪く感じます。汗

ですがこれはかなり大事でプログラミングする際は重要です！

・ハッシュ

上記にあるとおり配列は順番で値を管理しますが性質の異なる値を管理したい場合はハッシュというものを使います。

ある値に対して名前をつけて管理します。

値(データ)をバリュー、それに対応する名前をキーと言います。

例えばクラスの生徒の情報で名前と身長をそれぞれ区別しながら管理できるという便利なものです。

・条件分岐

次によく使うのが条件分岐です。

色々と種類がありますが今回は特に使うif文についてです。

if文の後に条件式を書いてそれがtrueかfalseか判定して処理を行うものです。

自分でアプリ開発をする際によくログイン状態などによってボタンの表示を変えたりデータを保存できたかでページ遷移する際によく使います！

・繰り返し処理

これはそのまま同じ内容の処理を繰り返し行うものです。

timesメソッドが指定した数だけ処理を繰り返しeachメソッドが配列やハッシュの要素　1つ1つに繰り返し処理ができるメソッドです。

実際にアプリ開発の際には例えばユーザーの投稿内容を一覧で表示する場合に僕は使用しました。

また、メソッドは自分でも定義できます。

def メソッド名

  実行したい処理

end

というように定義します。

これはアプリ開発でめちゃめちゃ使います。

最初知った時はあまり使わないとか勝手に思い込んでしまっていて実際に使うときにすぐに復習してました。

あと特にはじめたての頃によく起こしていたエラーがスコープによるものでした。

スコープは定義した変数が使える範囲のことなんですけどこれがややこしくてメソッドの中で定義したものはメソッド外では使えず、逆を同じです。

さらに引数というものがあり、外で定義した変数をメソッドで扱えるようにするもので時間をかけて理解していた気がします。

とりあえず復習内容はこの辺にしておいてなんと今日はオリジナルアプリの地図機能が

進みました。公式リファレンスやキータ使って悩みながら取りあえす地図の表示に成功しました。あと地名とか建物名を入力して経度、緯度から検索位置を割り出すことに成功！

めちゃくちゃ気持ちよかったー！！

あとはルート検索機能！

絶対苦労しそうでけどこれもプログラミングが楽しく感じるおかげだなと思います！

もっと早くにプログラミングに出会っていたかったなと思いますが後悔しても何も変わらないので前進あるのみ！

それでは今日もありがとうございました！

ターミナル操作とオリジナルアプリの状況

今日はターミナル操作について復習しました。

僕は今まで、生きてきて初めてターミナルというアプリケーションがあるということを知りました。

ターミナルとは何かという話ですが簡単に説明するとPCに命令をすることができるツールのことです。

初めて知った時はだから？という感じでしたが普段から僕はパソコンに命令しながら仕事をしていたことを初めて説明を聞いて知りました。

特に使っていたのがGUI(グラフィカルユーザインターフェース)というものでグラフィックを用いて操作を行う仕組みのことです。

例えばマウスでファイルをダブルクリックして開くなど。

でターミナルではその逆であるコマンドライン (または コマンドラインインタフェース：CLI )を使用して命令します。コンピュータに対してキーボードからコマンドという文字を打ち込んで操作を行うツールのこと！

実際にLInuxコマンドを入力してPCに様々な命令を与えます。

pwdコマンド

カレントディレクトリのパスを表示するコマンド

lsコマンド

ディレクトリやファイルの一覧を表示するためのコマンド

cdコマンド

カレントディレクトリを移動するときに使うコマンド

と学習中によく使っているコマンドを共有します。

こんな簡単なものも最初は全く知らず本当に自分は無知なんだと感じました。

本日のオリジナルアプリの状況

今日は元々取得していたGoogle Maps APIを使って地図機能の実装を行いました。

地図を表示するまではいいペースで作業が進みましたがどうしてもルート検索機能などを実装しようとすると地図が表示されなくなってしまう...

エラー文でないのが一番辛いな笑

とりあえず公式リファレンス確認しながら実装がんばります！

今日は22時頃までやろう！！

ではまた明日！

HTMLとCSSの基礎中の基礎復習

今日は随分前に学習したHTMLとCSSの復習を行いました。

まず、HTMLには要素というものがありそれが積み重なって構成されている。

そしてこの要素を囲っているのがタグになります。基本はこの開始タグと終了タグに囲まれて要素は表現されます！

<開始>要素</終了>

上記のような形！

また、HTMLは実際にどのような要素で構成されているかというと大きく分けてhead要素とbody要素になる。

head要素には、ウェブサイトの基本情報つまり設定のような記述を書き込む。

body要素には、実際にブラウザに表示される情報を記載します。

特にhead要素にはDOCTYPE HTMLというこれから記述していく文章がhtmlであるという宣言する要素を記述し、html要素にて文章の始まりと終わりを示す要素を合わせて記述する必要があります。他にも文章に関する情報やタイトルに関する記述などありますが今回は割愛します。

次にbody要素ですがこちらはテキストに関する情報を記述していきます。

例えば見出しや文章をリスト形式にしたり、テキストをリンクにする記述などもあります。

後、学習するときに特に用いたのがコメントアウトです！

これは記述したものを無いものとして扱うことができるものです。メモとして残せる機能の方が正しいかな？

何かコードを記述した際にコメントを残すことで復習する際などに特に役立ちました！

実務でも使うのかな？

まあでも複数人で開発するときにコメントがあると分かりやすい部分とかもありそう...

次にCSSについてです。

CSSを実際に適用させるにはhtmlのhead要素にファイル読み込み用の記述を行います。

CSSにはセレクタというものがありこれはCSSによる装飾をどの部分のHTMLに適用するかを選択するための記述です。

セレクタを記述後にプロパティを記述します。これはセレクタの何を変えるのかを選択するための記述です。

テキストの大きさや色を変えて装飾を行います。

初めて学んだ時はとにかく自分の入力した通りにブラウザが変わるのが楽しく夢中になってコードを記述していましたが実際にレイアウトを作る時が苦労したなと思いました。コードを書いているのによくわからない位置にレイアウトしてしまったりと...

そんなときに一瞬で少し成長を感じたことがありました。それがボックスモデルというものを学び理解した時です。これをイメージして頭の中で積み木をしていくイメージで作業を進められるようになりました！

これはかなり重要だなと感じたので共有しておきます。

それと今日は求人情報の確認とオリジナルアプリの投稿検索機能の実装を行なってました！

form_withを使って実装しました。

今まで学習してきた内容を元に実装したのであまり時間はかかりませんでしたが初めて触れた時はめちゃくちゃ時間かかっていたなと思います。でも毎日10時間も勉強すると必ず成長するんだなと自分でも思いました。

プログラミングを学習するまではほとんど知識もなかったけど新しい知識を学んでいくって本当に楽しいことだなと思いました！

今日は岩盤浴に行ってリラックスしたいので学習も20時で終了しようと思います。

それでは！！

プログラミング学習について

お疲れ様です！

今日はAction Cableを用いた、リアルタイムチャットアプリを作成と転職活動時にアピールになるかもしれないオリジナルアプリの作成をしていました！

まずAction Cableについてです。

Railsのアプリケーションと同様の記述で、即時更新機能を実装できるといったフレームワークです。実装内容としては、メッセージの保存や送信に必要なRubyのコーディングと、保存したメッセージを即時に表示させるJavaScriptのコーディングを行いました。

また、Channelをという仕組みを使ってデータの経路を設定したりします。

Channelを作成後stream_fromメソッドのコメントアウトを解いてサーバーとクライアントを関連付けました。

また、上記のstream_fromメソッドで関連付けられるデータの経路のことを、broadcastと呼びます。

これらを編集後JavaScriptを記述してとりあえず実装！！

次にオリジナルアプリですが今フロントの実装をしています！

先週サーバーサイド側の実装を行いましたが地図機能をGoogle Maps APIを使用して実装しようとしましたが地図の検索機能までは実装できたのですがどうしてもルート検索機能が実装できず...

時間をかけすぎて何も進まないのはまずい！！

とりあえず今の目標は無事エンジニアとして転職することだ！！

と自分に言い聞かせてとりあえずフロントにうつりました。

ここ2ヶ月でサーバーサイドを中心に学んでいたのでビューの編集がとにかく大変！

でもデザインって考えているとウキウキするので楽しくも感じます。

そんなこんなでとにかく2回目の投稿とします。

なんかただの日記みたいになる気がしますがアウトプットとして使っていこうと思います！

明日からは毎日の作業のアウトプットと2ヶ月で学んできたことを復習がてら少しずつアウトプットしていこうと思います！