- 1. javascriptでclickしたらclass追加
- 2. JavaScriptでfor文(foreach)内でのgetElementsByClassNameの使用法
- 3. node.jsでAbemaをダウンロードする
- 4. 【JavaScript】JavaScript、その前に〜ECMAScriptとは?
- 5. obnizでドライブしたい!FPS視点ラジコンを作ろう[obniz編]
- 6. 【Nuxt.js】カスタムディレクティブ基礎編:とりあえず使ってみよう!
- 7. 簡単なカウントアプリを作ってみる
- 8. verとletの違いは2つある
- 9. Firebase+React+Reduxで多機能チャットを実装しよう【リアルタイムチャット~React編~】
- 10. ブラウザが非表示になった時にマイク入力を解放する
- 11. CodePen + Three.js でルービックキューブ(モドキ)つくってみた
- 12. Google スプレッドシートで送金可能なNEMアドレス帳を作る方法
- 13. 【2020年1月】令和だし本格的にVSCodeのRemote Containerで、爆速の”開発コンテナ”始めよう
- 14. Javascriptで階層を持った名前空間を定義する関数
- 15. Svelete module 挙動 メモ
- 16. JavaScript:クイックソートを末尾再帰にしてみる
- 17. pickadate.jsを使ってフォームにカレンダーを表示させる
- 18. React/Next.jsアプリケーションを作成し、AWS EC2を使って本番環境にデプロイするまで
- 19. [連載]スーパーマリオ的なゲームをjavascriptで作ってみる 初級編 〜2章〜 簡単なページ作ってみる
- 20. 連絡先の電話番号やメールアドレスを並び替える(Google Apps Scriptで)
javascriptでclickしたらclass追加
# やりたいこと
* clickしたらevent発火
* classを追加してcssを変更# コード
“`javascript
“`# 解説
DocumentはオブジェクトでgetElementByIdがメソッドになる。getElementByIdでdocument内にある指定したidと一致したものをとってくる。そのとってきたidに対してaddEventListenerメソッドを使っていてclickで発火するようにしている。
Document
https://developer.mozilla.org/ja/docs/Web/API/D
JavaScriptでfor文(foreach)内でのgetElementsByClassNameの使用法
##はじめに
趣味で作っているツイッタークローンにおいて、ツイート一覧にマスオーバーさせると背景色が変化するjsの処理を書きたかった。##JSをあてるPHPファイル
3行目のtweetcardが対象のclass名です。
注)実際は生のphpファイルではなくテンプレートエンジンのbladeを使用しています。“`home.php
@if ($posts)
@foreach($posts as $post){{ $post->name }}
{{ $post->created_at }}
{{ $post->content }}“`
##間違った書きかた
“`samle.js
const tweetcard = document.getElementsByClas
node.jsでAbemaをダウンロードする
### [これを見よ](https://ysok2135.hateblo.jp/entry/2020/01/04/022105)
【JavaScript】JavaScript、その前に〜ECMAScriptとは?
# ECMAScriptとは?
読み方は“エクマスクリプト“です。## 誕生の理由
まず、JavaScriptは“旧Netscape Communications社(1998年、AOLにより買収)“が開発したプログラミング言語です。自社ブラウザである“Netscape Navigator“における使用が想定されていました。その手軽さから急速に普及していきましたが、登場初期は各ブラウザベンダーによる独自拡張が行われ、ブラウザ間の互換性が極めて低い状態でした。(これは“ブラウザ戦争“と呼ばれています。ちなみに、Microsoft社による拡張は“JScript“と呼ばれています。)
そのため、旧Netscape Communications社は外部団体に標準仕様の策定を依頼しました。その団体が“Ecma International“です。
そしてEcma Internationalにより標準化された仕様が“ECMAScript“です。
## バージョンアップ
引用はこちらの記事からです。仕様策定の流れなども分かりやすく説明されています。
>[ECMA
obnizでドライブしたい!FPS視点ラジコンを作ろう[obniz編]
## はじめに
LEGOとobnizでラジコンを作ったので、その作り方を紹介します。
今回は動力部分『obnizでのモーター制御とコントローラー』の作り方を紹介します。## 参考
– [obniz ゆるメカトロ車 LEGO構成をレシピを整えたメモ](https://www.1ft-seabass.jp/memo/2019/12/17/obniz-car-recipe/)
– obnizでのモーター制御のスクリプトや車体の作り方について参考にさせて頂きました## 冬空の下でドライブしてみた
タイトルに偽り無し。ちゃんとドライブしました。ラジコンにはカメラを付けているので、FPS視点(ラジコン視点)でも楽しめます。いやぁ~ラジコンたのしい
【Nuxt.js】カスタムディレクティブ基礎編:とりあえず使ってみよう!# 前置き
Vue.jsのカスタムディレクティブをNuxt.jsで!
ローカルverとグローバルverで、
どちらでも使いやすく簡単な例で紹介。
今回は背景色を変えるだけです。…とはいえfilterはよく使われますが
実際こちらはなかなか見かけませんね。
カスタムディレクティブの良い使い方があれば
教えていただけると嬉しいです…?**※併用する場合**
同じディレクティブ名にしてしまうと
ローカルに記載された方が優先されます。
名前は分けましょう!# ローカルver
directivesで命名した物を
v-{{ name }}で記載するだけ!
今回はdiv全体に背景色をつけるため
divにv-bgを指定しております。“`inde
簡単なカウントアプリを作ってみる
# 簡単なカウントアプリを作ってみる。
株式会社パーソンリンクにエンジニア未経験入社の高島です。入社して2ヶ月が経ちました。
今後は、保守・運用業務がメインになっていくのですが、業務以外でインプットできる分野を増やそうと思いました。社内ではvue.jsを扱えるエンジニアが多数在籍しています。今後、自分も開発業務に参画した際に幅広く対応できるように、まずはjavascriptにて簡単なカウントアプリを作ってみました。
アップボタンを押すと数字が1ずつ増え、ダウンボタンを押すと数字が1つずつ減っていくという簡単なものです。“`html
Document
verとletの違いは2つある
##はじめに
「javascriptの変数宣言は”let”で行え!」と言われているので素直に従っていましたが、
改めてなぜ”var”を使わない方が良いかをまとめてみます。###(1)letは変数の重複を許可しない
#####varで同名の変数を宣言してみます。
“`var.js
var name = “hoge”
var name = “fuga”console.log(name);
“`
######\>>fuga上書きされて二つ目の宣言の”fuga”が出力されました。
#####同じくletでも同名の変数を宣言してみます。
“`let.js
var name = “hoge”
var name = “fuga”console.log(name);
“`
#####\>>Uncaught SyntaxError: Identifier ‘name’ has already been declared既に宣言済みだよとのエラーメッセージが出力されました。
#####※letは変数の再宣言ができない
Firebase+React+Reduxで多機能チャットを実装しよう【リアルタイムチャット~React編~】
# Firebase&React&Reduxで多機能チャットを実装しよう【リアルタイムチャット編】
今回から本格的にReactとReduxを触っていきます。
一気に難易度が上がるので覚悟してください!笑**ガイド**
– [環境準備編](https://qiita.com/torahack/items/a6a5ca9d92cb805b5de5)
– [リアルタイムチャット~React編~](https://qiita.com/torahack/items/56cd0b3f0c9cefeca61b) ←イマココ
– リアルタイムチャット~Redux編~
– ログイン機能
– チャットルーム選択機能
– チャットルーム設定機能
– [デモページ](https://react-chat-28bf1.firebaseapp.com/)
– [github](https://github.com/deatiger/react-chat)## ディレクトリ構成
前回までのおさらい。
ディレクトリ構成は現在以下の通りです。要らないファイルを削除して、ディレクトリを追加作成します。
ブラウザが非表示になった時にマイク入力を解放する
# 困っている事
webAudioAPIを利用してマイク入力データを利用している中で– 別タブに切り替えた時に、タブの録音中マークが消えない(PC)
– ホームボタンを押した時に画面上に赤い帯が残る(iOS)タブはこういう丸いやつ↓
赤い帯はこういうやつ↓
![S__107831356.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175814/8547f4ee-cba3-b464-f12c-5144e5cbb221.jpeg)# 環境
## PC
– MacBook Pro 2016
– macOS Mojave 10.14.6
– Chrome
CodePen + Three.js でルービックキューブ(モドキ)つくってみた
3D描画するだけならThree.jsでかなり簡単にできる。(参考サイト 1. 参照)
# つくってみた
今回、ルービックキューブっぽくするために箱を複数(8個)使っている。
箱を回転させるのは`rotation.x`,`y`,`z`を指定するだけだが、箱の位置も回転させないといけないため、`cos`,`sin`で自力で[回転](https://ja.wikipedia.org/wiki/回転行列)させている。
操作できるUIは今回実装してないので、見るだけのルービックキューブです。Google スプレッドシートで送金可能なNEMアドレス帳を作る方法
Google スプレッドシートを使った送金可能なアドレス帳をGAS(Google Apps Script) & NEM Catapultで実現しましたのでその方法を紹介します。
GASとNEMの連携については先日投稿した、[Google Apps Script(GAS)でNEM Catapultを使う](https://qiita.com/nem_takanobu/items/dc8089b18da9e0891d3e)を参考にしてください。今回はさらに一歩進展させて、GoogleスプレッドシートとNEM Catapultの連携を行います。
なお、今回もWEBIRD PROGRAMMING.TECHさんの記事、[【GAS】WebアプリやAPIも作れちゃう!HtmlServiceについて、できることをまとめてみた。 ~ その③ スプレッドシートのUI ~](https://webird-programming.tech/archives/501)を参考にさせていただきました。
# 画面イメージ
今回作成したツールの画面イメージです。
【2020年1月】令和だし本格的にVSCodeのRemote Containerで、爆速の”開発コンテナ”始めよう
# VSCode の Remote Conainer で”開発環境+プロジェクト全部入りのコンテナ”から開発をスタートダッシュをキメませんかッ!?
開発でVS Code の Remote Conainer使っていますか?単に既存のコンテナに入るだけなら Remote SSH でも構いませんが、”ローカル開発環境の一部”として、いやむしろ**ローカルの開発環境=Remote Container**として、ビンビンにRemote Container使っていきましょう。令和だし!~~(すでに2年だけどね・・・?)~~
特にMacを使っていると最初からPythonやらPHPやらRubyやらが入ってしまっているので**開発環境がある**のですが、これらは割とmacOSのエコシステムに組み込まれているので不要にパッケージの追加削除、できないのですよ。`brew`とか意外とあっさり壊れますしね・・・。特に**バージョンアップなんてもってのほか**です。全然、余裕でおかしくなります。
そんなわけでMacに入っているPythonやRubyでプログラミングをバリバリしていると・・・**ふと、後戻りできJavascriptで階層を持った名前空間を定義する関数
“`javascript
function namespace(ns) {
var names = ns.split(‘.’);
var parent = window;for (var i = 0, len = names.length; i < len; i++) { parent[names[i]] = parent[names[i]] || {}; parent = parent[names[i]]; console.info(parent); } return parent; } // 実行確認 var aaa = namespace('Hoge.Fuga'); aaa.Piyo = function () {}; var bbb = new aaa.Piyo; console.info(bbb instanceof Hoge.Fuga.Piyo); ```
Svelete module 挙動 メモ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32636/bcfddb43-d60d-ebde-3b53-983191e6319e.png)
“`App.svelte