- 1. React に プルリクを送ったけど、マージされなかった話
- 2. Billboard.jsとjsdomでSVGを生成する（ちょっと失敗編）
- 3. 【2024年版】JavaScript(React)におけるリーダブルコードのチートシート4章
- 4. Jestで環境変数を読み込む2つの方法
- 5. GWT 最初の画面は何か？
- 6. SPA（Single Page Application）の基本と簡単な例
- 7. [JS]関数型プログラミングでも依存性の注入はできるのか
- 8. Apacheでwebサイト公開(React)しようとしてハマった罠
- 9. SynthV scriptを書くときの覚え書き
- 10. React Router v5とv6 の違いに混乱した件
- 11. 初めてのJavaScript:初心者の学び場（Documentメソッド）
- 12. 【Next.js】Route Segment Configのページレンダリング手法をまとめてみた
- 13. シレン6 武器盾の値段と呪い状態に法則性があるのか検証する
- 14. FlashアプリケーションをHTML5に変換する方法
- 15. VannilaJSでtodoリストを作る
- 16. Cygwin を複数インストールする(CYG_HOMEの設定について)
- 17. kintoneカスタマイズでtry/catchを使おう
- 18. Reactで学習記録アプリ作ってみた
- 19. plunkerで liquidfun その4
- 20. plunkerで liquidfun その3
React に プルリクを送ったけど、マージされなかった話
## 短くまとめると
[React](https://github.com/facebook/react) に PR を送ったら、メンテナからの反応が渋そうだったので萎えていたら、メンテナが自分でブランチ切って修正してマージしていた。
## 教訓
1. OSS ではメンテナの言葉に一喜一憂しない鋼の心が必要
2. OSS では調査に時間がかかっても、できるだけすぐレスする
3. OSS で PR を送る前に テストとリント（と React の場合はタイプチェック, Flow）を通す## PR を送る前からメンテナがマージするまでの流れ
#### 普段自分がしていたこと
去年の12月になって、1年間業務で使っている Next.js の内部構造を知らないのも変だなと思い Next.js のソースコードを読むようになりました。その過程で、server とちょっと build と client が分かるようになったので、今年の 1月から issue を探して、そのバグ修正を行うようになりました。
#### ことの発端
今回のことの発端は、この issue でした。
htt
Billboard.jsとjsdomでSVGを生成する（ちょっと失敗編）
たまには、あまりうまくいかなかった事でも書き残しておくかと。
## やりたかった事
日々、考えた事等の記録を 個人的なBlog(公開はしていません)に Markdownで 書き残しています。そのときに、ちょっとしたダイアグラムを残したいときは、Markdownの Rendererに PlantUMLを組み込んで使っていました。
先日、ちょっとグラフ（Chart）を残したいなぁと思って、[Billboard.js] を Markdown に組み込む事を試してみたので、その記録です。
[Billboard.js]: https://naver.github.io/billboard.js/
[PlantUML]: https://plantuml.com/ja/## 正攻法
これを実際にやるなら [Puppeteer] と [Billboard.js] を組み合わせるのが、一番楽な道かと思います。
実際 [Billbaord.js]の公式にある、[How to generate chart image in Node.js environment?](https://git
【2024年版】JavaScript(React)におけるリーダブルコードのチートシート4章
こちらの記事の続編になります。
https://qiita.com/kntmaan/items/d74a06d97eaec5623e5c
## 4章 美しさ(41p~)
### 美しさの定義
* 読み手が慣れているパターンと一貫性のあるレイアウトを使う
* 似ているコードは似ているように見せる
* 関連するコードをまとめてブロックにする### 4.1なぜ美しさが大切なのか？
読みづらいパターン
“`react
// 全体的に関連するコードをまとめてブロックにまとまっていなくて読みづらい
export const Button = ({
label,disabled,//改行に一貫性がない
children,
…props}: ButtonProps)=>{//一般的にはスペースを入れる
return(
Jestで環境変数を読み込む2つの方法
# はじめに
Jestで環境変数を読み込みたいというときに方法がいくつかあったのでまとめます
簡素に書いていきますので使いやすい方法をお使いください# 0. 共通でやること
環境変数を読み込むには`dotenv`というライブラリが必要なのでインストールします
“`
$ npm install dotenv
“`ここからは2つの方法があるので好きな方を選んでください
# 1. package.jsonに設定する
こちらはセットアップスクリプトが不要なので比較的簡単かなと思います
package.jsonに以下をいれます“`json:package.json
“scripts”: {
(省略)
},
“jest”: {
“setupFiles”: [
“dotenv/config”
] //ここを追加する
},
(省略)
“`# 2. セットアップスクリプトをつかう
Jestを実行する際に実行前に環境変数を読み込むことセットアップスクリプトを書くことも可能です。
プロジェクトのディレクトリに`
GWT 最初の画面は何か？
# GWTの最初の画面はEntryPoint インターフェースを継承したクラス
通常、サンプルの画面から改造していけば、できます。図は新規プロジェクトから、ローカルで立上げまで再現しています。
SPA（Single Page Application）の基本と簡単な例
### はじめに
ウェブ開発の世界では、SPA（Single Page Application）が注目を集めています。この記事では、SPAの概念を初心者にも分かりやすく説明し、簡単なコード例を通じてその動作を理解します。### SPAとは？
SPAとは、「Single Page Application」の略で、一つのウェブページで完結するアプリケーションのことを指します。SPAは、文字通り「一枚のウェブページ」で動くアプリケーションです。従来のウェブサイトのように、リンクをクリックするたびに新しいページに移動してロードするのではなく、SPAでは最初にページ全体を読み込んだ後、ユーザーが何か操作をするたびに必要なデータだけを更新して、ページの一部分だけを動的に変えていきます。### SPAの利点
高速なページ遷移：全ページリロードの必要がないため、ユーザー体験が向上します。
良好なユーザー体験：動的なコンテンツ更新により、アプリケーションがよりインタラクティブになります。
サーバー負荷の軽減：初期ロード後は、必要なデータのみをサーバーから取得します。### SPAのコード例
[JS]関数型プログラミングでも依存性の注入はできるのか
# 前置き
関数型プログラミングでDIする為のDIコンテナをJavaScriptで実験的に作ってみました、という記事です。恐らく同様のオープンソースがすでに存在しているのだろうと思いましたが、軽く探しても見つからなかった（追記：やっぱりありました！末尾に追記してます）ので実験的にDIコンテナを作成しながら考察していきます。
私自身はそこまで関数型プログラミングの理論に詳しいわけではないので、FPニキからの補足やツッコミをお待ちしております。
# 考察
**DIとDIコンテナ**は、オブジェクト指向プログラミングにおいてとても便利な道具であり、パラダイムであると思います。DIコンテナを使うためにオブジェクト指向を使うといってもいいぐらいじゃなかろうかと思うくらいですが、これ、**関数型プログラミングだとどうなるんだろう**と思いました。
例えば次のような、リソースの取得用関数ライブラリがあるとします。
“`javascript
// 現在の言語を取得
function getLanguage() {
// 実際には設定ファイルやブラウザの設定から読み込まれる
Apacheでwebサイト公開(React)しようとしてハマった罠
# はじめに
こんにちは私はwebアプリ，webサイト開発に関しては右も左もわからないズブの素人でございます．
そんな私がPortfolio系のサイトを作って自宅サーバーから公開してみたわけです．ちなみにReactなどのフレームワークはおろかjavascriptやHTML,CSSすらもほぼ未経験です．お恥ずかしながらjsxなんてものは知りもしませんでした．
この記事では私が特によくわからなくて躓いた部分について書きます．
私と同じようなズブの素人のそこのあなた🫵の役に立てれば幸いでございます．# 対象者
・サーバーもフロントエンドも何も知らないけど自分のサイト作ってみたい!
・js? jsx?😩## 0. 前提
前述した通り私もまともな知識があるわけではないので，間違ったことを言わないようにあまりに詳しくない事には触れません．
ですので，サーバーを立てるとか，webサイトのソースコードプログラミングに関しては，他のサイトやyoutubeを参考にして作ってください．ここではyoutuberが当たり前の事すぎて説明を省いたであろうことをざっくりと説明します．
##
SynthV scriptを書くときの覚え書き
JavaScriptがわからん。
しかしLuaはもっとわからん。# SynthV scriptとはなんぞや
Synthesizer Vというソフトを拡張するためのスクリプト。
ノートの操作だけでなく選択や再生、果ては画面操作まで何でもできる。
何でもできすぎて逆に不安になる。# この記事は何
スクリプトを書くたびに毎回既存のコードやらサンプルコードやらからコピペしているので
いいかげん真面目にメモを作ろうと思った。筆者は基本C#しか書けないというかC#もまともに教わったことないので
いわゆる「お作法」みたいなものは何もわからない。# とりあえず最初に書くやつ
“`javascript
function getClientInfo() {
return {
“name”: SV.T(“Title”),
“author”: “Maiko”, // 作者名
“versionNumber”: 1.00,
“minEditorVersion”: 65537, // 実は「ライセンスとアップデート」のとこで見れる本体バージョン
“
React Router v5とv6 の違いに混乱した件
# はじめに
僕が受講しているudemyでReact Routerを扱う場面があったのですが、少し情報が古くてv5でした。
でもまぁなんとなく書けるだろうーーと楽観的に捉えていた僕でしたが、5秒も経たないうちにエラーが出ました笑同じような境遇の方がいましたら、参考までにしてください。
# ルーティングの実装方法
### 単純なページ遷移をしたい場合– 基本的な設定
“`jsx:ルートの設定
}/>
“`
このルートの設定を使って、v5と同様に*Link*コンポーネントを使えば、基本的な画面遷移を実装することが出来ます。
– ネストする画面遷移
“`jsx:ルートの設定
初めてのJavaScript:初心者の学び場（Documentメソッド）
今回はJavaScriptのDocumentメソッドです。
Documentオブジェクトは、Webページ全体を表現するためのオブジェクトであり、ブラウザ上でのドキュメントの構造や内容にアクセスするためのメソッドやプロパティを提供します。
## 1\. getElementById(id)
指定されたid属性を持つ要素を取得します。
“`diff_javascript:
const element = document.getElementById(‘myElement’);
“`## 2\.getElementsByClassName(className)
指定されたクラス名を持つ要素を含むHTMLCollectionオブジェクトを返します。
“`diff_javascript:
const elements = document.getElementsByClassName(‘myClass’);
“`## 3\.getElementsByTagName(tagName)
指定されたタグ名を持つ要素を含むHTMLCollectionオブジェクトを返します。
“`
【Next.js】Route Segment Configのページレンダリング手法をまとめてみた
Next.js の App Router の Route Segment Config でページのレンダリングを制御する方法についてまとめてみました。
Next.js 14.1.0 で検証しています。
もし、間違いを見つけた場合は、ご指摘いただけると幸いです。## Route Segment Config とは
Next.js 13 App Router から追加された機能で、ページ全体のレンダリングを制御することができます。
`layout.tsx`や`page.tsx`,`Route Handler`で以下のような設定をすることで、ページのレンダリングを制御することができます。
また、設定することにより`fetch`の**デフォルトの設定**を変更することができます。“`tsx
// 静的レンダリングを強制する
export const dynamic = ‘force-static’;
“`Router Segment Config は以下の 7 つの設定があります。
– [`dynamic`](https://nextjs.org/docs/app/a
シレン6 武器盾の値段と呪い状態に法則性があるのか検証する
## 事の発端
https://note.com/shiny_llama970/n/n8469520feb5f
上の記事を読んでいて興味深い記述を見つけました。
それを引用します。>値段から呪いの判定は、以下のようにすればいい（間違っていたら教えてください）
>* 買値：下1桁が0であれば呪いではない
>* 売値：下1桁が0か5であれば呪いではない（現在、打ち消し線が入っているが、例外パターンがあったのか、それともただ単に予防線を張っているだけなのかが分からない。）
もし、これが本当だとしたら非常に値段識別が楽になる大発見です。
私はこれの真偽が知りたい。と思いました。
## 検証する
しかし、私は数学が苦手なのでこれが正しいかどうかを論理的に求めることができません。
という訳でテキトーな武器盾を生成してぱいぷ氏の非呪い判定が正しいのかを検証したいと思います。
とりあえず1億回検証します。“`javascript:main.js
/*
【参考元】
風来のシレン６ 武器・盾の値段計算式
https://note.com/shiny_llama970/n/n84
FlashアプリケーションをHTML5に変換する方法
3年半前に発表された通り、2021年1月12日、Adobe Flash Playerは「EOL（End of Life）」に突入し、Adobeは全ユーザーに直ちにアンインストールするよう呼びかけ、私たちはAdobe Flash Playerに別れを告げた。では、Flashベースのエンタープライズアプリケーションにとって、これはどのような意味を持つのでしょうか？
現在、社内アプリケーションには、次のような短期的なソリューションを使用しているかもしれません：
・Flashの「Enterprise Enablement」とドメインホワイトリストを使用したInternet Explorerの使用（Microsoftが2021年後半にアップデート
VannilaJSでtodoリストを作る
## はじめに
私は現在JavaScriptの勉強中です。
VannilaJSでtodoリストを作って、それをhackしてスキルアップを図りました。参考サイトは
[JavaScript Primer](https://jsprimer.net/)
です。第一部基礎文法から始まり、大変力がつきそうな内容になっています。
JavaScript（ECMAScript）の改定履歴も紹介してあり、かなり深いところまで理解ができそうです。
辞書代わりにもなりそうです。
反面、詳しすぎる面もあるので、自分で読むときの比重を考える必要がありそうです。第二部は応用編で、Ajax通信、Node.jsでCLIアプリ、そしてTodoアプリの作成となっています。
それぞれをVannilaJSで書くことにより理解が深まります。## VannilaJSとは
VanillaJSは、純粋なJavaScriptのことを指します。つまり、どんなフレームワークやライブラリにも依存せず、素のJavaScriptだけで書かれたコードを指します。
VanillaJSを使うことで、JavaScriptの基本的な機
Cygwin を複数インストールする(CYG_HOMEの設定について)
[『Cygwinの環境を複数作ったり、パッケージのインストールを自動化したりする(たった一つのスクリプトファイルだけで…魔法のように…Linuxライク環境が構築できる！)』](https://qiita.com/javacommons/items/1a182f187fd2a8df29c2) の補足記事です。
`D:\cyg` にインストールスクリプト「project1.bat」を置いた場合に、スクリプト内の「CYG_HOME」の設定を変えるとどのようになるかを詳しくご説明します。
CYG_HOME を指定することで複数の Cygwin プロジェクトから同じホームディレクトリを共有できます。
一度設定した CYG_HOME を変更して、再度スクリプトを実行することでホームディレクトリを変更することができます。
# 「.」に指定した場合
“`text
set CYG_HOME=.
“`ピリオドに指定するとカレントディレクトリという意味でスクリプトのあるディレクトリがホームになります。
ただし、Linux と同様に`D:\cyg`の配下にユーザ
kintoneカスタマイズでtry/catchを使おう
## はじめに
皆さんこんにちは。サイボウズ株式会社テクニカルトレーナーのTeruです。
今回はkintoneカスタマイズにおけるtry/catchの使い方を考えていきましょう！## try/catchの基本
そもそも、try/catchは例外が発生した場合に例外を処理するために使用します。
“`JavaScript
try {
実行する処理
} catch(e) {
try文で例外が発生した場合に実行される処理
}
“`例外とは、kintoneカスタマイズにおいては多くの場合 REST API の実行に失敗した場合のことです。
### サンプル
例えば、`アプリ番号:１ レコード番号:１`のレコードを取得する場合は下記のようにtry/catchを使用します。“`JavaScript
try {
// レコード取得処理
await kintone.api(‘/k/v1/record’, ‘GET’, { app: 1, id: 1 });
} catch (e) {
// レコード取得に失敗した場合の処理
console.error(e);
}
Reactで学習記録アプリ作ってみた
# はじめに
僕は現在1ヵ月本気で技術力向上を目指していて、今日はその2日目です。JISOUというサービスのもとコーチングを受けています。udemyの講座をひとつ完了させたので、今回は簡易的な学習記録アプリを作ってみたので、備忘録のような感じでまとめていきたいと思います。
初投稿の記事
よかったらぜひ読んでみてください！https://qiita.com/shunii/items/c5ed2e55e05621f86795
# アプリの機能紹介
初期画面
学習記録の追加後
# サンプルコード
“`
var world = null;
var FPS = 1000 / 45;
var STAGE_WIDTH = 456;
var STAGE_HEIGHT = 456;
var SCALE = 10;
var ITEM_TYPE_PARTICLE = “particle”;
var ITEM_TYPE_POLYGON = “polygon”;
var ITEM_TYPE_CIRCLE = “circle”;
var physicsEngine = PhysicsEngine();
var viewer = Viewer({
id: “canvas”
});
function PhysicsEngine() {
v
plunkerで liquidfun その3
# 概要
plunkerで liquidfunやってみた。
揺れる瓶、やってみた。# 写真
# サンプルコード
“`
var container;
var world = null;
var threeRenderer;
var renderer;
var camera;
var scene;
var objects = [];
var timeStep = 1.0 / 60.0;
var velocityIterations = 8;
var positionIterations = 3;
var test = {};
var projector = new THREE.Projector();
var planeZ = new THREE.Plane(new THREE.Vector3(0, 0, 1), 0);
var g_gr
