konakona-engineers diary

新米エンジニアのプログラミングブログ

rails エラー文の対処方法 ※rails ver.6.0.0

目的

 ・備忘録ようにエラー文対処方法を記載する

 

 

目次 

①エラー文：「　No Template for interactive request　」

②エラー文：「 Ruting Error 」 「 No route matches [POST] "/tweets" 」

③エラー文：「 No Method Error in Tweets Controller#show 」 「 undefined method `comment` for <割愛> Did you mean? comements comments= 」

④その他、エラー字に役立つ対処法 

 

 

 

①エラー文：「　No Template for interactive request　」

キーポイント

No Template for interactive request　

No Template　でViewファイルが存在しないこと表しているため

このエラー文が表示された場合は、Viewファイルを確認すればいい

 

 

②エラー文：「 Ruting Error 」 「 No route matches [POST] "/tweets" 」

キーポイント

 「 No route matches [POST] "/tweets" 」

[POST]はHTTPメソッド、"/tweets"はURIを指している

 

「 Ruting Error 」はルーティングでエラーが発生していることを知らせ

「 No route matches [POST] "/tweets" 」でHTTPメソッドPOST、URI"/tweets"に合うルーティングが無いことを表している。この場合、route.rbファイルを確認すればいい

 

 

 ③エラー文：「 No Method Error in Tweets Controller#show 」 「 undefined method `comment` for <割愛> Did you mean? comements comments= 」

キーポイント

「 undefined method `comment` for <割愛> Did you mean? comements comments= 」

最初の赤文字の意味が、commentというメソッドが定義されていないことを表している。

Didからの赤文字がこういうコードを書きたかったでは？と青文字のヒントを教えてくれている。

comment（単数系）→comment（複数系）にする理由は、アソシエーションで一対多の関係になっているため

※アソシエーションの記述はmodelファイルに書いてある

 

 

 その他、エラー字に役立つ対処法 

・エラー文はでていないが、意図した処理をしない場合（エラー）もある。

その場合は、一度「　binding.pry　」のコードを任意のファイルに記述し、railsを起動させターミナルで異常が無いか確認する。

・7つのアクション意外を定義する方法もある。その場合は、「 collection 」を使っている。

例/ 

collection do

 get 'search'

end

 

 

アプリケーションのデプロイ方法

使用するソフト

・ターミナル

・制作済みのrailsアプリケーション

・Heroku　※会員登録済み

〜登録は下記URLへ〜

https://dashboard.heroku.com/apps

 

①ターミナルを使ってHeroku CLIをインストール

デプロイしたいディレクトリにターミナル上で移動し以下のコマンドをターミナル上で入力

% brew tap heroku/brew && brew install heroku

インストール終了後、以下のコマンドでVerの確認ができる

% heroku --version

 

②ターミナルを使ってHerokuへログインする

以下のコマンドを入力しEnterキー

% heroku login --interactive

次に、Emailアドレスの入力を求められるので、登録してあるメールアドレスを入力する

次に、パスワードの入力を求められるので、登録してあるパスワードを入力する

 

③railsアプリケーションをHerokuへデプロイするために必要なgemを導入する

任意のrailsアプリのGemfileの最下部に以下を入力

group :production do
  gem 'rails_12factor'
end

 

「　rails_12factor　」　は静的アセットファイルやログの保存先をHeroku用に微調整してくれるgem。

※メモ

静的とは、誰がいつ見ても、常に同じ内容が表示されるような仕組みのこと。

アセットとは、資産・財産などのことを言う

 

gemをインストールする

% bundle install 

 

 

④Heroku上にアプリを作成

アプリ作成のために次のコマンドを使う

・heroku createコマンド、これでHeroku上でのアプリケーションの名前を決めることができる。ただし、既に登録されているアプリの名前は使えない。

 

% heroku create ここにアプリ名を記入

 

 

⑤Heroku上でMySQLを使えるようにする

HerokuのDBデフォルトはPostgreSQLになっているので、それをMySQLに変更する

変更するために「　ClearDBアドオン　」を使う。

 

※メモ

・ClearDBアドオンとは、MySQLを使うためのツールです。

ClearDBというデータベースサービスが提供しているアドオンで、これを追加することでHerokuでMySQLが使える

・アドオンとは

ソフトウェアに後から追加できる拡張機能のこと

 

ターミナルで以下を入力

% heroku addons:add cleardb

 

次にrailsを使う場合は以下を入力する

% heroku config | grep CLEARDB_DATABASE_URL

 

mysql2を使用している場合はmysql2使用に変更する

mysql2以降のURLは、上記 「　％　heroku config | grep CLEARDB_DATABASE_URL　」を入力後に表示されるURLを使う

% heroku config:set DATABASE_URL='mysql2://000000000000:1aaa0000@us-cdbr-east-06.cleardb.net/heroku_aaa00000000?reconnect=true'

 

以上

 

 

 

JavaScript & rails 既読機能をつける方法

今日も朝６時から勉強して、いい感じです。

 

 

目次

■非同期通信のデータの流れ

■エンドポイント

■queryパラメーターとpathパラメーターの理解

■jsonとは？

 

 

非同期通信のデータの流れ

非同期通信は、HTMLではなくデータを返す

 

HTML

↓　ブラウザ上で既読にしたい要素をクリック

JS

↓　イベントハンドラーが働きコントローラーへデータを渡す

コントローラー

↓　DBの内容を既読に書き換え、そのデータを取得しJSへ返す

JS

↓　返されたデータをもとに任意の値をHTMLへ反映

HTML

↓　反映された情報をもとにCSSを適応

既読

 

※JS＝JavaSprict

 ※イベントハンドラー＝イベントが発生した時に行われる処理のこと。

例えば、「クリックした時に、既読マークがつく」「マウスカーソルを乗せた時に要素の色が変化する」など「XXXした時に○○○になる」と行った処理のことを指します。

 

 

エンドポイント

エンドポイントとは、Ajaxでやりとりする際の、データ返却アクションを実行するためのURL

※Ajaxとは、JSを使用して非同期通信を行う処理のプログラム手法のこと

 

Ajaxでやりとりするためには、railsでレスポンスをユーザーへ返す時にHTMLではなくjsonなどのデータ形式で返却する必要があります。

そのデータを取得する時にアクセスするためのURLがエンドポイントです。

エンドポイントには「　メモのid　」と言うパラメーターを渡す必要があります。

理由は、「　どのメモを既読にしたのか　」を判別するためです。

メモのパラメーターを設定する方法は２つあり、

「　queryパラメーター　」と「　pathパラメーター　」と言う

 

 

 

queryパラメーターとpathパラメーター

queryパラメーターとは、「　例１　http://sample.jp/?animal=panda 」のように「？」以降に情報があるパラメーターです。

「？」以降の構造は、？＜変数名＞＝＜値＞となっている

例１のURLでparams[:name]とすると、pandaが戻り値となります。

 

pathパラメーターとは、「　http://samples.jp/tweets/1　」のように指定するパラメーターのことです。

pathパラメーターで指定するのは「　リソースを識別する場合　」です。

 

※リソースとは？

リソースは「　WEB上で名前を持ったあらゆる情報　」のことです。

例えば、「　WEB上に挙げた写真データ　」「　富士山頂の天気予報データ　」など。

このようにリソースに該当するデータは、WEB上に数えられないほど存在します。

その数えられないほどのリソースを探し出すために必要なものがURLです。

 

 

 

jsonとは

 jsonとはコンピューター上でデータのやり取りをする際の、形式の一つでjson以外にも

CSVやXMLなどがある

 

なぜjsonを使うのか？

理由は、JSとの相性がいいからです。

 

 

 

 

以上

JavaScriptのインラインスタイル

 

目次

・インラインスタイルとは

・インラインスタイルの追加方法

・インラインスタイルの削除方法

 

 

インラインスタイルとは

インラインスタイルとは、HTML要素の開始タグの中に直接CSSのソースコードを記述するプロパティの指定方法。

インラインスタイルの追加と削除をするにはメソッドがそれぞれ存在する。

 

 

 

 

インラインスタイルの追加方法

setAttributeメソッドを使用する。

Attributeは日本語で「属性」と言う意味。

setAttribute=属性をセットするよ

これを用いることで、指定した要素に新しい属性を追加または属性の値を変更できる

 

基本の型

要素.setAttribute(name,value)

※要素＝HTML上のdiv、h1、pなどのこと

 

・nameは属性の名前を文字列で指定する

・valueは属性に設定したい値を指定する

 

例：HTML

<div id="bird">白鳥</div>

 

例：JS

const animal = document.getElementById("bird")

animal.setAttribute("style", "color: white;")
// <div id="bird" style="color: white;">白鳥</div> が取得できる

 

 

 

インラインスタイルの削除方法

removeAttributeメソッドを使用する。

これを用いることで、指定した要素から特定の属性を削除できる

 

基本の型

要素.removeAttribute(name,value)

 

・nameは属性の名前を文字列で指定する

・valueは属性に削除したい値を指定する

 

例：HTML

<div class="contents" id="apple">りんご</div>

 

例：JS

const apple = document.getElementById("apple")

apple.removeAttribute("class", "contents")
// <div id="apple">りんご</div> が取得できる

 

 

以上。 

JavaScriptのイベント

目次

・JavaScriptにおけるイベントとは？

・イベント発火の種類

・addEventListener の使い方

 

 

 

JavaScriptにおけるイベントとは？

一言でいうと、HTMLに対して行われた処理の要求のこと。

例えば次のようなことが挙げられる。

・ユーザーが要素の上にマウスカーソルを乗せた

・ユーザーがブラウザ上のボタンをクリックした

・テキストフィールドでキー入力をした

 

そして、これらのイベントを認識してJavaScriptのコードが動き出すことを

「イベント発火」といいます。

 

 

 

イベント発火の種類

イベント発火は種類が豊富ですが、代表的なものとして以下のようなことが挙げられる

 

■loadイベント・・・ページ全体が全て読み込まれた後に、イベント発火する

■clickイベント・・・指定された要素がクリックされた時に、イベント発火する

■mouseoverイベント・・・マウスカーソルが指定された要素上に乗った時に、イベントが発火する

■mouseoutイベント・・・マウスカーソルが指定された要素上から外れた時に、イベントが発火する

 

その他、イベントの種類については以下を参照してください。

 

qiita.com

 

※また、イベントを発火させるためには「　addEventListener 」というメソッドを使う必要があります。

 

 

 

addEventListener の使い方

 addEvevtListenerは以下のように使用する

例

要素.addEventListener('イベント名', 関数)

 

 

実例

window.addEventListener('load', function(){

  const pullDownButton = document.getElementById("lists")

  pullDownButton.addEventListener('mouseover', function(){
    console.log("mouseover OK")
  })
})

 

解説

１行目で、windowオブジェクトにaddEventListenerメソッドを使いイベント発火を宣言

その内容は、イベントの種類「　load　」なので、ページ全体が読み込まれた後にイベント発火するようにしている。

functionで関数を定義し、３行目で「　pullDownButton　」変数を定義。

代入する値は、ドキュメントオブジェクトのID”lists”

５行目で、宣言した「　pullDownButton　」に「　addEventListenerメソッド　」を使い２つ目のイベント発火を宣言している。内容は、マウスカーソルが指定した要素に乗った時に、コンソールに「　mouseover OK　」を表示させると言うもの。

JavaScriptをHTMLで読み込む方法

方法は１つ！

とても簡単です。

 

script要素をHTMLファイルのhead要素に追加するだけ。

 

例

<head>
  <script src="ファイル名.js"></script>
</head>

 

具体礼

<html>
<head>
  <link rel="stylesheet" href="index.css">
  <script src="index.js"></script>
  <meta charset="UTF-8">
  <title>JavaScriptの読み込ませ方</title>
</head>

 

とても簡単！！

JavaScriptでHTMLの要素を取得し操作する方法

DOMツリーからHTMLを取得する方法

※DOMツリーについては以下のURLを参照

ja.javascript.info

 

 

HTMLの取得方法は大きく分けて３つ

①id名から取得

②class名から取得

③セレクタ名から取得(全て取得、最初のみ取得)

 

①〜③を実行するためにはメソッドを使う

要素・セレクタについて復習したい方は以下を参照

 

www.asobou.co.jp

①document.getElementByld("id名")

DOMツリーから特定のHTML要素を取得するためのメソッドの１つ

引数に渡したidを持つ要素を取得する

例

document.getElementById("id名")
 

②document.getElementsClassName("class名")

※HTML上で同じclassが複数存在する場合があるため「　getElements 」と複数系になっている。同じclass名が複数存在する場合はそれらが持つ要素を全て取得する。

例

document.getElementsByClassName("class名")
 

③document.querySelectorAll("セレクタ名")　※全て取得　

※「　querySelectorAll　」とあるように、引数に設定しているセレクタ名に合致するモノ全てをHTML上から取得する

 

document.querySelectorAll("セレクタ名")

 

③querySelecor("セレクタ名")　※最初のみ取得

引数で設定したセレクタに合致する要素で最初に見つかった要素１つを取得する

document.querySelector("セレクタ名")

 

 

③頻繁に使用するセレクタ名

「class名」、「id名」、「HTMLタグ」この３つを頻繁に使用する

例

document.querySelectorAll(".class名")
document.querySelector("#id")
document.querySelectorAll("タグ名")