f@ctor

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

JavaScript関連のことを調べてみた2020年12月25日
目次

【メモ】console.trace を閉じた状態でログ出力する

１個だけトレースするならまだしも、
複数回トレースしたい場合もデカデカとログを占有して邪魔くさい・・・
というわけで、console.trace() を閉じた状態で出力したい。

といっても、これだけでいい。

“`js
console.groupCollapsed(“trace…”);
console.trace();
console.groupEnd();
“`

個人的には、console.log の用途のついでにトレースもしたいニーズがあるので、
こんな関数を作ったら割とデバッグが捗る。

“`js
console.tracedLog = (label, …log) => {
{
console.group(`– ${label} –`);
console.log(…log);
{
console.groupCollapsed(“trace…”);
console.trace();
console.groupEnd();
}
console.groupEnd();
}

元記事を表示

隠ぺいの技術

どうも。@hinoraです。
今日でクリスマスを迎え、今年もいよいよ終わりです。

せっかくのクリスマスということで、僕からプレゼントをご用意しました。

少しわかりにくいところに置いてありますが、よかったら探してみてくださいね。

—

改めまして、今回は隠ぺいの技術である**難読化**と**ステガノグラフィ**についてご紹介します。

## 難読化とは

「難読化」という言葉はご存じでしょうか。
意味は文字通り、意図的に読みにくくしたコードのことです。

その目的は、ウィキペディアによれば

1. コードの目的を隠ぺいしたり、リバースエンジニアリングなどを阻止するため
2. コードを解読するもののためのパズルや娯楽として

とのことです。

実際のコードを見てみましょう。

“`js:change.js
$=~[];$={___:++$,$$$$:(![]+””)[$],__$:++$,$_$_:(![]+””)[$],_$_:++$,$_$$:({}+””)[$],$$_$:($[$]+””)[$],_$$:++$,$$$_:(!””+””)[$],$__:++$,$_$:

元記事を表示

Mapbox-GL.js用に用意したglyphのpbfを活用出来ないか調べている話 Part2

メリークリスマスイブ
MIERUNEアドベントカレンダーの12月24日分の記事です
Part1はこちら
https://qiita.com/northprint/items/b5c48a02b9ae83a4d0a7
前回、うまくいかなかったので、引き続きチャレンジ中です

## 取得できたBitmapを表示してみる
色々調べていたのですが、どうやら1チャンネルのデータになっているようで、これを4チャンネルのデータに変換してあげる必要があることまでたどり着きまして、以下のような関数を用いることで画像の出力はできました
dataに、Part1で取得したbitmapを指定してあげます
（mapboxだとtestに書いてありました）
https://github.com/mapbox/mapbox-gl-js/blob/main/test/integration/lib/render.js#L192

“` javascript
function displayBitmap(width, height, data) {

let pixel = width * height;

//

元記事を表示

クリスマスもあなたのwaifu（妻）と一緒にいられる幸せなJavaScript

クリスマスもワイフと一緒にいたいです。そこで”waifu anywhere”を作りました。

![https://yuis.xsrv.jp/images/ss/ShareX_ScreenShot_94a7ff1d-1c63-431a-b93b-07812dfb7409.png](https://yuis.xsrv.jp/images/ss/ShareX_ScreenShot_94a7ff1d-1c63-431a-b93b-07812dfb7409.png)

Github, Gist: [waifu anywhere – Place your waifu anywhere you go](https://gist.github.com/yuis-ice/fa751fc613b1849e148e3817ee8c45be)

– “waifu anywhere”のインストール

1. tampermonkeyを入れます。 [https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpob

元記事を表示

スキルアップの為のUdemy活用術とWeb開発入門講座の紹介

スキルアップを求めてここまで行き着いたみなさん！
新しい技術を習得したい、プログラミングを学びたい、web関連に強くなりたい！私もそんなスキルアップを求めるひとりです。この記事はここ半年間の自身の経験を元に、前半はスキルアップのためのUdemy活用術を、後半はweb開発入門講座と自作webアプリの実装について紹介します。本文最後には知っていると便利なリンク集が付いてます。

# どんな人向け？

– 本で勉強するのに飽きた人
– プロから系統的に何かを教わりたい人
– Web開発の基本を身につけたい人

# どうしてweb開発の勉強をするの？
– かっこいい自分のwebサイトが欲しい[^1]
– 研究室・プロジェクト・会社のwebサイト管理 or 製作を任された
– BootstrapのようなCSSフレームワーク使えるようになりたい

みなさん各々事情があるかと思います。Web開発の技術があれば、上記のようなニーズに答えられることはもちろん、その他にもこんなweb開発技術習得のメリットがあるかもしれません。

元記事を表示

ウルトラソウルﾊｲﾊｲﾊｲﾊｲﾊｲﾊｲﾊｲﾊｱｱｱｲｯｯｯゲーム作った

#ウルトラソウルでもっとﾊｱｱｱｱｲｨｯｯｯｯｯｯしたい！
「そして輝く？」と言われたら皆さんはなんと答えますか？
そうですね、「__ｳﾙﾄﾗｿｳｳｩｯｯｯｯｯ　ﾊｱｲｨｯｯ__」ですよね。

でもその__ﾊｱｱｱｱｲｨｯｯｯｯｯｯ1回で足りてますか？？？__
「私、__もっとﾊｱｱｱｱｲｨｯｯｯｯｯｯしたい。。。一回じゃ足らない！！__」と悩んでいる方もいらっしゃるのではないでしょうか。
そこで今回はYoutube Player APIを利用して__たくさんﾊｱｱｱｱｲｨｯｯｯｯｯｯできる__ゲームを作ってみました。
ただﾊｱｱｱｱｲｨｯｯｯｯｯｯしても面白くないので、音ゲー要素をちょっと入れてみてます。
コードも是非是非ご覧ください！

Appは[ここから](https://haihaihaihaihaihaihaihaaai.ml/)
コードは[ここから](https://gist.github.com/canonno/e62f67c6fe77cafb8224b66edf4d568d)
[前回の記事](https://qiita.com/canonno/items/964b9ff

元記事を表示

脱jQuery! Vanilla.jsへの書き換え方

#Vanilla.jsとは
素のJavaScriptでもできることをライブラリありきで考える風潮を皮肉ったものらしい。つまり普通のJavaScriptのこと。
##目次
– DOMの取得
– $(‘セレクタ’)
– 複数の要素に対して処理をする
– フェードイン, フェードアウト
– transition
– keyframe
– Web Animate API

– スクロール
– `scroll()`
– スムーズスクロール

##DOMの取得
###$(‘セレクタ’)
“`
//jQuery
const h1 = $(‘h1’);
const para = $(‘#para’);

//Vanilla.js
const h1 = document.querySelector(‘h1’);
const para = document.getElementById(‘para’);
“`
jQueryの場合、$(”)の中にcssのセレクタを書くだけでいい。
Vanilla.jsの場合はちょっと長いです。他にもいくつかメソ

元記事を表示

フロントエンドを100倍速くした（ ＾ω＾）

おはようございます、なのくろです。年の瀬ですね。
この記事は **ABEJA Advent Calendar 2020** の最終日です。

私は2020年01月にABEJAへ入社しました。チームではフロントエンド開発全般を任されています。
参入してちょうど１年が経過しましたので、今年取り組んだことをまとめました。

「**フロントエンドを100倍速く**」というタイトルは誇張気味なのですが、難しいことはせず、基礎的なパフォーマンス改善を素直に実践したという話を書きます。
本稿では事例とやったことを簡単に紹介するのみですが、何かしらの知見や改善のきっかけに役立てば幸いです。

# サービスについて

話をする前に、どんなサービスを開発しているかについて少しだけ触れます。
ABEJA社では「**Insight for Retail**」という、小売業向けに店舗の収益改善を支援するSaaSを開発しています。
店舗の天井にカメラを設置し、取得した情報をAIで分析、どうすれば売上を改善できるかといった情報を提供しています。
「来客属性、動線分析、リピート推定」といった顧客行動データの取得・分

元記事を表示

表がクロスした箇所の登録・更新機能の作成方法

#作成の背景
現在、野球のスコアブックを記録するアプリの作成を実施しています。
野球の１回、１打席目の人の成績を登録したいという場合に、
スコアブックにて１回と１打席がクロスした箇所をクリックすれば登録フォームが表示できる機能があればと考えミニアプリを作成して挙動の確認を実施することにしました。

#ミニアプリの仕様
生徒がどの科目で何点とったかが分かるマトリックス表を作成しました。
表のクロスした箇所をクリックすると点数を記入できるようにしていきます。
また、既存に入力した項目に関しては入力値の更新ができるようにします。

###DB設計
[![Image from Gyazo](https://i.gyazo.com/2b34ed22d24988def54a2b340a9386c6.png)](https://gyazo.com/2b34ed22d24988def54a2b340a9386c6)

###完成イメージ図
[![Image from Gyazo](https://i.gyazo.com/1dfd3ddda0970e324dd1fc44ca4db2f6.gif)](ht

元記事を表示

後輩に正しく指導できるようになりたい① ~JavaScript超初心者向け~

#はじめに

4月に新卒で入社し、
6月にエンジニア配属となり、
**JavaScript**なるものを書き始めてから、早半年…

来年度入ってくる後輩に、正しい指摘/指導ができるよう、
私が配属半年で注意されてきたコードの書き方について、まとめて振り返ってみたいと思います。

#1.数入りの変数・クラス名・id名をやめよう

“`javascript:数入り変数~悪い例~
$(‘#header-search2’).val(”);
“`

お分かりの通り、ダメダメな**`header-search2`**です。
この**数入りの命名**については、配属直後に何度も注意をされました。

コードを書いているその時は、何を指しているのか分かるものの、
実際、半年後に自分で読み返してみたところ、

「ん？この2って、何のこと指しているんだっけ？あれ、そもそも1は？」

となってしまいました。
後で変数名を変えようと思っても、面倒くさくなりがちなので、
命名段階で一度立ち止まって、
誰にでも(勿論半年後の自分にも)分かりやすいように名付けるようにしましょう。

(先輩方にオススメされて読

元記事を表示

【TypeScript】引数【勉強メモ】

# 引数

TypeScript,JavaScript 初学者が関数の**引数**について勉強したのでメモを残す。

## デフォルト引数

– 関数を呼び出す際に、引数を省略して実行するとデフォルト引数での処理が走る。

“`typescript
const plusOne(n=1) => n+1;

plusOne(2) // 3
plusOne() // 2
“`

– 基本的にはデフォルト引数は、引数の後ろから書く。

“`typescript
const plusOne(n=1,m) => n+m+1; // NG
const plusOne(m,n=1) => n+m+1; // OK
“`

– falsy な値ついて
– 引数に`undefined`を渡すとデフォルト引数は既定値のまま
– 引数に`null`または`空文字`を渡すと`null`もしくは`空文字`に設定される

## 残余引数（レストパレメータ）

– `…`という接頭辞をつけることで**残り**の引数を JavaScript の標準の配列

元記事を表示

【TypeScript】関数【勉強メモ】

# 関数

TypeScript,JavaScript 初学者が**関数**について勉強したのでメモを残す。

## JavaScript の関数

JavaScript において関数は**式**もしくは**文**で定義できる。

– **式（Expression）**
– **評価した結果を変数に代入できるもの**。
– 変数、関数呼び出し、リテラル、式と演算子の組み合わせも全部**式**。
– 式を評価すると結果の値を得ることができる。（**評価値**）
– **文（Statement）**
– `if文`や`for文`は文。
– なんらかの手続きを処理系に命令するもの。
– 文の末尾にセミコロンを置くことで文を区切る。

## if 文と三項演算子（条件演算子）

if 文は文なので変数に代入できないが、同じように条件を扱う三項演算子は変数に代入できる。

“`typescript
// if文は文のため変数に代入はできない
const judge = if(isEven) ‘even’ else ‘odd’; // NG
// 三項演算子（条件演算

元記事を表示

TMS WebCORE　ローカルストレージの使い方

##最終日が、空白ままになっていたので、TMS WebCOREの追記させていただきます。

データ一時保存の方法が、不明だったのですが、TMSのフォーラムで質問すると、ご回答いただけましたので、コンパイルした実行部を、現在使用しているレンタルサーバーにアップしました。
<手元のテスト環境は、CentOS8 + Nginxでテストしています>
***
JavaScriptなので、デプロイメントが他の手法にくらべても、容易な気がしますので、その手順も簡単に記述します。
###1.　Delphi での画面![11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/88517/04b14999-19cd-3543-441d-8efa4d0cc02f.png)
###2.　実行します http：//localhost:8000/Project1/Project1.htmlで実行されます 　![12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.c

元記事を表示

JavaScript jQuery セレクタ指定の仕方

JavaScriptとjQueryのセレクタ指定の比較

|指定 |JavaScript |jQuery|
|———|——|——|
|class　　　|document.getElementsByClassName(‘class名’)　　|$(“.class名”)|
|id |document.getElementById(‘id名’)|$(“#id名”)|
|tag |document.getElementsByTagName(‘tag名’)|$(“tag名”)|

元記事を表示

画像アップロード時に画像を動的に表示・切り替える(JavaScript, jQuery, Laravel)

## 目標

[![Image from Gyazo](https://i.gyazo.com/c0353b5d0bb59f11e334ba09b5b005df.gif)](https://gyazo.com/c0353b5d0bb59f11e334ba09b5b005df)

jQueryを使用して、選択した画像を動的に変化させて、どの画像をアップロードするのかわかりやすくします。

## HTML

“`html


//使用するjQueryを定義


・・・

//imgタグを設定(/image/Noimage.jpgのところは、publicディレクトリの配下の構成に応じて適当に変更してください。)

元記事を表示

フルサービスリゾルバをなんとなく可視化してみた

#はじめに
こちらは SLP KBIT Advent Calendar 2020 24日目の記事です．
他のサークルメンバーが面白い記事を多く書いているのでぜひご覧ください．

今日は12/24，もう少しでお正月なシーズンですね，うん．

#作ったもの
　今回作ったものはタイトルにもある通り「フルサービスリゾルバの可視化」です．見た目は写真のようになりました．
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309106/4b7c91ce-5f67-ff76-68d2-62bb78f3a386.png)
いきなりフルサービスリゾルバと言われても…という方がいると思うので，そちらから説明していきます．

#フルサービスリゾルバとは
　以下のサイトにこのように書かれています．
http://e-words.jp/w/%E3%83%AA%E3%82%BE%E3%83%AB%E3%83%9

元記事を表示

選択されているOptionに設定されているカスタム属性の値を取る方法

datesetで指定したら取れるかと思ったが、カスタム属性の値を取るには少し工夫が必要だった。

“`html

“`

“`javascript
//対象のSelect
const pet = document.getElementById(‘pet’);

//選択されているoptionを抽出
const selectedOption = Object.values(this.staff.options).find(option => option.selected === true);

//たまじろうのageが出力される
console.log

元記事を表示

Nuxt/contentによる簡易ブログ作成

#はじめに

技術関係の記事はQiitaに書いているけど、適当な日常生活のことも書きたい。

ということで、今回はnuxt/contentを利用して、マークダウンで記事が書けるブログを簡単に作成してみました。

#nuxt/contentって何

contentディレクトリにmdファイルを配置することで、html出力をしてくれます。
mdファイルの中にはvueを書くことも可能です。

#準備

nuxt-contentという名前でアプリを作成します。
今回はSPAを選択しました。

“`
$ create-nuxt-app nuxt-content
“`

アプリが作られたら、nuxt/contentを導入していきます。

“`
$ yarn add @nuxt/content
“`

モジュールに記述をしていきます。

“`nuxt.config.js
modules: [
‘@nuxt/content’
]
“`

ルートに記事を格納するためのcontentディレクトリを作成します。
さらにcontent配下にarticlesを作成し、その中にmdファイルを置き

元記事を表示

ReactでAccordionコンポーネント作成

# 何を作るか
reactでAccordionのコンポーネントを作ったので、記事を書いてみます。
使い回し効くと思うので、新規で作られる方の何かの手助けになればと思います:pray:

↓こんな感じです

![8561472eaf17a1c3aa78457c6fc25f48.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325594/44e88db0-86ce-6912-f8f2-b51cd010288d.gif)

codeSandBoxに残したので、動くサンプルはこちらに

# 作り方

## 呼び出す側

この後作成するAccordionコンポーネントを呼び出し、
アコーディオンの中を　コンポーネントの中に入れていきます。
`ここです`

“`App.tsx
imp

元記事を表示

結局 kintone の REST API って何使えばいいん？

## kintone REST API 実行について
kintone JavaScript 開発において、REST API を実行する方法、ライブラリがたくさんあるので、情報をまとめてみました。

誤解されると面倒なので先に結論を書いておきます

## 結論
(基本的に) kintone JavaScript Client を使っとけば問題ない。

## kintone REST API とは
知らない人はいないと思いますが、
kintone のドメインに対して HTTPS リクエストによってレコードの操作やアプリ、スペースの操作をすることができる機能です。
https://developer.cybozu.io/hc/ja/articles/201941754

### kintone.api()
安心安全の kintone.api() という JavaScript API を使用する方法です。
少し前に kintone.api() を使用してファイル以外の USER API の実行も可能になりましたね。

##### kintone.api() まとめ
– kintone RES

元記事を表示

OTHERカテゴリの最新記事