- 1. Rails6でJavaScriptのファイルを読み込みたい！
- 2. お気に入り機能(非同期)
- 3. 【Heroku】デプロイしたときにおこるApplication error(code=H10)の対処法
- 4. 大量の点の 2 次元プロット（regl + d3.js）
- 5. Firestoreのドキュメントは、Where句では削除できません。
- 6. data-属性を有効活用！簡単・便利なタブメニュー
- 7. WordPress REST API タグのslug名でデータを取得する
- 8. 【Javascript】配列から特定の値のインデックスを全部取得する
- 9. Moment.jsを用いて今月が何週あるのか（今日が第何週か）を求める
- 10. まとめてremoveEventListenerする
- 11. 【JS】画像の変更しても反映されない時の対処法
- 12. なぜReactをアプリに使うのか？
- 13. 非同期通信(Ajax)ができない場合の対処法
- 14. Warning: Each child in a list should have a unique "key" prop.
- 15. React入門（useState, useEffect）
- 16. Node.jsについて / JavaScriptの基本（メモ）
- 17. Material-UIで一覧画面を作ってみる（React）
- 18. JSとChrome拡張機能で出退を自動化
- 19. Reactを学ぶ前にJavaScript基礎を学ぶその2
- 20. 【個人開発/Vue.js/Laravel/AWS】新卒1年目の集大成としてWebサイトを46日で爆速自作してみた。
Rails6でJavaScriptのファイルを読み込みたい！
Rails6にJavaScriptのファイルを読み込みたい方に向けてまとめました。
## 方法
### ①JSファイルを配置する場所を確認
Rails6の場合、`javascript/packs/`に配置します。“`
//以下に配置
javascript/packs///フォルダを作成する場合
javascript/packs/フォルダ“`
### ②JSファイルを作成する
Javascriptのコードを以下の記述で囲みます。“`js:javascript/packs/xxx.js
document.addEventListener(‘turbolinks:load’, () => {//ここにjsの記述を追加
})
“`### ③JSファイルをapplication.jsでimportをする
最後に、`application.js`でインポートします。
ファイル読み込みの記述に注意しましょう。“`js:application.js
//requireの下に配置//=> javascript/packs/xxx.js
お気に入り機能(非同期)
ポートフォリオの作成でお気に入り機能を非同期で実装したので、その箇所の記述についてアウトプットします。
モデル、コントローラー作成してアソシエーション記述した後の作業を書いていきます。### 動作環境
rails6.0.0
ruby 2.6.5
### jquery導入“`terminal
% yarn add jquery
“`“`config/webpack/environment.js
const { environment } = require(‘@rails/webpacker’)
// 以下追記
const webpack = require(‘webpack’)
environment.plugins.prepend(‘Provide’,
new webpack.ProvidePlugin({
$: ‘jquery/src/jquery’,
jQuery: ‘jquery/src/jquery’
})
)
// ここまで
module.exports = environment
“`“`appl
【Heroku】デプロイしたときにおこるApplication error(code=H10)の対処法
#プログラミング勉強日記
2021年3月20日
ローカルでは動くのに、HerokuでデプロイするとApplication errorになってしまったので、その対処法を紹介する。
#エラー内容
まず書かれているように、`heroku logs –tail`でログを確認した。“`
2021-03-19T06:17:26.458574+00:00 heroku[router]: at=error code=H10 desc=”App crashed” method=GET path=”/favicon.ico” host=videochat-sample.herokuapp.com request_id=48b111ba-aaf9-49c2-b454-ffb81ccb1fcb fwd=”14.14.208.82″ dyno= connec
大量の点の 2 次元プロット（regl + d3.js）
こんにちは。
大量の点の 2 次元プロットについて、regl (WelGL ライブラリ）の利用に加え[^1]、d3.js を利用し、マウスイベント処理（ズーム、スクロール）およびグリッドライン描画を行いました。[^1]: 参考：「[大量の点の 2 次元プロット（regl）](https://qiita.com/kkdd/items/8b46c5e7362397a9c627)」
“`scatter.html
