保存版 JavaScript <=> PHP の文字列操作対応リスト

フロントエンドとバックエンドにおいては分業が当たり前のこのご時世ですが、僕はちょうどお互い半々で仕事を頂けているので備忘録も兼ねて対応表を作成しました。

普段自分が担当している分野の反対側を扱わなくてはならなくなったときや、一人でフロント・バック両方開発するとき、もしくは暇つぶしにどうぞ。

※目次・各項目に書いてあるコードは __JavaScript__, __PHP__ の順です。

# 追加・結合

## 結合 “`’hoge’+’fuga’“`, “`’hoge’.’fuga’“`

“`sample.js
‘hoge’+’fuga’;
//’hogefuga’
“`

“`sample.php
‘hoge’.’fuga’;
//’hogefuga’
“`

最も基本的かつよく使う文字列を繋げる処理ですが、この時点で JavaScript と PHP の差を感じます。

普段 JavaScript を使用している開発者には違和感を感じる「.」での連結ですが、これは PHP が Perl に影響を受けて開発されたことによるものと思われます。
[PHP 公式マニュ

「ねそプロ」ショッピングサイトを作ろう

#ネットワークを利用した双方向性のあるコンテンツのプログラミング教材
ネットワークを利用したプログラムの例として、「ショッピングサイト」の教材を作成しました。
ブロック部品をドラッグして置くだけの簡単プログラミングです。Google Blockly を使ってJavaScriptのコードを作成して実行します。データは、Ajaxで非同期通信をサーバと行い、データベースに記録しています。

http://iwate-manabi-net.sakura.ne.jp

１　ショッピングサイトを作ろう
２　ショッピングサイトで買い物しよう
３　売り上げランキングを見よう

以上３つのWebページでできています。

#「ショッピングサイトを作ろう」の使い方
(1)　「画面に表示　スタート」のブロックを置きます。
(2)　「商店名」のブロックを置き、商店の名前を入力します。
(3)　ショッピングカートを置きます。
(4)　商品を並べるワクを置きます。
(5)　その中に商品を入れます。

ここで「実行」ボタンを押すと、ショップサイトの画面が作られます。
商品の写真、商品名、価格のカードが表示されます。

Papaparseで、Excelで0落ちしないCSVファイルを作る方法

下記のようにCSVをExcelで読み込むと
電話番号の先頭の0が消えてしまいます。

“`csv:元データ.csv
名前,電話番号
佐々木,08022222222
湯浅,08022222221
“`

“`csv:excelで読み込んだデータ.csv
名前,電話番号
佐々木,8022222222
湯浅,8022222221
“`

## 解決策
区切り文字を`,=`にすれば、Excelでも先頭の0を表示することができるので
Papaparseで区切り文字を変更する方法を紹介します。

“`
名前,=電話番号
佐々木,=08022222222
湯浅,=08022222221
“`

ただし、ジェネリックではない~~Excelのクソ仕様です~~ので
**どうしても、ExcelでCSVを開きたい場合だけ使ってください。?**

## 実装方法

unparseのオプションに`{ delimiter: “,=” }`を渡すだけです。

“`javascript
const data = Papa.unparse(json, { delimiter: “,=” })
“`

年末まで毎日webサイトを作り続ける大学生 〜13日目 try…catch…finallyに触れる〜

##はじめに
初めまして。
年末まで毎日webサイトを作っている者です。
今日もMDNを見て勉強していたんですが、中級編をやる前に見落としていたページがありました。
try…catch…finallyです。エラーを拾ってくれるのはわかったんですが、使い分けがいまいち分かっていません。果たしてtry文は乱用していいものなのか・・・？
扱う技術レベルは低いですが、同じように悩んでる初心者の方を勇気付けられれば幸いです。
今日は13日目。(2019/10/31)
よろしくお願いします。

##サイトURL
– https://sin2cos21.github.io/day13.html

##やったこと
冒頭にある通りtry…catch…finallyを触ってみました。
エラーを出すためにわざと宣言していない変数「random2」をthrowに投げています↓

“`html

Gulp環境構築にて「AssertionError [ERR_ASSERTION]: Task function must be specified」の原因はgulp v4にバージョンアップした事による仕様変更

始めての投稿です。
1. エラー内容、背景
2. 環境
3. 解決方法
4. 原因
の順に記載して行きます。

## 1. エラー内容、背景
gulpにてSassを自動コンパイルしたかったため、Homebrew、Node.js、gujpをインストール。
gulp自動監視を起動しようと、コマンド実行すると、

“`ruby:qiita.rb
‘AssertionError [ERR_ASSERTION]: Task function must be specified’
“`
と言うエラーが。

## 2. 環境
mac

– npm 6.7.0
– Node.js 12.13.0
– CLI 2.2.0
– gulp 4.0.3

## 3. 解決方法
**Node.js**と**gulp**のバージョンを下げる。

– Node.js 12.13.0
– gulp 4.0.3

　　↓

– **Node.js 11.15.0**
– **gulp 3.9.1**

Node.jsのバージョンの下げ方は、

“`ruby:qiita.rb
$ npm install -g n

コンソーシアム型Ethereum: Kaleidoを利用したatomicなDvP（トークンスワップ）

【本文】
—

コンソーシアム型EthereumのBaaSモデルを提供するKaleidoには興味深い機能がいくつかあるが、そのうちの一つに”Token Swap”機能がある。
仕組みを簡単に説明すると、図1に示すようにHTLC(Hashed Timelock Contract)を利用することで、2者間で交換したいトークン（ERC20/ERC721)をコントラクト上でアトミックなDelivery v.s Payment（アセット同士だと、最早、DvDと言っても良いか。）として実現するものである。

**[図1]**
（出典： https://api.kaleido.io/tokenswap.html )

Kaleidoの最大の利点は、こうしたアトミックスワップ機能をREST API経由で簡単に実装できる点に

初心者によるプログラミング学習ログ 142日目

# 100日チャレンジの142日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。

100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。

142日目は、

おはようございます
142日目

メンターさんのjavascript課題

やることあったので、あまりできませんでした。#100DaysOfCode 今最も人気のあるCSSフロントエンドライブラリトップ10

>こちらの記事は、[Indrek Lasn](https://medium.com/@indreklasn?source=post_page—–eb0330c04148———————-) 氏により2019年 8月に公開された『 [Here’s a List of the Top CSS Front-End Libraries](https://medium.com/better-programming/heres-a-list-of-top-css-front-end-libraries-eb0330c04148) 』の和訳です。
本記事は原著者から許可を得た上で記事を公開しています。
著者Twitter https://twitter.com/lasnindrek


なぜ自前でCSSで書くよりもCSSライブラリを使った方が良いのでしょうか？簡単に言えば時間というリソースは限られているからです。スタイルよりも機能の構築

元記事を表示

JS直書きでGoogle DoodleのCanvasを録画してGifに

# 導入
今日はハロウィンなので、GoogleのHPではまた新たな[Doodle](https://www.google.com/doodles/halloween-2019)が更新しました。
今回のDoodleは~~ハスキー~~オオカミがバスケをやっているのがあって、とても面白いと思って、つい録画しようと思いました。


# 方法
## DOM要素の調査
調査してわかったのは、このアニメーションは`id=”hpcanvas”`というCanvasが出しているのがわかりました。

![2019_年ハロウィン_?.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/87438/4bb04192-c636-dcd2-ba4a-34be22cb40

next.jsでabsoluteなpathをインポートしたい

`../../`とかやらずにimportしたいなと思ったので、調べた。

こういうやつ

“`diff
-import { InjectStoreContext, initializeData } from ‘../../../../../src/stores’;
+import { InjectStoreContext, initializeData } from ‘src/stores’;
“`

next.config.jsでwebpackに設定注入して、
eslintの設定も追記するとだいたいOK
雑にdiffも置いとく。

“`diff
diff –git a/.eslintrc.js b/.eslintrc.js
index 5594d79..84bc5b3 100644
— a/.eslintrc.js
+++ b/.eslintrc.js
@@ -8,13 +8,18 @@ module.exports = {
ecmascript: 6,
jsx: true,
},
– extends: [‘airbnb’, ‘prettier

MSYS2 で OpenCV.js をビルドする / How to build OpenCV.js on MSYS2

#　無　保　証　で　す / Use this article at your own risk
[当方執筆の技術情報に関するライセンス、免責事項、禁止事項](https://qiita.com/EarthSimilarityIndex/items/6b9bb2ccacb38aae15b1)

This article is licensed under [Creative Commons — Attribution 4.0 International — CC BY 4.0]()

# 概要 / Summary
やっと

Clipboard.js の関数が変更された (Clipboard → ClipboardJS)

# はじめに
wordpressをアップデートしたところjQuery群が入れ替わりClipboardを使用したものが使えなくなっていた。
https://clipboardjs.com/

# 対策
下記のように Clipboard として呼び出していた。

“`js
var clipboard = new Clipboard(‘.formtmp’)
“`

変更後は下記のようになっている。

“`js
var clipboard = new ClipboardJS(‘.formtmp’)
“`

# おわりに
アップデートで関数名を変えるのやめてくれ。

チュートリアル – Vue.jsでPlayCanvas製3Dモデルビュワーサイトを作る 4 / 4

[前回](https://qiita.com/sutobu000/items/2589db19a66d8deb8637)はVue.jsでモデルを切り替えたりTweenを入れて動かしたりするまで行いました。
次は各モデルごとに詳細ページを作っていきたいと思います。

##3Dモデルごとに詳細ページを作る

選択した3Dモデルごとに対応したDOMを表示させるようにします。

まずは3Dモデルの各Entityに載せたい情報が入ったHTMLを登録していきます。

今回は私の方で用意したHTMLを追加します。
中の記述は任意で変更してみてください。

[content01.html]

“`html

3Dモデルビュワー01

杏マナー杏マナー杏マナー杏マナー杏マナー杏マナー杏マナー杏マナー杏マナー杏マナー杏マナー杏マナー杏マナー杏マナー杏マナー杏マナー杏マナー杏マナー杏マナー杏マナー杏マナー杏マナー杏マナー杏マナー杏マナー杏マナー杏マナ

チュートリアル – Vue.jsでPlayCanvas製3Dモデルビュワーサイトを作る 3 / 4

[前回](https://qiita.com/sutobu000/items/25caba219b99440cd243)はPlayCanvasにDOMを追加するまでを行います。
今回はVue.jsを使ってモデルの切り替わりなどを実装してきます。

##Vue.jsで3Dモデルを切り替える
現在は3Dモデルが一つだけしか確認することができないので、複数の3Dモデルを追加します。
ヒエラルキーからEntityを追加していきます。

ヒエラルキー上部の[+]ボタンか右クリックからAdd Entity → Entityを選択します。
「New Entity」という名前で追加されたと思います。
Entitiesなど任意の名前に変更などして差別化します。
チュートリアル – Vue.jsでPlayCanvas製3Dモデルビュワーサイトを作る 2 / 4

[前回](https://qiita.com/sutobu000/items/818835230a90104e2c79)はチュートリアルの前説と新しいプロジェクトを作るまでを行いました。
今回はPlayCanvasにDOMを追加するまでを行います。

##DOMを乗せる
DOMを乗せるためのHTMLとCSSを作ります。

HTMLとCSSはPlayCanvasのAssetsから追加できます。
[+]ボタンをクリックし、該当する形式のファイルを選択します。
ファイル名は任意で構いませんが、以下にするとwebな感じですね。
– HTMLは「index」
– CSSは「style」


コードエディターからコードを書いて行きますが、
今回は事前に用意していますので、こちらをコピペして使用します

チュートリアル – Vue.jsでPlayCanvas製3Dモデルビュワーサイトを作る 1 / 4

※このチュートリアルはPlayCanvas運営事務局で使用しているハンズオンの資料です。

#PlayCanvasでWebサイトを作る

このチュートリアルでは、自作した3DモデルなどをWebから簡単に閲覧できるようにモデルビュワーを実装していきます。
今回はVue.jsというJavaScriptsのフレームワークを使います。
Vue.jsについて深堀しないため、精通していない方でも簡単に作ることができます。

できるページは以下のようなページができます。
https://playcanv.as/p/xIj6iJ4S/

3Dモデルビュワーということで、今回は3Dモデルを回転させたりズームしたりできます。
また、3Dモデルはメニューからクリックし変更することも可能で、各モデルごとに詳細を載せることも可能です。

今回は上記のものを作成するべく、チュートリアルを始めましょう。

—

##Projectを新しく作ります

今までのハンズオンでは事前に用意したプロジェクトをForkして始めていましたが、今回は新規Project作成します。

svelte用ボイラープレート作ってるのでやったことメモ

# 概要

svelteの開発をするにあたって、とりあえずボイラープレートを作るところから始めようと思ったのでほぼ自分用のメモ書きです。

## Linter/Prettierを入れる

npm-run-allを入れておくとタスクの複数実行が簡単なので便利です。

lintコマンド抜粋
階層が深い場合は**とか使って変えればいいかなと思います

“`json:package.json
“scripts”: {
“lint”: “npm-run-all -c lint:*”,
“lint:eslint”: “eslint src/*.js”,
“lint:stylelint”: “stylelint src/*.scss”,
“lint:prettier”: “prettier –check src/*.{js,scss}”,
“format”: “npm-run-all -c format:*”,
“format:eslint”: “eslint –fix src/*.js”,
“format:stylelint”: “

Deno Style Guideを読み解く

## Deno – JavaScriptランタイムのネクストスタンダードか

Deno、いいですよねー。セキュアだし、TypeScript推しだし、標準モジュール志向だし。

## v1.0のリリースについて

未だv0.2ということで本番環境での利用は推奨されていません。
作者のライアン曰く2019年中にv1.0リリースすると公言しているそうですが、コミュニティの中では恐らく来年中頃くらいまではかかるのでは？という予想です。
まぁ正式リリース前のこのタイミングで各種情報をキャッチアップしておけばJS界隈で遅れを取ることはなさそうですね。

## Deno Style Guideとは

その名の通りDenoをコーディングする際の現時点でのベストプラクティスです。
リンクは[コチラ](https://deno.land/std/style_guide.md)。

Twitterのお気に入りとは異なり。

“`
var divs = document.getElementsByTagName(‘div’)
var arr = Array.prototype.slice.call( divs)
var hearts = arr.filter(x => x.getAttribute(“data-testid”) == “unlike”)
hearts.forEach(h => h.click())
window.scrollTo(0, document.body.scrollHeight)
“`

chromeで不要なcssとJavaScriptを見つけ出し削除する

#不要なcssとjavascriptを洗い出す方法

cssをコーディングしていて余分な部分があるか分からなかったり探すのが手間がかかっていたので、
便利なツールはないか探していたら不要な部分を洗い出す方法を乗せたサイトです。

Chromeで不要なCSS/JavaScriptを洗い出す

consoleの横にあるメニューからCoverageを選択し開けば使用開始できるものです