JavaScript関連のことを調べてみた2020年06月27日

[handlebars.js]Smartyからhandlebars.jsを急に使うようになって困ったこと

## Handlebarsとは

単純なテンプレート言語です。
テンプレートと入力オブジェクトを使用して、HTMLまたはその他のテキスト形式を生成します。
https://handlebarsjs.com/examples/simple-expressions.html
詳しいことは、公式ドキュメントをご覧ください。

## Smartyからhandlebars.jsを急に使うことになった

プロジェクトが変わったらテンプレートエンジンも変わっていて、急にhandlebars.jsを使うことになりました。
基本的な使い方などは、Smartyを使ったことあるのでそんなに困ることはなかったです。
おそらくテンプレートエンジンをなにかしら使ったことあれば困らないと思います。

## ifヘルパーはelseのみ

ifヘルパーを使いたいときに困りました。
ifヘルパーはelseのみ用意されています。
要は、else ifが使えないのです。
https://handlebarsjs.com/guide/builtin-helpers.html#if

なので、テンプレート側で複雑な条件式を書くこ

firebase firestoreで非同期でデータを取得する(Javascript,reactnative)

#背景
ReactnativeでAndroidアプリ開発をしています。
本当に初学者なので間違えている点あると思いますがご了承ください、、、

firebase & Reactnativeでの開発をしていてタイムラインを実装しようとしたときに
1.まずPostをcollectiongroupとして取得
2.そのPostそれぞれが持つuidを元にPostを投稿したUserを取得し、User情報と一緒にListにぶち込む
3.そのListをsetListとしてstateを変更してFlatListで表示する

という実装をしたかったのですが、FlatListをScrollViewの中に入れてしまったりするとどうも表示されず、setListもうまく機能していなかったので色々調べました

#ソースコード
うだうだ話していてもあれなので実際に実装したコードをとりあえず貼っておきます

“`react:TLScreen.js
useEffect(()=>{
firestore()
.collectionGroup(‘posts’)
.onSnapshot(async(querySnap

学習日記7日目(2020/6/26)

# 学習内容

– JavaScript基礎学習：Progateで学習コースIVまで終了

　以前はしっかりJavaScriptの学習をしておらず、Laravelの学習に入ってからいきなりクラスやインスタンスが出てきてあまり理解できていなかったのですが、JSの学習時にそれらの詳しい説明があって理解が深まりました。嬉しい誤算です。

# その他

– タイピング練習

# 明日の予定

– JavaScript基礎学習:できればProgate終了まで

とにかく、つかえるJS？JC?JK?あげるとかいうのいい？

Date.prototype.JST=function(){this.setTime(this.getTime()+(9*60*60*1000));return this}

これ？いいとおもう。

プログラミング初心者が人生初のポートフォリオ作りました。

#人生初ポートフォリオサイト

https://portfolio.ppmp556.com/

Jestでモジュールの特定の関数だけモックする

Jestでモジュールをモックするのは便利ですが、モジュールの一部をモックしたい場合に困ることがあります。

“`js
// my-module.js
export function foo() { … }
export function bar() { … } // bar だけモックしたい
“`

“`js
import { foo, bar } from “./my-module”;

jest.mock(“./my-module”, () => ({
bar: jest.fn(),
}));

describe(“foo”, () => {
it(“works”, () => {
expect(foo(“yay”)).toEqual(“wow”);
});
});
“`

上記のように書いた場合に、 `TypeError: foo is not a function` といったエラーになってしまいます。それを回避するには以下のように書きます。

“`js
jest.mock(“./my-module”, () => ({
…jest

Reactアプリ – 文章中キーワード黒塗りはがし

## はじめに

　Reactを使って文章中の特定のキーワードの黒塗り文字列をクリックして黒塗りをはがして読めるようにするアプリを作りましたので紹介いたします。

　このアプリは単純で、黒塗りをはがすためにはキーワードの黒塗り部分をクリックします。再びキーワードをクリックすると黒塗りに戻ります。

## 前提条件

　node.jsがインストールされている事が必要です。まだインストールしていない場合には、インストールしておいてください。

## Reactプロジェクトを作成します

以下のように`create-react-app`コマンドを実行します。少し、時間がかかります。

* macOS

“`bash:terminal
(base) macpro:dev teruroom$ cd /Users/teruroom/dev/react/
(base) macpro:react teruroom$ npx create-react-app blackout-peeling
“`
* Windows10

“`powershell:powershell
PS C:\> cd C:

CentOS とOSXでphp, fetch,javascriptの挙動が違う

OSXはこれで行けたが、CentOSではダメ

Javascript

“`javascript
function checkNewOrder(uuid) {
var res = fetch(“./test.php”, {
method: “POST”,
headers: {
“Content-Type”: “application/json”,
},
body: JSON.stringify({
//引数が色々あって…。
})
}).then((response) => {
if (response.ok)
return response.json(); // レスポンスをテキストとして変換する
})

JavaScriptをすこーし勉強してみたので書き留める④

最低限の知識一応あるけど、復習も兼ねて書いてみることにするの巻その④

## 関数宣言と関数式（超ざっくり）
– 関数式
– 実行が関数式に到達された時に作成される。その後から使用できる。
– if文外で変数宣言⇨if文内で関数式を使用して代入する⇨あとで使える
– 関数宣言
– スクリプト/コードブロック全体で使用できる。
– 関数宣言は関数式より早く使えるようになる
– ブロック外だと使えない

## アロー関数
アロー関数で書くと…

“`
let func = (arg1, arg2, …argN) => expression
“`

同じのを関数式で書くと…

“`
let func = function(arg1, arg2, …argN) {
return expression;
}
“`

使ってみよう！こんな感じ。

“`
let sum = (a, b) => a + b;

/* アロー関数は次よりも短い形式です:

let sum = function(a, b) {
return a

Kinx Tips – UTF8 文字列のフォーマッティング

# Kinx Tips – UTF8 文字列のフォーマッティング

## はじめに

**「見た目は JavaScript、頭脳(中身)は Ruby、（安定感は AC/DC）」** でお届けしているスクリプト言語 [Kinx](https://github.com/Kray-G/kinx)。Kinx で実装したちょっとした小技を紹介。

* 参考
* 最初の動機 … [スクリプト言語 KINX（ご紹介）](https://qiita.com/Kray-G/items/ca08b6fb40d15dd0ec76)
* 個別記事へのリンクは全てここに集約してあります。
* リポジトリ … [https://github.com/Kray-G/kinx](https://github.com/Kray-G/kinx)
* Pull Request 等お待ちしております。

そう、ちょっとした小技。

## UTF8 文字列のフォーマッティングの問題

### C 言語の printf

UTF8 はバイト数と文字幅が一致しないので、”

IndexedDB + Dexie.js で CRUDの作成、Vue CLI版

# 概要
IndexedDB で、Dexie.js　ライブラリを使用した
CRUD の作成となります。
vue-router と組み合わせて、ほぼサーバレス的な構成にできるか検討してみました。

・ブラウザ内の、LocalStorageと似ているイメージで
　データは、他のＰＣから利用できない為。
　オフライン機能で、何か作る場合は。良さそうでした

・開発の面では、通常DBサービス起動も不要で
　Vue-cli サービスのみで。開発できるので準備は楽でした
　

# 構成
Vue CLI
dexie : 3.0.1
vue: 2.6.11
vue-router

# 参考
https://developer.mozilla.org/ja/docs/Web/API/IndexedDB_API

https://dexie.org/

https://qiita.com/yamayamasan/items/a4297e724b86f4a00fd2

# vuex 追加
“`
npm install –save dexie
“`

# package.json
https:

お絵かきできるSNSを作りたい！10

お絵かきできるSNSを作りたい後半戦、１つ前に戻すを作っていきます。

筆跡が分るようにjsonで座標を逐一保存しようかとも考えたのですが、管理が大変そうだったので１ストローク毎にcanvasの中身をスクリーンショットを撮る感じにしました。

まず、対処のボタンにイベントを追加します。

“`html:
１つ前に戻す
“`

ローカルストレージを用意し、レイヤー1とレイヤー2をそれぞれ１ストローク毎に保存していきます。

“`javascript:
// ストレージの初期化
var myStorage = localStorage;

function initLocalStorage(){
myStorage.setItem(“__layer”, JSON.stringify([]));
myStorage.setItem(“__layer2”, JSON.stringify([]));
}

function setLocalStoreage(){
var png

【Vue】学習開始４週目で覚える内容

#4週目で学ぶべきこと

– **フック関数**
– **カスタムディレクティブ**
– **フィルター**
– **ミックスイン**
– **Vue Router**

#フック関数

– フック関数：プログラムの中に“独自の処理を割りこませる“ために用意されている仕組み。

|関数名|詳細|
|:–:|:–|
|bind|初めて対象の**htmlタグに紐づいた時**に、呼ばれる|
|inserted|カスタムディレクティブと紐づいた要素が**親Nodeに挿入**された際に呼ばれる|
|update|**コンポーネント内でデータ更新**が行われたタイミングで呼ばれる
子コンポーネント更新される**前**|
|componentUpdated|**コンポーネント内でデータ更新**が行われたタイミングで呼ばれる
子コンポーネント更新された**後**|
|unbind|htmlタグとの**紐付けが解除された時点**で呼ばれる|

#カスタムディレクティブ

– 引数は“el, binding, vnode, oldVnode“。 ※基本は“el,

JSで配列の検索と削除のメモ

よく使う機会あったので備忘メモ
配列のobjectでID一致したらそこを削除するメモ

###一致データを削除サンプル

“` ts
datas = [{id:1,content:”AAA”},{id:2,content:”BBB”},{id:3,content:”CCC”}];

deleteData (id) {
const result = this.datas.findIndex(
(item) => item.id === id
);
if (-1 < result) { this.datas.splice(result, 1); } } ``` ###参考サイト ES6でよく使う、配列の中身を操作・検索する関数 https://qiita.com/pentla/items/a87383903a30d7baa282#findindex JavaScript - 配列の要素を削除する https://murashun.jp/blog/20191110-18.html#chapter-3

typescriptの導入 + classについてのメモ

###TypeScriptのインストール
“`
npm install typescript
“`
###typescriptの実行
.tsファイルを.jsファイルにコンパイルし、作成された.jsファイルを実行する。

“`
tsc ファイル名.ts
node ファイル名.js
“`

###typescriptでclassの練習

“`practice.ts

//クラスを作成
class Animal {

//プロパティ 名前:型
name: string;
age: number; //intではない

//コンストラクタはインスタンスに引数を持たせる場合に必要
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}

}

//インスタンスを作成
var cat = new Animal(“Cat”, 7);
console.log(cat.name); //Cat
consol

jsonのPHP、JSでのエンコードとか

## php
fetchall(PDO::FETCH_ASSOC) — 結果セットに 返された際のカラム名で添字を付けた**配列**を返す。
json_decode — JSON形式の文字列を**オブジェクトもしくは連想配列に変換**する
json_encode — 値をJSON形式にして返す

## JSON
JSON.parse — JSON形式で書かれた文字列をJavaScriptの**JSONオブジェクトに変換**する
JSON.stringfy — JSONオブジェクトを**文字列に変換**する

完成！！初めてReact.jsでWebサイト作った！！

# とりあえず完成！
つまずいた点たくさんありました．．．
ハマったポイントを記事にしたのはまだ1つだけですが，今後作ってきます

一通り完成したので報告致します．＜－－急にかしこまる
https://shinnosuke7031.github.io/react-test/

意識したのは，ページ遷移しないで表示内容を変えること！

デザインはまだまだですが．．．

ぜひアドバイスとかいただけると幸いです

【Nuxt.js】Nuxt文法編：v-slot(中級)

# 分割代入

簡単にいうと別の場所で
別の変数名をきめれて
値を代入できること
MDN分割代入

というより見た方が早いですね?
親で子の値を使えちゃいます！

**❓どんな時に使うか**
　まとまったdataを子で管理したい時に使います！

“`Text.vue

“`

“`index.vue