- 1. Math.js で行列計算
- 2. タグを入れるだけで Web サイトを高速化する Repro Booster について思うこと
- 3. next.jsエンジニアになるためにやることメモ
- 4. HTML5プロフェッショナル レベル2 から学んだこと
- 5. for文if文での条件一致検索からforEach()を経てfind()にたどり着くまで
- 6. やらない理由を書いてやらない – Good Concepts in Programming –
- 7. jsQRを使ってブラウザQRコードリーダーを作る【技術メモ】【小ネタ】
- 8. 【kintoneカスタマイズ】ルーレットアプリを作ってみた
- 9. ?JS初心者が作るGoogle extension V3 ③ -タブの切り替えの処理-
- 10. 同期と非同期の違いとPromiseの役割
- 11. 【React】フラグメント
- 12. [Javascript + CSS] JAN-13のコード番号からバーコードを生成し表示する（１）～仕様の確認からロジックアウトラインの構築
- 13. MarkdownをHTMLに変換するunifiedインターフェースについての解説
- 14. 99%自力で独自ルールのオセロを作った～Gitに初Pushを添えて
- 15. モダンスタックでつくるWebアプリケーション 学習ロードマップ 2022/10
- 16. 間違い探しの答え
- 17. 【備忘録】Laravelによる非同期処理(Ajax)の使い方
- 18. プリザンターの分類型をラジオボタンで入力したい
- 19. NovelAIのプロンプトを管理・調整するChrome拡張を作りました
- 20. AtCoderをjavascriptで解くとき、vscodeとquokka.jsを活用する。
Math.js で行列計算
JavaScript で 5 元連立方程式を大量に解く必要があったので Math.js を試しました。Deno での利用についても触れます。
* [math.js | an extensive math library for JavaScript and Node.js](https://mathjs.org/)
※ Python の numpy や sympy を使うなら情報も多くて簡単ですが、方程式が必要になったコードの他の部分は Deno で書いていたこともあって JavaScript でやってみました。
# Node.js
[ダウンロードページ](https://mathjs.org/download.html)に書いてあるように配布物が 1 ファイルにまとめられているので、npm ではなくそちらを使います。
* https://unpkg.com/mathjs@11.3.2/lib/browser/math.js
まずは感触をつかむため REPL で使ってみます。
math.js をダウンロードして置いたディレクトリで Node.js を起動して、行列の計算を
タグを入れるだけで Web サイトを高速化する Repro Booster について思うこと
こんにちは。ぬこすけです。
最近(2022/10/26)に、マーケティングツールを開発する Repro が、タグを入れるだけでウェブサイトの表示速度を高速化させるツール「 Repro Booster 」をリリースしました。
* ニュース
https://prtimes.jp/main/html/rd/p/000000206.000013569.html
* Repro 公式サイト
https://repro.io/products/booster/
[PRTIMESより引用](https://prtimes.jp/main/html/rd/p/000000206.000013569.html)表示速度アップの仕組みは簡単にいうと、ユーザーのクリックを予測して次のページのデータを先読み
next.jsエンジニアになるためにやることメモ
next.jsエンジニアになるかもしれないので、そのために準備したことをメモしていく。
（このために学生時代に使っていたアカウントを掘り出してきた）next.jsエンジニアの友達に聞きながら進めていくので、もし同じように今から始める人がこの記事を見てくれているのであればぜひ一緒に頑張りたい。
先輩エンジニアの皆様は「これをやれ」コメントをぜひお願いします。## やること(予定）
大きく四段階で学習を進める。
※あくまで予定なので気分で変更するかも…**第一段階**
・簡単なTODOアプリを作ってみる（基礎から始めてもつまらないので簡単なやつを作ってみる）**第二弾階**
・HTTP、CSSをざっとおさらいする
・JavaScriptしっかり学び直す
・ゆくゆくはTypeScriptもやりたい**第三段階**
・Reactを学ぶ（初めてだから時間かかりそう）**第四段階**
・**Next.jsをやる！！**# やったこと
## 第一段階
やったら書きます## 第二弾階
やったら書きます## 第三段階
やったら書きます## 第四段階
やった
HTML5プロフェッショナル レベル2 から学んだこと
前の会社で使用していたアカウントを引き継ぐの忘れてたので
https://qiita.com/ryota-yamada/items/16f299642160801d1496
for文if文での条件一致検索からforEach()を経てfind()にたどり着くまで
## この記事の経緯
自分でJavaScriptを書いていて、理解を深める、それをアウトプットして伝えよう！ということで記事にしてみました。
このコードはGASを書いていて使っているコードなので、正確にいうと、JavaScriptではないんですが、大体一緒なんでご勘弁を。
下記で書いている３パターンの記述は全て最終的な戻り値は同じものになっております。
結果は一緒だけども、記述の違いを見比べていただいてJavaScriptの理解を深めていただければと思います。—
前提：関数の第1引数のpostTextの中に投稿者の情報が含まれています。その投稿者が誰なのかを調べるための関数です。調べるための要素としてgithubアカウントを用いています。そのgithubアカウントが含まれているかどうかで投稿者が誰なのかを調べるための関数となっています。—
### パターン1: for文とif文の組み合わせ“`javascript: for文とifの組み合わせ
// postText:string 検索したい文字列が含まれているのかを探す対象
// membersArr:
やらない理由を書いてやらない – Good Concepts in Programming –
# 概要
プログラミングの良い概念を理解するとプログラマーレベルが上がると考えています。
良い概念は特定のプログラミング言語に縛られないので、様々なプログラミング言語で役に立ちます。
前回は[OAOO原則](https://qiita.com/masaki_nakada_ari/items/1b4e1ea9a758ef86a498)を紹介しました。
今回紹介する良い概念は「やらない理由を書いてやらない」です。# プログラミングの3大要素
本編に入る前に、プログラミングの3大要素について復習しましょう。
プログラミングを構成する3つの基本要素は「順次処理」、「分岐処理」、「反復処理」です。
プログラミングの3大要素だけであなたのやりたいことは基本的に実現できます（良いプログラミングであるとは限らない）。## 1.順次処理
順次処理は記述した順番に従って処理を進めていくことです。“`order.js
// Plan, Do, Check, Actionの順番で処理します
executePlan();
executeDo();
executeCheck();
executeAc
jsQRを使ってブラウザQRコードリーダーを作る【技術メモ】【小ネタ】
# はじめに
株式会社マイスター・ギルド新規事業部のウサギーです。
弊社新規事業部では、新規サービスの立ち上げを目指して
日々、アイディアの検証やプロトタイプの作成を行っています。今回はブラウザで使えるQRコードリーダーをさっくり作りたいな～と思いjsQRを使ってみました。
# jsQRとは？
javascriptで作られたQRコード読み取りライブラリです。
公式ページ https://github.com/cozmo/jsQR
デモページ https://cozmo.github.io/jsQR/↓ デモページを試した図
”を使って、ギャンブルチックに決定していました。
毎タスクでルーレットがハラハラドキドキを与えてくれます。我々のチームでは「今日もアレで決めますか！」となるほどルーレットに執着しています。ある日のタスク決めの後に、
「いわくん、これkintoneでやってみてくれない？」これがこのルーレットカスタマイズのきっかけでした。
と、話すと長くなるので、早速デモをお見せしましょう。
## デモ
完成した作品は → [こちら?](https://chrome.google.com/webstore/detail/%E3%83%9D%E3%83%A1%E3%83%89%E3%83%BC%E3%83%AD/nfmmdehbjbenlngbihdhheccephmdfco)
## popup.js
前回popupのHTMLを作成したので色々と動きをつけるためにjsファイルを記入します。
このjsファイルには
・タブの切り替えの処理
・タイマーを表示させる
・スタート/ストップ/リセットの各ボタン機能
・タイマー作動中の有無で表示する画面の処理
と多くの処理を行う。この記事ではタブの切り替えの処理を記述していく。
### タブの切り替えの処理
タブの切り替えは[こちらの記事](https://blog-and-destroy.com/24218)を参考に
同期と非同期の違いとPromiseの役割
# 同期処理と非同期処理とは
## 同期処理
同期処理は順番通りに処理を行う
“`javascript
console.log(“一番”);
console.log(“二番”);
console.log(“三番”);コンソールログ
//上から順番通り
一番
二番
三番
“`
同期処理の問題点
同期処理は順番通りに処理を行うために
途中に重い処理が合った場合その処理を待たないといけない## 非同期処理
処理を順番通りにとは限らない、終わった処理から実行される
例えばsetTimeoutなど“`javascript
console.log(“一番”);
setTimeout(() => console.log(“二番”), 5000);
console.log(“三番”);//コンソールログ
一番
三番
二番
“`
このように順番通りではなく処理が終わった順番になる## Promise
resolve実行時は
thenの処理reject実行時は
catchの処理finallyはresolve,reject両方と
【React】フラグメント
## フラグメントとは？？
`React でよくあるパターンの 1 つに、コンポーネントが複数の要素を返すというものがあります。フラグメント (fragment) を使うことで、DOM に余分なノードを追加することなく子要素をまとめることができるようになります。`
参考：https://ja.reactjs.org/docs/fragments.html要素を複数返すときに必要ということですね。
## 確認してみる
以下のプログラムは***Example関数内でインクリメントした変数`value`をCountPrint関数に引数として渡し、表示***します## NG例
“`javascript
const CountPrint = ({ value }) => {
returncount:{value};
};const Example = () => {
let value = 0;
return (
[Javascript + CSS] JAN-13のコード番号からバーコードを生成し表示する（１）～仕様の確認からロジックアウトラインの構築
# はじめに
プレーンなJavascript（Vanilla.js）による、コード番号からバーコードを生成するためのロジック構築について、前半と後半の２回に分けて紹介します。一般消費者では、恐らく一番目にすることが多い、**JAN-13** に限定し、モバイル端末等バーコードリーダーにて認識可能なバーコード表示を目的とします。今回は前半ということで、**仕様の確認からロジックアウトラインの構築**までとなります。
バーコードの表示方法については印刷目的ではないことと、 [Canvasを使用したSVG版](https://qiita.com/Dolphin_0809/items/ac087aadcc43d15a01e2) は既に存在し、参考にもさせていただいているため、`CSS` による表示を選択しています。かなり泥臭く決してスマートとは言えない処理内容となってしまうのですが、ロジックとしては単純でわかりやすいかと思います。
なお、JANコードについての歴史や成り立ちなどの基本的な情報は割愛し、表示及び生成に必要な仕様情報のみをまとめています。また、当方ではjQueryは使用しま
MarkdownをHTMLに変換するunifiedインターフェースについての解説
## はじめに
この記事はマークアップ言語変換インターフェイスunifiedについて解説、共有するためのものです。node.js環境でQiitaのマークダウンファイルをHTMLに変換する過程を題材に、unifiedを学習します。
### 対象とする環境
– node.js v16.18.0
– unified v10.1.2
– remark v14.0.2
– rehype v12.0.1異なるバージョンをご利用の場合、この記事の内容がそのまま適用できないかもしれません。お手元の環境をご確認ください。
### 対象とする読者
– JavaScriptで開発をしたことがある
– node.jsを利用したことがある
– マークダウンを書いたことがある
– unifiedについては知らない / 名前ぐらいは知っている## unifiedインターフェイスとは
Qiitaの記事は[マークダウン](https://www.markdown.jp/what-is-markdown/)構文で書かれています。まずはこのマークダウンの構造を分解し、HTMLに変換する仕組みが必要です。
99%自力で独自ルールのオセロを作った～Gitに初Pushを添えて
# 謝辞
タイトルに「独自ルール」とありますが、既出だったらごめんなさい。
また、妥協した点がいくつもありますが、初心者が自力で頑張ったということでお許しください。# 記事の内容
+ 前書き＆ゲームについて
+ 作った理由
+ 普通のオセロ開発の流れ
+ 独自ルールへシフト
+ 初GitPush
+ この制作を通して分かったこと# 前書き＆ゲームについて
ようやく自分のゲームを公開することが出来ました！！！
https://github.com/Scythercas/point-othello
ルールは
+ 基本的な操作は普通のルールと同じ
+ 勝利判定だけ異なり、`背景が自分の色のマスの数字の和`が得点となり、得点が大きかった方が勝ちです。
実際のプレイ画面はこんな感じです
中心の点数が1点なのに対し角の点数が
モダンスタックでつくるWebアプリケーション 学習ロードマップ 2022/10
## はじめに
この記事を読んでいるということは、何らかの目的でWebアプリケーション開発を学びたい、あるいはその最中であると思います。しかしWeb開発という分野の内容の幅は広く、さらに常にアップデートが行われるため、多くの場合、学習方法は独学によるものになります。
特に独学において問題になるのは、学習すべきことがわからないということが起きることです。世の中には、Webアプリケーション開発用の学習教材や記事は数多存在しますが、それらの情報の殆どはその内容ごとに散在しており、またWebアプリケーション開発において決定的なシラバスというのも存在しません。この記事は、学習すべきことを明確化するため、モダンなWebアプリケーション開発における基礎的な知識、フレームワーク及び参考となる学習教材等を体系的にまとめたものです。
:::note warn
– この記事においてWebアプリケーションは、ブラウザ上で動作するWebアプリケーションのみを対象としています。モバイル用のネイティブアプリケーションに関する情報は含みません。
– この記事は特に初学者を対象としているため、Webに関する初歩
間違い探しの答え
# はじめに
本記事は筆者が思いつきで作った[こちらの間違い探し動画](https://youtu.be/0cl_6kjlxko)の答え合わせ用の記事です。動画の内容について
※技術的な内容以外は**全てがウソ**です。
※技術的な内容も嘘ばかりです。スライド作成の参考にした動画
[【誰も教えない】ダサいスライドを作る方法7選 – YouTube](https://www.youtube.com/watch?v=Vyl35SuZRsY)# 間違い一覧
あの動画には以下9つの間違いがあります。
[1. JavascriptはJava](#1-JavascriptはJava)
[2. Javascriptはマルチスレッド](#2-Javascriptはマルチスレッド)
[3. fetch()メソッド, setTimeOut()メソッドはJavascriptのビルトイン関数である](#3-fetch()メソッドはJavascriptのビルトイン関数である)
[4. fetchやsetTimeoutはJavascriptのスレッドで処理される](#4-fetchやsetTimeou
【備忘録】Laravelによる非同期処理(Ajax)の使い方
# Ajaxとは何？
まずはAjaxとは「Asynchronous JavaScript XML」の略です。
「Asynchronous」は「非同時性の、非同期の」という意味です（コトバンク）
Ajaxは「JavaScript+XMLによるサーバーとの通信」となります。## Ajaxの書き方について
Ajaxを利用するには`Java Scriptファイル`もしくは
scriptタグ内に処理、つまり次のテンプレートを記述します
### jsファイルにコードを記述する場合
“`javascript:index.js
$.ajax({
//以下の引数は使用しない場合省略可能です
url: ‘URL’ //LaravelのルーティングにつなぐURL
type: ‘postかget’,
cache: false, //cacheを使うかどうか
dataType:’json’, //data type scriptなどデータタイプの指定
data:引数名, //Laravelのコ
プリザンターの分類型をラジオボタンで入力したい
## デモ
デモサイトで使えるサイトパッケージは [gist](https://gist.github.com/einmotorrad/e8047830e3795f40da48b2e2df4227c4) から。
## やりたいこと
プリザンターで、選択肢を排他的に選ぶ、データ項目は分類型の複数選択でない項目で利用できます。
このとき入力用のユーザインターフェイスはプルダウン(select/option)になります。ラジオボタンにすることでメニューを展開させる 1 クリックが省略でき、項目が十分少なければ実用的な場合があります。
そこで、スクリプトでカスタマイズしてみましょう。
なお、読取専用となるときはラジオボタンであることに意味がないので、あくまで編集画面での改善だけを考えています。
また、以下の例では CSS の手当をしてい
NovelAIのプロンプトを管理・調整するChrome拡張を作りました
https://chrome.google.com/webstore/detail/naimagicwand/mpopocllkpjpdibiekfldhdodchadike
# 何ができるの？
ざっくり2つの機能があります。
### 1. プロンプトエディター
プロンプトを対象に以下のことができます。
・プロンプトの追加、編集、削除
・プロンプトの強調の数変更
・プロンプトの順番変更
・プロンプトの一時非表示
### 2. プロンプトブックマーク
お気に入りのプロンプトを名前をつけて保存することができます。
## できること
* コードテストのように、標準入力を与えて、出力を確認できる。
* コードを修正すると、即時に結果が確認できる。
* コードの修正なしに提出できる。## フォルダー構成など
quokka.jsをvscodeにインストールした状態で、以下のようなファイル構造にしたとします。
“`
atcoder
├── A.js
├── dev
│ └── stdin
“`
vscodeでは、atcoderフォルダーを開いた状態にします。
stdin に標準入力を記載します。
A.jsには、提出するスクリプトを記載します。私は、いつもこちらの記事の方法で標準入力の値を取得しています。
（毎回助かっており大変感謝して
