- 1. 【Gmail】特定のメールへの直リンクを取得する方法
- 2. kintoneでエラーメッセージを表示したり消したりする方法
- 3. 【JavaScript】変数と参照の振り返り⑤ AND条件とOR条件の応用
- 4. [javascript] Object.keysの使い方
- 5. これからReact始めたい人のための今日だけでできるTODO#21 useContext①
- 6. p5.js と anime.js を組み合わせた Tweenアニメーション【その2：キーフレームを使ってみる】
- 7. Plotly/Dash チートシート
- 8. 【Vue.js】条件分岐 v-if について
- 9. JavaScriptのスコープをマスターしよう!!
- 10. React初心者がReactについて適当にまとめる
- 11. JavaScriptのCall stack (コールスタック)
- 12. JavaScriptのホイスティングって何者？？
- 13. kintoneでユーザー選択をルックアップ？する技
- 14. requestAnimationFrameで端末負荷を測定する
- 15. kintone 関連レコード詳細画面で遅延表示の動作検証
- 16. 3kbのHTML to Reactパーサ「DOMParserReact」で、HTML文字列のaタグをNext.jsのLinkコンポーネントで表示する
- 17. JavaScriptのコンテキスト
- 18. 【JavaScript】変数と参照の振り返り④ AND条件とOR条件
- 19. バイバイ、サーバーサイドレンダリング。Prerender.ioーSEOを考慮したSPA
- 20. VSCodeでJestを活用するための便利な拡張機能
【Gmail】特定のメールへの直リンクを取得する方法
# はじめに
2022年の改正電子帳簿保存法にNotionで対応するために、Gmail内のメールを紐付けられるURLを取得したかったのですが、直リンク発行が機能として提供されていないようでした。
GASや何かを使う方法は目にしましたが、よりシンプルな方法で実現できたので共有します。
# 直リンク取得方法
下記のスクリプトをブックマークレットとして登録して、Gmailメール本文上で実行します。
( `my_email` をあなたのGmailアドレスに置き換えます。)“`javascript:ブックマークレット
javascript: (function () {
async function copyPermalink() {
try {
my_email = “example@gmail.com”;
search_url = “https://mail.google.com/mail/u/” + my_email + “/#search/msgid%3A”;
message_id = document
.qu
kintoneでエラーメッセージを表示したり消したりする方法
kintoneでは、フィールドにエラーメッセージを表示したり、レコード自体にエラーメッセージを表示したりすることができます。
**?フィールドのエラーメッセージ**
フィールドの下に表示されます。
**?レコードのエラーメッセージ**
中央上側に表示されます。
今回はフィールドやレコードに自由に（？）エラーメッセージを表示させてみましょう?✨✨
# アプリの準備
| フィールドの種類 | フィールドコード| 備考 |
|:-:|:-:|:-:|
|数値 | 偶数 | |
| 文字列(
【JavaScript】変数と参照の振り返り⑤ AND条件とOR条件の応用
#はじめに
Udemyの[【JS】ガチで学びたい人のためのJavaScriptメカニズム](https://www.udemy.com/course/javascript-essence/)の講座の振り返りです。
前回の記事
https://qiita.com/nao0725/items/5c339408ebc9059bf654
#目的
* 変数についての理解を深める
#本題
###1.AND条件とOR条件の応用####例
““javascript
function hello(name){
console.log(“Hello” + name);
}
// Hello Bobと表示される
hello(“Bob”)
// 引数がない場合、Hello undefinedと表示される
hello()
““これを避けるためにif文を使って、該当しなかった場合の処理を追記する。
“`javascript
function hello(name){
// nameがundifine = falseな値である場合にTomと出力されればいいので
//
[javascript] Object.keysの使い方
# [javascript] Object.keysの使い方
## Object.keysとは
MDN Web Docsにはこのように説明されています。
> Object.keys() メソッドは、指定されたオブジェクトが持つプロパティの 名前の配列を、通常のループで取得するのと同じ順序で返します。
## Object.keys()を使ってみる
“`js:js
const object1 = {
a: ‘somestring’,
b: 42,
c: false
};console.log(Object.keys(object1));
“`logの結果は`Array [“a”, “b”, “c”]`このように表示されます。
ここで`Object.keys()`は`()`の中に受け取ったObjectのプロパティを配列にして返しています。
これからReact始めたい人のための今日だけでできるTODO#21 useContext①
## useContextとは？
propsを直接渡したい子孫コンポーネントに値を渡すことができるフックです。孫コンポーネントに値を受け渡す場合親コンポーネントから子コンポーネントに受け渡した値をさらに孫コンポーネントに渡す。
ということが必要でしたが`useContext`を利用することで直接を渡すことができます。|オブジェクト / コンポーネント|説明|
| —- | —- |
|Contextオブジェクト|React.createContext()の戻り値|
|Providerコンポーネント|Contextオブジェクトが保持しているコンポーネント|
|Consumerコンポーネント|useContext()を利用することで、Contextオブジェクトから値を取得できる|### Contextオブジェクト
“`js
const ContextObj = React.createContext();
“`
または、“`js
import React, { createContext } from ‘react’;const ContextObj =
p5.js と anime.js を組み合わせた Tweenアニメーション【その2：キーフレームを使ってみる】
今回の内容は、「anime.js」と「p5.js」を組み合わせた Tweenアニメーションに関して書いた以下の記事の続きにあたるものです。
●p5.js と anime.js を組み合わせた Tweenアニメーション – Qiita
https://qiita.com/youtoy/items/361282f1113d88ff5f05具体的には、上記の記事の中のお試しでは使っていなかった、キーフレーム・タイムラインといった機能を試す話になります。
## さっそく本題へ
前回の記事と同様に、今回も「p5.js Web Editor」でプログラムを作成していきます。
また、[前回の記事](https://qiita.com/youtoy/items/361282f1113d88ff5f05)の内容が試せているという前提ですので、p5.js Web Editor上のライブラリ設定の話など、そいうった部分は[前回の記事](https://qiita.com/youtoy/items/361282f1113d88ff5f05)をご参照ください。### キーフレームについて
前回の記
Plotly/Dash チートシート
Plotly&Dash を使う上でよく使うテクニックをまとめました。
メインPythonで少しCSS&JavaScriptです。
※内容は随時更新していきます##散布図のカラーテーマを変更する
“`python
fig = px.scatter(
df, x=”sepal_width”, y=”sepal_length”,
color_discrete_sequence=px.colors.sequential.Viridis, // ここでテーマ設定
)#使用できるテーマは下記で確認可能
#colorscales = px.colors.named_colorscales()
#print(colorscales)
“`> [Plotly: Built-in Color](https://plotly.com/python/builtin-colorscales/)
##Display Mode Bar非表示
Plotlyでグラフを表示したとき表示される、右上のアイコンバーを非表示にする。
プロパ
JavaScriptのスコープをマスターしよう!!
# はじめに
初学者です。
スコープについて学習したので備忘録。
間違っていたら教えていただけると幸いです。# スコープとは
スコープとは「実行中のコードから値と式が参照できる範囲」です
スコープによって呼び出せる関数や変数に違いがでます。# スコープの種類
スコープにはいくつかの種類があります
1. グローバルスコープ
1. スクリプトスコープ
1. 関数スコープ
1. ブロックスコープ# 各種スコープの説明
## グローバルスコープ
グローバルスコープはグローバルコンテキスト内でvarやfuntionで定義した定義物です。
グローバルスコープに分類されるものはグローバルオブジェクト(windowオブジェクト)のプロパティとして値が保持されているものです。## スクリプトスコープ
スクリプトスコープはグローバルコンテキスト内でletやconstで宣言された宣言物です。関数宣言を使わずに関数式で作成た関数も
スクリプトスコープに分類されます。
グローバルスコープとスクリプトスコープは厳密には違うスコープですが、どこからでも呼び出すことができるという点で
どちらも**グ
React初心者がReactについて適当にまとめる
都内のSESで働いている人がReactについて簡単にまとめた記事です。
なかなかプログラミングは得意じゃないですが得意じゃないなりに頑張ってますので色々ご教授いただけると幸いです。。※この記事では[CodeSandbox](https://codesandbox.io/)を使用して学習したものを載せています。
##Reactって？
[Reactの公式HP](https://ja.reactjs.org/)を見てもらったらわかると思いますが**ユーザーインターフェース構築のためのJavaScriptライブラリ**です。
よく似たものとして**フレームワーク**というものがありますがフレームワークではありません。(Angularとか？)
**コンポーネント**というものを作成してユーザーインターフェースを効率的に構築できる。
「ReactはJSでユーザーインタフェースを効率よく構築できるよ！！」ってことだと思います。笑##JSX記法
JSX記法はReactの大きな特徴だと思います。
JSX記法とはJavaScript内でHTMLを記述する方法です。例
まずindex.html
JavaScriptのCall stack (コールスタック)
# はじめに
初学者です。
コールスタックについて学習したので備忘録# コールスタックってなんぞや？
**実行中のコードがたどってきたコンテキストの積み重ね**
**JavaScriptエンジンがどのような経路を辿ってコードにたどり着いたのか記録している**# 実際のコードで確認しよう
“`JavaScript
function a() {
}
function b() {
a();
}
function c() {
b();
}
c();
“`**コールスタック**
aの関数コンテキスト
bの関数コンテキスト
cの関数コンテキスト
ブローバルコンテキスト*常に最上部が実行中のコンテキストになる
処理が完了すると上から徐々に消えていく*# LIFO
*コールスタックの仕組みは「後入れ先だし」LIFO*
**(Last In, First Out)という**# まとめ
Call stack(コールスタック)とはコンテキストの積み重ね。
Last In, First Out(後入れ先だし)で住み重なる
処理が完了すると最上部から消えていく
JavaScriptのホイスティングって何者？？
# はじめに
初学者です。
ホイスティングについて学んだので備忘録を残します。# ホイスティングってなに？
コンテキスト内で宣言した変数や関数の定義を**コード実行前にメモリに配置すること**
**宣言の巻き上げ**ともよばれる宣言した関数よりも前でその関数を呼び出しても実行できますよね。
それです# いろんなケースのコードを見ていこう
関数“`JavaScript
a();function a() {
console.log(‘a is called’)
//関数の定義が実行より後でもホイスティングによって実行可能になる
}
“`var
“`javaScript
console.log(b); //処理結果 undefined
var b = 0; //// この場合のホイスティングは
//変数bのメモリースペースを確保し値に特殊な値(undefined)を設定
“`let・const
“`javascript
console.log(b); //処理結果 エラー
let b = 0; //
//letやconstはホイスティングで初
kintoneでユーザー選択をルックアップ？する技
今回はユーザー選択をルックアップ？して、関連レコードに選択したユーザーに結びつくレコードを表示してみましょう。
実は標準のルックアップではユーザー選択フィールドを「コピー元のフィールド」として選択できません。
参考：kintoneヘルプ
https://jp.cybozu.help/k/ja/user/app_settings/form/lookup/set_lookup.html#lookup_set_lookup_30
色々とやり方も考えられますが、今回はユーザー選択フィールドからcodeとnameを取得してやってみたいと思います。
# 出来上がりイメージ
requestAnimationFrameは本来はアニメーションを実装するために使用するAPIです。https://developer.mozilla.org/ja/docs/Web/API/Window/requestAnimationFrame
> ブラウザにアニメーションを行いたいことを知らせ、指定した関数を呼び出して次の再描画の前にアニメーションを更新することを要求します。ブラウザが画面を描画するたびにコールされ、そのタイミングで任意の関数を実行したい場合に使用するのが一般的かと思います。
今回は、ブラウザが画面を描画するたびにコールされることを利用
kintone 関連レコード詳細画面で遅延表示の動作検証
kintone のアップデートで、関連レコードの詳細画面が遅延表示となったので、kintone イベント処理時の動作検証をしてみました。
試しに関連レコードの文字列項目を赤表示してみます。# 関連レコードの詳細画面で遅延表示の概要
関連レコードを遅延表示することで、「詳細画面で表示が開始されるまでの待ち時間が短縮」されるようです。
[kintone 2021年10月版 主なアップデート](https://kintone.cybozu.co.jp/update/main/2021-10.html#point2)
>関連レコード一覧フィールドが配置されているアプリのフォーム表示開始までにかかる時間を短縮
アプリのレコード詳細・編集画面にて、読み込みに時間のかかる関連レコード一覧が配置されているとき、フォームの表示が開始されるまでの待ち時間が短縮されました。
・レコード詳細画面の読み込み（９月版まで）：
レコードの内容が何も表示されない待ち時間が長く、その間、何もすることができませんでした。
・レコード詳細画面の読み込み（１０月版より）：
関連レコード一覧以外のフィールドが素早く表示
3kbのHTML to Reactパーサ「DOMParserReact」で、HTML文字列のaタグをNext.jsのLinkコンポーネントで表示する
作ったライブラリの宣伝記事です。
https://www.npmjs.com/package/dom-parser-react
## DOMParserReactとは
DOMParserReactは軽量なHTML to Reactパーサーです。HTMLテキストをReactのコンポーネントに変換して表示します。また、表示の際にHTMLのタグを任意のコンポーネントに置き換えることができます。
主な使用想定は、個人ブログなどのコンテンツ部分です。コンテンツ部分は、MarkdownのファイルやヘッドレスCMSのリッチテキストで管理し、それをHTMLにしたものを表示していると思います。このライブラリを使用すれば、そのHTMLを表示する際、CSS in JS等のReactの技術を使って装飾したり、タイトルのようにaタグをSPA用の `Link` コンポーネントに置き換えたりすることができるようになります。
そして、このライブラリの一番の特徴は、その軽さです。minifyで3kb(v0.2.0時点)しかありません。類似ライブラリと比べて非常に軽量なのは、独自のパーサーを使わず、ブラウザJ
JavaScriptのコンテキスト
# はじめに
コンテキストについて学習したので備忘録を残します。
初学者です。
間違っている箇所がありましたら申請お待ちしております。# コンテキストってなに？
JavaScriptでの意味
実行コンテキスト(コードを実行する際の文脈・状況)# コンテキストには3種類ある
*覚えるべきは2つ*
**グローバルコンテキスト**
**関数コンテキスト**
~~evalコンテキストは不要~~ 関数eval自体が非推奨のため**グローバルコンテキスト**
*使用可能な値*– 実行中のコンテキスト内の変数・関数
– グローバルオブジェクト
– this**関数コンテキスト**
*使用可能な値*– 実行中のコンテキスト内の変数・関数
– arguments
– super(特殊な環境でのみ使用可能)
– this
– 外部変数# 実際のコードで確認しよう
コメントアウトをみてね“`javascript
// グローバルコンテキスト JavaScriptファイル内直下の実行環境(変数や関数)
let a = 0;
function b() {
console
【JavaScript】変数と参照の振り返り④ AND条件とOR条件
#はじめに
Udemyの[【JS】ガチで学びたい人のためのJavaScriptメカニズム](https://www.udemy.com/course/javascript-essence/)の講座の振り返りです。
前回の記事
https://qiita.com/nao0725/items/263dc7a74981fc33a27c
#目的
* 変数についての理解を深める
#本題
###1.AND条件とOR条件####ANDの条件と仕組み
““javascript
// AND条件 かつ a && b
// aとbがtureでないといけないconst a = 1;
const b = 1;
// 出力結果で1が返ってくる ＝ ture
console.log(a && b)
“““““javascript
const a = 0;
const b = 1;
// まずaがturethyなのかどうか確認する
// aがtureの場合 ＝＞ bの値を返す
// aがfalseの場合 ＝＞ aの値を返す
// ここではaは０なのでaの値を返す
c
バイバイ、サーバーサイドレンダリング。Prerender.ioーSEOを考慮したSPA
本記事は、掲載元で2日で23K「いいね」を獲得した[Sviat Kuzhelev](https://sviat-kuzhelev.medium.com/)氏による「[Say goodby to Server Side Rendering. Prerender.io — SPAs with SEO in mind.](https://sviat-kuzhelev.medium.com/say-goodby-to-server-side-rendering-prerender-io-spas-with-seo-in-mind-62e6f68eb323)」（2021年9月21日公開）の和訳を、著者の許可を得て掲載しているものです。
#バイバイ、サーバーサイドレンダリング。Prerender.ioーSEOを考慮したSPA
image is taken from [this resource](https://miro.medium.com/)##はじ
VSCodeでJestを活用するための便利な拡張機能
Jestを少しでも簡単・便利に書くために便利な拡張機能です。
## Jestとは
JavaScript用のテストフレームワークです。“`sample.js
const sample = (param) => {
return param + 1;
};
export default sample;
“`“`sample.test.js
import sample from “./sample”;test(“sample”, () => {
expect(sample(1)).toBe(2);
});
“`## 拡張機能
### 1. [Jest](https://marketplace.visualstudio.com/items?itemName=Orta.vscode-jest)
ファイルを変更したタイミングで、自動でJestが実行される。
コード記入→`yarn test`とか叩く必要がなくなるので、テストコードの記入やリファクタリングの高速化が図れる。
