2018-09-08

Rails 投稿一覧ページ作成

プログラミング Rails

f:id:takayanagi-prg:20180908041615j:image

今日は昨日に引き続きTwitterクローンアプリの作成をやりましたが、どうでもいいところでつまづいたりして投稿の新規作成(ProgateでいうところのRails Ⅲ章)までしか出来ませんでした…泣

今日実装出来たのは、

投稿一覧ページの作成

投稿詳細ページの作成

新規投稿ページの作成

その中から今日は復習も兼ねて投稿一覧ページ作成の一連のの流れを書いていきます(ターミナルで行うコマンドは青色で書きます)

最初に

昨日の続きでルーティングは

get 'profile' => 'profile#index'

get 'about' => 'profile#about'

コントローラは

def index

end

def about

end

ビューはindex.html.erbのみになります。

これらはトップページを表示するためのものになります。

投稿一覧ページ

投稿一覧ページを作成する際に、まず新しいコントローラを作る必要があるのでターミナルで

rails g controller posts index

と入力します

そうするとposts/index のルーティング、コントローラ、ビューが作成されて、投稿一覧を作成するための土台が出来ました。

そうすると今度は投稿の情報を送信して保存したり、引き出したりするためのDB(データベース)にマイグレーションファイルの作成をする必要があります

rails g model Post content(カラム名):text(データ型)

こちらを入力したら、DBの変更が行われたのでDBの変更があった場合は忘れずに

rails db:migrate

を入力しこれで投稿の情報が表示出来る準備が整いました

投稿の作成はターミナルで

rails console

を起動し、

post1(好きな変数) = Post.new(content(カラム名): '好きなものを代入する')

を入力し、

post1.save

を入力して投稿を保存します

DBを扱う時はデータの変更がある度に保存コマンドを入力してください(ファイルを上書き保存する際のcommand+Sのように)

次はDBに保存された投稿データを全て取得するためにまずコントローラに

def index

@posts = Post.all

end

と定義します。

そして投稿が一覧で表示されるようにビューの'posts/index.html.erbファイルに

<% @posts.each do |post| %>

<div 〜 >

<%= post.content %>

</div>

<% end %>

を入力したら投稿一覧は完成です！

(post.contentのcontentはここではDBに保存されてるカラム名で情報の中身を表しています)

写真や画像が無いせいでわかりにくくてすみません😔

一応今日の記事は備忘録的なものなので…(言い訳)

もし気が向いたらProgateのRails チュートリアルを全て書いていきたいです

本日も読んでくださりありがとうございました！

ではまた明日

追伸

本当はⅤ章の投稿情報の編集&削除まで実装したかったですが、出来なかった言い訳を聞いてください。

睡眠不足により途中から集中が出来なかった
HTML&CSSが思った通り書けずに時間が凄くかかった
サイトデザインを考えだすとこれまた時間がとてもかかる

HTML&CSSとかはLPですらまともなものを作れないので模写とかして練習する必要がありますね…

(特に苦手なのは親要素と子要素によるあらゆる数値の指定やポジションの変更とか)

2018-09-07

100DaysOfCode Day.1

Rails プログラミング

こんばんは🌚

日付は変わってしまいましたが9/6(木)の1日に学んだことを書いていきます。

今日やったことは

Railsの環境構築
Railsの立ち上げ
コマンドラインの復習

です。

まずはこちら↓

今日は@yoshito410kamさんの記事の通り進めてRailsのインストールからwebアプリの立ち上げまでしてみました。
ターミナルのコマンドに少しつまづきましたが無事作成する事が出来ました！
Progateの復習を兼ねて明日にはツイッタークローンアプリを完成させたいと思います💪#rubyonrails https://t.co/5pQ5XRbtDM
— Yanagi@初心者プログラマー (@yanagi_prg) 2018年9月6日

Railsを実際に自分で立ち上げてwebアプリ?を作り始めました。

ProgateのRailsを2~3周してⅠ~Ⅴまでなら8割程理解しここら辺でアウトプットをしたいと思い、そろそろRails tutorialでもやろうかなと思っていたところ、こちらの記事を見つけRailsをターミナルで立ち上げてTwitterのクローンアプリを作ってみることにしました！

今日やった流れはこちらです。

まずは上のツイートの記事の中にあるqiita【2018年版】Rails5の環境構築 for Mac(こちらも神里さんによる有難いチュートリアル)からコピペをしまくりRailsの環境構築をパパッと終わらせました。(Xcodeがインストール済みだったので5分ないくらいで終わった)

そしていよいよRailsを立ち上げるため記事に沿って進めていったところ、アプリを作成したいフォルダをターミナルで" cd ~/フォルダ名 "と書く際にFinder内の既存のフォルダ名を書いても-bash not found(見つかりません)ばかり(-_-)

それで色々ググってみるも解決方法は出て来ず…

結局mkdirで自分でフォルダを作成しそのフォルダをFinder内の検索で見つけ出し元々入れたかったフォルダの中へ手動でドラッグ&ドロップし何とか乗り切る。

この時にコマンドラインの復習を兼ねて色々と調べました

初心者でも覚えておきたい基本的なUNIXコマンド一覧20 | TechAcademyマガジン

Progateのコマンドライン講座

https://prog-8.com/lessons/commandline/study/1

つまづいたのはここだけで後は分かりやすい記事の通りに進めて無事Railsを立ち上げる事が出来、トップページまで作成完了！

f:id:takayanagi-prg:20180907031007j:image

(トップページは自分のPortfolioサイトを作りたいと思っていたのでこういう風になっていますが、Twitterクローンアプリを作るにあたっては投稿機能などの実装などを考えるとPortfolioサイトとの相性が良くないと思い、Portfolioサイトはまた別の機会に作りたいと思います。)

追記

ブログとTwitterを始めて1日目から多くの反応やPVを頂きました

ありがとうございます😭🙏

ブログの記事は慣れないのもあってか1000字書くのに1時間程かかるので毎日書くのはかなり大変ですが何とか維持していきたいです。

これからも応援よろしくお願いします！

コメントもどんどんください！

2018-09-06

ブログ開始時のスキル💻

プログラミング自己紹介

この記事ではブログ開始時点での

現在のプログラミングのスキルレベル
今までに学習した教材や講座
今目指している目標

を書いていきたいと思います。

まず現在のプログラミングスキルについては、

HTML&CSS ・・・基本的な文法などは覚えていて理解出来るが、positionの重なり具合、幅の調整等の理解度に不安があり、1人では満足にサイトデザインを出来ない状態。
JavaScript・・・JavaScriptは基礎文法を一通りやったくらいで正直今のところは何に使うのかがわからない。理解度も浅め。
jQuery・・・コピペでアコーディオンメニューなどがかろうじて実装出来るくらいで、画面固定のパララックスとかは少し前に試してみたが出来なかった。
Ruby・・・基本的な文法は抑えているつもりだが、インスタンスやメソッド等の理解が浅いと思う。
Rails・・・初めはほとんど理解出来なかったが、最近Progateで何周もやっているおかげかTwitterクローンアプリの"投稿"や"ユーザー"の一覧~編集まである程度理解出来るようになってきた。