- 1. PlayCanvas Editorで使われているUIのフレームワークがオープンソースになった
- 2. SeleniumによるWebスクレイピングで活躍するexecute_scriptメソッド
- 3. JavaScript で UUID（v4）してみただけ
- 4. JavaScript でジェネレータを使って FizzBuzz！
- 5. JavaScript var let const の違い
- 6. Node.jsのインストール方法（Windows）
- 7. 【JavaScript】LGTM数 + ストック数ランキング【毎日自動更新】
- 8. 【JavaScript】イベントハンドラ早見表
- 9. VanillaJSでsetter/getter
- 10. 【vue.js】v-forでindexを使って少しだけハマった
- 11. アグリゲートトランザクションを実行するための３つの方法
- 12. 【Javascript初歩】Dateオブジェクトを使って年月日表示ボタンを作成する
- 13. React学習計画
- 14. MDN web docs100本ノック~WEB開発のプロへの道~
- 15. Tyハロトレ32日目 10月1日
- 16. javascript, jqueryで学んだ事(自分用)
- 17. 【Codility Lesson3】FrogJmp
- 18. 【Codility Lesson2】Odd Occurrences In Array
- 19. 【Codility Lesson2】CyclicRotation
- 20. Codilityの勧め ~JavaScriptで解くアルゴリズム~
PlayCanvas Editorで使われているUIのフレームワークがオープンソースになった
PlayCanvas EditorのUIを構築しているフレームワークがオープンソースになりました。
コンポーネントの確認〜Reactで使用するところまでを紹介します。オープンソースとなったプロジェクトはGitHub上に公開されています。
https://github.com/playcanvas/pcui### 使用方法
##### 1. リポジトリを`clone`
“`bash
git clone git@github.com:playcanvas/pcui.git
cd pcui
“`##### 2. 依存するパッケージのインストール
“`bash
npm install
“`##### 3. `storybook`でコンポーネントの中身を確認
storybookで整理されているコンポーネントを確認します。“`bash
npm run storybook
“`### storybookのページへアクセス
storybookを実行すると、コンポーネントの一覧をウ
SeleniumによるWebスクレイピングで活躍するexecute_scriptメソッド
# はじめに
SeleniumでWebスクレイピングを行う際に活躍してくれるexecute_scriptメソッドについてまとめます。execute_scriptはJavaScriptで記述した動作をWebページに対して実行してくれるものです。# 目次
1. execute_scriptを使わない場合はfind_element
2. execute_script
3. メソッドにして、より使いやすく
4. まとめ#1. execute_scriptを使わない場合はfind_element、find_elements
SeleniumでWebスクレイピングを行う場合、通常はfind_element、find_elementsメソッドで要素を指定し、clickメソッドなどを実行することで、ページ処理を行います。
#####find_element、find_elementsを使った場合
“`ruby
# クリック動作(例：submit_btnというクラス、”送信”というvalueを持つinput要素)
@driver.find_element(:class,’submit_b
JavaScript で UUID（v4）してみただけ
# はじめに
– [JavaScript で UUID (Ver4) – Qiita](https://qiita.com/psn/items/d7ac5bdb5b5633bae165)
上記記事を見ていたらうずうずしてきたので。
# UUID とは
> UUID（Universally Unique Identifier）とは、ソフトウェア上でオブジェクトを一意に識別するための識別子である。
> [UUID – Wikipedia](https://ja.wikipedia.org/wiki/UUID)ということで、バッティングしない ID のことです。
（正確には、途方もない数生成しない限りバッティングする確率を考えなくてもよいような ID のこと）。# JavaScript での実装
上記記事では以下のようになっています。
“`js
function generateUuid() {
// https://github.com/GoogleChrome/chrome-platform-analytics/blob/master/src/interna
JavaScript でジェネレータを使って FizzBuzz！
# はじめに
JavaScript で FizzBuzz します。
ただ、普通にやっても面白くないのでジェネレータを使ってみたいと思います。– ジェネレータってなんだよ
– ES2015 で追加された JavaScript の比較的新しい機能です
– 何をジェネレートすんだよ
– 反復可能オブジェクトをジェネレートします
– 反復ってなんだよ
– `for-of`
– スプレッド構文(`…iterator`)
– 分割代入(`const [hoge, huga] = iterator;`)
– とかです。多分
– 配列じゃだめなの？
– 無限を扱えます
– 無限 FizzBuzz とか無限フィボナッチ数列とか無限素数とかいろいろできます# FizzBuzz!
“`js
/**
* @param {number} max
*/
const fizzbuzzGen = function* (max = Infinity) {
for (let i = 1; i <= max; i++) { if (i % (5 * 3) =
JavaScript var let const の違い
#はじめに
この記事はプログラミングをはじめたばかりの素人が、メモするのに利用しています。
内容には誤りがあるかもしれません。#var let const の違い
変数を宣言する際のvar let const の違いを簡単にまとめてみました。|変数の種類|読み方|有効範囲|値の変更|
|:—|:—|:—|:—:|
|let|レット|狭い(ブロックスコープ)|○|
|const|コンスト|狭い(ブロックスコープ)|×|
|var|バー|普通(関数スコープ)|○|オンラインスクールでは、varで習いましたが、letを標準的には使うようです。
#ブロックスコープとは
例えばletは{ }の中で宣言すると、有効範囲が{ }内に制限されます。
この有効範囲のことをブロックスコープといいます。例
“`JAVASCRIPT
let hello = ‘こんにちは’;if (true) {
console.log(hello); // Alet evening = ‘こんばんは’;
}console.log(evening); // B
“
Node.jsのインストール方法（Windows）
# はじめに
今回はNode.jsのバージョン管理ツールNodistを用いてのインストール方法を書いていきます！
後々@angular/cliを入れるのでNode.jsのバージョンを12.18.2で指定しています。
（Node.js公式サイトの現在の推奨版12.19.0だと@angular/cliのインストールに失敗したため）# 目次
1. Nodistのインストール
2. Nodistを用いてのNode.jsのインストール# 1.Nodistのインストール
* 下記サイトで「NodistSetup-v0.x.x.exe」をダウンロード[Nodistのインストールサイト](https://github.com/nullivex/nodist/releases)
* インストーラーを起動
(98P)
**LGTM数：47** **ストック数：51**
`JavaScript` `dom` `Vue.js`
[@beanbeenzou](http://
【JavaScript】イベントハンドラ早見表
自分が今まで使用したことがあるJavaScriptのイベントハンドラについて書きました。
他にもいろいろあるかと思いますが、「こういうときにも使えるよー」っていうのがありましたら是非ご指摘お願いします。| イベント名 | 条件 | 用途の例 |
| ————————- | —————————————————- | ———————————————————————————————- |
| onclick | クリックされた時
VanillaJSでsetter/getter
#こうする
“`javascript
function Clazz() {
let hoge = “hogehoge”;this.setHoge = function(param) {
hoge = param;
};
this.getHoge = function() {
return hoge;
};
}const a = new Clazz();
const b = new Clazz();a.setHoge(“ほげほげ”)
console.log(a.getHoge()); // ほげほげ
console.log(b.getHoge()); // hogehoge
console.log(a.hoge); // undefined
“`
【vue.js】v-forでindexを使って少しだけハマった
vueに慣れている人であれば当たり前の話だと思いますが、
結構ググっているとkeyにindexを使っての解説を目にする事があったので、
何番煎じか分かりませんが、自身のアウトプットの為に備忘録していきます。※vue.jsをこれから学んで行く人向けです。
## v-forディレクティブとは
vueで配列に基づいて、リストレンダリングする為に使用するディレクティブです。
所謂for文としての使い方をします。` 単数形 in 複数形` のような構文を用います。
複数形の部分がソースの配列で、単数形の部分は配列要素が反復されているエイリアスなので、変数のように設定が可能になっています。別に単数形でなくても動きます。“`なんちゃら.vue
- {{ item }}
“`
参考：[リストレンダリング](https://jp.vuejs.org/v2/guide/list.html)## v-forは2つ目の引数にindexを取れる
何番目のデ
アグリゲートトランザクションを実行するための３つの方法
今回はSymbol from NEM,mijin Catapultの真骨頂、アグリゲートトランザクションについて説明します。
# アグリゲートトランザクションとは
#### 次世代NEMブロックチェーン、Symbolに迫る(4) ~機能編 その2~
[アグリゲートトランザクションとは？](https://note.com/daokasweep/n/n74b515e6b1e7?magazine_key=m87031d8f8938#6xuwZ)> アグリゲートトランザクションのアグリゲートは英語で集めるという意味があります。その名前の通り、このトランザクションは複数のトランザクションを1つ集めて処理するトランザクションとなります。
### アグリゲートトランザクションの実行方法
– コンプリート
– コンプリート・オフライン
– ボンデッド上記3種類の実行方法について以下のストーリーで説明していきます。
> Aliceはアポスティーユした申請データのハッシュ値をサービス提供者であるBobに提出したい。しかし、Aliceは手数料を所有していない。そのためBobが手数料を肩
【Javascript初歩】Dateオブジェクトを使って年月日表示ボタンを作成する
ブラウザ上に、現在の年月日を表示する方法を備忘として残しておきます。
###Dateオブジェクトとは
Dateオブジェクトとは、日付や時間などを扱うメソッドがすでに定義されているもので、時間の計算や日付の換算等を簡単に行うことができる。####一例
・現在の日付、時刻のオブジェクトを作成“`js
let now = new Date();
“`
・西暦年を取得“`js
let year = now.getFullYear();
“`
・月を取得（※0～11の数字で取得するため、+1すること！）“`js
let month = now.getMonth() + 1;
“`
・日付を取得“`js
let day = now.getDate();
“`###活用例 －クリックすると今日の年月日が表示されるボタンの作成－
“`html
年月日表示
React学習計画
前の記事([グッバイNuxt、ハローReact](https://qiita.com/kyohei_ai/items/eed34806022751867a3e))の続きです。
## この記事を読むと
– Reactをこれから学ぼうとする人の参考に
– プログラミングの学習計画を立てる際の参考に## 事前知識・経験
– JavaScript ES6 中級レベル(クロージャー等を駆使した関数プログラミングは自信がありません)
– Nuxt.jsによるSPA開発経験
– Gatsby.jsによるLP作成
– [The Great Gatsby Bootcamp](https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=&cad=rja&uact=8&ved=2ahUKEwivjfzs2J_rAhXWUt4KHTrXCCcQwqsBMAB6BAgKEAQ&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D8t0vNu2fCCM&usg=AOvVaw37n975v6rwo-
MDN web docs100本ノック~WEB開発のプロへの道~
## この記事を書いた理由
MDN web docsを普及させることで、プログラミングの学習環境は飛躍的に良くなると思うからです。
私はたまたまMDNに出会ってからプログラミングスキルが一気に開花したのですが、もっと早くその存在を知りたかったし、誰かに紹介して欲しかった。心の底から思います。MDNは世界で最高品質の教材なのではないかと。完全無料ですし。やる気とPC一台さえあればグングン力をつけることができます。
これを全部理解すると相当力つくので、おすすめします。
## [Web 入門](https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web)
まずはここから。WEB開発の体系的な知識が最短で習得できます。
HTML・CSS、そして JavaScriptの基本をしっかりと理解できるだけでなく、ファイルの扱い方やWEBサイトの公開方法まで丁寧に解説してくれているのが素晴らしい。「プログラミング以前の知識じゃん」と侮るなかれ、実は多くの初学者ここでつまずきがちです。基本ですが重要ですし、ここ
Tyハロトレ32日目 10月1日
#配色
###カラーホイール
赤と緑を使ったロゴはなんでしょう？
A) セブン、モスバーガー
#JavaScript
###加算代入演算子 (+=)
Operator: x += y
Meaning: x = x + y#CSS
###position: absolute;
###position: relative;
##改めて整理
最初に感じたことは、初心者にとってjavascript、jqueryの見分けがつかない事。
ググっても二つが混同して記載されている事が多く混乱していた。*二つの書き方の違い(意味的には同じ)
“`
:javascript// id名から要素取得
document.getElementById(‘test’);// class名から要素取得
document.getElementsByClassName(‘test’);// タグ名から要素取得
document.getElementsByTagName(‘div’);“`
“`
:jquery// id名から要素取得
$(“#sample”)// class名から要素取得
$(“.sample”)// タグ名から要素取得
$(“div”)“`
＊注意点
“`
・「getElement」と「getElements」を間違えないように
idから取得の場合単数系、classやtagで所得の場合複数系・クラス名やタグで要素を取得した場合、要素が配列になっている事があるの
【Codility Lesson3】FrogJmp
[Codilityの勧め ~JavaScriptで解くアルゴリズム~](https://qiita.com/kyohei_ai/items/f4601cc6b55463565392)の実践編です。
## 問題
A small frog wants to get to the other side of the road. The frog is currently located at position X and wants to get to a position greater than or equal to Y. The small frog always jumps a fixed distance, D.
Count the minimal number of jumps that the small frog must perform to reach its target.
Write a function:
function solution(X, Y, D);
that, given three integers X, Y and D, returns
【Codility Lesson2】Odd Occurrences In Array
[Codilityの勧め ~JavaScriptで解くアルゴリズム~](https://qiita.com/kyohei_ai/items/f4601cc6b55463565392)の実践編です。
## 問題
A non-empty array A consisting of N integers is given. The array contains an odd number of elements, and each element of the array can be paired with another element that has the same value, except for one element that is left unpaired.
For example, in array A such that:
A[0] = 9 A[1] = 3 A[2] = 9
A[3] = 3 A[4] = 9 A[5] = 7
A[6] = 9
the elements at indexes 0 and 2 have value 9,
【Codility Lesson2】CyclicRotation
[Codilityの勧め ~JavaScriptで解くアルゴリズム~](https://qiita.com/kyohei_ai/items/f4601cc6b55463565392)の実践編です。
## 問題
An array A consisting of N integers is given. Rotation of the array means that each element is shifted right by one index, and the last element of the array is moved to the first place. For example, the rotation of array A = [3, 8, 9, 7, 6] is [6, 3, 8, 9, 7] (elements are shifted right by one index and 6 is moved to the first place).
The goal is to rotate array A K times; that is, each el
Codilityの勧め ~JavaScriptで解くアルゴリズム~
JavaScriptでコーディング試験やアルゴリズムテストを解くなら[Codility for programmers](
https://app.codility.com/programmers/)が一番良いんじゃないかなと思います。
これから一日一題ベースで解いていこうと思います。## Codility for Programmersとは
世界最大級のコーディング試験のプラットフォームです。
特にグローバル企業で導入されており、AmazonやIntel等の錚々たる企業に採用実績があります。
国内においてはメルカリやスマートニュース等に採用されています。どちらもグローバル展開を強く意識していて、所属エンジニアの技術力が高い会社ですね。### 操作環境
操作方法のチュートリアルが充実していて、わかりやすいUIだなと思います。
##
