JavaScript関連のことを調べてみた2022年04月18日

ShopifyデータをHTMLベースでJSへ渡す方法

今回は、どうしても面倒だった、Liquid　data ＞ jsへjsonで渡す ＞ jsでHTMLテンプレートにデータを入れて出力 の工程で楽出来ないかと思い…試行錯誤した結果、上手くいったので共有したいと思います。

なぜ、この方法を考えたかと言うと、たまにある一覧データでのもっと見るボタン。
Liquidでの実装も可能だが、独自カスタムをした場合、jsを組み込む必要があるため、どうしても一旦は全データをjsへ渡す必要がある。
今までは、Liquidでjsonを作成し、それをjsで加工し、HTMLへ流し込むとやってはいたが…。jsがスパゲッティ化してしまう。
というか、条件に応じてどれだけでも存在するロジックを組み、コードを書くのが面倒くさかった。

理想としては、Liquidで判定 ＞ Liqiud　dataをHTMLに入れる ＞ HTMLごとjsへ ＞ jsは必要な分だけ出力。
こいつができたので、以下で説明していきます。
## まずはコードの共有
今回は注文履歴一覧での、もっと見る実装だったのでcustomer.ordersで実装しています。
“`
{% paginate c

TypeScriptのfindでundefinedが返らないようにする方法

## findの使用例

findとは、提供されたテスト関数を満たす配列内の**最初の値**を返すものです。

“`example.ts
const array1 = [1, 2, 3, 4, 5];

const result = array1.find(element => element > 3);

console.log(result); // 4
“`
例のコードだと、配列の要素で3より大きい最初の要素は４なので、resultには４が返ります。

別に何の問題もないコードに見えるのですが、resultにカーソルを当ててみます。


**え、undefined…？**

そうなんです。findは、テスト関数を満たす配列内の要素がなかった場合に、undefinedを返すようになっているの

「決められない」人のためのラーメン激推しBot

## 「どのお店にしよう」を解決します
突然ですが、私はラーメンが大好きで、よく食べに行っています。
ただ、生来の優柔不断な性格のせいで、いつもどのお店にいくか迷ってしまうのです。

**「誰かが自分に”ここだ！”というお店を強くプッシュしてくれたら迷わずに済むのに…」**

そこで、エリアを指定するとその付近のお店を一店だけ選んで、そのお店を”激推し”してくれるLINE Botを作ってみました！

## ラーメン激推しBot
まずはこちらをご覧ください。

場所を指定すると、その付近のラーメン店を"激推し"してくれるLINE Botを作りました
これでもうお店選びに迷わなくてすむぜ?#ラーメン#protoout pic.twitter.com/mAFnJEPzgd

— KendoLab (@kelab_8) April 16, 2022

おすすめのラーメン屋を紹介するLINE Botは世の中に数あれど、選ばれた一店だけをここまで激推ししてくるBotはないんじゃないでしょうか。(多分)

それでは、以下実装について解説していきます。

## 環境
Node-RED（Heroku環境上で実装）
JavaScript
[LINE Massaging API](https://developers.line.biz/ja/services/messaging-a

Magicodeという簡単に稼げるエンジニア向けブログサービスを作ったので使って欲しい


# はじめに
[「Jupyter Notebookを一瞬で記事にできて誰でも収益化できるサービス作ってみた」](https://qiita.com/Taiki92777/items/f408846297526addba4f)という記事を以前書きましたが，そのサービス名をNoteboxから**Magicode**に変えて再リリースしました！

https://jp.magicode.io/

https://qiita.com/Taiki92777/items/f408846297526addba4f

# Magicodeとは？
QiitaさんやZennさんのようなエンジニア向けのブログサービスです。Magicodeという名称は，magicとcodeを組合せた造語です。基本的にはマークダウンで自分のブログが書けるサービスですが，特殊な機能が以下の４つほどあります。

# 機能1. ブラウザ上でコードを実行できる

Exressを使って占いAPIを作りましょう

# expressを使ってAPIを作りましょう

“`
curl https://tarot-system.herokuapp.com
“`
まず出来上がったものはこちら。
シングルカードのタロット占いができるAPIです。

***
１.まずは適当にディレクトリを作成しましょう。
2.そのディレクトリに移動して
“`
npm init
“`
このコマンドを実行します。
色々質問されますが、とりあえずEnter連打でOKです。

3.次にExpressをインストールします。
先程と同じく１で作ったディレクトリで
“`
npm install express –save
“`
このコマンドで下準備は完了です。

4.index.jsファイルを作成し次のコードを記述します。
“`javascript
const express = require(‘express’);
const app = express();

app.set(‘port’, (process.env.PORT || 3000));

app.get(‘/’, function(request, res

jQueryで指定文字以上でボタンを非活性にする

# [何をするか](#-2.何をするか)
コンテンツを登録する際やプロフィールをDBに登録する際に、最大文字数を制限したい場合があります。
その際にバックエンドでバリデーションを行っても良いのですが、そもそもフロント側でsubmitできない様にしてあげた方が親切ですね。

まず下の様な簡単なフォームがあるとする。

“`index.php

@csrf

内容(255文字まで)

元記事を表示 JavaScript Proxyの使い方 ## Proxyとは Proxyを使うことで元のObjectのproxy(代理)として処理を中継できます。 元の処理以外の処理を追加することで、元のObjectに影響を与えずにObjectを再定義することができます。 ## Proxyの作成 “`js //Proxyオブジェクトのコントラクタの第一引数に元のObject、第二引数に元のObjectへの追加処理(ハンドラ)をわたします。 const proxy = new Proxy(target, handler); //追加処理がない場合でも空のハンドラオブジェクトが必要です。 const array = [1,2,3,4,5]; const sample_proxy = new Proxy(array, {}); console.log(sample_proxy); // => [ 1, 2, 3, 4, 5 ] “` ## トラップの設定 ハンドラオブジェクトにトラップ(=メソッド)を設定することで処理を割り込ませることができます。 “`js const student = { name: ‘Tanaka’, a 元記事を表示 JavaScript コールバック関数の使用例 ## コールバック関数とは 関数の引数に関数を渡すことで実現されます。 呼び出し先で実行してもらう関数と考えてください。 コールバック関数を使うことで、ある処理が終わったら次の処理を実行、次の処理が終わったらその次といった具合に 処理を連続して記述していくことができます。 ※多用すると可読性が悪くなる(=コールバック地獄)ので注意が必要です。 ## mapを使用した実装例 “`js const array = [1,2,3,4,5]; //引数の数値を2乗する関数 const squareNumber = (number) => number * number; //mapメソッドを使ってsquareNumber関数（ここではコールバック関数)を呼びます const new_array = array.map(squareNumber); //これは以下と同じ動きです array.map((number) => number * number); console.log(new_array);　// => [1,4,9,16,25] “` mapを使い配列の要素を1つずつ 元記事を表示 【備忘録】.phpから別の.phpにある変数を参照する web開発初心者の備忘録です。 オリジナリティあふれるソースコード。 # ポイント require関数を使って.phpを読み込むことで、記述されているグローバル？な変数を参照できる。 https://www.php.net/manual/ja/function.require.php # ファイル構成 “` IISでルートに設定しているフォルダ 　└ test 　　　├ main.html 　　　├ main.php 　　　├ lib.php 　　　├ info.php 　　　├ main.js 　　　└ jquery-3.6.0.js “` # ソースコード “`html:main.html