Web Component、lit-markdown-editorをリリースしました！

はいさい！ちゅらデータぬオースティンやいびーん！

# lit-markdown-editorをリリースしました！

最近、筆者はMarkdown系の技術にこだわっており、その中で作ってきたツールをパッケージとしてリリースしています。

今回は、簡単にMarkdownのショートカットをまとめた簡素な編集ツール、`lit-markdown-editor`を公開しました。

https://www.npmjs.com/package/lit-markdown-editor

# 試しに使ってみる

CodePenで簡単に使えるアプリケーションを用意しましたので試してみてください。`lit-markdown-editor`は左側の部品です。

Python,Ruby,PHP,Java,JavaScript,PerlのPDF作成の比較

Qiita > プログラミング言語の比較

Python,Ruby,PHP,Java,JavaScript,PerlのPDF作成の比較

# Python

https://qiita.com/godan09/items/13866970972bf3a1c243

# Ruby

https://qiita.com/inoue9951/items/4498e5d130702d884352

# PHP

https://qiita.com/one_punch_man/items/bf140d4300195577dd3d

# Java

https://qiita.com/iceblue/items/a059c99ef1c17226a02a

# JavaScript

https://qiita.com/shuhei_sakiyama/items/ef68d49b7199d50a853b

# Perl

https://perlzemi.c

JavaScriptを利用したCopyrightの書き方

# 概要
サイトのフッターに「Copyright (C) 2022 Hoge Corporation. All Rights」みたいな感じで、copyrightの記述をすることが多いと思うが、サイトによっては年の部分が古くなってしまっているケースも多い。年が変わるたびに手動で変更するのは面倒なので動的に変更させたい。

# 結論
以下のように書くことで動的なcopyrightが実装できる。

“`

© {new Date().getFullYear()} Hoge Corporation. All Rights

“`

Svelteの環境構築

## 背景
つい先日Reactを学習し、Next.jsでブログを作成したのだが、Nuxt.jsとNext.jsをどのように使い分けるのが良いのか考えた。その中で様々なことを調べていくうちに仮想DOMのメリットは何なのかという疑問にたどり着いた。パフォーマンスが良いみたいな記事をよく見たのだが、その理由に納得がいかなかった。差分を検知してその差分だけを変更するから効率がいいし、重くないと書かれていたが、それはつまりリアルDOMで検知できないのか？できないとしたらなぜ仮想DOMはできるのか。その疑問を解決する内容がSvelteの公式サイトに書いてあった。読むうちに、Svelteに興味を持ったので勉強してみることにした。

## 環境構築
プロジェクトの作成
“`bash
$ npm create vite@latest myapp — –template svelte
“`
`typescript`であれば、下記コマンド
“`bash
npx degit sveltejs/template myapp
“`

プロジェクトのディレクトリに移動
“`bash
$ cd myap

プリザンターのサイトの視認性を高めるいくつかの方法

## 画像を設定する

フォルダやテーブルには “[サイト画像](https://pleasanter.org/manual/site-image)” を設定できます。

上記マニュアルに添付されているイメージ


特別なロゴがない場合でも、ペイントツールで大きな文字を画像化して設定することもでき、お手軽で効果の高い方法だと思います。

## スタイルで頑張る

フォルダの管理機能にもスタイルがあるので CSS を設定することができます。

各サイトには、サイト ID を指定する data 属性が指定されています。
これを利用して、下記のような指定をすることで、サイトの矩形の内側やサイト名の文字の色、サイト名の文字幅などを変更することができます。

“`css
[data-value=”サイト ID”] {
background-color: orange !important;
}
[data-value=”サイト ID”] *

シンプル AutoReply Discord ボット

## 目的

Discord にシンプルボットを作成方法を説明します。
今回のメイン機能は、Discordサーバーに決めたワードの投稿・コメントがあれば、その投稿に決めた文字列で返信をすること。
|　　　　　　　　 　　　　　　　　 　　　　　 　　　　　　　　　　　　　　　　　　　　|
|:-:|
サーバーメンバーがローマ字の「pien」をコメントしたら、同じくボットが「pien ?」（＋絵文字付き）で返す。

ボットのソースコードは、node.js とDiscord API で書かれています。
ボットのホストは、自分のPC（私の場合は、MACBookのターミナル）となりますので、ターミナルや PC がシャットダウンされたらボットがオフライン状態となります。
(もちろん24/7 Standbyにする方法はいくつかあります！後ほど

【海外イベント紹介】 Developer Productivity Conference 2021 3 Productivity Hacks for Jamstack by Brian Rinaldi

今回は、「Developer Productivity Conference」 で行われたプレゼンテーションから、「3 Productivity Hacks for Jamstack」 の内容をご紹介します:loudspeaker:

Web開発関連の技術書出版社の大手であるManning Publicationsが主催する、年に一度のDeveloper Productivity Conferenceは開発者の生産性やDXに特化したセッションを開催しています。

プレゼンテーションの言語は英語ですが、本ブログでは日本語でご紹介します。

>目次
Jamstackのリソース
コツ１: netlify dev
コツ２: スターターキット
コツ３: サーバーレスファンクション
まとめ

今回は、Jamstack関連の著書を多数持つBrian Rinaldi氏による、Jamstackを使用する際の3つのコツについてのセッションです。

## Jamstackのリソース

まずは簡単にJamstackとは。

以下のような特徴があります。

・静的なファイル配信をまず意識した方法論である
・静的

【JavaScript】IPアドレスを取得する方法

使用する機会があったのでメモです。

“`
fetch(‘https://ipinfo.io?callback’)
.then(res => res.json())
.then(json => console.log(json.ip))
“`
参考：

https://iwb.jp/javascript-ipinfo-jquery-axios/

SetTimeoutは、async/await関数では使えない

# はじめに
JavaScriptの非同期処理を学び概念を理解してきたが、Promiseを作る側の関数（Promiseを返す関数）について疑問があったため、事象と結論を整理してみた。

**【疑問】以下の2つの関数になぜ動作の違いが発生するのか？**
①Promiseを返す関数として、SetTimeoutを「new Promise()（promiseのコンストラクター）」で定義した場合は、SetTimeoutの時間を待機した後Promiseを返す（これは検索するとよく出てくる一般的な内容）。

②Promiseを返す関数として、SetTimeoutを「async」のキーワードで括る定義をした場合は、setTimeoutの時間を待機せずにPromiseを返す。

この疑問を抱いた理由は、②のasyncで括ることでPromiseを返すことができるため、呼出し元（②の関数を呼び出す側の関数）で async/awaitを指定することでsetTimeoutの処理が待機されるのではと思ったが、期待する結果にはならなかった（待機されなかった）ため、疑問を持った。実際に動かしながら紐解いていく。

#

JSONでBigIntがうまく扱えないのなんで?

# はじめに

でかい数字をJSONで表現するとどうなるんだろう

“`JavaScript
// number
> JSON.stringify({ “a”: 911232123123127987297})
‘{“a”:911232123123128000000}’
> JSON.parse(`{ “a”: 911232123123127987297}`)
{ a: 911232123123128000000 }

// BigInt
> JSON.stringify({ “a”: 911232123123127987297n})
Uncaught TypeError: Do not know how to serialize a BigInt
at JSON.stringify ()
at :2:6
> JSON.parse(`{ “a”: 911232123123127987297n}`)
Uncaught SyntaxError: Expected ‘,’ or ‘}’ after property value in

nodebrewでのNode.jsのインストール方法（Mac）

## Node.jsとは
JavaScriptを**PC上**で動かすための実行環境です。
**ブラウザ上**で動くことが有名なJavaScriptですが、Node.jsをPC上にインストールすることで、PC上でもJavaScriptが動作します。

詳しく知りたい人は[公式サイト](https://nodejs.org/ja/about/)をご確認ください。

## nodebrewとは
Node.jsのバージョン管理ツールです。
複数のバージョンを管理することができます。

## インストール方法
2種類のインストール方法があります。
1. 公式サイトからのインストール
2. nodebrewを利用する（今回の方法）

今回は、2の方法でNode.jsをローカル上にインストールします。
1の方法は↓をご確認ください。

https://qiita.com/s_yamaoka927/items/4fd8dacffa73bd64de1b

## 手順
以下の手順でNode.jsをインストールします。
1. nodebrewをインストールする
2. Node.jsをインストールする

#

Warning: Each child in a list should have a unique “key” prop.が発生した時に見てほしい記事です

## Warning: Each child in a list should have a unique “key” prop.が発生した時の原因と対処法
ReactやNext.jsで開発していると、スクショのようなwarningに遭遇したことあるかと思います。
原因はmap関数内でhtmlタグをreturnする時に、一番上の要素にユニークなkeyを定義していないからです。

### このような時はwarningが発生します。
##### １、keyを定義していない
“`
const USER_LIST = [
{ id: 1, username: “hoge”, age: 10 },
{ id: 2, username: “foo”, age: 15 },
{ id:

【初心者向け】Node.jsのインストール方法（Mac）

## Node.jsとは
JavaScriptを**PC上**で動かすための実行環境です。
**ブラウザ上**で動くことが有名なJavaScriptですが、Node.jsをPC上にインストールすることで、PC上でもJavaScriptが動作します。

詳しく知りたい人は[公式サイト](https://nodejs.org/ja/about/)をご確認ください。

## インストール方法
2種類のインストール方法があります。
1. 公式サイトからのインストール（今回の方法）
2. nodebrewを利用する

:warning:
今回は、1の方法を行いますが、本格的な開発にはオススメしません。
Node.jsのバージョンが変わると、予期せぬバグを引き起こす可能性があるためです。
本格的な開発では、バージョン管理ができる、2の方法をおすすめします。
2の方法は↓をご確認ください。

https://qiita.com/s_yamaoka927/items/cf1bbd755c5636c3ce35

## 手順1
以下の公式サイトに行き、『ダウンロード macOS (x64)』の**推奨版*

【JavaScript】メソッドチェーンを使用して、可読性向上！

# 概要

先日、ソースレビューにて、メソッドチェーンを使えるようクラスを設計すれば、
可読性向上を狙えるよ、とアドバイスいただきました。
自分メモ用に、整理するためにメモ

# アドバイス前…

forEachのループ内部、
“template.find(…”)
“template.find(…”)
“template.find(…”)
…
というように変数”template”に対して複数回、操作を行うような実装を行なっている
まあ、これでも機能実装はできていますが、どこか読み辛さを感じますね。。。
※　以下のJavaScriptは、[【Pug】Pugで編集されたファイルを元に、JQueryで値埋め込み](https://qiita.com/myantyuWorld/items/8a08d6fad42e1b36ed3b)のソースの一部です

“`js
$(function() {
//　APiリクエストなどして取得したデータ例
var list = [
{
date:”2022/09/03″,

【JavaScript】タイトルの変え方

JavaScriptを使用していてtitleタグの要素の取得苦戦したのでメモを残します。
サーバー側の処理はなくhtmlとjsだけで動かします。

機能としてはボタン押下時にブラウザのタイトルが切り替わるようにしたいと思います。

【titleタグの要素取得/変更】

//html

“`







ChangeTitle

“`

//JavaScript
titleタグの取得は「document.title」になるんですね。
変更する際は「document

【React】axiosエラーハンドリング共通化

# はじめに
今回はHTTP Clientライブラリであるaxiosのエラーハンドリング共通化方法について書いていこうと思います。

# エラーハンドリングとは
エラーハンドリングとは、**プログラムの処理中に処理が妨げられる事象が発生した際、その処理をエラーとして対処する処理のこと**です。
フロントエンドでAPI通信を行なった際、レスポンスがエラーだった場合に何か処理を行うということはよくあると思います。
※例えば、404が帰ってきたらNotFoundページへ遷移させるなど
下記のようにAPI通信を行う箇所全てでエラーハンドリングの処理を書いていたら記述量も多くなり面倒です。
“`js
const fetchData = async () => {
try {
const response = await axios.get(“http://localhost:3000/”);

} catch(err) {
// エラー時の処理
}
}
“`

# axios エラーハンドリングの共通化
axiosの`Interceptors`を活用する。

`I

kintoneでJavaを動かす

▼設定できたこと
一括承認ボタンをつける、
コメント欄をデフォルト非表示にする

見本のサイトがめちゃくちゃ分かりやすいので、何も分からないまま設定出来た！
仕組みは後から調べてみようと思う。

▼一括承認ボタンをつける
https://developer.cybozu.io/hc/ja/articles/211583223-%E3%83%AF%E3%83%B3%E3%82%AF%E3%83%AA%E3%83%83%E3%82%AF%E3%81%A7%E4%B8%80%E6%8B%AC%E6%89%BF%E8%AA%8D%E3%82%92%E3%81%97%E3%81%A6%E3%81%BF%E3%82%88%E3%81%86

▼コメント欄をデフォルト非表示にする
https://zenn.dev/octi/articles/14eed0af5754720ed93d

Stripe Checkout / Payment Linksで注文時のボタンラベルを[支払う]から[予約]へ変更する方法

施設の予約やアクティビティ・個人レッスンなど、様々なビジネス・サービスで予約・決済システムが利用されています。

StripeのCheckout / Payment Linksで予約注文を受け付けている場合、注文時のラベルを[予約]に変更することができます。

## Payment Linksでボタンラベルを変更する

[Payment Linksの作成](https://dashboard.stripe.com/test/payment-links/create)または作成済みのPayment Linksの編集画面を開きましょう。

[詳細設定]を開くと[行動喚起として]セレクトボックスが表示されます。


ここで[予約]を選択すると、ボタンラベルが[予約]に切り替わります。

なお、2022/

paizaラーニング レベルアップ問題集 Aランクレベルアップメニュー JavaScript 規則的な数列の和

規則的な数列の和 (paizaランク C 相当)

https://paiza.jp/works/mondai/a_rank_level_up_problems/a_rank_calculation_exchange_700

普通にループで足し算を行うとタイムオーバーになります。
規則性を見つけて、場合分けをします。
“`javascript
//タイムアウト
const fs = require(“fs”);
const input = fs.readFileSync(“/dev/stdin”, “utf-8”).trim();
const lines = input.split(“\n”);
//N 要素目から K 要素目まで
const [N, K] = lines[0].split(” “).map(Number);
//Aの要素番号を３で割ったとき、
//余り１ならばAの要素は１、余り２ならばAの要素は０、余り３ならばAの要素は−１
//N要素目からK要素目までの和Sは
let S = 0;
for (let i = N; i <= K; i++) { if (i

【JavaScriptとCSS変数】シンプルなダークモードの実装

Windowsの設定などでおなじみの「ダークモード」。
背景が黒っぽく、文字が白系統になるこのモードですが、CSS変数とJavaScriptを用いて作成してみました。
今後コピペして使い回したいと思ったので、最低限のシンプルな実装です。

## ソースコード

まず先にソースコードの紹介です。
各箇所の解説は後述します。

“`html:index.html

タイトル

ダークモード