- 1. intra-martのスクリプト開発で文字をバイト数指定で切り捨てる
- 2. Next.jsでbootstrap4の色をカスタマイズして使う
- 3. Google Functions & Node.js: console.logを使った最低限のロギング
- 4. JavaScriptからletを「絶滅」させるために足りないもの
- 5. あなたにピッタリなジェイソン・ステイサムの映画を教えてくれるアプリを作りました【Vue.js】
- 6. マイクラのScriptingAPIって何？
- 7. JavaScriptでカレンダーを作ってみた
- 8. React.memo, useCallback, useMemoを理解する
- 9. Javascript_プロトタイプチェーン初心者覚書
- 10. Microsoft製UIライブラリ FAST について
- 11. toJSONを用いて、JSONデータの返り値を制御する
- 12. 【SNS顔出しNGの方も安心】顔に目隠しを付けてくれるアプリを機械学習APIで作ったよ
- 13. bcryptでプレーンテキストをハッシュ化させる
- 14. aibo Web API と YouTube Player API を連携して、YouTube 動画の再生秒数に合わせて aibo にふるまいをしてもらう
- 15. JSONトークンで認証ができるようにする
- 16. Blobって
- 17. 【JS】if文の中でletが使えない…
- 18. JSについて本気出して考えてみた
- 19. 【JS】分割代入のお作法（ES2015）
- 20. meta description にREADME のテキストがセットされてしまう現象
intra-martのスクリプト開発で文字をバイト数指定で切り捨てる
# 対象となる開発形態
– intra-mart Accel Platform
– スクリプト開発
– IM-FormaDesigner(Ajax利用)# やりたいこと
– 文字列をバイト数指定で切り捨てる。
– 指定バイト数が文字の途中だった場合、その前の文字までを取得する。# コード
“`byteTruncStr.js
function byteTruncStr(str, byteLen) {
if (Module.string.size(str) <= byteLen) { return str; } let strLen = byteLen > str.length ? str.length : byteLen;
let truncStr = str.substring(0, strLen);
while (Module.string.size(truncStr) > byteLen) {
strLen –;
truncStr = truncStr.substring(0, strLen
Next.jsでbootstrap4の色をカスタマイズして使う
まず `bootstrap` と `sass` をインストールする。
“`
npm i bootstrap
npm i sass
“`ファイル構成は以下の想定で、 `bootstrap-variables.scss` を新しく作成する。
“`
/
├ pages/
│ ├ _app.js
│ ├ index.js
│ └ …
└ bootstrap-variables.scss
“`アプリケーション全体に適用したいので、 `_app.js` の先頭に記述します。
“` js
// import ‘bootstrap/dist/css/bootstrap.min.css’ // ← カスタマイズ不要な場合
// import ‘bootstrap/scss/bootstrap.scss’ // ← bootstrapをsassで読み込みたい場合
import ‘../bootstrap-variables.scss’ // カスタマイズ用
“``bootstrap-variables.scss` には、上書きする値を記入して、最後に `bootstrap
Google Functions & Node.js: console.logを使った最低限のロギング
この投稿では、Google Cloud Platform(GCP)のGoogle Cloud Functions(GCF)のNode.js環境で、`console.log`を使った最低限のロギング手法について解説します。
## この投稿で学ぶこと
* Google Cloud Functions & Node.jsでは、`console.log`で最低限のロギングは可能。
* 2行以上に渡るログは行ごとに分解されるので注意。
* jsonPayloadを意識すると、オブジェクトの構造をログに出すことも可能。## GCFでは`console.log`でログを残せて、「ログビューア」で確認できる
まず、Google Cloud Functionsでどのようにロギングし、そのログをどうやって確認するのかを学びます。シンプルに1行のメッセージを`console.log`で記録してみましょう。
“`javascript:index.js
exports.helloWorld = (req, res) => {
console.log(‘helloWorld関数を実行しています。
JavaScriptからletを「絶滅」させるために足りないもの
“[JavaScriptからletを絶滅させ、constのみにするためのレシピ集](https://qiita.com/kiyoshiro/items/13c60fad1f5279993fa2)” という投稿を読みました。半分はネタだと思いますが、 **JavaScript で `const` を追求すると可読性が厳しそう** だなと感じました。
一方で、他の言語だと同じことにチャレンジしても、もう少しマシに書けそうに思いました。僕が普段一番よく使っている言語は Swift です。そこで、試しに Swift で同じ内容のコードを書いてみて、 **JavaScript で `let` を「絶滅」させるために足りないもの** が何かを考えてみました。
なお、 JavaScript のコードは注釈がない限り上記の投稿からの引用です。
## 変数・定数宣言のためのキーワード
| | 変数 | 定数 |
|:–:|:–:|:–:|
| JavaScript | `let` | `const` |
| Swift | `var` | `let` |JavaScirpt と Swi
あなたにピッタリなジェイソン・ステイサムの映画を教えてくれるアプリを作りました【Vue.js】
#はじめに
こんにちは。__ジェイソン・ステイサム__が大好きなたわちゃんと申します。
（参照：「ジェイソン・ステイサムで妄想するのが日課になっていたので、いっそBOTにしてみた。」https://qiita.com/twtjudy1128/items/88f3e8f09c449f49456c ）今回も愛情が溢れすぎた結果、ステイサム関連のアプリを作成してしまいました。
ステイサムが好きな方も、そうでない方も、ぜひ一度お試しいただけますと幸いです。#目的
・__もっとステイサムの魅力を伝えたい__
・__ステイサムの映画をみんなにも見てほしい__
・__なんならステイサムと結婚したい__
・Vue.jsを使ったフロントエンドの実装に挑戦する#完成したもの
▼コチラが実際に作ったものです！
https://trusting-yalow-80ebbf.netlify.app/jason.html2枚の画像から、気になるステイサムたんの画像を選んでいきます。
それを10回繰り返すと・・・最終的に選んだ画像を元に、あなたにオススメのステイサムたんの映画を教えてくれます！より
マイクラのScriptingAPIって何？
# はじめに
導入の方法とかは他にも書いている人がいるので、省きます
[Minecraft BE ScriptingAPI 第1回講座 By @Button](https://qiita.com/Button/items/c0c0ed7c4d8b59d085f4)
[MinecraftBEでscriptingAPI！part1.棒で叩いたブロックをダイヤブロックに By @mcjixif](https://qiita.com/mcjixif/items/205e2555ae705e591bff)#質問形式で
## Win10版じゃないと使えないってホント？
クライアント側でしかできないことをしようとすると、クライアントもWin10版である必要がありますが、サーバー側のスクリプトだけ使う場合は、ホストがWin10版であれば、参加者はどんな環境でも参加できます## Realmsって使える？
「試験的なゲームプレイで遊ぶ」をオンにする必要があるため、Realmsでは使えないようです## 「試験的なゲームプレイで遊ぶ」って必要？
1.16.10の段階ではまだ必要です## nod
JavaScriptでカレンダーを作ってみた
JavaScriptの勉強でカレンダーを作ってみました。
機能的にしょぼいですが自分的には理解が深まっていい勉強になったと思います。まず自分で考えてわからない部分はこちらの記事を参考にさせていただきました。
https://qiita.com/kan_dai/items/b1850750b883f83b9bee##学んだこと
・if文の文法理解
・for分の文法理解
・Dateオブジェクトの使い方
・jsのメソッド他にもあるかもしれませんが自分の中ではこの辺の理解はかなり深まりました。
何より自分で考えてうまく動いた時の快感はマスターベーションと同等ですね。##機能
・今月から前月、来月をボタンで表示できるようにした。
・現在日時は青く表示。
・カレンダーの空欄部分が出ないようにした。
React.memo, useCallback, useMemoを理解する
# React.memo
ラップした関数コンポーネントの初回レンダー結果を記憶し、次回以降同じpropsが与えられた時に、記憶した結果を使用することで、無駄なレンダーをスキップできパフォーマンスを向上させることができる。
##### React.memoを使用しない場合
“` react
const CounterItem = ({ count, label }) => {
console.log(`${label}がレンダリング`);
return{label}: {count};
};const CounterList = () => {
const [count1, setCount1] = useState(0);
const increment1 = () => setCount1(c => c + 1);
const [count2, setCount2] = useState(0);
const increment2 = () => setCount2(c => c + 1);
return (
<>
Javascript_プロトタイプチェーン初心者覚書
Javascript_プロトタイプチェーンとObject.keys
初心者が理解するためweb記事などからメモを取っています。### プロトタイプチェーンとは？
[継承とプロトタイプチェーン](https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain)> JavaScript は動的で、 class の実装それ自体を提供しないことから、 Java や C++ のようなクラスベースの言語を経験した開発者にとって、やや紛らわしいものです（class キーワードは ES6 で導入されましたが、シンタックスシュガーであり、JavaScript は引き続きプロトタイプベースです）。
> JavaScript には1つだけ、継承が発生する要素があります。オブジェクトです。どのオブジェクトもプロトタイプと呼ばれる、他のオブジェクトへの内部的な繋がりを持っています。そのプロトタイプオブジェクトも自身のプロトタイプを持っており、あるオブジェクトのプロトタイプが
Microsoft製UIライブラリ FAST について
https://www.fast.design/
Microsoft製のUIライブラリ `FAST` の紹介
# 特徴
`FAST` は2つのデザインシステムがあります。
`FAST Components`
`FAST Element`また、Web標準であるWebComponentsを使用しているため、ReactやVue.jsなどの様々なUIフレームワークで使用できます。
## FAST Components
`FAST Components` はWebComponentsのUIライブラリです。
https://www.fast.design/docs/components/getting-started
導入に関しては、他のUIライブラリと比べて大差はないように思います。
スタイルのカスタマイズなどに関しては少し癖が
toJSONを用いて、JSONデータの返り値を制御する
##JSONデータの返り値を制御する
例）petというJSONデータの場合“`javascript
const pet = {
name: ‘Doggy’
}console.log(JSON.stringify(pet))
“`
↓
{‘name’:’Doggy’}
というJSONデータが返ってくる。★返り値となるJSONデータを、toJSONを使って制御することができる
“`javascript
const pet = {
name: ‘Doggy’
}pet.toJSON = function(){
return {}
}console.log(JSON.stringify(pet))
“`
↓
{}
というJSONデータが返ってくる。つまり
toJSONで上書きされた値が、pet定数のJSONデータとして認識される
##データベースのセキュリティ向上に利用
“`javascript
//mongooseを利用して、データベース型を設定
const mongoose = require(‘mongoos
【SNS顔出しNGの方も安心】顔に目隠しを付けてくれるアプリを機械学習APIで作ったよ
##作ったもの
SNS顔出しNGの方のために、
顔に目隠しを付けてくれるアプリを作りました。ウェブアプリなので、PC、スマホの機種は問いません。
こちらのリンクからどうぞ。
https://hardcore-ritchie-cca31e.netlify.app/###使用例
写真をアップロードすると、いい感じに目隠しを付けてくれます。
複数人でも大丈夫。
（普通の飲み会が、なにやら悪巧みしてそうな会合に変貌）
※コロナ禍より前の飲み会です。
というnpmパッケージを利用すると、プレーンテキストをハッシュ化することができる。・bcryptパッケージの使い方
“`javascript
const bcrypt = require(‘bcryptjs’)const myFunction = async() => {
const password = “password1234”const hadhedPassword = await bcrypt.hash(password, 8) //第一引数：ハッシュ化したい値、第二引数：roundを
aibo Web API と YouTube Player API を連携して、YouTube 動画の再生秒数に合わせて aibo にふるまいをしてもらう
aibo 界隈ではオフ会というものが定期的に開催されています。
内容は様々ですが、大体は aibo を室内で自由にお散歩させつつ
オーナーは aibo たちを見てニヤニヤしながらお話したり
aibo の名刺や情報を交換したりして交流を深める会です。最近はコロナの影響あって、開催するのもなかなか難しい状況なってしまいましたが。。
とあるオフ会で aibo をアイドルに見立ててダンスをしてもらおうという企画がありました。
当然のことながら、aibo はアイドルのように自ら曲に合わせてダンスするということができません。なのでどうしたかというと、オーナー皆さんの力を合わせて aibo の配置をシーン毎で変え
企画主の方に写真をとっていただいてダンスしてる風の動画を作っていただきました。
その時 aibo にダンスの振り付けができたら
JSONトークンで認証ができるようにする
##JSONトークンでできること
ある操作が、他の人からはできないようにする
例）
「削除」ができるのは「作成者」のみ、に制限する##トークン生成のためのnpmパッケージをインストール
・「jsonwebtoken」https://www.npmjs.com/package/jsonwebtoken
というパッケージを利用“`
$ npm install jsonwebtoken
“`
でインストール・jsonトークンを作ってみる
＜公式ドキュメントより＞
>使い方
jwt.sign(payload, secretOrPrivateKey, [options, callback])>(非同期) コールバックが与えられた場合は、 err または JWT でコールバックが呼び出されます。
>(同期) JsonWebToken を文字列で返します。
(中略)
>デフォルトの同期処理(HMAC SHA256)
>var jwt = require(‘jsonwebtoken’);
var token = jwt.sign({ foo: ‘bar’ }, ‘shhhh
Blobって
#### Blobって
[Blob – MDN Web Docs – Mozilla](https://developer.mozilla.org/ja/docs/Web/API/Blob)
Blob オブジェクトはファイルに似たオブジェクトで、immutable な生データです。データを表す blob は必ずしも JavaScript ネイティブなフォーマットではありません。File インターフェイスは Blob を基礎にしており[Blob](https://ja.javascript.info/blob)
ArrayBuffer とビューは ECMA 規格、JavaScript の一部です。
ブラウザには、さらに File API に記載されている高水準のオブジェクトがあります。特に Blob です。
Blob はオプションの文字列 type (通常は MIMEタイプ) と blobParts – 一連の他の Blob オブジェクト、文字列や BufferSources から構成されます。
コンストラクタの構文は次の通りです:
“`js
new Blob(blo
【JS】if文の中でletが使えない…
# やりたいこと
“`js
function fullname(first, last) {
let last_name = “”;
if (typeof last === “string”) {
last_name = last;
}return first + last_name;
}console.log(fullname(“山田”, “太郎”)); // => 山田太郎
“`この`let`を`const`にしたい。でも、再代入できないよなあ。ってことで
# 三項演算子ちゃん
“`js
unction fullname(first, last) {
const last_name = typeof last === “string” ? last : “”;
return first + last_name;
}console.log(fullname(“山田”, “太郎”)); // => 山田太郎
“`スッキリかけるけど、可読性が落ちる。ケースバイケース。
JSについて本気出して考えてみた
# はじめに
こんにちは**ばーん**です
今回はJavaScriptの言語仕様について書いていきます。JavaScriptの勉強会参加と(https://x-hack.connpass.com/)
その際に勧められた書籍を読んで、自分で得た知識を整理していきます。なるべく言語仕様書のように堅苦しくなく説明していくよう心掛けますw
## 今回の対象者
【JavaScriptは殆どオブジェクトである】という言葉の意味が理解できていない方
– そもそもオブジェクトって何？
– これってメソッド？プロパティ？
– console.log(“hello world”) が “hello world” を表示するまでに何をしているのか？といったことを解決していきたいと思います。
### ゴール
【JavaScriptは殆どオブジェクトである】が理解できる
具体的には下記の内容を理解できればOKだと思っています。
①「そもそもオブジェクトがどういうものか？理解する」
↓
②「JavaScriptがどういうもので構成されているか知る」
↓
③「どういう流れで普段自分たちが
【JS】分割代入のお作法（ES2015）
# 分割代入とは
配列やオブジェクトの値を複数の変数に代入することができる手法。人のコードを読んだ時に、知らないと脳みそがフリーズする。
# 配列の場合
“`js
const ary = [1, 2];
const [a, b] = ary;
console.log(a); // => 1
console.log(b); // => 2
“`# オブジェクトの場合
“`js
const obj = {
“key”: “value”
};
const { key } = obj;
console.log(key); // => “value”
“`変数名を省略した場合、key 名と同じになる
meta description にREADME のテキストがセットされてしまう現象
先日仕事で Web ページの不具合修正しデプロイ、その日は問題なく終了。そして数日が経ちました。
ある日マーケティングチームから Slack から一報が。> meta description に変な値が設定されているのですが、確認していただけますか？
さすがに驚いて確認したところ、コンフルエンスの URL が設定されていた…
これは完全に凡ミスで、いくつかの条件が重なって発生した問題です。後述しますが、普通に `create-nuxt-app` を使ってプロジェクトを立ち上げた場合は大丈夫だと思います。
# 状況および事象
まずは各ファイルの設定です。“`js:nuxt.config.js（一部抜粋）
…head: {
title: process.env.npm_package_name || ”,
meta: [
{ charset: ‘utf-8’ },
{ name: ‘viewport’, content: ‘width=device-width, initial-scale=1’ },
{
