実装したいこと Vuexのストアをモジュールに分割して読み込みたい。 アプリケーションの規模が大きくなると、ストアの規模も大きくなり管理が困難になるため、ストアを適切に分割し管理したい。 モジュール | Vuex モジュールを読み込む store/index.jsにま…

セレクトボックスを生成するときに、enumで定義した内容とリンクさせたい。 select enum status: { todo: 1, doing: 2, done: 3 } option valueにenumで定義した内容を渡せばOK <div class="form-group"> <label for="status">ステータス</label> <select name="ステータス" class="form-control" id="status" v-model="task.status"> <option value="todo">TODO</option> </select></div>

編集時のデータの渡し方 タスク管理アプリで、タスクを編集するときのデータのやり取りについて詰まったのでメモ。 親からtaskデータをpropsで受け取り、v-modelでデータを入力値をバインドしたいです。 ただし、オブジェクトが格納された変数をコピーしても…

詰まりに詰まってしまったので、メモを残しておきます。 子から親へデータを渡すとき まず、Vuexは使わない単純なやり方です。 子コンポーネントでタスク名・タスク説明文を入力し、親にデータを渡します。 そして親がAPIでその内容をPOSTします。 ※説明に必…

実装したいこと タスク一覧があり、それぞれのタスクタイトルをクリックすると、モーダルウィンドウでタスクの詳細が表示される。 データの流れ 細かいコード内容は省き、大まかな流れだけ追います。 データの流れの説明に必要な部分だけ切り取っているので…

同じミスを数回繰り返してしまったのでメモ エラー画面 「インスタンスで定義されていないのに、レンダーで参照されてるよ」とエラー vue.runtime.esm.js:638 [Vue warn]: Property or method "modalTask" is not defined on the instance but referenced du…

実装したいこと 使用バージョン 実装の流れ そもそも、APIって？ Tasks controller Routing namespace忘れでエラー発生 CSRF対策無効化 Vue.jsでAPIを使用する axiosインストール APIから取得したデータを表示（基本構文） axios設定 Vueファイル設定 curl …

実装したいこと Vue Routerを使い、画面遷移機能を実装したいです。 タスク管理アプリで、トップ画面⇔タスク一覧画面と遷移できるように設定していきます。 Vue.jsは初めて使うので、データの流れが分からず実装に時間がかかってしまいました。復習していき…

エラー発生 復習用に簡単なCRUD機能のついた記事投稿アプリを作成しています。 削除用のボタンを押しても削除されず、なぜかshow詳細ページへ遷移してしまう…。 method: :deleteで指定し、Cromeの検証画面でも正常にみえるのに… Crome検証画面 = link_to 'de…

all_day 昨日作った記事だけ取得するscopeを作りたかったとき、Date.yesterdayやTime.current.yesterdayだと想定している挙動にならない… all_dayを使う！ # NG scope :yesterday_published, -> { where(published_at: Date.yesterday) } # Good scope :yest…

実装したいこと 複数枚の画像を一度にアップロードする Model Controller View 躓いたところ アップロードした画像を削除するには Controller Rooting View 実装したいこと 以前、ActiveStorageを使って画像をアップロードする機能を実装しました。 今回は、…

実装したいこと 以前、gemのCarrier Waveを使って画像アップロード機能を実装しました。 今回は試しにActive Storageを使用してみたいと思います。 初めて使ったのですが、すごく簡単でした。 ただし、ファイルの形式のバリデーションやデフォルト画像の設定…

実装したいこと 記事投稿アプリで、YoutubeやTwitterを記事に埋め込みたい。 URLを入力したら、埋め込み用に変換して、記事に反映させたい。 Slim記法が苦手で、HTMLに反映させるのに手こずってしまいました。。便利ツールを使ってようやくできた。（後述） …

実装したいこと 画像投稿機能について、前回実装した内容をテストしたい 画像選択の仕方と、画像の位置をどう判定するのか悩みました。 study-diary.hatenadiary.jp 前提 RSpec、Factory Botは設定済みです。 Active Storageセットアップ Active Storageのサ…

実装したいこと 記事投稿アプリで、記事のアイキャッチ画像を設定できます。 アイキャッチ画像をユーザーの入力した幅に設定したい。 アイキャッチ画像をユーザーの選択した位置に設定したい。 前提 記事投稿の機能は実装済です。 今回は画像の表示を変更す…

初期設定 config/application.rb モジュール内に以下を記入。 ※私は誤ってモジュール外に記入し、rails sエラー「undefined method 'config'」となって数十分溶かしました。 config.i18n.default_locale = :ja ##デフォルトの言語設定 config.i18n.load_path…

実装したいこと ログイン機能・ユーザーの新規作成機能を実装したい。 sorceryは使ったことがあったのですが、試しにdeviseでも認証機能を作成したいと思います。 とりあえず、必要最低限な部分は結構簡単にできました。 実装の流れ gem 'devise'のインスト…

実装したいこと 記事投稿アプリで、管理者以外は記事のCRUD機能を使用できないようにしたい。 権限のないユーザーが該当のページにアクセスしたときは、403エラー画面を表示させる。 実装の流れ Punditの導入 policyファイルの設定 Controller設定 View設定 …

実装したいこと 実装の流れ Rakeとは cronとは Rakeタスクの実装 前提 私のNGコード OKコード Rakeタスクの実行 gem wheneverの導入 suchedule.rb Crontabへの書き込み 実装したいこと 記事公開アプリがあります。 記事の状態が「公開待ち」で公開日時を指定…

実装したいこと 前提 FatController 何がダメなのか 改善 諸々をモデルへ切り分ける 修正したコントローラ 実装したいこと 記事を投稿するアプリの編集画面で、記事のステータスを「下書き」「公開」「公開待ち」に分類したい。 ステータスと公開日時は編集…

エラーを解消したい 記事投稿アプリの中で、記事の中身（文章）を記入せずに空のままプレビュー画面を見ようとしたらエラーがでました。 TypeError - no implicit conversion of nil into String: エラー画面 英単語の意味 implicit suggested or understood…

実装したいこと gem " gretel"の導入 Generating breadcrumbs configuration file View RSpec 実装したいこと ウェブページの上部にパンくずリストを表示したいです。 パンくずリストとは…パンくずリスト 自分が今どのページにいるか分かるリスト。 リスト内…

実装したいこと trait マクロを使ってログイン機能だけセットする module ? macros? System Spec System Specの命名について NGコード 参考 実装したいこと 管理者と一般ユーザーで権限が違うため、それぞれのテストデータを作成したい。 trait トレイトを使…

gem Seed Fu Seed Fu is an attempt to once and for all solve the problem of inserting and maintaining seed data in a database. It uses a variety of techniques gathered from various places around the web and combines them to create what is h…

知らないメソッドが色々ありすぎて、忘れそうなのでメモしていきます。 protect_from_forgery with: :exception # Prevent CSRF attacks by raising an exception. # For APIs, you may want to use :null_session instead. protect_from_forgery with: :exc…

エラーで悩んだのでメモ 画像を投稿するページで、画像を選択しないでプレビュー画面を開こうとすると以下のエラーになりました。 エラー画面 ArgumentError - Nil location provided. Can't build URI ArgumentError ArgumentError - Nil location provided…

今回の記事の目的 実行するテストケースを限定したいとき 別タブで開いたページをテストしたいとき withinメソッド 確認画面のページ操作したいとき ApplicationHelperで定義したメソッドをRSpecで使いたいとき Updateのテストがうまくいかない。値が更新さ…

やりたいこと 前提 実装の流れ Gem導入 SystemSpecファイルの作成 ドライバの設定 モジュールの設定 モジュールを読みこめない… タグの設定 SystemSpecファイルの設定 create_listで連続するテストデータを作成する。 letとlet!の違い エラーが起こったとこ…

前提 RSpecのセットアップ済 FactoryBot導入済 実現したいこと 既存のTaskモデルのバリデーションをチェックしたい 文法に馴染みがなく、簡単なテストなはずなのに半日くらいかかってしまいました。 分かりにくかった部分だけ、復習していきます。 モデルス…

積読を消化していきます。 リーダブルコード リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック (Theory in practice)作者:Dustin Boswell,Trevor Foucher発売日: 2012/06/23メディア: 単行本（ソフトカバー） 後半は難しくて流し…