JS基礎 setTimeoutとsetInterval
こんにちは。
ドットインストールにてJavaScriptの学習(テックキャンプの復習を兼ねて)を現在も続けております。
本日は、JavaScript(JS)のsetTimeoutとsetIntervalについて、頭で同一のものと認識してしまっているので、
自分の整理のためにもこちらに記載いたします。
setTimeoutとsetIntervalの共通点
・時間の経過に関わる関数である。
・どちらの関数も第一引数が実行する関数、第二引数が実行までの時間（ミリ秒）を表す。
setTimeout
タイマーとしての役割。非連続。
基本的には、一度関数が実行されればそれでタイマーは止まる。
const fn = function() { console.log("1秒経過"); }; const tm = 1000; setTimeout(fn,tm);
上記を入力する事で、1秒後に出力される。
※clearTimeout
途中でタイマーを止めたい場合は、こちらを使用する。
引数にsetTimeoutの返り値をいれる。
setInterval
連続的にタイマーを始動させる。
const fn = function() { console.log("1秒経過（" + i + "回目）"); if(i > 5) clearInterval(id); i++; } const tm = 1000; let i = 1; const id = setInterval(fn,tm);
※clearInterval
連続艇に行われる動作を止める。
for文とセットで使うことが多い。
出力できました。
タイマーをHPに組み込む時に意識したいですね。
JS基礎 日付の取得 Dateオブジェクト
こんにちは。
ドットインストールにてJavaScriptの学習(テックキャンプの復習を兼ねて)を始めております。
本日は、JavaScript(JS)の日付の取得にてまとめていきます。
Dateオブジェクト
JSの組み込み関数。
組み込み関数とは、JavaScrip側であらかじめ用意してくれているオブジェクト。
この関数を使って日時のあれこれを定義できる。
まず、Dateオブジェクトを生成するためにnewで生成する。
new Date();
現在の時間を取得する。
ブラウザのコンソールで確認するとこのように出力される。
上記をもっと分かりやすく表記させるためには下記処理をします。
まずはプロパティの説明
today = new Date();としてあげた後、
・today. getFullYear() → 現時点での年を取得する
・today.getMonth()+1 → 現時点での月を取得する※Monthは0からカウント。0=1月、1=2月となるので、出したい月は+1する。
・today.getDate() → 現時点での日を取得する
・today.getDay() → 現時点での曜日を取得する※日曜日が0、月曜日が1となり、6まで。数字で取得される。
現在の時刻を分かりやすく表記させる
上記より、曜日の数字を文字列に変換して、コード記載。
const today = new Date(); const dayOfWeek = today.getDay() ; const dayOfWeekStr = [ "日", "月", "火", "水", "木", "金", "土" ][dayOfWeek] ; console.log(today.getFullYear() + "/" + (today.getMonth() + 1) + "/"+ today.getDate() + "/" + dayOfWeekStr);
ブラウザのコンソールでも確認。
出力できました。
javascriptは覚えることが多いですが、このような組み込みオブジェクトも豊富にあるようですね。
有難い恩恵に感謝しながら、引き続き学習していきます。
rails/heroku デプロイ→エラー発生(We're sorry, but something went wrong.)→解決
こんにちは。
本日は、前回に引き続き、アプリをherokuへのupした際に起きたエラーについて記載していきます。
ローカル環境では確認できるのに、heroku上では、エラーが発生してしまう！
色んな理由で発生するエラーですが、今回の場合は、簡単なミスでした。
【原因】不要なmigrateファイルを残していた！
ローカル環境では、色々なgemを入れながら、ネットで調べて、オプション機能を実装していました。
その中で、modelを作ったが、結果的に使用しない機能があり、そのmigrateファイルが残ったままでした。
ローカル上では、履歴として残しておりましたが、本番環境では見逃されずに、どうにかしてください。と言われた感じです。
今後の対策
・不要なmigrateファイルは残さない。
・新しいgemを使ってみるときは、gitでブランチを作って試す。(不要になった場合はブランチごと削除するのも有り。)
・こまめにgitでコミットする。(原因追求をしやすくする為。)
これで無事にデプロイできました。
エラーにぶつかる度成長を感じるプログラミング。
引き続き楽しく学習していきます。
rails/heroku ActionCableを導入したアプリをデプロイ→エラー発生→解決
こんにちは。
本日は、ActionCableを導入したアプリをherokuへのupした際に起きたエラーについて記載していきます。
ローカル環境では確認できるのに、heroku上では、エラーが発生してしまう！
そもそも、「そのままの状態だとAction Cableが本番環境で非同期にならない事」を前提として知っておくべきでした。
解決方法は、簡単でした。
ターミナルでログ確認確認
heroku logs --tail --app <アプリ名>
エラー文発見
Gem::LoadError (Specified 'redis' for Action Cable pubsub adapter, but the gem is not loaded. Add `gem 'redis'` to your Gemfile
どうやらAction Cableの為の「redis」gemを加えてください、と言われている模様。
そんなgemを導入する話は聞いておりませんでした...。
解決方法
色々調べた結果、2つのファイルを下記に修正することがわかりました。
config.action_cable.allowed_request_origins = [ /http:\/\/.*/ ]
production:
adapter: async
これで無事にデプロイできました。
と思いましたが、次のエラーが発覚。ページによって、We're sorry, but something went wrong.と出る。
無事解決しております。また次回解決した方法を記載していきます。
VS code フォント設定が反映されない件「ユーザー設定に書き込めません」
こんにちは。
本日は、VSコードで起きたエラーについて記載していきます。
テックキャンプでの学習も終盤。明日で学習は終了となり、来週から転職活動に移っていきます。
今後も学習を進めようと思い、プロゲート、ドットインストールで迷った結果、ドットインストールをメインに進めていこうと思いました。
ドットインストールにした理由については、「動画視聴」と「手軽さ」です。
プロゲートはテックキャンプが始まる前に登録しており、有料会員もかじっていたので、どんな学習かは知っていました。とてもわかりやすかったのですが、今後転職活動もしながら学習をしていくことを考えると、移動中に学習することが多くなりそうです。
ドットインストールであれば、約3分ほどの動画を見て、手軽に学習ができるので、こちらから進めていくことにしました。
さて、本題ですが、ドットインストールの序章に環境設定があり、
「フォントを変えたほうが、全角、半角スペースの区別がわかりやすいよ」と仰っていたので早速導入。
インストールするフォントは「Ricty Diminished」。
既存のフォントは、ゴシック系というより明朝系なので、見づらいかも、と思いましたが、これも慣れでしょうか。
フォントをインストールして、VScodeの設定からフォントを変更すると下記画像内、右下のように表示され、フォントが反映されませんでした。
指定のファイルはsetting.jsonで、確認
波線の部分が誤っているのか、と考えて、色々調べた結果、、
10行目に「;」がないという落ちでした。
記載追加して見ると、見事に反映されてました。
setting.jsonのファイルにもフォント変更の旨の記載が反映されてました。
こういう簡単なミスを日々減らしていきたいです。
もっとプログラミング言語に慣れて行きます。
rails基礎 link_toについて
こんにちは。
本日は、form_withと同様に、よく目にすることの多いrails のヘルパーメソッド、link_toについて記載いたします。
link_to
railsのヘルパーメソッドのひとつ。リンクの作成。htmlでいうところのa href=""。つまりaタグ。railsを使用する場合、link_toを使ったほうが便利である。パスの指定やrubyの埋め込みを簡単にできる！
<%=link_to 'もどる', root_path, method: :get, class:"back-btn" %>
'もどる'
html上で記載される文字列。こちらをクリックすることで画面が変わる。
下記のように、リンクに設定するものを画像にすることも可能。
<%= link_to image_tag('furima-logo-color.png' , size: '185x50'), "/" %>
root_path
リンク先。urlでの置き換え可能。
method: :get
リンク先に移動する場合はのmethodはget。省略可。(基本的には省略されている。)
削除機能を入れる場合、リンク先を、destroyアクションが指す場所に指定して(plefix等)、methodをdeleteに変える。下記参照。
<%= link_to '削除', item_path(@item.id), method: :delete, class:'item-destroy' %>
ブロック構文も可能。
<%= link_to [パス] do %> 〜 <% end %>
〜の部分にHtmlを内包することもできる！
railsの基礎を勉強しておりますが、
今回のlink_toとform_withの理解が一番大事だと認識しております。
基礎の振り返りをしながら、前に進んでいきたいと思います。
rails基礎 form_withについて
こんにちは。
本日は、よく目にすることの多いrails のヘルパーメソッド、form_withについて記載いたします。
form_with
railsのヘルパーメソッドのひとつ。投稿ページや検索などのフォーム作成。htmlでいうところのformタグ。railsを使用する場合、formタグを使うより、form_withを使ったほうが便利である。パスの指定やrubyの埋め込みを簡単にできる！
<%= form_with url: "/posts", method: :post, local: true do |f| %>
引数は、そのフォームがどのような動作をするかを決めることができる。オプションと呼ばれる。
「url: "/posts"」
リクエストを送信するパスを指定。 prefixでも可能！ ex.post_path
ここを下記のようにmodelを指定することも可能。
<%= form_with(model:@post, local: true) do |f| %>
モデル自体の記載も可能だが、コントローラーのnewアクションで定義したインスタンス変数を入れる事で、モデルを指定することができる。
「method」
送信するHTTPメソッドを指定。基本のmethodがpostのため、省略すること可能。
検索機能を導入する場合は、HTTPメソッドはgetになる。
「local: true」
local: trueがない場合、Ajaxによる送信(非同期通信)という意味になる。
htmlとしてフォームを送信する場合にlocal: trueが必要。
Ajaxを導入する際は注意！！
「|f|」
form_withで使うブロック変数。
このあとに続くフォーム部分の記載で使用する。
私が注意すべきは、Ajaxの際は、「local: true」を除くことでした。
また、フォーム部品のヘルパーメソッドはどこかでまとめようと思います。
