- 1. JavaScript 基礎文法 3
- 2. A-Frame: aframe-particle-system-componentの調査
- 3. JavaScriptに苦手意識のない世界を実現したい!!
- 4. package.jsonで環境変数(NODE_ENV)を設定するとき、WindowsでもLinux,Macでも動くようにする
- 5. Fn projectを使ってJavaScriptで書いたfunctionをNodeで動かしてみる
- 6. 円周上・円周内・球面上・球面内の一様乱数
- 7. webサービスを運営してみた
- 8. 【JavaScript】連想配列を使うくらいならMapやSetを使う
- 9. JavaScript ベスト・オブ・ザ・イヤー 2019
- 10. web3.jsとは
- 11. Googleスプレッドシートを利用した、たぶん史上最も簡単にデータを更新できるマップツール
- 12. contentEdiableな要素でのUndoの注意点
- 13. JavaScript勉強の記録その24:クラスの作成、インスタンスメソッド、継承
- 14. JavaScript勉強の記録その23:例外処理
- 15. 43文字のJavaScriptで作る文字数計測器
- 16. GASでspreadsheetに画像つきリストを作る
- 17. React VR で手順通りにやったのにエラーになった。
- 18. React でタスク管理アプリを作ってみた
- 19. JavaScriptでモーダルウィンドウ実装の仕方
- 20. JavaScript 最大値の解説
JavaScript 基礎文法 3
#はじめに
[前回の続きです。](https://qiita.com/raigakun/items/23a0285ab18801498786)
JavaScript(以下、JS)を学んでいく上で、1つずつ整理していきます。
私はVScodeでコードを書き、ブラウザでHTMLファイルを開いております。
そして、検証（ブラウザ上で右クリック）のconsole項目に反映されているのか確認しております。
もうすでにご存知の方、省略の仕方等ご存知でしたら、ご教授願います。#オブジェクト
[JavaScript 基礎文法 2](https://qiita.com/raigakun/items/23a0285ab18801498786)で記事にしました「配列」は順番でデータを管理します。
オブジェクトは、データを名前と値をセットで管理します。
このセットをプロパティといいます。“`qiita.js
//使用する定義
let 変数 = { プロパティ名: 値 };//①オブジェクト作成し、出力まで実践してみます。
let obj = { name: “raiga” };
co
A-Frame: aframe-particle-system-componentの調査
前回A-Frameで利用できるパーティクルコンポーネントを[調査](https://qiita.com/matsukatsu/items/adec590eddad5510c196)したところ、もっとも利用されていそうなコンポーネントが[aframe-particle-system-component](https://www.npmjs.com/package/aframe-particle-system-component)だとわかりました。
パーティクルを使いこなせるようになる為、コンポーネントの各プロパティがどのような意味を持つのか、詳しく見ていこうと思います。同じシーン内に、同じプロパティを持つパーティクルを並べ、テキストで表示したプロパティのみ値を変化させた場合に、どのような違いがでるか比較してみます。
### preset
プ
JavaScriptに苦手意識のない世界を実現したい!!
スタートアップのビジョン風なタイトルはさておき、高機能なフレームワークが隆盛を誇る昨今、基礎固めが大事だと思うのです。
# いつ書いたのか
2020年1月頃です。# 対象読者
* JavaScriptを触ったことがあるが、言語仕様は曖昧にしている。
* JavaScriptになんとなく苦手意識がある。# 本稿でやること、やらないこと
* 言語仕様の特徴的なところ（私見）をまとめます。
* ベストプラクティスが変化してきたところをまとめます。
* 言語仕様を網羅はしません。# JavaScriptの今に追いつくまでの流れ
1. 歴史を知る。
* https://ja.wikipedia.org/wiki/ECMAScript
* Edition1から始まり、2019年6月時点で10が公開されている。
* Edition5までが旧時代、6以降が新時代みたいな雰囲気がある。
* EditionのことをECMAScript○とかES○のように呼称する。例えば、Edition5はECMAScript5。
* ECMAScript6（E
package.jsonで環境変数(NODE_ENV)を設定するとき、WindowsでもLinux,Macでも動くようにする
# 概要
**npm start**したいときpackage.jsonで環境変数(たとえばNODE_ENV)をセットしつつ起動したいとき[**cross-env**](https://www.npmjs.com/package/cross-env)をつかうと実行環境がWindowsなのかLinux、Macなのか、といったプラットフォームを意識しなくて良いようにする## 使用前→Linux用とWindows用で書き換える必要あり
スクリプトは以下のようになる
**Linux,Macなら**
“`json:package.json(使用前)
“scripts”: {
“start”:”NODE_ENV=test jest”
}
“`**Windowsなら**
“`json:package.json
“scripts”: {
“start”:”set NODE_ENV=test&&jest”
}
“`## 使用後→”**cross-env**”で解決
[**cross-env**](https://www.npmjs.com/package/cr
Fn projectを使ってJavaScriptで書いたfunctionをNodeで動かしてみる
# 概要
このエントリでは、OSSのFaaSサーバである「Fn Project」を使い、JavaScriptの関数をNodeで動かすパターンを扱います。
下図のようなJavaScriptによる足し算の関数をFnのサーバにデプロイして動かします。
## 想定読者
# 準備
Fn Projectを動かすまでのところは、別エントリ[「OCIのMicro InstanceでCentOSにFn Projectのサーバをインストールしてみる」](https://qiita.com/hrkt/items/e37bab448c8aa1b00117)を参照ください。
# Nodeでfunctionを動かす
作業の基本的な流れは、[Introduction to Fn with Node.js](https
円周上・円周内・球面上・球面内の一様乱数
円周上・円周内の一様乱数および球面上・球面内の一様乱数について記述します。簡略化のために円と球の半径は$1$としています。
# 円周上の一様乱数
半径$1$の円周上の点は次のように表すことができます。
“`math
\left\{
\begin{array}{ll}
x = cos\theta \\
y = sin\theta
\end{array}
\right. \\
0 \leqq \theta \leqq 2\pi
“`円周上に一様に分布させるには$[0, 1]$の一様乱数$u$を用いて$\theta$を次のように求めます。
“`math
\theta = 2\pi u
“`# 円周内の一様乱数
半径$1$の円周内の点は次のように表すことができます。
“`math
\left\{
\begin{array}{ll}
x = rcos\theta \\
y = rsin\theta
\end{array}
\right. \\
0 \leqq \theta \leqq 2\pi, 0 \leqq r \leqq 1
“`円周内に一様に分布させる
webサービスを運営してみた
#概要
アルバイトの出勤時間を無料で管理できるサービスを公開しました。
Qiitaではサービス開発に関する記事を書いていきます。
http://time-stamp.net/auth/signin#目標
個人開発で売上を出すことを経験してみたくてはじめました。
目標は１円でも売上を出すことです。#雑記
サービスは公開したばかりで赤ちゃんみたいな状態です。
google検索エンジンにも登録されていないので、検索エンジン登録とgoogleアナリティクス導入が直近の開発になる予定。
開発内容やPV数の推移など、できる限りの情報を公開していきたい。#自己PR
0からサービスを立ち上げることに興味があります。
人手をお探しの方いらっしゃいましたら是非ご連絡ください！
私はフリーランスのエンジニアで、主要技術はフロントエンド、バックエンド、java,php,javascript,Play,React などです。
もちろん上記以外の技術のお話でも大丈夫です！
【JavaScript】連想配列を使うくらいならMapやSetを使う
# 概要
– Vuforiaに触れる機会があって、久々にJSを弄り回していたら、かつて不便だった箇所が便利になっていたのでメモる
– サンプルは動作を見せる為に【jsfiddle】というサイトに書いたのでリンクを貼っておく## 不便だったやつ
– Key-Value型のデータを持つときに連想配列を使っていたが…
– 不純物入りオブジェクトを“`for (～ in ～)“`で展開しようとして数が合わなくて、Object.keys(連想配列)とかしないといけないとか
– 実は純粋な配列ではないらしくて“`for (～ of ～)“` 使えないとか
– lengthを取ったら、長さ0で衝撃を受けたとか
– データが重複をしない配列が欲しい時に、連想配列のKeyを駆使するか、ただの配列から重複を取り除く処理をしていた（重複データを持っていないとダメな場合は、素直にfilterとかで弾くしかないと思うけど…）## リファレンス
– Map
– https://developer.mozilla.org/ja/docs/Web/JavaScript/
JavaScript ベスト・オブ・ザ・イヤー 2019
GitHubで最もホットなライブラリをランキング表示してくれる[bestofjs.org](https://bestofjs.org/)というサイトがあります。
そしてここは毎年、[その一年で最もホットだったライブラリを発表](https://risingstars.js.org/)しています。選考基準は『その年増えたスターの数』であり、恣意的要素の入る余地はありません。
ちなみに2016年の総合ランキング1位はVue.js、2017年の総合ランキング1位はVue.js、2018年の総合ランキング1位はVue.jsです。以下は2019年のランキング、[2019 JavaScript Rising Stars](https://risingstars.js.org/2019/en/)の日本語訳です。
# JavaScript ライジングスター 2019
4回目のJavaScript ライジングスターにようこそ！
2019年にGitHubで最も注目を集めたプロジェクトを、数字で見てみましょう。
以下のチャートは、2019年の一年間にGitHubで増加したスターの数を比較
web3.jsとは
web3.jsは、HTTPまたはIPC接続を使用して、ローカルまたはリモートのEthereumブロックチェーンのnodeとやりとりできるようにするライブラリのこと。
インストールにはnpmコマンドを使用する。
`npm install web3`
## 参考情報
公式ドキュメント
https://web3js.readthedocs.io/en/v1.2.6/
Googleスプレッドシートを利用した、たぶん史上最も簡単にデータを更新できるマップツール
## 最も簡単にデータを更新する方法
Webシステムでデータを更新する方法としては、管理画面にログインして、リスト上にデータが並んでおり、「編集」ボタンをクリックすると、フォームが並んだ編集画面に遷移して、そこでデータを更新したあと、「更新」ボタンを押して完了、というのが定番であろう。
しかし、筆者が考える一般の方が最も簡単にデータを更新出来る方法、それはエクセル状のシートの更新だと考えている。
住所を持ったデータがあって、それらを Google マップ上にピンを置いて参照できるようにしたい。その上、それらのデータを随時編集したり、新しいデータを追加したい、という要件があって、まず浮かんだのは Google マイマップでした。しかし、Google マイマップの場合、Google スプレッドシートから簡単に Google マップにデータをインポートはできるのですが、スプレッドシートと Google マップは同期しているわけではなく、データの更新があるたびにインポートの作業をおこなわければならない。Google スプレッドシート上のデータを更新したら瞬時に Google マップの方の
contentEdiableな要素でのUndoの注意点
## モチベーション
忘備録です。
ブラウザやelectronで、`contentEdiable=true`な要素を使って文章編集をする場合、windows環境では、Undo/Redoに関するショートカットキーを入力すると、次のことが起こります。
– 文字入力時にpreventDefaultせず、デフォルトの動作でDOMに文字入力宇した場合のみ、ブラウザの持つデフォルトのUndo履歴に残る。これはショートカットキー(windowsなら`Ctrl+z`)でUndoできる。
– 文字入力時にpreventDefaultし、独自でDOM編集して文字入力した場合は、ブラウザデフォルトのUndo履歴に残らない。**ショートカットキーでUndoした場合にはスキップされる。**
– IME入力モードの場合は、原則preventDefaultできない。リッチテキストエディタを作っており、i一部で独自でDOM操作する必要があったので、Undo/Redoも自前で実装していました。そのため、半角入力に関してはブラウザ標準のUndo履歴が残っておらず、ブラウザが勝手にUndoすることはありませんでし
JavaScript勉強の記録その24:クラスの作成、インスタンスメソッド、継承
#クラスの作成および、インスタンスメソッドの定義・呼び出し
“`index.js
class SalesPerson {
constructor(skill){
this.skill = skill;
}introduce() {
console.log(`私は${this.skill}が得意です`);
}call() {
console.log(‘お世話になっております’);
}
}const okuno = new SalesPerson(‘javascript’);
okuno.introduce();
okuno.call();
//=>私はjavascriptが得意です
//=>お世話になっております
“`#クラスの継承
“`index.js
class Sales { //親クラスの宣言
constructor(skill){
this.skill = skill;
}introduce() {
console.log(`私は${this.skill}が得意です`);
JavaScript勉強の記録その23:例外処理
#JavaScriptの例外処理
PHPに似てるなと思いましたが、tryとcatchで例外処理ができます。
JavaScriptではあまり使わないかもですが。“`index.js
const name = “okuno”
try {
console.log(name.makeUpperCase());
} catch (e) {
console.log(‘さーせん、エラーでたのでやり直してください’);
}
//=>さーせん、エラーでたのでやり直してください
“`
43文字のJavaScriptで作る文字数計測器
43文字のJavaScriptで作る文字数計測器
実際の動作サンプルはこちら https://www.o–o.cf/
適当な文字を入力して
OKを押すだけで文字数を表示します。
このコードをメモ帳に貼り付けるだけです。“`html
“`以上。
GASでspreadsheetに画像つきリストを作る
#Python から Google spreadsheet に画像を挿入
##やりたいこと（完成物）
時空間データ解析をしている中で，解析結果を可視化するにあたって以下のような地図画像等からなるリストを作りました．（図は一部コピーライトの関係で隠しています）
画像数が多く1つずつポチポチするのは嫌なのでスクリプトで画像の挿入を行ないました．
やりかたと詰まったところをまとめておきます．
##基本的な画像の挿入
google spreadsheet では，方法は以下の2通りの方法で画像を挿入できる．
1．IMAGE関数で画像のリンクを参照．
2．「挿入」→「画像」→「セル内の画像」から直接画像を埋め込む．
このあたりについては，下のサイトなどを参照してください．
https://office
React VR で手順通りにやったのにエラーになった。
WindowsでNode.jsを入れてReact VRを試してみようと思いました。
https://qiita.com/am_/items/d96fd4baabf0813a6833
この記事を見ながら進めてましたが、エラーがでました。(2020 02 02 18:00付近)この通りにやると現在はエラーになります。
エラー文は下記の通り。Invalid regular expression: /(node_modules[\\\]react[\\\]dist[\\\].*|website\\node_modules\\.*|heapCapture\\bundle\.js|.*\\__tests__\\.*)$/: Unterminated character class
npm ERR! code ELIFECYCLE
npm ERR! errno 1
…….上記のような表示が出て進めなかったから、stackoverflow.comを見て解決したので一応シェアします。
https://st
React でタスク管理アプリを作ってみた
今度のバイトで React を使うので、学習しています:muscle:
練習として、タスク管理アプリを作ってみました。
スタイルは整えていませんが:sweat_smile:、完成イメージはこんな感じです。
# ToDoアプリの概要
`追加` `完了` `削除` の機能を実装しています。
`追加` で state の配列 `tasks` に `push` でタスクを追加します。
`完了` でそのタスクのプロパティ `completed` を `true` にします。
`削除` でそのタスクを配列から削除します。# HTML を記述する
“`html:index.html
“`#
JavaScriptでモーダルウィンドウ実装の仕方
#モーダルウィンドウをjQueryを使わず、JavaScriptのみで実装
覚えたものを備忘録を兼ねてまとめました。
今回実装するのは簡単に説明すると、『詳細をみる』ボタンをクリックすると、デフォルトでつけているhiddenクラスが外されてモーダルとマスクが出現し、『閉じる』ボタンまたは、周りのマスクをクリックすれば、hiddenクラスがついてモーダルが閉じる仕様となっています。
早速雛形のファイルを作っていきます。
##ソース
###HTML“`html:index.html
モーダル
JavaScript 最大値の解説
長いので、別ページに致しました。
###[JavaScript (ES6) 計算関数 (FizzBuzz問題) ](https://qiita.com/grca3/items/34b4b6681e24d92984d4)より勉強中の為、指導できるレベルでは決してありませんが、私の理解と致しましては以下です。
もっとうまく説明できる方がいらっしゃったら良いのですが。。。分かりにくくすみません。####④が重要です。 代入後に比較。####
ここを直ぐ理解できませんでしたが、処理の流れ追って行くと気が付けました。代入後に比較。>この最大値を考えた人、すごいな〜と感動しました。JSの面白さも増しました。
####(引数について[JavaScript ES6 ](https://qiita.com/grca3/items/b0bf5c523775bc6649e7))
##【 max関数】##“`js
const num1 = 1;
const num2 = 40;
const num3 = 60;let maxNum = (a,b,c) => {
let max
