SuzuBlog

webのお勉強はじめたばかりの初心者。備忘録

Rails Modelの規約・命名規則

Modelの規約、命名規則メモ モデル名とテーブル名の規約 英大文字から始まる 英数字のみ 単語の区切りでは、先頭文字を大文字 単数形の名詞 ファイルはapp/modelsディレクトリに格納 ファイル名は、モデル名の単語区切りを「_」にし、すべて小文字にしたもの…

Rails URLにidや特定にパラメータを含める

URLにidや特定にパラメータを含める 投稿の詳細画面や、ユーザーのプロフィール画面等、同じ表示でパラメータ毎によって表示を変えたいときは、 config/routes.rbで以下のようにルーティングを行う get "posts/:id" => "post#show" ただし、posts/index のよ…

Rails ルートパスの設定

ルートパス"/"への設定 config/routes.rb Rails.application.routes.draw do get "/" => "home#top" end のようにroutes.rbファイルで"/"を設定することで、rootへのルーティングが可能。 この場合は、rootパスが呼ばれた時に、home#topアクションが実行され…

Rails基礎 Active Recordの基本操作(メモ)

実行結果・実行されているSQLを確認するための自分用メモです。 作成~登録~更新~削除 新規オブジェクトの作成 #新規オブジェクトを作成 >> user = User.new(name: "Michael Hartl", email: "michael@example.com") (0.1ms) begin transaction => #<User id: nil, name: "Michael Hartl", email: "michael@example.com", created_at: nil, updated_at: nil> create</user>…

RailsでBootstrapを導入する

RailsでBootstrapを導入する方法 メモ書き程度の備忘録。 最初に一度やるだけの手順ってどうしても繰り返しにくいから忘れがちなんだよなぁ~ってことで… Gemfileにbootstrap-sassを追加 gem 'bootstrap-sass', '3.4.1' BootstrapではLESS CSS言語を使用して…

Rails基礎 削除機能の実装(destroy)

削除機能(destroy)の実装 getやpostはリンクを作るときに特に指定しなくてもRailsがいい感じに解釈してくれていたが、DELETEの場合は明示的に指定してあげる必要がある。 Postモデルがあったとして、その削除機能のリンクを作るときは以下のようになる <%= l…

Rails基礎 フォームの共通部品(partial)

partialとは? 複数の画面で同じ部品を使用している場合に、その部分を切り出してpartialファイルに置くことで、 使用するviewで呼び出すだけでその部品を展開してくれる仕組み。 _(アンダーバー)から始める慣例があるため、_名前.html.erbというファイルを…

Rails基礎 ストロングパラメータとバリデーション

今回はユーザーの入力値チェックを行う機能について書いていく。 ストロングパラメータとは? WEB上でユーザーが送信してきたパラメータの内容をチェックしてから受け取る仕組みのこと。 悪意のあるデータを事前に防ぐことができる。 事前に受け付ける項目を…

Rails基礎 フォームヘルパー(form_for)

フォームヘルパーとは? Railsでフォームを作成するためのヘルパー。 これを使用すると簡単な記述でフォームを作成することが可能になる。 内部ではHTMLを生成してくれる。input、textarea、submit等 form_for form_tag form_with と3種類用意されているが…

Rails基礎 link_toヘルパー

link_toとは viewでリンクを表示させることが出来る。最終的には<a>タグを生成して表示される。 helperメソッドの1つ。 link_toメソッドに表示させたい文字列とリンク先を引数として渡す必要がある。 link_to '表示させる文字列',リンク先のパス(URL) URLを指</a>…

Rails基礎⑥ ビューの作成

ビューの作成 例えば、postsコントローラーのindexアクションに対応するviewはapp/view/posts/index.html.erbというファイルを作成する。 ERBとは? Railsが用意しているテンプレートエンジンのこと。 これを使用することで、 <% %>でRubyのソースコードとし…

Rails基礎⑤ コントローラーの作成

コントローラーの作成 $ rails g controller [コントローラー名] Controllerでは複数のデータを扱うため、コントローラー名は複数形、頭文字は大文字にすること。 主に、controllerディレクトリにxxx_controller、viewディレクトリに新しいディレクトリ、テ…

Rails基礎④ 初期データの管理

DBの操作・確認 DBへの接続 $ rails dbconsole もしくは、 $ rails db デフォルトはSQLiteとなっている。 テーブルの確認 sqlite > .tables モデル名Postのデータを確認する sqlite > Select * From Posts; ※テーブル名は複数形であることに注意。 DB操作か…

Rails基礎③ モデルの作成

モデルの作成 $ rails generate model 名前 [カラム名:型] [オプション] generateはgで省略することが出来るので、以下のようにも書ける $ rails g model 名前 [カラム名:型] [オプション] データ型 データ型 説明 string 文字列 text 長い文字列 integer 整…

Rails基礎② scaffold

scaffoldを使用して雛形を作成する scaffoldとは? Railsアプリケーションの作成時には モデル・ビュー・コントローラー 更にそれに対するルーティングを作成する必要があるが、 その作業をまとめて行い、雛形を作成してくれる機能。 やってみる Railsアプリ…

Rails基礎① Railsのインストール、サーバーの立ち上げ

Railsのインストール Railsを動作させるにはRubyとデータベースが必要 バージョンの確認 $ Ruby -v $ sqlite3 --version Railsのインストール $ gem install rails --no-document Railsのバージョン確認 $ rails -v アプリケーションの作成 $ rails new appn…

Ruby基礎④

アクセス権 共通 #アクセス権 # -public =>デフォルト、どこからでも呼び出し可 # -protected # -private: レシーバーを指定できない # publicでもnewしたときに呼ばれるinitializeメソッド、クラスの外に書いたメソッドは自動的にprivateになる class User …

Ruby基礎③

ループ処理 while i = 0 while i < 10 do puts "#{i}: hello!" i += 1 end 出力結果 0: hello! 1: hello! 2: hello! 3: hello! 4: hello! 5: hello! 6: hello! 7: hello! 8: hello! 9: hello! times 10.times do |i| puts "#{i}:hello" end #1行であれば省…

Ruby基礎②

ハッシュ Key/Valueで管理する 省略記法があるので、 以下の3パターンはどれも結果が同じになる scores = {"tanaka" => 200, "suzuki" => 300} scores = {:tanaka => 200, :suzuki => 300} scores = {tanaka: 200, suzuki: 300} 出力 p scores[:suzuki] 値…

Ruby基礎①

1年ぶりに勉強再開。 ドットインストールの内容メモ 出力メソッド printメソッド 改行なしで値を出力 putsメソッド 改行付きで値を出力 pメソッド 値に加えて型情報も出力される 文字列はダブルクォーテーションで囲まれたまま出力されるような感じ printf …

Bootstrapを使用して簡単な問い合わせフォームを作る

Bootstrapを使用して簡単な問い合わせフォームを作る Bootstrapを使用するとCSSの記述をほぼすることなく、問い合わせフォームを作ることが出来ました!(送信ボタンは機能しませんのでご注意ください) See the Pen JjjvWQL by すず@progateでお勉強はじめ…

JavaScript基本【DOM操作基礎】

JavaScript基本【DOM操作】 DOMとは? DOMとは、JavaScript等でHTMLの操作を行うこと。 Document Object Modelの略で、ドキュメントをオブジェクトのように扱います。 値を変更したり、色を変えてみたりといった操作が可能になりますので、HTMLの表現の幅が…

「レガシーコードからの脱却」を読んで

www.oreilly.co.jp 読み終わりましたので簡単に感想を書きたいと思います。 読みやすい! 正直、私のような初学者は翻訳された本というだけでもとっつきにくい上、オライリー本は更に難しく思えてしまうのですが、 そんな私でも、途中で挫折することなくスラ…

Vue Routerについて

Vue Routerについて Vue Routerとは? Vueを使用してシングルページアプリケーションを作るならほぼ必須の機能。 シングルページアプリケーションで表示させる内容を動的に変化させると、閲覧・操作の履歴が残らないことが多かっ。、 Vue Routerは履歴を持つ…

JavaScript【配列とオブジェクト&その他】

JavaScript【配列とオブジェクト】 map、filter See the Pen WNNOzyE by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen. mapは、配列の中身それぞれに指定された処理を施した新しい配列を生成し返してくれます。 この例では、配列の中身を全て2…

Vue.js【算出プロパティ】

Vue.js【算出プロパティ】 算出プロパティとは? ↓こちらの記事がとてもわかりやすかった! qiita.com 常に更新する必要のない値に関してはとても有効なようなので、使用すべきタイミングを見て適切に使っていきたい! ということで、ちょっと勉強してみます…

Vue.js【配列操作】

Vue.js配列操作 配列に要素を追加 See the Pen VwwbLgJ by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen. 配列から要素を削除 See the Pen bGGWVdW by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen. v-forの中の(item,index)と…

Vue.js 【イベントハンドリング】

Vue.js 【イベントハンドリング】 イベントの購読 See the Pen YzzVzNy by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen. 上記はClickイベントでcounterの値を+1していくプログラムです。 イベント発火時にJavaScriptが動いているのがわかりま…

Vue.js【クラスとスタイルのバインディング】

Vue.js【クラスとスタイルのバインディング】 クラスのバインディング v-bind:classにオブジェクトを渡すと、クラスを動的に切り替えることが可能になります。 See the Pen dyyvpJm by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen. 上記の例…

Vue.js【コンポーネントについて】

Vue.js【コンポーネントについて】 処理をコンポーネント化する=部品化する、という考えで良いのかな? 他の場所でも使いまわしできるように処理をコンポーネント化するために、今日は勉強していきます。 コンポーネントのグローバル化 See the Pen BaapBdp…