- 1. 【JavaScript】ここがしんどかったよTauri開発【Rust】
- 2. 【JavaScript】配列の要素をランダムに表示する
- 3. Webpackの導入手順
- 4. GWTでwebアプリを開発すると長く使える
- 5. Markdownとは
- 6. 【JavaScript】fetch APIとは
- 7. 【JavaScript】暗黙的な型変換とは
- 8. 【JavaScript】条件演算子（三項演算子）とは
- 9. 【JavaScript】データ型とリテラル
- 10. .split()で分割した文字列を効率よく変数に代入する【JavaScript】
- 11. 【JavaScript】camelCaseをsnake_caseに変換する方法
- 12. booksmileの自動tab
- 13. 【JavaScript】ブログ用ページネーション実装
- 14. JavaScriptの配列操作メソッドまとめ
- 15. 画像の減色・誤差拡散・タイリング処理
- 16. 初心者がJanai Coffeeの仕組みを解明してみた
- 17. JavaScriptでダイクストラ法
- 18. 【JavaScript】特定日時までのカウントダウンタイマーの作り方
- 19. 【JavaScript】コールバック関数とは
- 20. 【jQuery】OR演算子とは
【JavaScript】ここがしんどかったよTauri開発【Rust】
2024年2月2日にTauri 2.0がβ版となりました。昨年から個人的にいくつかTauriの1系でデスクトップアプリケーションを開発してきたのですが、ここが辛かった！というのを列挙してみました。
因みに公開しているのは以下となります。
– [Iron Beads Editor(Mac OS版)](https://github.com/bu-kurokky/IBE)
– [String Scouter(Mac OS版)(Windows版)](https://black-tree.net/stringscouter/)尚、Iron Beads Editor(以下IBE)に関しては元々Vanilla.jsでweb側を作っていて、それの機能追加版となります。
## なぜTauriを選択したのか？
まずTauriを選択する前に以下のプラットフォームを検討しました。
|Platform|所感とか|
| — | — |
| [Electron](https://www.electronjs.org/) | The 王道！Chromiumを同時にインストールさせる、ノウハウ沢山
【JavaScript】配列の要素をランダムに表示する
## はじめに
[こちらの記事](https://qiita.com/Yuzaburo/items/d5fb2ed8ef0f9769df07)で紹介した野球クイズアプリ開発の続編です。現状だと問題が順番に表示されているのですが、これをランダムに表示されるようにしたいと思います。
## 修正したい点
* 問題を順番ではなく、ランダムに表示したい“`javascript: quizController.js
import quizData from “../data/quizdata.js”;let currentQuestionIndex = 0;
let score = 0;function displayQuestion() {
const question = document.getElementById(‘question’);
const scoreDisplay = document.getElementById(‘score’);// 現在の質問と選択肢を表示
question.textContent =
Webpackの導入手順
Webpackの導入は以下の手順で行う
2. npmを初期化して`package.json`ファイルを作成
“`bash
npm init -y
“`3. WebpackとWebpack CLIをインストール
“`bash
npm install –save-dev webpack webpack-cli
“`4. `webpack.config.js`設定ファイルをプロジェクトのルートに作成し、設定を記述。ここではバンドルするindex.jsをentryに記述、バンドルされたファイル名をbundle.jsとしてoutputに書く。
“`javascript
const path = require(‘path’);module.exports = {
entry: ‘./src/index.js’, // エントリーポイント
output: {
filename: ‘bundle.js’, // 出力ファイル名
path: path.resolve(_
GWTでwebアプリを開発すると長く使える
# 実はワイGWTを2007年ごろからずっと使っている
おいおい、簡便してくれよ、いつの話だよ・・
いいかい学生さん、いつでも・・とんかつを・・とんかつを食える・・
いいや、ずっと昔からでも、互換性が担保されているんだよ# GWTは最初からSPA(Single Page Application)
webアプリが面倒な、原因の一つが、ページ遷移の制御
だから、MVCフレームワークとかいう、くそわかりづらい物が生まれた# フロントとバックは同じJava言語だけで書ける
あのさ、フロントはJavaScriptにして、バックはPHPとかそんな分ける必要なんてない# フロントとバックの通信はJavaだけでできる
jsonとかXMLとかそんなものは覚える必要がない# 結論
だから、GWTを使ってwebアプリを開発すると、長く使えます
Markdownとは
# Markdownとは
Markdownは、軽量マークアップ言語の一種で、プレーンテキストを記述する際に使用され、HTMLへの変換が容易です。Markdownを使用すると、シンプルな記法で見出し、リスト、強調、リンクなどの要素を表現することができます。JavaScriptでMarkdownを扱う場合、通常はMarkdownパーサーやライブラリを使用します。これらのライブラリは、Markdown形式のテキストをHTMLに変換したり、Markdownを表示するためのビューやコンポーネントを提供したりすることができます。
例えば、MarkedやShowdownといったライブラリがあります。これらのライブラリを使用すると、JavaScriptでMarkdownを解析してHTMLに変換したり、HTMLをMarkdownに変換したりすることができます。このようなライブラリを使用することで、ウェブアプリケーションやブログプラットフォームなどでMarkdown形式のコンテンツを扱うことができます。
【JavaScript】fetch APIとは
# fetch APIとは
Fetch APIは、Webブラウザーに組み込まれたJavaScriptの新しい機能で、ネットワークリクエストを発行し、サーバーからデータを取得するための方法を提供します。Fetch APIは、従来のXMLHttpRequest（XHR）を置き換えるものとして導入されました。Fetch APIを使用することで、より強力で柔軟なネットワークリクエストを行うことができます。# 特徴
Fetch APIの主な特徴は以下のとおりです：1\. **PromiseベースのAPI** : Fetch APIはPromiseベースのAPIです。これにより、非同期処理をより効果的に扱うことができます。データの取得が完了すると、Promiseが解決され、その結果を処理することができます。
2\. **シンプルなAPI** : Fetch APIはシンプルなAPIを提供し、リクエストを送信するためのfetch()関数を提供しています。この関数を使用して、リクエストを送信し、サーバーからのレスポンスを取得することができます。
3\. **HTTPリクエストとレスポンスの
【JavaScript】暗黙的な型変換とは
# 暗黙的な型変換とは
JavaScriptにおける暗黙的な型変換は、異なるデータ型の値を操作する際に、JavaScriptエンジンによって自動的に型変換が行われる現象です。この動作により、異なるデータ型の値を予想外の方法で組み合わせることができますが、間違った型変換の結果、バグや予期しない動作が発生する可能性もあります。#
以下は、暗黙的な型変換の例です：
“`js
let num = 10;
let str = “20”;console.log(num + str); // 出力: “1020”
“`
この例では、数値型の変数 `num` と文字列型の変数 `str` を `+` 演算子で組み合わせています。JavaScriptでは、文字列型と数値型の演算では、数値型の値が自動的に文字列に変換され、文字列の結合が行われます。そのため、`num` の値が文字列 `”10″` に変換され、`str` の値と結合されて文字列 `”1020″` が出力されます。暗黙的な型変換は、理解しにくいバグを引き起こす可能性があるため、注意して扱う必要があります。JavaScript
【JavaScript】条件演算子（三項演算子）とは
# 条件演算子（三項演算子）とは
条件演算子（三項演算子）とは、条件式が真である場合と偽である場合の2つの結果を返す演算子です。
三項演算子は以下のような形式を取ります：
“`
条件式 ? 真の場合の値 : 偽の場合の値
“`
この演算子は、条件式が真である場合は最初の値が返され、偽である場合は二番目の値が返されます。条件式は真または偽のどちらかの結果を返す式でなければなりません。# 使用方法
以下は、三項演算子の例です：
“`js
let age = 20;
let message = (age >= 18) ? “成人です” : “未成年です”;
console.log(message); // 出力: 成人です
“`
この例では、変数 `age` の値が18以上であるかどうかをチェックしています。条件式 `(age >= 18)` が真である場合は `”成人です”` が返され、偽である場合は `”未成年です”` が返されます。そして、変数 `message` に代入されます。三項演算子は、if-else文の簡潔な書き方として使われることがあります。同じ結果を得るた
【JavaScript】データ型とリテラル
JavaScriptにはさまざまなデータ型があります。主なデータ型とリテラルを以下に示します。
1\. **プリミティブ型**
– **文字列 (String)** : ダブルクォート `”` またはシングルクォート `’` で囲まれた文字列。
“`js
let message = “Hello, world!”;
“`
– **数値 (Number)** : 整数または浮動小数点数。
“`js
let number = 42;
let float = 3.14;
“`
– **真偽値 (Boolean)** : `true` または `false`。
“`js
let isTrue = true;
let isFalse = false;
“`
– **null** : “値が存在しない” または “不明” を表す特別な値。
“`js
let empty = null;
“`
– **undefined** : “値が割り当てられていない” を表す特別な値。
“`js
let notDefined;
“`
– **シンボル (Symbol)** : ECMASc
.split()で分割した文字列を効率よく変数に代入する【JavaScript】
文字列分割をする時のテクニックと呼ぶほどのものでもないちょっとした小ネタ。
# 効率の悪い書き方
文字列を区切って配列化した後、キー指定でそのまま使うのは不親切なのでわかりやすい変数に代入していた。
“`javascript
const fullName = ‘Minami-Amy-Tanaka’; // 分割対象の文字列// 区切り文字で分割して配列化
const nameArray = fullName.split(‘-‘);
// 配列をキー指定して変数に代入していく
const firstName = nameArray[0];
const middleName = nameArray[1];
const lastName = nameArray[2];console.log(firstName); // Minami
console.log(middleName); // Amy
console.log(lastName); // Tanaka
“`# 効率の良い書き方
`.split()`で分割して生成した配列の要素を`.map()`でそのまま返して
【JavaScript】camelCaseをsnake_caseに変換する方法
以下のライブラリをインストールします。
https://github.com/sindresorhus/decamelize-keys
“`shell
$ yarn add decamelize-keys
“`以下のように使用します。
“`js
import decamelizeKeys from ‘decamelize-keys’;// オブジェクトを変換
decamelizeKeys({fooBar: true});
//=> {foo_bar: true}// オブジェクトの配列を変換
decamelizeKeys([{fooBar: true}, {barFoo: false}]);
//=> [{foo_bar: true}, {bar_foo: false}]// separatorを変更する
decamelizeKeys({fooBar: true});
//=> {foo_bar: true}decamelizeKeys({fooBar: true}, {separator: ‘-‘});
//=> {‘foo-bar’: true}
`
booksmileの自動tab
備忘録
“`tab.js
document.addEventListener(‘input’, function(e) {
var input = e.target;
if (input.tagName === ‘INPUT’ && input.type === ‘text’ && input.value.length === 13) {
var formInputs = document.querySelectorAll(‘input[type=”text”]’);
var currentIndex = Array.prototype.indexOf.call(formInputs, input);
if (currentIndex < formInputs.length - 1) { formInputs[currentIndex + 1].focus(); // 次の入力フォームにフォーカスを移す } } }); ```
【JavaScript】ブログ用ページネーション実装
## 動作イメージ
– 「«」「»」で最初と最後のページに遷移
– 「‹」「›」で前、後のページに遷移
– 数字をクリックするとそのページに遷移
– 数字の表示は最大で3つまで
– ページが5ページ以下なら始めと最後のページに遷移する矢印は表示しない
– 始めのページと最後のページにいるときはボタンを押せないようにする
– 現在のページも押せないようにする
;console.log(fruit); // [“apple1”, “apple2”, “apple3”, “apple4”, “apple5”]
“`スプレッド構文を使用した書き方もある。
“`javascript
let fruit = [“apple1”, “apple2”, “apple3”];
fruit = […fruit, “apple4”, “apple5”];console.log(fruit); // [“apple1”, “apple2”, “apple3”, “apple4”, “apple5”]
“`### unshif
画像の減色・誤差拡散・タイリング処理
昔の貧弱な表示装置を思い出しつつ、24ビットカラーを様々な形式に変換するものを作ってみました。（画像ビュワー作成も目的の１つです）
スクリーン ショットは元画像を基本8色(黒、青、赤、緑、紫、水色、黄色、白)の誤差拡散法で処理したものです。
## はじめに
私は、HTML, CSS, JSの基本的なことを習っていた時に、[Janai CoffeeのHP](https://janaicoffee.tokyo/)に出会いました。当時の私は、簡単なWebサイトは作れるようになっていましたが、このような遊び心のあるWebサイトを作成するのに必要な知識がありませんでした。そこで、自分である程度MDNのサイトが読めるようになった頃、Janai CoffeeのHPの仕組みを解明しようと思いました。
※Janai Coffeeの仕掛けのネタバレを喰らいたくない方は、一度Janai CoffeeのHPを訪れて、謎解きをして仕掛けを理解してからもう一度この記事にお越しいただければ幸いです。
Janai CoffeeのHPには、Nuxt.jsが使用されているみたいなのですが、私はReactを使用する人間、かつ新しいフレームワークが登場した時にも使えるように、プレーンなJavaScriptだけを使用して書くことにしました。
## 使用した技術
Janai CoffeeのHPの仕掛けを実現するために使用した技術です。
### [Canva
JavaScriptでダイクストラ法
## 前置き
AtCoderでダイクストラ法の典型問題が出されたのを機に
jsでダイクストラ法を学習したので記事にする[D – Super Takahashi Bros. ](https://atcoder.jp/contests/abc340/tasks/abc340_d)
[5分で解説動画](https://www.youtube.com/watch?v=jMu_1zzJESA&t=112s)## 目次
・[前提知識](#前提知識)
・[ダイクストラ法について](#ダイクストラ法について)
・[ループ法](#ループ法)
・[優先度付きキュー](#優先度付きキュー)
・[解説動画を参考に関数化したもの 完成形](#解説動画を参考に関数化したもの完成形)
・[あとがき](#あとがき)# 前提知識
・幅優先探索
・優先度付きキュー(Priority Queue)# ダイクストラ法について
最短経路問題を解くためのアルゴリズム始点を決めたら
次の移動先候補の中で最もコストの低い点を決定
その点までの移動コストを確定させる
その点の次の移動可能先を候補に加えて最もコスト
【JavaScript】特定日時までのカウントダウンタイマーの作り方
## はじめに
みなさんは、特定日時までのカウントダウンタイマーを作ったことがありますか？イベントの特設ページなどでは、よく開催日までのカウントダウンタイマーをみます。
この記事では、そんなカウントダウンタイマーを作ったので紹介しようと思います。## 完成系
ゴールの日時を入力すると、ゴールの日時までカウントダウンが始まります。
ゴールに日時が過ぎると `残り0日0時間0分0秒` となります。この記事では、この特定日時までのカウントダウンタイマーの作り方を紹介します。
# コールバック関数とは
JavaScriptのコールバック関数は、他の関数の引数として渡され、ある特定のイベントや非同期操作が完了した後に実行される関数です。コールバック関数は、非同期性やイベント駆動のプログラミングで広く使用されます。主な目的は、非同期処理が完了した後に行いたい処理を指定することです。コールバック関数は、通常、以下のようなシナリオで使用されます。
1\. **非同期処理の完了後の処理** : ファイルの読み込み、HTTPリクエストの送信、データベースクエリの実行などの非同期操作が完了した後に、特定の処理を実行するためにコールバック関数が使用されます。
2\. **イベントハンドリング** : ユーザーのアクションに対応するためにイベントリスナーとしてコールバック関数を登録することがあります。たとえば、ボタンのクリックやマウスの移動などのイベントに対する処理を指定します。
3\. **エラーハンドリング** : 非同期処理中にエラーが発生した場合に、エラーを処理するためのコールバック関数を指定することがあります。
以下は、非同期処理の例として、コールバック
【jQuery】OR演算子とは
# OR演算子とは
OR演算子 `||` は、複数の条件式を組み合わせるために使用されます。この演算子は、左側の条件が真であれば、それ以上評価せずに真を返します。左側の条件が偽の場合は、右側の条件を評価し、その結果を返します。# 使用方法
jQueryと組み合わせてOR演算子を使用する例を示します。
“`js
if (jQuery(‘input[type=”text”]’).val() === ” || jQuery(‘input[type=”password”]’).val() === ”) {
alert(‘ユーザー名またはパスワードが入力されていません’);
}
“`
この例では、`input[type=”text”]`と`input[type=”password”]`のいずれかが空である場合にアラートが表示されます。OR演算子 `||` を使用して、複数の条件を組み合わせています。左側の条件が偽（つまり、入力フィールドが空でない）の場合、右側の条件が評価されることはありません。
