- 1. javascriptにおける計算式(文字列)の計算
- 2. consoleオブジェクトの種類
- 3. コンマ演算子の使い道の話
- 4. JavaScriptで動的に生成したタグの取得法
- 5. typed-query-selector について調べてみる
- 6. HTML: iframeを使った手品
- 7. 【小ネタ】Node.js v21.7.0 の新機能で環境変数用のファイル読みこみを軽く試す: process.loadEnvFile()
- 8. Mastering the Web: Unveiling the Power of JavaScript in Modern Development
- 9. 【JavaScript】オブジェクトの複数のキーを変更する方法
- 10. kuromoji.js + UniDic で形態素解析(辞書のビルド)
- 11. 画像投稿プレビュー機能
- 12. 【Vue.js3】Vue.jsの基本を理解したい
- 13. Parse Serverの使い方(クラウドコードの使い方)
- 14. Parse Server JavaScript SDKの使い方(JavaScriptでの位置情報オブジェクト利用)
- 15. 関数脳を身につけろ!「First-class Function (第一級関数) 」
- 16. Parse Server JavaScript SDKの使い方(JavaScriptでのロール操作)
- 17. ドラクエ11のダメージ計算式をjavaScriptで実装してみた【ゲームやツール制作の参考にどぞ】
- 18. Number.parseIntってアホな子なの?
- 19. Array#forEachのcallbackにasync関数をつかってはいけないよ
- 20. [Swift] WKWebViewからJavaScriptに値を送りたい
javascriptにおける計算式(文字列)の計算
## はじめに
会社のシステム開発において文字列で入力した計算式を計算するというものを作成しているのですが、少し思い通りいかなかった部分を備忘録がてら記載しております。
## 内容
例えば、以下の文字列で構成された計算式を計算しようと思うとエラーが発生してしまいます。
“`javascript
var string = “1–1-+1+-1”
var result = Function(‘return (‘+string+’);’)();
console.log(result);
“`
これは、途中で “`–“` を含んでいるため、これを置換すれば計算は通ります。
“`javascript
var string = “1–1-+1+-1”.replace(“–“,”+”);
var result = Function(‘return (‘+string+’);’)();
console.log(string);
console.log(result);
“`
“`
1+1-+1+-1
0
“`
また、()の隣に演算子がない場合にもエラーになります。
“`
consoleオブジェクトの種類
# はじめに
Javascriptを使ったことがある人はおなじみの`console`オブジェクトがありますね!
よく使うものとしては、↓があると思います。
“`javascript:index.js
console.log()
console.error()
“`実は、これ以外にもたくさん種類があり、使い方によっては開発効率があがることも…?
それらを紹介していきます!## console.assert(条件, 出力)
条件の部分にif文で使うような条件を入れることができ、条件が`false`の場合に出力をします。
“`javascript:example.js
const number = 0;
console.assert(number === 1, “numberは1ではありません。”);//出力:numberは1ではありません。
“`## console.clear()
単純に、これまでのコンソールをすべて綺麗さっぱり消してしまいます。## console.count()、 countReset()
コード内で何度実行したかカウントし、出力されま
コンマ演算子の使い道の話
# これは何?
[return の後ろにカンマ演算子で区切ったステートメントを記述し、最右のステートメントを返すことに有用性があるかどうか知りたいのです。](https://qiita.com/jaque/items/b99ed9dce78cc64fa9d2#comment-9de09aba4fdf4cd35faf) という記述を読み、そこに限定せずに コンマ演算子が役に立つパターンについて考えた。
とはいえ、 `return 式, 式;` が念頭にある。
# そもそも
そもそも、コンマ演算子は C 言語に由来する。
と言いたいところだけど、よく知らない。BCPL には無かったようなので、B言語か C言語なのかな。いずれにせよ、C言語がきっかけで広まったと思う。
# 可読性の低下に寄与
コンマは演算子以外の用途でも使われるのでコンマ演算子なのかそうじゃないのかを判断するのがめんどくさく、可読性の低下に寄与しやすい。
“`JavaScript:JavaScript
a=(b,c); // コンマ演算子
a=f(b,c); // 引数区切り
a=g((b,c)); //
JavaScriptで動的に生成したタグの取得法
## 結論
“`tsx
const data = document.getElementsByClassName(‘content’)[0];
“``getElementsByClassName`メソッドを利用して取得する。最後に0番目を指定しているのは、帰ってくる形が`HTMLCollection`の形で取得できる。この時に、0番目を指定すれば、要素を取得することができる。また、複数取得した時に`HTMLCollection`の形で帰ってきた場合は、配列に変換すればいいかと思います(もちろん場合による)。
“`tsx
const data = Array.from(document.getElementsByClassName(‘content’));
“`## ダメなパターン
動的に生成した要素は`querySelector`では取得することはできない。NodeListには静的の概念が存在する。
## 参考記事
[querySelectorAll() は動的に生成・削除された要素をキャッチしない – Qiita](https://qiita.com/n_h
typed-query-selector について調べてみる
# 1. 背景
querySelector(),querySelectorAll()で型がElement,NodeListOfになって毎回型チェックをするのが手間だなと感じていました。 “`ts
const a = document.querySelectorAll(‘div#app’);
“`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405182/9b28505b-d3df-51c4-bcc8-0b581a0c63d6.png)以下の記事でtyped-query-selectorというライブラリを知りました。
https://yurika1202.com/post/coding/queryselector-type/#typed-queryselector
# 2. typed-query-selector
https://github.com/g-plane/typed-query-selector
querySelector,query
HTML: iframeを使った手品
## onload属性内部ではiframe自身を指すobjectを省略可能
“`html
Mastering the Web: Unveiling the Power of JavaScript in Modern Development
In the intricate tapestry of modern web development, JavaScript stands as the weaver, threading together the interactive and dynamic elements that define the user experience. This article is a journey through the evolution, core concepts, and myriad applications of JavaScript, unraveling its significance and versatility.
The Evolution of JavaScript
JavaScript, born in the mid-’90s, emerged as a scripting language for web browsers. Its evolution mirrors the rapid growth of the internet. From humb
【JavaScript】オブジェクトの複数のキーを変更する方法
以下のように記述するとオブジェクトの複数のキーを指定したものに変更できます。
“`js
let sample = { name: “Sample”, country: “Japan”, gender: “male” }// 変更するプロパティ名のオブジェクトを作成
// 以下の場合には name を firstName に変更する
let newKeys = { name: “firstName” }function renameKeys(obj, newKeys) {
// オブジェクトのすべてのキーを取得し、それぞれに対して以下の処理を行う
const keyValues = Object.keys(obj).map(key => {
// 新しいキーを取得します。新しいキーが存在しない場合は元のキーを使用
const newKey = newKeys[key] || key
// 新しいキーと元の値を持つ新しいオブジェクトを作成
return { [newKey]: obj[key] }
})
// 新しいオブジェクトの
kuromoji.js + UniDic で形態素解析(辞書のビルド)
**[kuromoji.js](https://github.com/takuyaa/kuromoji.js)** (日本語形態素解析器 Kuromoji の JavaScript実装)と React でブラウザアプリを作っています。kuromoji.js はデフォルトでは [IPADic \(mecab-ipadic-20070801\)](https://github.com/taku910/mecab/tree/master/mecab-ipadic) を利用していますが、IPADic は現時点では更新が止まっており、辞書は新しいのがよい…… ということで、今回は **UniDic 最新版([unidic-cwj-202302](https://clrd.ninjal.ac.jp/unidic/back_number.html#unidic_cwj))を kuromoji.js 用にビルドして使ってみる**ことにしました。
結果として、ブラウザアプリで UniDic 最新版を使って形態素解析を動かすことができました。
ただし、UniDic は IPADic に比べてデータ量が
画像投稿プレビュー機能
# はじめに
プログラミング初心者です。
温かく見守ってください。
# 画像投稿プレビュー機能
画像投稿を以前実装しました。
これにプレビュー機能を実装したいと思います。
### 事前準備
まずはJavaScriptが読み込まれるようにします。
・appディレクトリ→JavaScript内にprevire.jsのファイルを作成します。
・config/importmap.rb
“`
pin “preview”, to: “preview.js”
“`
・app/javascript/application.js
“`
import “preview”
“`
#### コードを実際に書きます
“`js
const preview = () => {
// 新規投稿・編集ページのフォームを取得
const postForm = document.getElementById(‘new_post’);// プレビューを表示するためのスペースを取得
const previewList = document.getElementById(‘previews’);
【Vue.js3】Vue.jsの基本を理解したい
# :eyes: Vue.js
https://ja.vuejs.org/guide/introduction.html#what-is-vue
> Vue (発音は /vjuː/、view と同様) は、ユーザーインターフェースの構築のための JavaScript フレームワークです。標準的な HTML、CSS、JavaScript を土台とする、コンポーネントベースの宣言的なプログラミングモデルを提供します。シンプルなものから複雑なものまで、ユーザーインターフェースの開発を効率的に支えるフレームワークです。[^1]Vue.jsの基本をしっかり理解したいので、ざっくりしたところから、少し踏み込んだところまで、この記事にまとめます。
動機は、シンプルに、、業務で使っているからです!
# :chart_with_upwards_trend: JavaScriptフレームワークのトレンド
開始早々少しVue.js自体からは話がそれますが、JavaScriptフレームワークにはどんなものがあるのか調べてみました。
ざっと調べただけでたくさん出てきましたが、以下の12個をピックア
Parse Serverの使い方(クラウドコードの使い方)
[ニフクラ mobile backendは3月末で終了します](https://mbaas.nifcloud.com/info/2023/12/post-171.html)。
ニフクラ mobile backendからの移行先として、お勧めしているのが[Parse Server](https://parseplatform.org/)です。設計思想が近く、変更するコード量が少なく済むのではないかと思います。
NCMBではスクリプト機能と呼んでいたFaaS(Function as a Service)ですが、Parse ServerではCloud Codeと呼ばれています。JavaScriptで書かれた関数をサーバー側で実行できます。
今回はParse ServerのCloud Codeの使い方を解説します。
## 起動時の設定
Parse Serverはデフォルトでは `./cloud/main.js` にCloud Codeを配置します。このファイルを作成し、関数を書いていきます。これを変える場合には、起動時のオプションで指定してください。
環境変数の場合は `PARSE
Parse Server JavaScript SDKの使い方(JavaScriptでの位置情報オブジェクト利用)
[ニフクラ mobile backendは3月末で終了します](https://mbaas.nifcloud.com/info/2023/12/post-171.html)。
ニフクラ mobile backendからの移行先として、お勧めしているのが[Parse Server](https://parseplatform.org/)です。設計思想が近く、変更するコード量が少なく済むのではないかと思います。
Parse ServerではWebアプリやCordova(Monaca)アプリ向けにSDKを提供していますが、ドキュメントは英語のみとなっています。そこで、各機能の使い方を解説します。今回は地図アプリなどで使える位置情報オブジェクトの使い方を解説します。
## JavaScript SDKのインストール
JavaScript SDKはCDN版を使うか、npmでインストールする方法があります。CDNの場合は、下記のタグでインストールできます。
“`html