- 1. Javascriptで最頻値を求めようとした備忘録
- 2. 第14回 JavaScript アニメーションによる拡大・縮小（CSS版）
- 3. メソッドチェーン
- 4. 【TypeScript】RDBを手軽にいい感じに扱う @databases
- 5. JS components
- 6. Next.jsでフォントを設定する
- 7. JavaScript 基本の学び 記録
- 8. javascriptの非同期開発
- 9. PMTiles 消費における MapLibre GL JS v4 の破壊的変更への対応
- 10. JavaScript: 接尾辞配列(Suffix Array)編
- 11. 【熱望】javascript の for 文で var i を宣言するのはやめて下さい
- 12. querySelectorAllで取得した要素に対してmapとかを使う
- 13. react開発においてよく見るnamed exportとdefault exportの違い
- 14. 初めてのWebアプリケーションを作ってデプロイした話(React / Express)
- 15. 私も JavaScript でキューを実装してみた
- 16. chartjs-plugin-datalabels メモ
- 17. HTA（HTML Application）をPreactとTypeScriptで開発する
- 18. 同期か非同期かを確認する方法
- 19. IP住所検索サービス作ってみた
- 20. 恐怖！ var の動きが意味不明すぎる！
Javascriptで最頻値を求めようとした備忘録
※筆者はJavascript初学者
最頻値、厳密には「文字列が複数入った配列から、最も出現回数の多い文字列を返す」関数を作りたかった。
色々やり方はあると思うが、ちょっと躓いたところもあったのでメモしておく。サンプルとした配列は下記。
“`javascript:main.js
let arr = [“melon”,”apple”,”apple”,”pine”,”apple”,”melon”,”orange”]
“`
“apple”が3回、”melon”が2回、”orange”と”pine”が1回ずつ出現する。# 参考
– [JavaScriptの配列の最頻値を求めるコピペ](https://qiita.com/yas-nyan/items/8afaf7a1fc5b2306354b)
– [javascript 配列の最頻値を求める](https://mebee.info/2022/05/29/post-66763/)
– (↑の解説記事) [JavaScript 自由研究 – 最頻値を求めるコード – カメリアの記事](https://camellia.hatenablo
第14回 JavaScript アニメーションによる拡大・縮小（CSS版）
# はじめに
今回は、アニメーションによる要素の拡大・縮小を試したいと思います。
ウェブサイトの広告でよくみかける、広告表示時やクローズ時にアニメーションで拡大・縮小する動作です。
第13回は、`animate`を使用して拡大・縮小を実施しましたが、今回はCSSの`animation-name`で実施したいと思います。
今回はJavaScriptは使用しません。# 今回実施する内容
CSSの`animation-name`を使用して、要素にマウスカーサーを載せた時に拡大・縮小を実施します。
本当はクリックで実行しようと思いましたが、少し課題があり、それを解決しようとすると今回のテーマから少し外れた内容も記載しなければならないため、`hover`で行うことにしました。課題解決は別記事で記載しようと思います。以下の４つのパターンを実施します。
– 拡大
– 縮小（縮小後、マウスカーサーを置きなおすと再度元の戻って縮小）
– 水平方向に拡大（拡大後、すぐに初期のサイズに戻る）
– 垂直方向に縮小
 result.forEach((result) => console.log(result))
// 1 3 5 2 4// メソッドチェーンを使用した場合
array.filter(value => value <= 5).forEach((numbers) => console.log(numbers))
// 1 3 5 2 4
“`
#### 参考
https://qiita.com/andota05/items/2a0461dc1d6f4e31781f
【TypeScript】RDBを手軽にいい感じに扱う @databases
`@databases` はTypeScriptのRDBクライアントライブラリ。ORMではなく、SQLを直接書く又はクエリビルダーを使う系のライブラリ。Postgres、MySQL、SQLiteなどで使える。
これは私が他のRDBクライアントライブラリに対して「なんでこうしないんだよ」と思っていた設計が全部盛り込まれていて、とても使い心地が良い。
https://www.atdatabases.org/
# 使い方概要
このライブラリにはSQLを直接書く方法とクエリビルダーを使う方法の2種類の使い方がある。2つの長所と短所は以下。– SQL直書き
– ✅どんなクエリでもかけるのでRDBの機能をフルに活用できる
– ❌TypeScriptの型がつかない
– クエリビルダー
– ✅TypeScriptの型がつく
– ❌扱えるクエリは限られる## SQL直書き
以下がコード例。
“`typescript
import createConnectionPool, { sql } from ‘@databases/mysql’;const
JS components
Curious which components explicitly require our JavaScript and Popper? If you’re at all unsure about the general page structure, keep reading for an example page template.
Alerts for dismissing
Buttons for toggling states and checkbox/radio functionality
Carousel for all slide behaviors, controls, and indicators
Collapse for toggling visibility of content
Dropdowns for displaying and positioning (also requires Popper)
Modals for displaying, positioning, and scroll behavior
Navbar for extending
Next.jsでフォントを設定する
## 初めに
Next.jsの最新バージョンでのフォントの設定についてです。説明しているサイトが少なかったので忘備録として残します。## 注意事項
プログラミング初心者の記事になります。明らかな誤りがある際にはコメントいただけると幸いです。## 結論
まずは簡単に設定手順を記します。1. font.tsを作成する
1. `next/font/google`から使用するファントの種類をインポート
1. 任意のファイルで呼び出す以下詳しい設定方法です。
### font.tsの作成
まずは好きな場所にfont.tsを作成してください。
今回はappディレクトリ配下にそのまま設置しましたが、uiファイルを作成してもいいかもです。
### `next/font/google`から使
JavaScript 基本の学び 記録
JavaScriptの基本を学んだので記録用
Progate2周目での情報整理です## 【while】 繰り返し処理
条件式がtrueの間、{ }を繰り返す例 numberを1〜100まで表示するwhile文
“`js
//numberの中身は1を定義①
let number = 1;while(number <= 100){ //numberの数値を比較しtrueかを判別② console.log(number); //出力 number += 1; //numberに1を足す③ } ``` ```:結果 1 2 3 ： ： 98 99 100 ``` ## 【for】繰り返し処理 while文をシンプルにした文 上記のwhile文①〜③を1行で指示できる ```:例 for(①; ②; ③){ console.log(number); } ``` 数値をいれると ```js for(let number = 1; number <= 100; number++){ console.log(number); } ``` これで上記と同じ出
javascriptの非同期開発
### 非同期処理とシングルスレッド
#### 非同期とは
“`javascript
console.log(100)
setTimeout(function() {
console.log(200)
}, 1000)
console.log(300)
“`“`javascript
console.log(100)
alert(200)
console.log(300)
“`
#### 非同期処理が必要になるのはどのような場合ですか?
1. 待機が発生する場合
2. 待機中はalertのようにプログラムをブロックすることを避けたい時
なので、「待機の場合」に非同期処理が必要#### フロントエンドで非同期開発を使用するシナリオ
1. スケジューリングタスク： `setTimeout`, `setInverval`
2. Networkリクエスト: ajaxリクエスト、動的にのload
“`javascript
console.log(‘start’)
$.get(‘./products’,function(data) {
console.log(dat
PMTiles 消費における MapLibre GL JS v4 の破壊的変更への対応
## はじめに
今更ですが、MapLibre GL JS の v4.0.0 が2月にリリースされました。[変更点](https://github.com/maplibre/maplibre-gl-js/blob/main/CHANGELOG.md#400)の中には、タイルをロードする際に実行する処理を追加することができる `addProtocol` の破壊的変更が含まれています。
> Changes `addProtocol` to be promise-based without the usage of callbacks and cancelable
MapLibre GL JS において、`addProtocol` は [PMTiles](https://github.com/protomaps/PMTiles) の消費などにおいて、他のウェブ地図ライブラリには代替できない機能となっていると認識しています。
そのため、今回の破壊的変更が、これまでのコードにおいてどのように影響を及ぼすのか、簡単に確認していきます。
### 参考：過去の関連記事
* addProtoco
JavaScript: 接尾辞配列(Suffix Array)編
## 概要
これは文字列の接尾辞(開始位置が異なり終端位置が元の文字列と同じ部分文字列)の文字列中の開始位置を要素とする配列を、接尾辞に関して辞書順に並べ替えて得られる単純な配列です。まさに接尾辞木の配列版と言っても過言でしかありませんね。文字列検索等において猛威を振るう事が可能です。
例えばthatの接尾辞はthat, hat, at, tの4個で、これらを辞書順に並べた配列が接尾辞配列となるのです。
始点 接尾辞 0 that 1 hat 2 at 3 t
整列
始点 接尾辞 2 at 1 hat 3 t 0 that 厳密に言うと始点こそが接尾辞配列の正体です。上記の例で言えば[0,1,2,3]から並べ替えられた[2,1,3,0]です。
昇順に並んでいるので文字列の検索は二分探索を使ってウミウシ
【熱望】javascript の for 文で var i を宣言するのはやめて下さい
皆さんは javascript の for 文で
以下の書き方をしたことがありますか？“`js
for(var i = 0; i < array.length; i++) { } ``` この書き方でも for 文は正常に動作します。 しかしながらこの書き方は 以下の書き間違いが生じることがあります。 ```js for(var i = 0; i < array1.length; i++) { //長い処理 for(var i = 0; i < array2.length; i++) { } } ``` 長い処理の中で i を宣言したことを忘れて 再び i を宣言してしまい 期待した動作にならない例になります。 私も他の人が作成した web アプリで このバグを見かけたことがあります。 for の変数を宣言する場合 必ず let で宣言して下さい。 var でなければ正常に動作しないのは 構造的欠陥のハズです。 ```js for(let i = 0; i < array1.length; i++) { //長い処理 for(let i
querySelectorAllで取得した要素に対してmapとかを使う
## はじめに
`querySelectorAll`で取得した要素に対して、Array関数を利用したいとします。“`html.example.html
sample1target!sample3sample4
react開発においてよく見るnamed exportとdefault exportの違い
## 概要
reactのチュートリアルや、サンプルコードと実際の開発現場でreactのコードを触ってみて
1つ違いがありました。
何の違いかというと、
reactチュートリアルでは以下のような**default export**が使用され、
“`.jsx
export function App() {
return (テスト
);
}export default App;
“`実際の開発現場では以下のような**named export**と呼ばれるものが使用されているという違いがありました。
“`.jsx
export const App = () => {
return (テスト
);
};
“`何となくそういうものかとやっていたのですが
いざ、チュートリアルなどを触ってみるとどちらがいいのかわからなかったので今回少し調べてみました。## default exportについて
default exportは1つのファイルに1つだけexportできます。そのため、exportするものを強制的に1つに
初めてのWebアプリケーションを作ってデプロイした話(React / Express)
# 目次
[1. どんな人にオススメの記事??](#1-どんな人にオススメの記事)
[2. 自己紹介](#2-自己紹介)
[3. まえがき](#3-まえがき)
[4. 作ったサイトについて](#4-作ったサイトについて)
[5. 使った言語やライブラリなど](#5-使った言語やライブラリなど)
[6. どうやって勉強したの?](#6-どうやって勉強したの)
[7. 作ったアプリの反省](#7-作ったアプリの反省)
[8. 今回得たこと](#8-今回得たこと)
[9. 今後の展望](#9-今後の展望)
[10. 終わりに](#10-終わりに)# 1. どんな人にオススメの記事??
この記事の読者対象は次のような方にオススメです
– Webアプリケーションを作ってみたいけど**何から学べばよいか分からない**– ある程度HTMLやCSSは触れるけど、**バックエンドの知識は全くない**
# 2. 自己紹介
– 電気通信大学の学部4年生で情報系の専門です
– プログラミング歴については大学に入ってから始めたので3年ほどになります
– C++で競技プログラミングをしていて現在
私も JavaScript でキューを実装してみた
# これは何？
https://qiita.com/mikecat_mixc/items/05491cf98392fb803f66
が面白かったので勝手に参加してみた。
# 書いたコード
こんなのを書いてみた。
“`javascript:javascript
class QueueNabe {
slotSize = 0xfeff;
constructor(){
this.headNode = this.tailNode = { prev:undefined, next:undefined, slot:Array(this.slotSize) }
}
head = 0;
tail = 0;
enqueue(x) {
if (this.slotSize === this.tail) {
this.tailNode.next = { prev:this.tailNode, next:undefined, slot:Array(this.slotSize) }
chartjs-plugin-datalabels メモ
仕事でグラフ使うよ
チャットGPTにいい感じに書いてもらったよ
これで明日のタスクできるよ
ありがと
“`js
import { Bar, Pie } from ‘react-chartjs-2’;
import { Chart, registerables } from “chart.js”
import ChartDataLabels from ‘chartjs-plugin-datalabels’;
Chart.register(…registerables)const data = {
labels: [‘Red’, ‘Blue’, ‘Yellow’, ‘Green’, ‘Purple’, ‘Orange’, ‘Black’, ‘White’, ‘Gray’, ‘Brown’, ‘Pink’],
datasets: [
{
label: ‘# of Votes’,
data: [12, 19, 5, 5, 2, 3, 8, 7, 4, 3, 6], // 値が0以外の項目を含むデータセット
backgrou
HTA（HTML Application）をPreactとTypeScriptで開発する
HTAはHTML+CSS+VBScript/JScriptでGUIアプリケーションを構築するレガシースクリプト技術です。少なくとも執筆時点ではWindows 11にも標準で搭載されています。これを、いまをときめく技術で書けたらきっと愉快です。実用性はありません。
## HTAについて
https://learn.microsoft.com/en-us/previous-versions/ms536496(v=vs.85)
だいたいInternet Explorerにいろいろ生えたElectron風のものと考えてよいでしょう。基本的な中身はIE対応のWebページと同様です。
``の有無でフォントのレンダリングが変わりました。`title`は`hta:application`より前に記述しないとウィンドウタイトルに反映されません。`x-ua-compatible`によってIEのバージョンを指定できますが、`IE=10`以降では`HTA:APPLICATION`オブジェクトの機能が事実上利用できません。`IE=9`で実行できるようにトランス
同期か非同期かを確認する方法
# 結論
ブラウザを２つ立ち上げて、ブラウザAで入力したもの(例えば「いいねボタン」とか)が、ブラウザBで反映されていれば非同期ができている。
(もちろんリロードしちゃダメ)**以上！！！！！**
IP住所検索サービス作ってみた
## ■初めに
関西のとある企業でエンジニアをしている物です!普段はバックエンド領域の構築や運用を行っています。
フロントエンド領域のエンジニアをみて華があって良いなと思う事があります…..そこで今回は裏方の私がChatGPTの力を借りてwebアプリを作成したお話となります。
今回はサービス解説となります、技術解説は次回の記事に作成させて頂きます。
[IPアドレス住所検索サイト](https://ip.r1999.com/)
## ■IP住所検索サービス
https://ip.r1999.com/
今回作成したwebサービスは「IP住所検索サービス」となります。
IPアドレスやドメインから所属する住所情報を取得し表示するサイトとなります。フォームに入力したIPデータをJavaScriptのFetchAP
恐怖！ var の動きが意味不明すぎる！
まずはこちらをご覧ください。
“`js
var num = 1;
console.log(num); // -> 1if(num === 1) {
var num = 1234;
console.log(num); // -> 1234
}console.log(num); // -> 1234
“`＿人人人人＿
＞ 1234 ＜
￣Y^Y^Y^Y￣## なぜこうなるのか
### 原因1: `var` にはブロックスコープがない
> var 文は関数スコープまたはグローバルスコープの変数を宣言し、任意でそれをある値に初期化します。
> [MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/var)ブロックスコープ（if 文や for 文の波括弧の中のスコープ）がないということはつまり、冒頭のコードでは `var num = 1;` と `var num = 1234;` が同じスコープで宣言されているということ。これが前提になってきます。
#
