- 1. rollupjsのwatchのAPI実行で、変更検知が動かない
- 2. クロージャーがよく分からない、たぶん一番初めから
- 3. Next.js 初期設定まとめ
- 4. Stripe Checkout / Payment Linksの注文・サブスクリプション申込画面で、「利用規約に同意する」チェックボックスを表示する方法
- 5. 新卒1年目が入社して半年でやったこと
- 6. Javascriptのfunction()とアロー関数でのthis
- 7. [JavaScript] 配列に関する主要メソッドなど
- 8. [個人開発] Javascript？React？ Web開発初心者が謎おもしろアプリ作ってみた！?
- 9. [JavaScript] Reactの状態管理にはZustandが決定解になるような気がする
- 10. ブラウザのタブの複製を検知する
- 11. 【Rails 7】will_paginate の Turbolinks を無効化する方法
- 12. Streamlitがあれば、REACTは不要なのか？
- 13. JavaScriptの分割代入について
- 14. Web Component、lit-markdown-editorをリリースしました！
- 15. Python,Ruby,PHP,Java,JavaScript,PerlのPDF作成の比較
- 16. JavaScriptを利用したCopyrightの書き方
- 17. Svelteの環境構築
- 18. プリザンターのサイトの視認性を高めるいくつかの方法
- 19. シンプル AutoReply Discord ボット
- 20. 【海外イベント紹介】 Developer Productivity Conference 2021 3 Productivity Hacks for Jamstack by Brian Rinaldi
rollupjsのwatchのAPI実行で、変更検知が動かない
# １．背景と現象
– rollupjsをAPIとして、つまり、JavaScript内でモジュールとして呼び出して実行している。
– コマンドラインからの実行ではない。
– ある時からwatchを実行しても、変更を検知して処理が再実行されなくなった。# ２．対応
以下のようwatchのオプションにあるchokidar.usePollingを設定すると変更を検知するようになった。
“`js
const rollup = require(“rollup”);//オプション
const option = {
input: “ビルド対象の起点ファイルパス”,
output: [
file: “バンドルしたファイルのパス”,
format: “iife”
],
watch: {
chokidar: {
usePolling: true
},
},
};//watch実行
rollup.watch(option).on(“event”, (event) => {
//ビルド実行イベ
クロージャーがよく分からない、たぶん一番初めから
# しっくりこない事
例えば、
“`javascript:JSprimerより引用
const createCounter = () => {
let count = 0;
return function increment() {
// 変数`count`を参照し続けている
count = count + 1;
return count;
};
};
// countUpとnewCountUpはそれぞれ別のincrement関数(内側にあるのも別のcount変数)
const countUp = createCounter();
const newCountUp = createCounter();
// 参照してる関数(オブジェクト)は別であるため===は一致しない
console.log(countUp === newCountUp);// false
// それぞれの状態も別となる
console.log(countUp()); // => 1
console.log(newCountUp()); //
Next.js 初期設定まとめ
毎回Nextの初期設定をするのですが、何回も他のサイトを見るのも大変なので、
自分用にまとめました?
読んでみて、もっと効率良い方法あるよ！
便利な方法あるよ！という方はコメントで教えていただけると幸いです?# 目次
1. [Nextアプリの作成 TypeScript](#nextアプリの作成-typescript)
1. [prettierの設定](#prettierの設定)
1. [tailwindCSSの導入](#tailwindcssの導入)
1. [ディレクトリ構成の変更](#ディレクトリ構成の変更)
1. [MaterialUIの導入](#materialuiの導入)# Nextアプリの作成 TypeScript
後でアプリ名を聞かれるので、アプリ名の入力は必要ないです！
“`zsh:ターミナル
# npm
npx create-next-app@latest –ts
# yarn
yarn create next-app –typescript
“`# prettierの設定
ここはコードの好みに関する部分です。
クォートをダブルクォートにするか、シン
Stripe Checkout / Payment Linksの注文・サブスクリプション申込画面で、「利用規約に同意する」チェックボックスを表示する方法
Webサービスの申込画面などでは、「利用規約に同意する」アクションを設けることがあります。
「チェックボックスがオンの時のみ、submit操作できる」実装が必要になりますが、Stripeのリダイレクト型決済（Checkout / Payment Links）では、より簡単に対応できます。
## 事前準備: Stripeアカウントに利用規約URLを設定しよう
「利用規約への同意」機能を設定するには、Stripeアカウントに**利用規約URL**を登録する必要があります。
[[設定 > 公開ビジネス設定]](https://dashboard.stripe.com/settings/public)から、[利用規約]URLを設定しましょう。
とアロー関数でのthis
# はじめに
普段C#で開発を行っていますが、最近Web開発技術も勉強中です。
その中で、Javascriptのthisで混乱したことがあったので整理します。# Javascriptのthis
例えば、ブラウザのコンソールで以下のコードを書きます。
“`javascript
let user = {
firstName: “John”,
sayHi: function(){
console.log( this.firstName )
}
};
“`この場合、user.sayHi()を実行すると、コンソールで”John”を表示できます。
今度は以下のようにアロー関数内でthisを使ってみます。
“`javascript
let user = {
firstName: “John”,
func: () => console.log(this.firstName)
};
“`
この場合、user.func()を呼んでもコンソールで”undefined”が表示されました。thisを確かめるため、以下のコードに書き換
[JavaScript] 配列に関する主要メソッドなど
# この記事について
タイトルの通りJavaScriptの配列に関するメソッドについてまとめたものになります。
使用頻度が少ないメソッドは業務で忘れるたびに「JavaScript 配列 末尾 削除」や「JS 配列 指定した要素を返す」などのキーワードで何回も検索していたので、欲しい情報をすぐに入手できる手引きの様なものをイメージして作りました。そのため、人によっては得たい情報を入手できない場合もあると思いますがご了承ください。（書きたいことが多いため複数回に分けて投稿する予定です。）
# 目次
“`php5:目次
*配列の生成
1’配列リテラル’
2’スプレッド演算子 => 配列の中に配列を埋め込む。配列を展開する’
3’Array()コンストラクタ’
4’Array.of()とArray.from() => 配列をコピーする。各要素に関数処理を与えてコピーする’
*配列の追加と削除
1’delete演算子 => 配列の長さを変えずに要素を削除する’
2’pu
[個人開発] Javascript？React？ Web開発初心者が謎おもしろアプリ作ってみた！?
Qiita**初投稿**です。
好きな言語はC++です。**対戦よろしくお願いします。**
そんな自分がWebアプリを**初めて制作したときの制作記録**を記します。# 作ったもの :tada:
↓公開中！
https://pikka2048.github.io/React-GeimeiGeneretor
芸人さんにありそうな**面白い名前、芸名を生成するアプリです。**
**React**で作りました。フロントエンドのみで動作します。### 入門前時点の知識 :books:
– C++、C#大好きマン
– HTML CSS 完全に理解した。
– Javascript なんとなく分かる## きっかけ :gun:
某有名対戦FPSゲームにて、対戦相手のユーザー名が
> サンクチュアリ佐藤
> アルマゲドン
[JavaScript] Reactの状態管理にはZustandが決定解になるような気がする
useStateと同じ感覚で、グローバルのstoreをかけるので、これが最も使いやすいstore管理なのではないかなと思います。
今まで状態管理で、ReduxとかMobxとか、あれやこれや悩んでいたことが嘘のように一掃される感。
俺はこれを待ってたんだ感がします。すごいライブラリ！
zustand – npm
https://www.npmjs.com/package/zustandpmndrs/zustand: ? Bear necessities for state management in React
https://github.com/pmndrs/zustand# Code
“`js:App.js
import { useStore } from “./store”;
import “./styles.css”;export default function App() {
const countDefault = 1;
const { count = countDefault, setCount } = useStore();ret
ブラウザのタブの複製を検知する
アプリケーションで、あるタブから別のタブを複製して欲しくないときがあります（ひとつのタブだけ）
これまではCockieとか使ってたみたいなのですが、最近のブラウザであればブロードキャストをつかってかけそうです。
これで、複製すると元のタブのBodyを潰せます（クローズまでは出来ません）
“` js
const channel = new BroadcastChannel(‘tab’);
channel.postMessage(‘another-tab’);
channel.addEventListener(‘message’, (event) => {
if (event.data === ‘another-tab’) {
document.body.innerHTML = `新しいタブが開かれたためクローズしました。`;
}
});
“`いま開いたタブを検知したい場合は……実はよく分かりません。イベントにイベントを返せば元のタブにレスポンス返せると思い次のように書いたのですが、event.sourceがnullですとか言われてエラーにな
【Rails 7】will_paginate の Turbolinks を無効化する方法
# 開発環境
・Ruby: 3.1.1
・Rails: 7.0.3.1
・OS: Windows 10
・Docker# will_paginate の Turbolinks を無効化する方法
簡単に `will_paginate` の記載に `data: { turbo: false }` を追加したら、turbolinksは無効化されません。
:::note warn
`<% will_paginate data: { turbo: false } %> `
:::なぜなら、上記はそれぞれのページネーションボタンリンクではなく、外の `paginate` `div` に `data=”{:turbo=>false}”`の属性を追加するからです。turbolinksを無効化するために、それぞれのページネーションボタンリンクに `data-turbo` を `false` にする必要があります。
そうするためのショットカットがまだないので `will_paginate` の `renderer` をカスタマイズする必要があります。
### `will_paginate
Streamlitがあれば、REACTは不要なのか？
これはある程度、真理ではないかと思う。
ますますStreamlitには、コンポーネントが追加されるし、開発速度は格段に上がる
（もちろん、Reactのプロは、コンポーネントの開発に精を出してもらえばよいわけで、Pythonしかできない人には有難い話である）# STREAMLITの課題
先ほどの前提で、いまのところ問題になっているところを挙げてみる* ＷＥＢサーバー機能
例えばReactで作った翻訳アプリでは、ブラウザ（フロントエンド）からFetchして外部APIを叩くと、CROS制約に引っかかる。そこで一旦、バックエンドへリクエストを出し、サーバーから外部APIにリダイレクトしている。
Streamlitに置き換えようとすると、サーバー機能がないため、NODEJSかFASTAPI等を使って、別にWEBサーバーを立てないといけない。
Streamlit自体から外部APIを呼べば良いが、この際はJS→pythonにフルスクラッチで移植せねばならない。* 機械学習
機械学習と、巨大なモデルデータをSTREAMLIT内に保持することもできるが、そもそもGUIのために高い
JavaScriptの分割代入について
# 初めに
今回は配列の分割代入とオブジェクトの分割代入、そして使い方に気を付けることをまとめてみました。https://javascript.info/destructuring-assignment
https://es6.ruanyifeng.com/?search=%E9%81%8D%E5%8E%86&x=7&y=8#docs/destructuring
# Destructuring assignment
## Array Destructuring
配列の分割代入は簡潔に言えば要素位置のマッチングです。
“`jsx
// array destructuring
let arr = [‘Charlie’, ‘Brown’];
let [firstName, surName] = arr;
let obj = {
firstName,
surName
};
console.log(obj); // { firstName: ‘Charlie’, surName: ‘Brown’ }
console.log(firstName, surName); // Cha
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作成の比較
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とは。
以下のような特徴があります。
・静的なファイル配信をまず意識した方法論である
・静的
