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

minimalなPerfect Squared Squareを描くライブラリについて

# サマリ?
後述する、**最小の『正方形の完全正方形分割』**を`JavaScript`ですぐに描画することができるデータセットクラス`minimalPerfectSquaredSquares`(`mPSS`)を公開しました。
１つも需要がなさそうなリポジトリですが、既存のタイリング手法に飽きた人、完全正方形分割を眺めたいあなちあなたにお勧めです。

# 成果物
[minimalPerfectSquaredSquares: a dataset consisting of minimal Perfect Squared Squares.](https://github.com/tetunori/minimalPerfectSquaredSquares)
2021/11/06 現在のversionは`1.0.0`です。

> ⚠️ **i

kintone の詳細画面開いたときに、フィールドの値を変えたい

今回は、kintone カスタマイズの初心者がやりがちな（気がする）「そのコード間違っtone」を供養したいと思います。

# ?詳細画面開いたときに、フィールドの値を変えたい

?「編集画面じゃなくって、詳細画面でフィールドの値を変えたいのに、変わりません！
どこを変えたらいいですか！？
書いたコードはコレです。」

“`js
// レコード詳細画面表示後
kintone.events.on(
[“app.record.detail.show”],
(event) => {
const record = event.record;
console.log(“変更前”, record.会社名.value);

record.会社名.value = “テスト”;
console.log(“変更後”, record.会社名.value);

return event;
}
);

“`

?「あ～～。これは・・・。コレじゃあ変わらないですね?」

?「でも、コンソールで確認す

0歳の俺がモダンJavaScriptを勉強する③

こんにちは！
今日もモダンJavaScriptについて学んだことをアウトプットしていきたいと思います。

# mapやfilterを使った配列の処理

## 従来の処理

“`javascript
const specialSkills = [‘無量空処’, ‘自閉円頓裹’, ‘嵌合暗翳庭’, ‘伏魔御厨子’, ‘蓋棺鉄囲山’];
for (let index = 0; index < specialSkills.length; index++){ console.log(specialSkills[index]); }; ```  配列の中の要素を取得したり、表示させたい時は従来ではfor文を利用していました。 ##　mapを利用した配列の処理 ```javascript con

入力した一年後の日付を別のフィールドに自動入力する

やりたいこと：date_fieldに入力した値から一年マイナス1日の日付を別のdate_fieldに自動表示させる。
Ex applied_date columnに2021-01-01と入力したなら
expired_date columnに2022-12-31と自動表示させる。

“`ruby:qiita.js
$(document).ready(() => {
var applied = document.getElementById(“applied_date”);
applied.addEventListener(“change”, (event) => {
var appliedDateInput = new Date(event.target.value);
appliedDateInput.setFullYear(appliedDateInput.getFullYear()+1);
appliedDateInput.setDate(appliedDateInput.getDate() – 1);
var expiredDa

zod 使うぞっと

# [zod](https://github.com/colinhacks/zod)
なんか最近は流行っているらしいスキーマの定義とバリデーションのライブラリ。

基本はこんな感じ。

“`typescript
import { z, ZodError } from “zod”;

// スキーマを定義する
const schema = z.object({
id: z.string().max(3),
name: z.string().nonempty(),
})

// バリデーションを行なう
try {
// バリデーションが成功したときは user にオブジェクトが代入される
const user = schema.parse({
id: “abcde”,
name: “shiraishi”
})

} catch (error) {
console.log(error);
}

// スキーマから型を生成する
type User = z.infer
// {
// id: string,
//

Installation of Prettier to Vue3

# Problem
Somehow, auto fix by `Prettier` on vscode is not working.

# My environment
– Editor
– [vscode](https://code.visualstudio.com)
– Plugin
– [Prettier ESLint](https://marketplace.visualstudio.com/items?itemName=rvest.vs-code-prettier-eslint)
– Framework
– [Vue.js v.3](https://vuejs.org)

# Solution for me
1. Installing packages following `Prettier ESLint` README (`vue-eslint-parser` is not required for me).
![Screen Shot 2021-11-05 at 23.39.30.png](https://qiita-image-store.s3

ファビコンを取得するブックマークレットを作った

#### 完成品

“`javascript:
javascript:window.prompt(“faviconのURL”,
document.querySelector(“link[rel*=’icon’]”)?.href??
location.protocol+”//”+location.hostname+”/favicon.ico”);
“`

#### 使い方

1. ブックマークに完成品を登録する。
2. ファビコンを取得したいサイトで実行する。
3. DOM内にファビコンがあれば、プロンプトの入力欄にその値が表示される。無ければ、`プロトコル+ドメイン+/favicon.ico`を表示する。

javascriptでゲーム開発

###こんにちは！
今回から、HTMLとjavascriptのcanvasを使ってゲームを作っていきたいと思います！
では、何を作るのかと言うと「ジャンプ系ゲーム」を作りたいと思います！
先に作ったものがありますのでこちらを見てください！
[こちら]:https://sugoruru.github.io/jump/
[ここ][こちら]をクリック！
では作っていきましょう！

“`ruby:index.html

“`
こちらが、htmlです。

【Vue.js】インラインメソッドハンドラ

#はじめに
こんにちは！
今回は【Vue.js】インラインメソッドハンドラについてアウトプットしていきます！

#インラインメソッドハンドラについて
v-onを使用することでDOMイベントの購読、イベント発火時のJavaScriptの実行が可能になる。

#書き方・解説
クリック数をカウントする機能を例題にアウトプットしていきます。

“`HTML:HTML

{{ counter }}

Click!　　　　　　　　　　　　　　　　

“`
“`Vue.js
var app = new Vue({
el: “#app”,
data: {
counter: 0
}
})
“`

カウント数を保持する`data`のプロパティ`counter`を記述。初期値は`0`。
＜テンプレート側＞
カウント数の表示部分`{{ counter }}`と

JavaScript DOM操作② 「IDをキーに要素を取得」

#目次
[1.はじめに](https://qiita.com/Stack_up_Rising/items/238661a082eb3ce8979c#1-%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB
)
[2.getElementById](https://qiita.com/Stack_up_Rising/items/238661a082eb3ce8979c#2getelementbyid
)
[3.どうやって書くの？](https://qiita.com/Stack_up_Rising/items/238661a082eb3ce8979c#3-%E3%81%A9%E3%81%86%E3%82%84%E3%81%A3%E3%81%A6%E6%9B%B8%E3%81%8F%E3%81%AE
)
[4.例題](https://qiita.com/Stack_up_Rising/items/238661a082eb3ce8979c#4-%E4%BE%8B%E9%A1%8C
)
[5.おわりに](https://qiita.com/Stack_up_Rising/i

開発時のエラー例(二か月)

アプリの開発時に
躓いたところ(二か月目)

最初は
基本的なhtmlやｃｓｓのＵＩと
呼ばれる描画について
勉強を始めました。

現在では私は
コンピューターが理解しやすい部分と
人間が視覚的にとらえて
理解できるところを
分けて考えます。

これができるようになるのに
二か月ほどかかりました。

最初はフロントエンドやＵＩと
呼ばれるところについての理解から
進めるのがよいと思います。

最近はjavescriptの開発も
しようと考えているので三か月目には
取り掛かることになるとは思いますが
基本的にプログラムというのはこのjavascriptのことを指すと
私は考えています。

ホームページの作成からhtmlやcssの理解を深めていくのですが
基本的には部分的な変更をしながら使えるＣＳＳをネット上から切り貼りする
つぎはぎで構わないので描画が崩れないように理想とするＵＩを作っていきます。

最初に作ったものがこちらで現段階ではまだ完成ではないです。

最初の一か月目にできたものがこちらです。
![image.png](https://qiita-image-store.s

[JavaScript] var を書かない＆なるべく const を使う

過去記事から分離、一部内容追加、説明を全体的に修整。
(過去記事側も修整予定。)

※ IE 等では Babel やポリフィル等を使用する前提です。

# 1. `var` を書かない (`no-var`)

`var` は古い JavaScript からある書き方で、`let` や `const` とスコープが異なり、混乱を招く可能性がある (すなわちバグができる可能性が高まる) ため、`var` を書かないべきです。

ただし、古いプロジェクトから移行するコストが高い場合にあえて無視することもあります。

各スコープ:

– `const`, `let`: ブロックスコープ
– `var`: 関数スコープ

参考「[no-var – Rules – ESLint – Pluggable JavaScript linter](https://eslint.org/docs/rules/no-var.html)」
参考「[2.2 Disallow var – 2. References – Airbnb JavaScript Style Guide](https://github.co

【jQuery】数字の末尾を取得する方法

数あるリストの中から数字の下一桁を取得したかったのでその備忘録。

“`javascript
$(function(){
/* ツールチップ */
$(‘.list’).mouseover(function(){
// ホバーした時のindexを取得
let index = $(this).index();
// 取得したindexを文字列に変換
let str = index.toString();
// splitで文字列を一つずつ配列に格納
let strAry = str.split(”);
// 末尾の数字を取得
let last = strAry.slice(-1)[0];

// 以下に処理を記述
});
$(‘.list’).mouseout(function(){
// マウスアウトの時の処理を記述
});
“`

気をつけないといけないのは、ただイ

5年×10社のエンジニア経験から考えるエンジニアとしての市場価値のあげ方

> **エンジニアとして市場価値を上げるには？**

誰もが考えるこの問いを、僕もエンジニアになってからずっと考えてきました。

学生時代のインターンも含めて10社で5年間のエンジニア経験がある僕が考える市場価値の高いエンジニア・低いエンジニアの違い、また、エンジニアの市場価値の上げ方や今注目している領域についても記していきたいと思います。

# 私のエンジニア経歴・経験値

今から5年前、僕は東京大学工学部システム創成学科で物理シミュレーションを専攻していました。その時は物理学の公式をC言語でモデリングしてシミュレーションをするという研究をしていました。

しかし、僕はそんなコテコテした研究よりもみんなが使うキラキラWebサービスがやりたい！と思い、研究室を飛び出して、スタートアップ企業を転々とします。

未経験ですがやらせてください！と飛びこんだスマートキャンプ株式会社では2年間お世話になり、フロントエンド・サーバーサイド・インフラ・データ分析まわりの力をつけました。次に、株式会社 FiNC Technologiesでデータアナリストとして、株式会社Gunosyでデータサイエンテ

【JavaScript】関数とオブジェクト㉑　getter/setterとstatic

#はじめに

Udemyの[【JS】ガチで学びたい人のためのJavaScriptメカニズム](https://www.udemy.com/course/javascript-essence/)の講座の振り返りです。

前回の記事

https://qiita.com/nao0725/items/3b12a8c1822159363191

#目的

* 関数とオブジェクトについての理解を深める

#本題
###1.getter/setter

* ディスクリプターのオプションの１つ
* 設定すると特別な機能をもたせられる

####例1

getterとsetterの挙動の確認

““js
function Person1(name, age) {
this.name = name;
this.age = age;
}

// ディスクリプターを設定
// Person1のnameプロパティの設定値をsetter,getterにする
Object.defineProperty(Person1.prototype, “name”, {
// getが呼ばれた際の挙動を書く

書籍購入をもっと便利に！！openBDで書誌情報検索！

# オンラインで本を買う
書籍をオンラインで買うときに困るのは、本の中身がイマイチよくわからないことです。ショッピングサイトによって掲載している書誌情報もまちまちで、ときには出版社のサイトまで目次を眺めに行ったりします。このひと手間を怠ると、届いてみたら思っていたものと違った、なんてこともあるので油断はできません。

書籍をサクサク検索できて、書誌情報が１ページに集約されいて、なおかつ常に最安値で買えるようなサイトがあれば…。
そんな願いの第一歩として、書籍情報のAPIであるopenBDを活用してサクっと書誌情報を確認できるWEBアプリを作ってみました！

https://openbd.jp/

# 実行環境
#### API
– openBD 書誌API

#### ライブラリ / フレームワーク
– axios
– Vue.js
– Spectre.css

https://picturepan2.github.io/spectre/

#### ホスティング
– netlify

https://www.netlify.com/

#### ブラウザ
– Google Ch

ナオトインティライミで前置詞を学ぶWEBアプリ

##ナオトインティライミを動かすと前置詞がわかるようにする
この画像を見たことがある方いると思います。
英語の前置詞が一目でわかる画像ですね。一時期ツイッターなどを目に触れた覚えがあります。

Webアプリのネタを考えていた時に、“マリトッツォで学ぶ前置詞”（↓これです）というワードを聞いて、このネタ画像を思い出しました。

マリトッツォで学ぶ前置詞のイメージ pic.twitter.com/Us7DU0WcPM

— こあたん??こあらの学校 (@KoalaEnglish180) October 14, 2021

ちょうど、Webブラウザ上で画像を動かせるアプリを学んで作りたいと思っていたこともあり、
**ナオトインティライミを動かすと、前置詞を教えてくれる**webアプリを開発しました。

##完成品
まずはこちらをアクセスして触ってみてください
ナオトとティライミの位置関係によって表示され

webpack 5からurl-loader/file-loader/raw-loaderが要らなくなった

doc: [Asset Modules | webpack](https://webpack.js.org/guides/asset-modules/)

## Asset Modulesの概要

webpack 5から **Asset Modules** が追加されました。モジュールのタイプを指定するもので、webpack4以前ではloaderを使用していたファイルの読み込を置き換えるものになります。
次のような対応になります。

|webpack 4 (loader)|webpack 5 (Asset Module)|
|-|-|
|url-loader|asset/inline|
|file-loader|asset/resource|
|raw-loader|asset/source|
|url-loader + limitオプション|asset|

## 使用方法

`webpack.config.js` でloaderを使用していた部分をAssetModuleの指定に書き換えます。

“`js:wepback.with-loader.config.js
module.ex

初心忘れるべからずということです。

試したことを記録していくもの。

**以下記事にて実装**
投稿日：2021/11/04
・[「何食べたい？」に対して「なんでもいい」以外の言葉、探してみませんか？](https://qiita.com/yui-kouy/items/5dc0db657e29e677bed6)
カラーコード
・[WEB色見本 原色大辞典 – HTMLカラーコード](https://www.colordic.org/)

#Web上の画面再読み込み
Web上で再読み込みボタンを作る
HTMLとCSSの記述のみで実装可能

**参考**
・[See-SS](https://see-ss.com/)

HTML

“a href=””“の“””“は「再読み込み」を行う指示
“a href=””“を“”#”“にすると「ページ上部へ戻る」の指示になる
やりたいことによって記述が変わるので注意。

“`HTML
他の料理も見たい場合は押してください
“`

【Vue.js】v-ifとv-showの違い

#はじめに
こんにちは！
今回は【Vue.js】v-ifとv-showの違いについてアウトプットしていきます！

#v-ifとv-showの違い

##v-if
・要素をDOMから削除・追加することで表示/非表示を切り替える。
⏩切り替えコストが高い。
・v-else、v-else-ifが使える。

##v-show
・CSSのdisplayプロパティを使って表示/非表示を切り替える。
⏩初期描画コストが高い。
・v-else、v-else-ifが使えない。

#まとめ
・v-ifは実行時に条件を変更することはほとんどない場合に使用するのが推奨されます。
・v-showは表示/非表示を頻繁に繰り返す場合に使用するのが推奨されます。

#最後に
今回はv-ifとv-showの違いについてアウトプットしました。
今回の記事を読んで質問、間違い等あればコメント等頂けると幸いです。

今後ともQiitaにてアウトプットしていきます！

最後までご愛読ありがとうございました！