JavaScript関連のことを調べてみた2021年09月10日

JavaScript関連のことを調べてみた2021年09月10日

yarnの処理でEACCESエラーが出たときの対処法

## 参考

https://qiita.com/Gaddict/items/8c76d92bd0adec2bfb6a

## エラー内容

EACCESのpermission deniedエラーが出ました。

“`
FATAL EACCES: permission denied, mkdir ‘/home/xx/Documents/xxx-toC/frontend/node_modules/.cache/nuxt’

╭──────────────────────────────────────────────────────────────────────────────╮│ ││ ✖ Nuxt Fatal Error ││

元記事を表示

iPhoneでも全画面表示させたい、んだ。

# はじめに
#### Fullscreen API に対応していない iPhoneで、どうしても全画面で表示させたい時がある。

特に landscape時の上部バーは、普通のサイトではスクロールすると隠れてくれるので邪魔に感じることはない。しかし、パノラマやVR等のコンテンツを表示する場合は邪魔に感じてしまいます、よね。

PWAにしてホーム画面に追加で解決はする、するのかもしれない、、がそうじゃない、んだ。解決はするかもなのだが、わざわざホーム画面に追加したりはしなかったりとか、するよね。

+ こんな時、個人的に好きなこがいる、__[krpano](https://krpano.com/)__である。

上下にスワイプして上部バーを隠してくれる。

> 他のコンテンツでもコレをやりたい、んだ。

# やってみよう
> サンプルコード

“`html:index.html

元記事を表示

Next.jsでページ内リンクを実装する

“`
[応用例]

export default function Layout() {
//ここでnavバーのコンテンツを定義する。
const navItem = [“about”, ‘skills’, ‘values’, ‘future’]
return (

元記事を表示

node.js実践編(メッセージボード編)

※node.js超入門ノートの続きになります。

https://qiita.com/Glider2355/items/cf368ba789f4f5200e22

# モデルの実装

以下のコマンドを実行します。

“`
npx sequelize-cli model:generate –name Board –attributes userId:integer, message:string
“`
## アソシエーションの設定
作成したファイルを修正します。

“`javascript:models/board.js
// 従モデル
‘use strict’;
module.exports = (sequelize, DataTypes) => {
const Board = sequelize.define(‘Board’, {
userId: {
type: DataTypes.INTEGER,
validate: {
notEmpty: {
msg: “利用者は必須です。”
}

元記事を表示

愛しのjQueryでぬるぬる動くスネークゲームを作る

実物:https://mogamoga1024.github.io/SnakeGame/

矢印キーで移動
スペースキーで一時停止
IE11でも動作可能
PC上以外での動作は未想定

ちなみに頭が体に当たってもゲームオーバーにはなりません。

# 前書き

Vanilla.js(生JS) + jQueryの構成です。
ES6やaltJSやp5.jsやVue.js、Babel、Polyfillなどは使いません。
Vanilla.js(生JS)とjQueryが嫌いな人は見ない方がいいでしょう。
裏テーマはIE11対応です。

ソースはこちら:https://github.com/mogamoga1024/SnakeGame

# 描画

SVGタグを利用します。以上。

# SceneManager + Scene

ゲームの状態(以後、Sceneと呼ぶ)としてスタート、ゲーム中、ゲームオーバーなどがあり、Sceneごとに画面レイアウト、キー操作が異なります。

Sceneが切り替わったときに、例えばキー操作を切り替えるとして共通のキー操作メソッド内部で○○Sceneは○○をする。△△S

元記事を表示

iOSとAndroidを区別するのに便利なJavaScript置いておくね

“`
var isAndroid = (UA && UA.indexOf(‘android’) > 0) || (weexPlatform === ‘android’);
var isIOS = (UA && /iphone|ipad|ipod|ios/.test(UA)) || (weexPlatform === ‘ios’);
“`

これは基本的にユーザーエージェント(UA)を見て正規表現でandroidかiOSかを判別しています。`UA &&`の部分はnullチェックですね。UAの値を取得できなかった時にエラーで落ちないようにしています。

日本のスマホのシェアはAndroidとiOSが99%を占めているので上記以外はその他で例外処理をしてしまって良いでしょう。

元記事を表示

tableのtrをリンクにしつつ、その中に通常のリンクを置く (Pure.js)

data-hrefの中にリンクを置きたいとき、
もしくはボタン、チェックボックスを置きたいときの備忘として残します。

“`html

リンク先 通常リンク
https://qiita.com/ 編集する

“`
– `tabindex=”0″`でタブ操作を有効にしてます

“`js
var td = document.querySelector

元記事を表示

【TypeORM】多対多リレーションの中間テーブルをEntityにて明記する。select join(結果の型はEntity準拠)の実装例

## 背景

TypeORMで最も時間がかかった多対多テーブルの実装方法について、一通りの実装例を以下に記載する。

### こういう人向け

* 筆者自身。こういう風にコーディングしましたと自他に後で見せるため。

https://typeorm.io/#/many-to-many-relations

* 上記公式ドキュメントを見たりしてそのまま実装しようとしたら「えっ…中間テーブルの消し方…どうなってんの!?」と思った方
* TypeORMにて多対多テーブルをどんな風に他の人が組んでるのか知りたい方

## 前提

* TypeORMのEntityをテーブルの設計書代わりとしたい(≒Entityファイルを見れば、どういったデータベース定義か自明となるようにしたい)
* 上記より、フレームワーク側が勝手に定義・作成するテーブルは許容しづらい。ヒトの定義でコントロールしたい。
* その上で、typescriptとtypeormが生み出す「静的型付け」「Entityにもとづくテーブル自動生成」を行いたい
* DBはmysql、typeormバージョンは`^0.2.37`

## 実装

元記事を表示

【詰まったログ】JS reduce( )でエラー

#やりたいこと
各配列の数値をそれぞれ合計したい

“`
data:[
[]
[300000, 600000]
[]
[100007, 99999]
]
“`

#エラー内容
“`JavaScript
let total = beneficiariesData.map((val) =>
val.reduce((sum, i) => sum + i)
);
“`
`Console.log(total)`するとエラーになる

#原因
[Array.prototype.reduce()](https://www.notion.so/Reduce-87241be5e4a2453eb09f823dad4fa6db#49776fff79d24f92aa7708f5a910c71b)

>オブジェクトの配列に含まれた値の合計値を出すには、すべての項目を関数内で取得できるようにするために initialValue を指定する必要があります。

initialValue(初期値)を設定していなかったので、足すものがない(配列がカラ)のときにエラー

元記事を表示

Symbol.species に未来はあるのか

いや、ない(反語)

## ES2015 から導入された `@@species` について

ES2015 からクラス構文が導入され、ビルトインクラスを継承したクラスを簡単に作れるようになりました。

“`js
class MyArray extends Array {}
“`

ES2015 を策定するにあたって議論となったのがビルトインクラスそのものを返すメソッドの存在です。例えばこの `MyArray` のインスタンスで `Array#map` を実行したときにその返り値は `MyArray` であるべきでしょうか `Array` であるべきでしょうか。そしてそれをどうやって `Array#map` に伝えればいいでしょうか。

これを制御できるようにするのが `@@species` という Well-known Symbol です。普通は派生クラスを返しますが、任意のクラスを返すように変更することも可能になります。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/S

元記事を表示

GASを活用した業務効率化レシピの紹介

# はじめに

Axrossの広報を担当している松田です。

**[Axross](https://axross-recipe.com/recipes)** とは、エンジニアの”教育”と”実務”のギャップに着目し、「学んだが活用できない人を減らしたい」という想いのもと、ソフトバンクと社内起業制度にて立ち上げたサービスです。
現役エンジニアによる実践ノウハウを”レシピ”として教材化し、実際にプログラミングで実装を追体験しながら学ぶことができます。AI/機械学習をテーマにした、様々な業務領域やビジネスの課題解決に応用できる実践的な学習教材を180以上揃えています。(2021年9月時点)
Axross:https://axross-recipe.com
公式Twitter:https://twitter.com/Axross_SBiv
![Axrossアイキャッチ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620853/9f500e0e-a759-20e2-bb8b-480bbcfaaf9b.png)

元記事を表示

【JavaScript】関数の引数について

#はじめに
こんにちは。
JavaScriptの引数の定義についてアウトプットしていきます!

##引数とは
>引数とは、関数やメソッド、サブルーチンを呼び出す際に渡す値のことです。プログラム言語では、この「渡された値に対して処理を行い、結果を返す」ということを行っています。

> 参照:https://job-support.ne.jp/blog/javascript/basic-argument

“`javascript:JavaScript
//function 関数名(引数1, 引数2,~)
function fn(a,b){
return a * b
}

//関数名(引数1, 引数2,~)
fn(3,4); //12
“`
関数`fn`の第1引数に`a`を、第2引数に`b`を記述する。関数を呼び出す際、引数に値や式を記述したものが関数内で実行されるので、`a`と`b`の積が出力される。

“`javascript:JavaScript
function fn(name,jobs){
console.log(`${name}は、${job

元記事を表示

【CSS】比率で配置できるFlexboxのflexプロパティ

# はじめに
* 比率で配置できるFlexboxのflexプロパティについてのまとめです。

## “`flex:数値“` 比率で配置する
* アイテムをどのような比率で配置するか

“`html:html






Document

Item 1
元記事を表示

サンプル

“`



MP TEST PAGE