• 2021.04.17

既存のRailsプロジェクトに静的解析ツール(rubocop)を導入する方法

前回NuxtプロジェクトにESlintを導入したので今回はRailsプロジェクト側も同じような静的解析のツールであるrubocopを導入します。 github: https://github.com/rubocop/rubocop 前回の記事: 既存のNuxtプロジェクトにESLintを導入する方法 rubocopインストール gemfileにrubocopを記述します。開発環境のみチェックすれば […]

既存のNuxtプロジェクトにESLintを導入する方法

新規にNuxtのプロジェクトを導入する際にESLintを使用するように設定する方法の記事はいくつかあったのですが、既存のNuxtプロジェクトにESLintを導入する手順についての記事が少なかったのでその方法についてまとめます。 ESLintとはjavascriptのための静的解析ツールです。Railsでいうところのrubocopにあたります。 このツールを使用することで開発プロジェクトのコードを一 […]

Nuxt + Rails + Firebase ユーザー登録 (Rails編)

前回の記事でNuxt とFirebaseを使用したユーザー認証ができたので、今回の記事ではRailsの方でもユーザーの認証を行っていきます。 前回の記事はこちら: Nuxt + Rails + Firebase ユーザー登録 (Nuxt編) 今回使用するgemはfirebase-auth-railsです。 https://github.com/penguinwokrs/firebase-auth- […]

Flutter/Firebase Android ビルドエラーの解決

flutterを使用してfirebaseのデータを取得しようとしましたが、androidのビルド時にエラーが発生しハマったので備忘録として解決方法を記述します。 エラーは下記 まずこのエラーが ‘com.tns.youtube_app’ というpackage name が 一致していません。という内容 ここに早く気づくべきでした。 いろいろ調べていると下記記事にヒット。 h […]

Nuxt + Rails + Firebase ユーザー登録 (Nuxt編)

railsとnuxtを組み合わせたアプリケーションでpostのCRUD機能まで実装しました。 今回はユーザーの認証をfirebaseを使用して行います。 もしまだCRUDの機能を実装していない方は環境構築だけ先にしてこの記事に戻ってくることをオススメします。 Nuxt Rails環境構築 Firebaseとは Firebase は Google が提供しているモバイルおよび Web アプリケーショ […]

Vue.js 基本のき (data, computed, methods)

この記事ではvueの基本的な記述についてまとめています。 完全vue初心者の方は公式のドキュメントを一度さらっとみてからこの記事に戻ってくることをオススメします。 Vue.jsドキュメント: https://jp.vuejs.org/v2/guide/index.html 公式でもいきなりvue-cliで始めるのではなくcdnで学習することを推奨しています。 注意点として、初心者が vu […]

Rails + Nuxt CRUDアプリ作成(編集、削除編)

前回の記事まででコンテンツ一覧、詳細表示、コンテンツ新規作成まで実装できたので、今回の記事はコンテンツの編集、削除の機能を実装していきます。 前回の記事はこちら: Rails + Nuxt CRUDアプリ作成(新規登録、詳細表示編) 1.編集画面作成(Nuxt) まず、詳細画面の「Topへ」のボタンの横に「編集」ボタンを設置し、それをクリックすると新規作成時と同じような投稿フォームがモーダル で表 […]

Rails + Nuxt CRUDアプリ作成(新規登録、詳細表示編)

今回の記事ではデータの追加から詳細の表示までを実装します。 前回の記事はこちら: Rails + Nuxt CRUDアプリ作成(一覧表示編) 1. 新規作成ボタンの作成(Nuxt) まずは一覧画面に新規作成ボタンを作成します。 これで画面の右下にボタンが表示されそれをクリックすると下記のようなモーダル が表示されるようになりました。 保存ボタンを押すとsave()メソッドが実行されますが、今はまだ […]

Rails + Nuxt CRUDアプリ作成(一覧表示編)

前回の記事でAPIの通信はできたのでここからは実際にモデルを作成していきます。 前回の記事はこちら: Rails + Nuxt CRUDアプリ作成(環境構築編) 今回作成するアプリのER図はこのようになっています。 Twitterみたいな簡易SNSです。 ユーザーは複数の投稿ができさらに投稿に対していいねができる。 大まかな流れとしては下記のようになります。 PostモデルのCRUD Postモデ […]