作成する機能を把握する 今回作成する機能は以下の画像のような機能。いままでのpictweetのコメント送信機能と異なるのはajaxを使って非同期通信で行っている点である。 作業ディレクトリを以前に完成させたpictweetに移動 ターミナル 1 2 3 $ cd #ホームデ…

非同期通信を学ぶために、簡単なToDoアプリを作成する。 まずはそのアプリケーションの準備をする。 作成するアプリケーションを把握 今回作成するアプリケーションは以下の画像のようなTodoアプリ。これまで作成してきたRuby on Railsのアプリケーションと…

Webアプリケーションの統合テスト モデルの単体での機能のテストであったり、コントローラの特定のアクションのテストを書く方法までで記述してきたのはあくまで単体テストである。 特定の機能・バリデーションなど、単独では予測した仕様になっていることは…

モデルのテストのステップ モデルのテストを完成させるためのステップは以下の通り。 RSpecの導入 その他テストで使うgemの導入 RSpecでテストを行う 1. テストで使うgemの導入 まずは、テストで使用するGemをアプリケーションに導入する。 問題1：テストで…

コントローラーのテストとは、コントローラー内のメソッドであるアクションが呼ばれた際の挙動をチェックするものになる。1つのアクションにつき、以下の2点を確かめる。 1.アクション内で定義されているインスタンス変数の値が期待したものになるか 2.アク…

factory_bot 簡単にダミーのインスタンスを作成することができるGem。他のファイルで予め各クラスのインスタンスに定めるプロパティを設定しておき、specファイルからメソッドを利用してその通りのインスタンスを作成する。factory_botを利用すれば、user_sp…

RSpecの準備をする Pictweetのテストコードを書いていく。まずは「rspec-rails」というGemをインストールし、RSpecを利用できるようにする。続いて、RSpecの設定を行う。その後、実際にRSpecのコードを書きながらRSpecの基礎文法を学ぶ。 Gemをインストール …

テストとは プログラミングにおけるテストとは、「プログラムが意図した通りに動くことを確かめる」ことを言う。このテストもまたプログラムによって行っているが、便宜的に、本番の環境で実際に作動するプログラムを「プロダクションコード」、テストを行う…

メッセージ送信機能実装のステップ モデルを作成する ルーティングを設定する 該当するアクションをコントローラに定義する メッセージ送信機能を実装する グループにメッセージを表示する サイドバーに最新のメッセージを表示する ヘッダーを修正する グル…

実装する機能 グループの新規登録・編集機能を実装する。 「グループの新規登録」画面で、「グループ名」と「所属メンバー」を入力して登録できる機能を実装。所属メンバーは、アカウントを作成している全メンバーが表示されるようにする。 そのために、「グ…

ユーザー管理実装のステップ ユーザー管理機能を以下のステップで実装する。 deviseのインストール Userモデルを作成する deviseのビューファイルの追加 サインアップ機能の追加 ユーザー情報編集機能の追加 ログアウト機能の追加 フラッシュメッセージの表…

（検証ツールの使い方） 検証ツールを使えば、クラスの構造を確認し、どんなCSSがあたっているか確認できる。自分で作ったサイトのフロントがしっかり作られているか検証ツールを使いながら確認する。 フロント実装がわからなくなった時の対処方法 検証ツー…

ルーティングの設定を行う 仮のルーティングを設定する。ルートパスへのアクセスがあったら、messages_controllerのindexアクションが呼び出されるようにする。 ルーティングを以下のように設定。 config/routes.rb 1 2 3 Rails.application.routes.draw do …

以下のように3つのSNSサービスにリンクするアプリケーションを実装していく。 各リンクは以下のページへリンクしている。 1 2 3 https://www.facebook.com/ https://twitter.com/ https://www.instagram.com/ 実装は以下のステップで進めていく。 railsの新…

Hamlを導入 まずは、HTMLをより効率的に書けるようになるビューのテンプレートエンジンを導入する Hamlとは Hamlとは、HTMLよりも簡単に書くためのビューテンプレートエンジン。公式サイトによると「マークアップは美しくあるべき」という原則に基づいて開発…

BEM BEMとは、多くの開発者が取り入れているCSS設計。BEMは、厳格なクラスの命名規則が特徴。BEMはBlock、Element、Modifierの頭文字を取ったもので、ページを構成する要素をBlock、Element、Modifierのどれかに当てはめてクラスを命名する。 CSS設計 CSS設…

Sassとは SassとはCSSの機能を拡張した言語。Sassを利用することで、CSSを効率的に書けるようになる。SassはCSSに非常に似ているが異なる言語である。CSSを簡潔に書けるだけではなく、CSSの中で変数を使ったり、計算を行うことなどができる。 Sassファイル S…

ChatSpaceの機能を洗い出す ChatSpaceを使ってみて、どのような機能があるか洗い出す。先に必要な機能を把握してからデータベース設計をする。 例）Pictweetの場合 ユーザー管理機能 ツイート機能 コメント機能 必要なテーブルを考える 機能ごとに必要なテー…

正規化はなぜ必要なのか 以下のような生徒とその生徒が受ける授業を管理するためのテーブルがあったとする。 id student homeroom class1 class2 class3 0 田中太郎 2-4 国語 英語 数学 1 鈴木次郎 3-5 英語 物理 数学 テーブルの問題点 このテーブルには問…

テーブルとエンティティ エンティティとは現実世界の概念をデータベースで扱うデータとした場合の呼び名。エンティティをデータベースのオブジェクトに変換するとテーブルになる。つまり、「エンティティ = テーブル」と考えてほとんど差し支えない。 成績管…

データベース設計とは データベースの設計とは、作成するサービスやシステムに必要な情報をどのようにデータベースで管理するかを決める作業である。データベース設計をしっかりと行うことで、サービスが複雑になった場合でもより効率的かつ簡易的にデータの…

データの結合 例えば、ユーザーのフルネームの一覧を取得したいとする。フルネームは"family_name"と"first_name"から成るので、以下のようなSQLを書くことが出来る。 1 2 SELECT family_name, first_name FROM users すると実行結果は以下のように表示され…

データの準備 テーブルにあるデータの検索のために、まずはデータの入ったデータベースを用意する必要がある。 今回はこちらでデータの入ったプロジェクトを用意してあるので、以下の手順からデータの入ったデータベースを作成する。 現在mysqlに接続してい…

ターミナルを再起動した場合は以下のコマンドからデータベースを選択した場面まで進む。 ・mysqlに接続 1 mysql -u root ・データベースを選択 1 USE sqltest; データを登録してみる まず、データの操作として最も基本的なのは、データの登録である。 データ…

mysqlへ接続してみる SQLを実行するために、まずはデータベースへ接続をする必要がある。 データベースを扱うために、mysqlというデータベース管理システムを使用していた。またこれまではmysqlを扱うために、SequelProというアプリケーションからデータベー…

SQL SQL（Structured Query Language）はリレーショナルデータベース（RDB）の操作を行うための言語。 リレーショナルデータベースとは、データをテーブルという表形式の構造で管理するデータベースのことで、Webアプリケーションを作成する際は一般的にリレ…

form_forとform_withの間には細かな違いはあるものの、使用感が大きく異なることはない。 自動でパスを選択してくれて、HTTPメソッドを指定する必要が無いこと コントローラーから渡された、ActiveRecordを継承するモデルのインスタンスが利用できること inp…

Rails 記法 ハッシュの記法 aタグ→link_to imageタグ→image_tag %button→button_tag パスの指定 考え方 インスタンス変数生成のコードをメソッド化 すべての操作はリソースに対するCRUD操作にまとめる DB関係 外部キーの設定 外部キーをreferences型にする …

ブランチを作成せず、masterブランチ上でコードを書いてしまった 新たにブランチを作成し、これまで書いたコードを新しいブランチに移す。コードを書いている途中にブランチを作成する際は、書いているコードを作成したブランチに引き継ぐか、0からコードを…

1. 事前準備 git-app というアプリケーションを作成し、作業を進めていく。 アプリケーションを新たに立ち上げる git-app というアプリケーションを新たに作成 以下の手順で操作をしていく。 ターミナル 1 2 3 4 $ pwd #現在のディレクトリがprojectsである…