## はじめに
今まで知らなかったのですが、どうやら世の中にはカップルというものが蔓延っているようです。
自分はそういったカップルをなんとかして別れさせたいと思い、この記事を書いています。
## 別れさせるとは
その文字の通りです。
コトバンク(のデジタル大辞泉)で調べたところ、「一緒にいたものが離れ離れになる。互いに離れて去る。」と書いてありました。
つまり、離れ離れにすればいいということですね。
https://kotobank.jp/word/%E5%88%A5%E3%82%8C%E3%82%8B-664730
とはいえ、部外者の自分がどんなに頑張っても本人たちの一緒にいたいという心の衝動が止められるとは思いません。
なので、直接ではなく、間接的に別れさせるようにしたいと思います。
調べたところ、エスニックジョークといったものでは日本人はみんながやっていることに倣う傾向があるようです。[^1]
なので、この世からカップルという概念をなくせば、カップルでいることが異常であると思い、別れていくのではないでしょうか。
カップルと言う概念がよく使われるものといえばなんでしょうか
久しぶりにJavascriptの作業をする際、
よく `let` と `const` の機能が、どっちがどっちか分からなくなります。
そのため`var`を含め、まずはそれぞれの機能をおさらいします。
- var
-
・再宣言や再代入が可能
・変数の巻き上げによってエラーを出さない
・非推奨ではないが、下記で対応可能であればそちらを使う。
- let
-
・変数を宣言する時
・再代入が可能
・巻き上げ時にエラーが発生
- const
-
・定数を宣言する時
・再宣言も再代入もできない
・巻き上げ時にエラーが発生
英単語を覚えていれば何となく分かりそうですが、
私はとっさに出てこないため、何かいい覚え方を考えてみました。
無理やりですが、`const`を「co [こ] てい（固定）」と覚えれば、しばらく経っても覚えていられるかな…。
（そもそも英単語を覚えればOKなのですが）
次回、
# はじめに
2023年7月より未経験でエンジニアとして働いています。
普段、laravel+vue3を使ったウェブアプリの制作を担当しています。
業務を行っていく中で学んだことを発信してきたいと思います。
# 参考記事
[HTMLElement: change イベント](https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/change_event)
# 何をしたかったか？
vueでフロント側の実装をしている際に、とある箇所の背景色をカラーピッカーを使って、ユーザーの好きな色に変更できる様にしよう！と実装していた時のこと。
– ユーザーがカラーピッカーで色を選ぶと上のカラーコードも連動し変わる
– カラーコードを直接入力しても色の変更ができる
上記の状態で
私が業務中にGoogleMapsAPIでハマった話についての備忘録です。
# GoogleMapsAPIについて
GoogleMapsAPIとは、Googleマップを表示する際に独自にカスタマイズして使用できるようにするAPIです。
GoogleマップをカスタマイズするためのAPIは大きく分けて「モバイルAPI」「ウェブAPI」「ウェブサービスAPI」の3つのようです。
今回使用したのはウェブAPIの「JavaScript API」
# 本題
シナリオテスト中に「検索結果が1件の時にリクエストが再度送られている」という不具合が発生しました。
以下が実際のコードの省略版になります。
“`javascript:maps.js
this.map = new this.google.maps.Map(target, {
~~~ 省略 ~
## `list-style-type:none`が当たっている時の注意点
`list-style-type:none`を利用するとアクセシビリティツリー状でリストとして認識されなくなります。
https://developer.mozilla.org/ja/docs/Web/CSS/list-style#%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B7%E3%83%93%E3%83%AA%E3%83%86%E3%82%A3%E3%81%AE%E8%80%83%E6%85%AE
リセットCSSを利用している場合、リストのデフォルトスタイルがキャンセルされていることが多いと思います。
:::note info
アクセシビリティを意識する場合は`role=”list”`を付与してください！
:::
## JSXの中で文字列を展開するときは…
ブラウザのdevツールで確認した際の見え方まで意識できていませんでした…
:::note warn
表示が変わるわけではないのですが、不要なものがレンダリングされてしまうのは不本意ですよね…
:::
実際のコードで書
みなさん、おはようございます:runner:！
@f0lstです！
この記事はAteam LifeDesign Advent Calendar 2023 の 15日目の記事になります :santa:
## :point_up: はじめに
**全国47都道府県**のReactを学ぶ紳士淑女の皆さん！
毎日、自己研鑽おつかれさまです :santa_tone1:
やあああ、スキルアップって楽しいですね :relaxed:(唐突)
## :smiling_imp: あなたが知らないかもしれないReactのホント
「**あなたが知らないかもしれないReactのホント**」とは大きく出てしまいました :baby_tone1:
紹介させていただくのは、**公式ドキュメントからの抜粋**です。
詳しくみたい方は是非公式も見に行ってください :see_no_evil:
記念すべき**第一回**は**メモ化**についてお話ししていきます :sp
# 「プログラミングしてみよう!!」
## 1\.はじめに
こんにちは。 アドカレと言う文化をついこないだ知った人です。
N中等部生です。
今回は私がいつもDiscordのBotを作る時の機能面で気をつけていることなどを、できるだけわかりやすく初心者の解説をつけながら話したいと思います。
#### ※この記事はJavaScriptを使用していますが、JavaScriptがわからなくても読めるような解説を目指しています
プログラミングをあまり知らない人向け
以下はほぼ全てのプログラミング言語に共通することです。
### 1\.ドット
ドット(.)は「その中の」みたいな意味で
“`js:dot.js
root.image()
“`
は“rootの中のimage()“
という感じ。
これを覚えとくだけでプログラム大体読めるって言っても過言なぐらいです。
### 2\.コメントアウト
“//“はコメントアウトと言い、プログラムの処理から除外されます
コード内に書けるメモです
“`js:commentout.js
con
## はじめに
Slackを使ってると @〜〜 さま という様にさま付けでメンションする事が多く見受けられます。個人的意見としてはSlackメンションで”さま”を付けるのは、非常に無駄だし、やらんでも良いと思ってるのですが。。
一部の方々からしたら、(“さま”をつけないのは呼び捨てで呼ばれてる感じがする、失礼)という意見もあるらしく、潜在的に失礼を働くのも嫌だな〜、と思いました。
そんな経緯もあり、そもそも自動的に”さま”って付けられんの？と思ったのが発端です。
## 仕組みを考える
SlackにはBotを作ったりAPIでメッセージ内容を見たり投稿したりする機能が備わってます。
Botが任意のチャンネルを監視して、”さま”無しメンションの投稿をしたら、Botが修正してくれるみたいなのをイメージしました。今回はBolt for JavaScri
## 完成イメージ
## Codepen
以下のCodepenでも確認できます！
## 実装
### HTML
“`HTML
WALL-E【JointJS】Anchor設定でLinkの端点位置を指定する
## Anchorとは
ElementをLinkでつなぐとき、デフォルトではLinkの始点と終点はElementの位置によって自動で決定されます。
ですが、図形によっては始点・終点の位置が自動で決まってしまうと不都合な場合があります。
AnchorはElementの始点・終点の方向を指定できる設定です。始点・終点を意図した位置に設置できます。
## Anchorの指定方法
### Paper全体のデフォルトを指定
Paperの`defaultAnchor`を指定することで、Anchorのデフォルト値を設定できます。
“`js
var paper = new joint.dia.Paper({
// （中略）
defaultAnchor: {
name: ‘midSide’,
}
});
“`
### Linkごとに指定
LinkごとにAnchorを指定することで、個別に設定ができます。
“`js
link.source(rectangle1, {
anchor: {
name: ‘topRight’,
}
## はじめに
**短絡評価**という言葉を聞いたことはありますか？
JavaScriptの`||演算子`が絡む条件文で、この特性を理解しておらず、意図しない結果になってしまったことがあります。
実際のコード例を通して、`||`の挙動や、これにまつわるドモルガンの法則などを解説します。
私と同じようなプログラミング初心者の方の参考になれば嬉しいです。
### 自己紹介
私は2023年9月1日にフロントエンドエンジニアとして自社開発のSaaS企業に入社しました。
未経験独学で、薬剤師からの転職です。
詳しくはこちらをご覧ください。
https://qiita.com/odendayoko/items/f616b2f1952897a9af5d
## 具体例で説明
### 背景
実務で条件の判定に関してリファクタすることになり、元のコードをもとにどのように書くかを検討していました。
元のコードと同じ意味になるように書き換えたつもりでしたが、実際は意味が変わってしまい意図しない挙動になってしまいました。
### 問題
こちらが元のコードです。
“`react
 is a bookmarklet that outputs a markdown table with the
勉強した事の復習！！
参考書籍：確かな力が身につくJavaScript「超」入門
## 要素を取得
・id属性から取得。
“`
document.getElementById(‘id名’)
“`
・タグ名を持つ要素から取得。
※複数の要素にマッチした場合は、最初にマッチした要素1つだけを取得する。
“`
document.querySelector(“CSSセレクタ”)
“`
・タグ名を持つ複数の要素を取得したい場合。
“`
document.querySelectorAll( CSSセレクタ )
“`
## 要素の書換
・取得した要素の書換
“`
document.getElementById(“id名”).textContent = 書き換えたい文字列;
“`
## 要素の追加
・取得した要素を追加
“`
取得した要素.insertAdjacentHTML(‘挿入する場所’,’挿入する要素’)
“`
挿入する場所を指定するには、下記のキーワードを使用する。
| キーワード| 挿入する場所 |
| —- | —- |
| befo
## はじめに
自分の環境を汚さずに、単体テストしたいですよね。
特に環境が重い重い`Node.js`アンチの僕は、ブラウザ用のためだけにJavaScriptライブラリを単体テストしたいと思っても、テストのためだけに`npm`なんたらかんたらで自分の環境を汚したくありません。
なので、`GitHub`に肩代わりしてもらいましょう。
## 手順
### 素ファイルをエクスポート
テストしたい素`.js`ファイルの末尾に、この2行を追加
“`javascript
if (typeof module !== “undefined”)
module.exports = { 関数あるいはクラス }
“`
これは`Node.js`用の処理ですが、見ての通り`if`文で限定しているので、`Node.js`不使用時には影響を及ぼしません。
### テストコード
`Jest`を使います
テストコードのファイル名は
`(ファイル名).test.js`
にしてください
例です。
“`javascript
//import
const {Quaternion} = require
