JavaScript関連のことを調べてみた2022年12月26日

オブジェクト配列をオブジェクトに変換する

“`
const array = [
{id: 1, value: 1},
{id: 2, value: 1.2},
{id: 3, value: 3},
];
const obj = array.reduce((sum, v) => ({…sum, [v.id]: v}), {});
“`

配列の要素の追加、削除のまとめ(JavaScript)

配列の要素の追加、削除のまとめです。JavaScript編です

“`JavaScript
‘use strict’;
const scores = [80,90,40,70];
// 要素の前に配列を追加
scores.unshift(46,48);
// 配列の要素の1番後ろを削除する
scores.pop();

for(let i=0;i Score${i} : ${scores[i]}

`);
}
“`
unshiftメソッドで要素の1番前に要素を追加します。
popメソッドを使って要素の1番最後を削除します。

“`JavaScript
‘use strict’;
const scores = [80,90,40,70];
// 要素の後ろに配列を追加
scores.push(60,50);
// 配列の要素の1番最初を削除する
scores.shift();

for(le

個々のblade.phpファイルの中でそれぞれvueを記述する

## 環境

– Laravel: 8.6.2
– Vue.js: 2.6.12
– PHP: 8.0.8
– Composer: 2.5.1
– Node.js: 19.3.0

“`zsh
$ composer create-project –prefer-dist laravel/laravel:^8.0 project-name
$ php artisan migrate:fresh
$ composer require laravel/ui
$ php artisan ui vue –auth
$ npm install && npm run dev
$ php artisan serve
“`

## 1.resource/views/layouts/app.blade.phpにyieldを追加する

既に用意されているhome.blade.phpに追記する形を取りたいと思います。
そこでhome.blade.phpを見てみると、**layouts.appを継承**していることがわかるので、継承元のlayouts.appにscriptを記述するためのyieldを追加

実務未経験文系大学生が完全独学で制作したReact/firebaseのWebサイトをみてほしい

こんにちは。ゆうたと申します。

タイトルの通り、プログラミング初心者の私がポートフォリオ用のwebサイトを作ったので紹介させていただきます。

それにあわせて**独学の苦悩**なども書きたいと思います。

わたしと同じ実務未経験でプログラミングをやっている人は共感できることも多いと思います。

この記事は、
– **only text**(React/firebaseで制作したWebサイト)の紹介
– **未経験でたった一人で制作すること**の苦悩
– 作ってみた感想、これからやりたいこと

の構成で書いていきます。

Qiitaの投稿どころかインターネットに記事を載せたことはないので細かいことろは大目に見てください。

この記事を読んでくださっている方のほとんどはわたしより経験や知識が豊富だと思うのでそういった方々のご指摘点があればコメントしてもらえるとうれしいです。

# only text(React/firebaseで制作したWebサイト)の紹介
[**only text**](https://onlytext.net)
![スクリーンショット ホーム画面.png](http

Gatsby-starter-blogをTypeScript化する [2022-12版]

# はじめに

先月個人でブログを作成した際に、Gatsby.jsのgatsby-starter-blogというテンプレートを使ったのですが、デフォルトではTypeScript化されてないのでその手順を紹介しようと思います。

ネット上の関連記事ではconfigファイルのts化で一工夫されているものがいくつかあったのですが、今ではconfigファイルのts化が公式サポートされ、より簡単にTS移行できるようになっており本記事ではそこを踏まえて紹介させていただきます。

コードは動作確認後、筆者のレポジトリにあげてあるのでもし動かない！ということがあれば参考にしてみてください
[https://github.com/ironkicka/gatsby-starter-blog-typescript](https://github.com/ironkicka/gatsby-starter-blog-typescript)

# ****gatsby-starter-blogって？****

Gatsby.jsが提供しているStarterと呼ばれるテンプレートの１つです。

> [Starter

kintoneにおける「添付ファイル」フィールド仕様まとめ　～標準・カスタマイズを俯瞰して～

# kintoneの添付ファイルフィールド
kintoneでは、「添付ファイル」フィールドと呼ばれる、
様々な形式の添付ファイルを保存できるフィールドが標準で用意されています。

簡単にファイル管理ができるため非常に便利な機能ですが、
カスタマイズなどで詰まってしまう、困ってしまう部分も多々あるため、
今回、標準機能からカスタマイズまで、「添付ファイル」を軸にしてまとめておこうと思います。

注意：下記記載の内容は**2022年12月時点**のkintoneの仕様で記載しています。

# 標準機能
## 添付方法
　kintoneの標準機能では、添付方法としては以下の二つがあります。
　画像引用：[kintoneヘルプ>添付ファイル](https://jp.cybozu.help/k/ja/id/040514.html)
　①[参照]をクリックして、ファイルを選択する
　![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/584477/b4cc8a69-acf0-c6e0-559b-d1c3c

誰でも作れるBetterJSONトランスパイラを作ってみる

# 概要

(厳密な)JSONはイメージとは裏腹に手で書くには思ったより不便な仕様になっています。

– コメントが書けない。
– Trailing comma(末尾のカンマ) は認められていない。(=手で追加する際にカンマを意識する必要が出て面倒)
– (ダブルコーテーションの代わりに)シングルコーテーションは使えない。
– キー名もダブルコーテーションで囲む必要がある。

などなど・・・

というわけで、JavaScriptのオブジェクト表記のようにゆるく書けてなおかつそのままJSONに変換できるトランスパイラを作ってみる。

# 誰でも作れる

ちょこっとコードを付けて`eval(new Function)`して`JSON.stringify`で出力するだけです。

node.jsなら追加のモジュール一切不要で実現できます。

“`bjson.js
const fs = require(‘fs’);

if(process.argv.length < 3) { const path = require('path'); jsfile = path.basenam

javascriptの勉強記録

li要素のテキスト取得
“`html

• aaa
• bbb
• ccc

“`

URLからOGPを取得してDBに保存する

# 概要
LINEでyoutubeやamazonのリンクを送信すると、そのサムネイル画像やタイトルを自動で表示してくますよね？
あれはOGPと言ってurlからそのページに設定されているタイトル、url、概要、画像などの情報を取得する仕組みを利用しています。
javascriptを使ってOGPを取得する記事はたくさんありますが、railsで取得した値をDBに保存するやり方が書かれた記事がなかったので、書いてみました！
## コントローラーとテーブル
コントローラーはpostsコントローラーでアクションはindex, new, create, showの4つ。
テーブルはpostsテーブルで、カラムは以下のようになります。

図のようにbody, urlカラムは実際にユーザーが入力するためのカラム、
url_image, url

HERE Destination Weather APIを使いたかった

:::note warn
この記事は「HERE Destination Weather API」を試した内容が書かれていますが、私の環境では403エラーでうまく動きませんでした。そのため、有力な情報はあまり記載しておりませんのでご了承ください。
:::

これは [【HERE WeGo!】ジオファン集まれ！地理空間情報、地図に関する記事を募集しています by HERE Advent Calendar 2022](https://qiita.com/advent-calendar/2022/here)　19日目の記事です。

# はじめに
hereのサービスにはたくさんのAPIが提供されています。その中でも[「HERE Destination Weather API」](https://developer.here.com/documentation/destination-weather/dev_guide/topics/guide.html)という天気予報情報を取得するのAPIが気になったので試していました。中でも位置情報から[月の満ち欠けの情報](https://developer

Storybookのアドオンを自作する

# はじめに
この記事は[Storybook](https://storybook.js.org/)のアドオンを作成から公開までを紹介します。
この記事では[TypeScript](https://www.typescriptlang.org/)と[React](https://ja.reactjs.org/)の基礎知識を前提として記述しますので、不慣れな方は随時それぞれのドキュメントを参照ください。

今回作成したnpmパッケージは[こちら](https://www.npmjs.com/package/storybook-role-visualization)で、リポジトリは[こちら](https://github.com/KokiSakano/storybook-role-visualization)です。

# アドオン
アドオンはStorybookの機能を拡張するためのものです。
アドオンはStorybookに表示するUIに対して行うものとStorybookを構成するためのものがあります。前者はインターラクションテストやアクセシビリティテストなどがあります。後者は`prese

QuizKnockの「人生最高得点を取る旅」にCookie Clickerで挑む

# はじめに
Cookie Clickerはコードを改変して遊ぶことが認められていて、大きい数字を扱うゲームです。そこで「人生最高得点を取る旅」に応用させるといい成績を狙うことができるかもしれないと思い挑戦してみました。

※Cookie Clickerを使った具体的な高得点の取り方を先に知りたい方は[実践](#実践)へ
※とにかく何点取れたか結果を先に知りたい方は[まとめ](#まとめ)へ

# Cookie Clickerとは
クッキーを増やすことが目的のブラウザゲームです。最初は1Clickで1つクッキーを増やすことしかできないですが、ゲームを進めていくうちに自動で大量のクッキーを増やせたり、1Clickでより多くのクッキーを増やすことができるようになっていきます。そしてうまく進むと京とか垓とか、それどころかもっともっと多くクッキーを増やすことができます。javascriptで書かれたコードを改変して遊ぶことが認められていることも特徴です。
![FireShot Capture 002 – 0クッキー – Cookie Clicker – orteil.dashnet.org.pn

JavaScriptについて

# はじめに
この記事は[Webの基礎をおさらいカレンダー Advent Calendar 2022](https://qiita.com/advent-calendar/2022/basic_review)です。
このカレンダーでは、なんとなくわかった気になっている、Webの知識をおさらいするカレンダーです。
興味をもし持ってくださった方は、購読いただけると嬉しいです！

今回はJavaScriptについて説明します！

## JavaScriptとは
Webページで複雑な機能を提供するためのプログラミング言語です。
HTMLで、文書の構造を示し、CSSで見た目を装飾し、JavaScriptで動きをつけます。

例えば、
Qiitaでいいねボタンを押すと即座に数字が反映されたり、通知が届いたりするのはJavaScriptの機能を使用して実現されています。

JavaScriptはECMAScriptという標準規格によって基本的な使用が決められています。
かつて、ブラウザによって仕様の違いが大きく、統一するためにECMA Internationalという団体によってこの標準規格が作成

フォロー・フォロワー数の非同期化

フォロー機能の非同期化完了後、ユーザー詳細ページにて、他ユーザーをフォロー(or解除)した際、リロードしなければフォロワー数が変化せず、躓きメンターさんに教えていただいたので、自分メモとして記事にいたしました。
（初心者であるため、専門用語の誤用や読みにくい記事となっているかもしれませんが悪しからず）

# 初めに
まず、私が勘違いしていたこととして、フォローボタンを押すとusers/show画面が変わるため、usersディレクトリにcreate.js.erbを作成したり、users/showに記述してある<%#= link_to @user.followers.count, user_followers_path(@user.id) %> にremote:trueを追記しなければいけないと思っておりました。

しかし、ターミナルのログを確認すると、フォローボタンを押すと、サーバにはRelationshipsコントローラのcreateアクションが送られておりました。

そのため、フォロー機能の非同期化の際に作成したrelationships/create.js.erbに後述する内容を追

年末年始に向けてスイッチで４人で遊べるゲームがほしい話

## はじめに

本日(12/25(日))はクリスマスの休日ですが皆様いかがお過ごしでしょうか？
コロナ禍で皆で集まるのもまだまだ難しい状況かとは思いますが、年末年始の休暇に向けて**多人数で遊べるゲーム**がほしくないですか？

**ほしいですよね！？**

そこで以下のようなキーワードでググってみることにしました。

– [switch 4人プレイ](https://www.google.com/search?q=switch+4人プレイ)
– [switch パーティ](https://www.google.com/search?q=switch+パーティ)
– [switch 協力プレイ](https://www.google.com/search?q=switch+協力プレイ)
– [switch co-op](https://www.google.com/search?q=switch+co-op)

が、検索結果には以下の様な課題があり、どうにも欲しいものを探すことができませんでした。

– 見たことがあるゲームしか出てこない
– 4人用ではないものも検索される

仕方が

【呆れるほどわかりやすい】JavaScript非同期処理（コールバック関数・Promise・async/await）について0から理解する

# JavaScriptにおける非同期処理についてPDF形式でまとめてみました。

はじめまして！正社員エンジニアとして今月12月からエンジニアとして働いている川北翔と申します。

今回は、JavaScriptの非同期処理について、エンジニアを目指している方や駆け出しエンジニアの方に挫折せずに非同期処理についての学習を行うことができるように、研修で自ら作成したPDFの資料を大幅に改良して、

JavaScriptにおける非同期処理について

としてPDF形式にまとめてみました。無料ですので、よろしければダウンロードしてご活用してみてください！

JavaScriptの非同期処理について、

:::note

• どんな記事よりも詳しく・わかりやすく
• できるだけ1スライド1要点
• 難しい言葉を使

元記事を表示

“yyプラグイン”の学習効果について

# 概要　
`yyプラグイン`を学習に活用する例について記述します。
yyプラグインは、以下のサイトでインストールできます。
[yyプラグインのインストール(無料)](https://chrome.google.com/webstore/detail/yy%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3/edooldmlaabbmllldenkkceddlbbeing?hl=ja&authuser=0)

# 活用例
youtubeには様々なジャンルの動画が蓄積されています。
娯楽の動画もあり、知識・教養の動画もあります。今回は、この知識・教養の動画で学習のために活用する動画の例をいくつか取り上げて行きたいと思います。
### 「キャッシュフロー」についての学習利用
いきなりですが、ネットサーフィンをしていて、この言葉が目に付きましたりで、取り上げたいと思います。ネットで、「確定申告」などの税務関係のテキスト文字で動画の検索を行うと動画のタイトルに、この文字「キャッシュフロー」が出てくる動画がヒットされることがあります。この言葉の意味について

元記事を表示

Vus.js3へDatePicker導入[vue-datepicker]

## 環境
___
| フレームワーク | バージョン |
| —- | —- |
| Laravel Framework | 9.30.1 |
| Vue.js | 3.2.36 |

## インストール
____
“`bash
npm install @vuepic/vue-datepicker
“`
## 使い方
___
#### SFCを用意
“`vue: resources/js/components/InputDate.vue

“`

#### SFC読み込み
“`js: reso

元記事を表示

JQuery メモ　.each()と＄each()の違い

each()メソッドの書き方例
$(‘.item’).each(function () { / jQueryオブジェクトのループ処理に対して適用される/
});

＄each()メソッドの書き方例
$.each(data, function(i, item) { /dataはjQueryオブジェクトではなくただの配列のため＄each()を適用
　　　　　　　　　　　　　　　　　　　　　　　　iは0から始まる要素のインデックス　itemはその要素の値/ @iとitemはindex value elem など任意も文字列でも可
});

/!JQuery最高の教科書　p214 引用!/

元記事を表示

fetch upload javascript

“`javascript
fetch(‘https://storage.googleapis.com/llwork.appspot.com/a.txt’,{body:’data’,method:’PUT’})
“`

元記事を表示