JavaScript関連のことを調べてみた2020年08月16日

Vuetifyで簡単にカレンダーを表示する

CSSやJavascriptでカレンダーを作るの、難しくないですか？
Vuetifyのカレンダーコンポーネントを使うと簡単にカレンダーを作ることができたので、作り方を紹介したいと思います

## ゴール
↓のようなカレンダーを作ります
https://vuetify-calendar-sample.netlify.app/

[ソースコード](https://github.com/youichiro/vuetify-calendar-sample)

## Vuetify
[Vuetify](https://vuetifyjs.com/ja/)はVueで使えるUIライブラリの一つです。自分でCSSを記述することなく便利で美しいUIを作ることができます。[NuxtJS](https://ja.nuxt

objectをforEachしたい→Mapを使うという手もあるよ

# object.forEachと書きたいが…

Objectは直接forEachできないため、以下のように書く必要がある。

“`javascript
Object.keys(obj).forEach(key=>{/*keyを使った処理*/})
“`

これでもいいのだが、連想配列にはObjectだけでなくMapも利用できるので、試してみよう。

# Map型を使った場合
Mapを使った場合は以下のように書ける。

“`javascript
map.forEach((value, key)=>{/*keyとvalueを使った処理*/})
“`

Map.prototypeから直接forEachが生えているので、若干短く書ける。
他にもMap型から直接使えるメソッドがあり、

“`javascript
map.keys() //keyを列挙するイテレータを取得
map.values() //valueを列挙するイテレータを取得
“`
などが該当する。

ちなみに、for文で処理することも可能。

“`javascript
for (const [key, value] o

javascriptの標準入力

##javascriptで標準入力からデータを受け取る

・標準入力からデータを受け取る

例）「hello」というデータが渡される

“`javascript
process.stdin.resume();
process.stdin.setEncoding(‘utf8’);

var lines = []; ; //標準入力から受け取ったデータを格納する配列
var reader = require(‘readline’).createInterface({　//readlineという機能を用いて標準入力からデータを受け取る
input: process.stdin,
output: process.stdout
});
reader.on(‘line’, (lines) => {　//line変数には標準入力から渡された一行のデータが格納されている
lines.push(lines);　//ここで、lines配列に、標準入力から渡されたデータが入る
});
reader.on(‘close’, () => {　//受け取ったデータを用いて処理を行う
conso

JS 配列の指定の範囲を別の要素に置き換える

## lodashのfillメゾッドを作ってみた

[▶︎lodath fill](https://lodash.com/docs/4.17.15#fill)

~~~javascript
const fill = (array = [], value, start = 0, end = array.length) => {
const fillArray = []
for (let i = 0; i < array.length; i++) { if (start <= i && i < end) { fillArray.push(value) } else { fillArray.push(array[i]) } } return fillArray } console.log(fill([1, 2, 3], "a")) // => [ ‘a’, ‘a’, ‘a’ ]

console.log(fill(Array(3), 2))
// => [ 2, 2, 2 ]

console.log(fill([4, 6,

JS 配列内の最初の配列のみ展開する

## lodathのflattenメゾッドを作ってみた

[▶︎ lodath flatten](https://lodash.com/docs/4.17.15#flatten)

~~~javascript
const flatten = (array) => {
const flattenArray = []
for (let i = 0; i < array.length; i++) { const object = array[i] 　　//Array.isArray => 配列か判定
const isArray = Array.isArray(object)
if (isArray) {
flattenArray.push(…object)
} else {
flattenArray.push(object)
}
}
return flattenArray
}

console.log(flatten([0, [2, 2, [3, [4]], 5], 1]))
// => [ 0, 2, 2,

「1つの投稿に対し複数の画像を紐付ける機能の実装」

目的
–
某スクールの複数投稿の実装の仕方がとても苦労したので、メモとして残して置こうと思います。
これが、何処かの誰かの役に立てれば嬉しいです(笑)

完成形
–
これが完成形です

動画も貼れたので掲載します。

ステップ
–
①. モデルを作成していきます。
②. マイグレーションファイルの作成をしましょう。
③. imagesモデルで画像をアップロードできるようにしていきます。
④. 画像を保存させる場所をuploaderを作成します。
⑤. モデルに追記します。
⑥. ネストした関連先のテーブルをまとめて保存出来るように記載します。
⑦. fields_forを以下のように使用して出品画面のHTMLを記載します。
⑧. SCSSを記載します

楽天のラッキーくじをちょっと使いやすくしてみた

#楽天のラッキーくじをちょっと使いやすくしてみた
毎日開いてるんですけど、PRとかSPのみが邪魔だなぁと思ったので、JavaScriptで削除してみました。

##作ってみよう
###環境
macOS Catalina ver 10.15.5
GoogleChrome 84
> ぶっちゃけOSは関係ないです
> ChromiumベースのMicrosoftEdgeでもいけると思います

###Chromeの拡張機能をインストール
– [ScriptAutoRunner](https://chrome.google.com/webstore/detail/scriptautorunner/gpgjofmpmjjopcogjgdldidobhmjmdbm)

###ScriptAutoRunnerにJavaScriptを記入
**1. のボタンをクリック**
**2. タイトルは自由に**
**3. JavaScriptを記入**

“`javascript
$(“#all-kuji-list”).children(“li”).each(function(){
try{

入力した文字列をJavaScript のコンソール画面に表示させる

# 概要
入力した文字列を JavaScript のコンソール画面で表示する方法を記載する。


# 前提知識
– [JavaScript で「Hello World」する方法](https://qiita.com/ub0t0/items/f8584f3be322c7fe18fa)
– HTML の基礎知識

# HTML で入力画面を準備
“`.html:.html