- 0.0.1. WebARのアニメーション
- 0.0.2. 【今日Javascriptを始めた人向け2】変数の更新
- 0.0.3. 【今日Javascriptを始めた人向け1】変数の宣言
- 0.0.4. LaravelからJavaScriptに配列変数を引き渡す方法
- 0.0.5. HerokuでのデプロイでPrecompiling assets failed.が出たときの対処法
- 0.0.6. evalのリスク
- 0.0.7. JSにおけるfor文とwhile文の違い
- 0.0.8. JavaScriptにおいて配列の取扱説明書
- 0.0.9. 通常関数とアロー関数の違い
- 0.0.10. REST API($.ajax)でRedmineのチケットを更新するときは、レスポンスのdataTypeをJSONにしてはならない
- 0.0.11. 課題管理表をNode.jsとSQLiteで作る②
- 1. 新規課題登録
- 1.0.1. JSのモジュール機能とbabelとwebpackと
- 1.0.2. React Native BLEペリフェラルをスキャンする
- 1.0.3. ReactNaviveアプリにダークモードを適用する
- 1.0.4. 優先度付きキュー(PriorityQueue)っぽいものをJSで実装する
- 1.0.5. TypeScriptで学ぶデザインパターン〜Strategy編〜
- 1.0.6. aws-sdk-mockを使ってもS3がモックに差し替わらずに困りました
- 1.0.7. [CSS/JS]クラスの制御だけで要素の表示/非表示をアニメーションさせたい。でも非表示の時はクリック不可でトルツメもしたくないワガママなアナタへ
- 1.0.8. 【Nuxt.js】ESLintの設定とVSCodeで保存時に自動整形する方法
- 1.0.9. Turbolinksについて
WebARのアニメーション
## やること
ARで立方体のオブジェクトを表示して、
その立方体オブジェクトをクリック(orタッチ)すると回転するThree.js+ARでクリックイベント/タッチイベント使えた。Tween.jsも一応使えた。Win10+Firefox, Android9+Chrome, iOS13+Safariで動いた。ふぅ pic.twitter.com/C6a67RMxvY
— j4amountain (@zsipparu) April 25, 2020
【今日Javascriptを始めた人向け2】変数の更新
[【今日Javascriptを始めた人向け1】](https://qiita.com/TOMARU4400/items/54bf0369b6fe476cf78f)の続きです。
変数に値を再代入すれば変数の値の更新が出来ます。
【例】
```Javascript:sample.js
let hoge = 3;
console.log(hoge);
hoge = 5;
console.log(hoge);
```こちらの実行結果は
```:実行結果
3
5```
となります。3行目の
```Javascript:
hoge = 5;
```hoge = 5;の記述部分で値が5に更新されています。
代入は何回でも行えますが変数の値は**直前に代入した値**になります。なので変数を使用する際は直前に代入した値を把握しておきましょう。
【今日Javascriptを始めた人向け1】変数の宣言
変数は、値を格納する『箱』のようなもので、使用する際は変数を宣言する必要があります。
変数の宣言は以下のように宣言します。```Javascript:sample.js
let 変数名;
```
【例】```Javascript:sample.js
let hoge; //let hoge;で変数hogeが宣言できます。
```
変数に値を格納することを代入と言います。代入には= を使います。
```Javascript:sample.js
hoge = 3; //hoge = 3;でhogeに3を代入できます。
```代入した値を使用するには変数名をそのまま記述します。
以下は変数hogeを宣言し使用した例です。```Javascript:sample.js
let hoge = 3;
console.log(hoge);```
```Javascript:実行結果
3
```
console.log(hoge);とするとhogeは3に置き換わります。
結果的には、console.log(3);が実行されるため、3が表示され
LaravelからJavaScriptに配列変数を引き渡す方法
Laravelで、コントローラから受け渡した配列変数をJavaScriptに渡す方法。
普通に、
const data = '{{json_encode($data)}}';
console.log(data);のように渡すとダブルコーテーションが"のような文字になってしまう。
調べると、
https://qiita.com/azumagoro/items/51a884eb9840b08a29ee
JSON_UNESCAPED_UNICODEを、json_encodeの第二引数に入れてunicode文字列にされることを防ぎ。
!!で囲って、"にされることを防げるという。そして、Laravel5.5以降は、@json()というbladeテンプレート用の関数で簡単にできるという。
const data = @json($data);
という書き方が結論のようにも思いましたが、今後外部ファイル化した時に、このことを忘れてはまる原因になりそうでしたので、一度は基本でやるということで、
const data = {!!json_encode($data,
HerokuでのデプロイでPrecompiling assets failed.が出たときの対処法
初めてHerokuでデプロイを行なったらPrecompiling assets failed.というエラーが出てきてしまったので備忘録として投稿します。こちらのエラー、原因は色々あるみたいですので、下記の解決法が全てではありません。
## 開発環境
MacOS 10.15.4
Ruby 2.5.1
Rails 5.2.3## 最初に
エラーは目立つ部分が全てではない!!```
remote: ! Precompiling assets failed.
```
こちらの一文は赤字で目立ちますが、実は大事な部分がターミナルをさかのぼると出てきます。## エラー1
さかのぼるとこの様なエラーが出てきました。```
NoMethodError: undefined method `[]' for nil:NilClass
```
[]を見て思い出しました!!
環境変数セットしてなかった...
私はcredential
evalのリスク
普段はサーバーサイドですが、フロントエンドの仕事も少し増えたので、Javascript勉強中にevalすごく便利!と思ったら、とてもリスクがあることを知ったので、メモとして残しておこうと思いました。
もうすでにネット上でたくさん情報は転がっているので、当たり前じゃん!というツッコミもあるかと思いますが。。。## やりたかったこと
以下のような仕組みを実装しようと試みました。- 動的にObjectのキーと値を生成する。
- 生成したObjectにキーを指定して、値を取得する。## ダメな例
実証例のため、はちゃめちゃなコードですが、ご了承を。。。```Javascript:ng.html
名前:
年齢:
JSにおけるfor文とwhile文の違い
JavaScriptの繰り返し処理でfor文とwhile文の違いについてまとめます。
同じブロックを繰り返し表示したり、同じ処理を繰り返したいときなどに繰り返し文を使用します。
##1 for文の構造
for文は以下のように記述します。
```js
for (let i = 0; i < 5; i ++){ document.write(i); } ``` 上記のfor文は初期値iに0をセットして、iが5より小さい間処理を繰り返すfor文です。 ```js for (初期値; 条件式; 増減式){ 命令文; } ``` ##2 while文 while文は以下のように記述します。 ```js let i = 0; while (i < 5){ document.write(i); i ++; } ``` 上記のfor文と同じでこちらも初期値iに0をセットし、iが5より小さい間繰り返す処理です。 ```js 初期式; while (条件式){ 命令文; } ``` ##3 両者の違い 簡単にいうとfor文は繰り返し回数JavaScriptにおいて配列の取扱説明書
# JavaScriptでの配列は??
結論から言うと、**Rubyとほとんど一緒**です。
実際のコードをみながら説明していきます。# 実際にconsole.log()で確かめてみた
console.log()って何?って思った人は以下の記事を必ず読んでください。
[console.log()って何なの?](https://qiita.com/Nyanmaru-12/items/fc430a1ee28c26901e91)
必要なファイルは以下の2つ
:page_facing_up:index.html
:page_facing_up:script.js
そしてscript.jsに以下の記述をしましょう。```javascript
let list = ['Yamada', 'Hanako', 'Taro', 'Suzuki', 'Kato'];
console.log(list);
```
index.htmlをブラウザ上で開き、検証画面のコンソールで以下のように出力されてるはずです。
通常関数とアロー関数の違い#通常関数とアロー関数の記述
以下,二つの関数の記述法である.```Javascript:
//function
function f(x) {
return x + 1;
}//arrow function
const f = (x) => x + 1;
```#通常関数とアロー関数とでは参照するthisが異なる
JavaScriptでは,関数もconstructor同様にthisのオブジェクトを持つことができる.
このthisオブジェクトの参照先が通常関数とアロー関数とで異なる.* 通常関数:宣言元のオブジェクト
```Javascript:
//////通常関数のthis//////
function test1 {
this.param = 'test1' //JavaScriptでは関数の中に関数を持つことも可能function printParam () {
console.log( this.param )
}let object1 {
param: 'object1',
func: printPaREST API($.ajax)でRedmineのチケットを更新するときは、レスポンスのdataTypeをJSONにしてはならない
## 概要
* jquery(3.5.0)の`$.ajax()`でRedmineのチケットを更新しようとしたら、上手くいかなくて困ったので共有## 事象
### 書いたコード
```js
function updateTicketTitle( ticket_id, new_title ) {
let url = `https://xxxxxx/redmine/issues/${ticket_id}.json?key=0123456789abcdef0123456789abcdef`;update_data = {
"issue": {
"subject": new_title
}
};$.ajax({
url: url,
type: "PUT",
contentType: 'application/json',
data: JSON.stringify(update_data),
dataTy課題管理表をNode.jsとSQLiteで作る②
①に続いて今度はDBへの登録画面を作っていきます。
## 登録画面の作成
まずviewsにDB書き込みフォームとなるwrite.ejsを新規作成します。
中身はこんな感じで必要最低限の項目とDBへの登録ボタンを用意します。
```html
登録
新規課題登録