SyosenPS

SyosenPS

備忘録　

フロント実装　ルーティング→コントローラー→ビュー リセットCSS リンク box-sizingボックス サイジングプロパティ 要素のボックスサイズをどのように算出するか指定できるCSSプロパティ if文 current_user.id == tweet.user_idと記述することで、「現在ログインしているユーザー」と「ツイートを投稿したユーザー」が同じか否かを判定 論理演算子&& 条件A && 条件Bとなっていた場合、条件Aと条件Bが共に真の場合のみtrueが

SyosenPS

    • スネークケースとキャメルケース

      スネークケースとキャメルケースは、それぞれ単語の区切り方を表したも スネークケースは、単語の区切りをアンダースコアで表す キャメルケースは、単語の区切りを大文字で表す キャメルケース　先頭が小文字で、単語の区切りを大文字で表すadminUserCommentCreator アッパーキャメルケースキャメルケースの1つ。 先頭から単語の区切りを大文字で表す AdminUserCommentCreator スネークケース単語の区切りをアンダースコアで表すadmin_use

      SyosenPS

      • GitとGitHub　よくあるエラーを体験しよう

        対策方法 ブランチを作成せず、マスターブランチ上でコードを書いてしまった しまった！ブランチを忘れてしまった💦 ブランチ(branch)は、1つのプロジェクトから分岐させることにより、プロジェクト本体に影響を与えずに開発を行える機能のこと 木の枝、支流　で覚えようかな。 新しいトピックブランチを作成してコードを移動させます。 まず、ブランチを作成 Current Bruanch main の△をクリックし、　NewBranch 名前 ブランチ作成忘れ sta

        SyosenPS

        • GitとGitHub　GitHubを用いた開発の流れを実践

          事前準備アプリケーションを新たに立ち上げるターミナル % pwd #現在のディレクトリがprojectsであることを確認 % rails 7.0.0 new git-app -d mysql % cd git-app % rails db:create ローカルリポジトリを作成してコミットするgit-appのローカルリポジトリを作成 GitHub Desktopからgit-appのローカルリポジトリを作成する。 左上の「Current Repository」→「Add

          SyosenPS

        備忘録　

        SyosenPS

          GitとGitHub〜GitHub Desktop

          GitHub Desktop wo をインストールして設定してみよう リポジトリ リポジトリとは、Gitの管理下にあるファイルやディレクトリの変更履歴を保管しておく箱 ローカルリポジトリ ローカルリポジトリとは、自分のPC上（ローカル環境）に置く リモートリポジトリ リモートリポジトリとは、外部サーバー上に置く チーム開発をしやすくするため ローカルリポジトリを作成しましょう まずはTOP画面の左下にある「Add Existing Repository...」をクリ

          SyosenPS

          GitとGitHub〜GitHub Desktop

          SyosenPS

          GitとGitHub　GitHubを使う環境を整えよう

          GitHubのサイトに移動してアカウント登録しましょう 以下のリンクからGitHubのページに移動して、「Sign up」からアカウント登録をしてください。 ※GitHubへのリンク まずは以下のリンクから、GitHub Desktopをインストールしましょう。 ※Mac版GitHub Desktopのダウンロードリンク

          SyosenPS

          GitとGitHub　GitHubを使う環境を整えよう

          SyosenPS

          GitとGitHub〜なぜ開発にGitやGitHubを使うのか〜

          コードを戻すときの問題 Gitギット ソースコードなどのファイルやフォルダの変更履歴を記録・追跡するためのバージョン管理システム GitHubギットハブ Gitの仕組みを利用し、簡単に複数人での開発ができるようにしてくれるWebサービス

          SyosenPS

          GitとGitHub〜なぜ開発にGitやGitHubを使うのか〜

          SyosenPS

          サービス設計

          設計をしよう 基本設計 要件定義の内容を、開発に必要な内容へまとめること 外部設計とも 詳細設計 実際に書くべきコードを洗い出す作業 画面遷移図 どの画面でどんな操作をしたらどのページに移動するかを図で表記したもの 手書きでも専用アプリを使っても伝わればok PicTweetの画面遷移図を確認しよう サインイン/ログインページ ・トップページ（共有された写真を一覧表示するページ） 共有された写真の詳細ページ 共有写真を追加するページ 共有された写真の編集

          SyosenPS

          サービス設計

          SyosenPS

          サービス設計

          サービスを企画し要点を洗い出そう ＞＞PicTweetの企画を確認しよう 大切なのは、どんなアプリケーションも誰かの問題を解決したり誰かの欲求を満たすものだということを意識すること。 はじめに、「誰の」という部分に着目した企画手順である「ペルソナ」という概念を知る ペルソナ ペルソナとはマーケティングの用語で、「サービスを使用するユーザー」のこと 似た言葉に「ターゲット」などがありますが、ペルソナはそれらよりも詳細に「サービスを使用するユーザー」を決める 年齢層や、

          SyosenPS

          サービス設計

          SyosenPS

          サービス設計

          アプリケーション開発の手順 企画　　　　内容考案 ↓ 要件定義　　仕様、要件洗い出し ↓ 設計　　　　DB設計 開発後にやることデプロイ 作ったアプリを外部のサーバーに移して、全世界からアクセスできるように設定 保守/運用 、動いているアプリに異常がないか定期的に確かめることや、トラブルが発生したら対処すること ↓ 開発　　　　　プログラミング言語などを使用し、開発 ↓ 保守／運用　　バグの対処、追加機能の実装

          SyosenPS

          サービス設計

          SyosenPS

          PicTweet　Railsのエラーを解消しよう

          Railsのエラー画面デバッグデバッグとは、プログラムの誤り（バグ）を見つけて、手直しすることです。 ＞＞デバッグ作業に便利なpry-railsというGemを利用 binding.pry（バインディングプライ） binding.pryは、pry-railsを追加すると扱えるようになる機能 binding.pryという記述をソースコードの中にすると、binding.pryが存在する箇所でRailsの処理を一時停止し、その状態でコンソールを起動 Gemfileに以下の記載が

          SyosenPS

          PicTweet　Railsのエラーを解消しよう

          SyosenPS

          PicTweet　投稿検索機能を実装

          検索フォームを作成app/views/tweets/index.html.erb　ファイルへ <%= form_with(url: search_tweets_path, local: true, method: :get, class: "search-form") do |form| %> <%= form.text_field :keyword, placeholder: "投稿を検索する", class: "search-input" %> <%= form.subm

          SyosenPS

          PicTweet　投稿検索機能を実装

          SyosenPS

          PicTweet　〜ツイートにコメントを投稿

          コメント機能の実装ツイート詳細画面からツイートに対して、コメントが書き込めるようなコメント機能を実装する 【重要1】 commentsテーブルを作る コメントは、ツイートが必ず所有する情報ではないため、ツイートと別のテーブルで管理するため 【重要2】 コメントはどのツイートに対してのコメントなのか、誰の投稿したコメントなのかが明示 【重要3】 userモデルとtweetモデルの2つにアソシエーションを組む Commentモデルを作成しようコマンドを実行してモデルを作成

          SyosenPS

          PicTweet　〜ツイートにコメントを投稿

          SyosenPS

          PicTweet　複数ページで利用する表示の一部をまとめよう

          部分テンプレート コードの記述量を減らすことができると同時に、管理もしやすくなる優れもの まずは、ファイル作成！ _○○.html.erbアンダーバー エイチティーエムエルイーアールビーファイル 部分テンプレートとして切り出すときに作成するファイル テンプレート自体のファイル名は、命名規則として、アンダースコア_を先頭に記述 app/views/tweets/_tweet.html.erb ファイルを作成し、indexから切り取って貼り付ける ※切り取る勇気が必要

          SyosenPS

          PicTweet　複数ページで利用する表示の一部をまとめよう

          SyosenPS

          PicTweet 表示順を並び替え

          「新しいツイートが一番上に表示する」ために順番を変更する実装。 確かに、これまでのは一番したに新しいのが表示されていたね。 ツイートの最新順表示orderオーダーメソッド モデルが使用できる、ActiveRecordメソッド orderメソッドは、テーブルから取得してきた複数のレコード情報を持つインスタンスの、並び順を変更するメソッド 【並び順】 ASC（昇順） 小さいものから大きいものになる。古いものから新しいのものになる DESC（降順） ASCの反対 ap

          SyosenPS

          PicTweet 表示順を並び替え

          SyosenPS

          PicTweet　投稿者本人のみに編集・削除を許可しよう

          ユーザーログインの有無で表示を変える実装 ＞＞「deviseのメソッドを使用し、ユーザーのログインの有無で表示を変える」など、アプリ制作において使用頻度の高い分岐を体験し、理解しよう！ ログイン中のユーザー情報取得投稿者本人か確認して表示を変えよう今のPictweetの状態だと、誰でも他ユーザーが投稿したツイートを編集・削除できてしまう💦💦大変・・・。 「ユーザーがログインしている」かつ「投稿したユーザーである投稿だけに許可」という実装をする。 app/views/t

          SyosenPS

          PicTweet　投稿者本人のみに編集・削除を許可しよう

          SyosenPS