express-generatorで作成したプロジェクトでTypeScriptを使用する

今回は、express-generatorでプロジェクトを作成し、一部でTypeScriptを使用できるように環境構築を行います。

express-generatorを使用してプロジェクトを作成するまでは、下記を参照ください。

https://qiita.com/shintaro_secual/items/b6e561c1255e4146eeaa

あらかじめ、npm、node、express-generatorをインストールしている前提で記載させていただきます。

## 環境
■ Nodeのバージョン
v14.14.0
■ 使用OS
MacOS Big Sur：バージョン11.6
■ 総合開発環境
Visual Studio Code

## プロジェクト作成

“`
% express –view=ejs types

create : types/
create : types/public/
create : types/public/javascripts/
create : types/public/images/
create :

Word由来原稿の注アンカーを付け直す

Word文書の原稿をInDesignに直接配置するとインデントやルビなどが反映されるので便利といえば便利なのだけど、注のアンカーは不可視文字になり、しかも余分な範囲まで親文字列になっていることがある。そんなアンカーを付け直すスクリプトを書いてみた。

“`javascript
var tyuidxStyle = app.activeDocument.characterStyles.item(“注合印”);
//var noStyle = app.activeDocument.characterStyles[0];
var selString = app.activeDocument.selection[0];
var paraDefaults = selString.paragraphs[0].appliedParagraphStyle.properties;
var oyamozi = selString.characters;
var ruby = selString.rubyString;

var newoyamozi = oyamozi.itemByRange(0,0);

サードパーティーを用いない Google Apps Script と Javascript によるファイルピッカー

# 概要

この投稿ではサードパーティーを用いない Google Apps Script と Javascript によるファイルピッカーを紹介します。これまでの問い合わせで、開発者側の仕様でサードバーティを使用しないファイルピッカーがあれば便利とのご意見が多かったため、このようなサンプルを作成しました。このファイルピッカーの特徴は、次の通りです。

1. 特定のフォルダ下のファイルを取得できる。
2. 自分のアカウントの Google Drive だけでなく、サービスアカウントの Drive も利用できる。

リポジトリは[こちら](https://github.com/tanaikech/File_Picker_using_Google_Apps_Script_and_Javascript_without_3rd_party)です。

# デモ

![fig1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133383/e52a3463-43fa-df19-0b85-6966ac55b7eb.gif

【JavaScript】関数とオブジェクト⑬　関数コンストラクター

#はじめに

Udemyの[【JS】ガチで学びたい人のためのJavaScriptメカニズム](https://www.udemy.com/course/javascript-essence/)の講座の振り返りです。

前回の記事

https://qiita.com/nao0725/items/cbea32312fe4f5f31596

#目的

* 関数とオブジェクトについての理解を深める

#本題
###1.関数コンストラクター

####使い方

““`js
//　new 演算子で定義する
// 基本的に大文字で始める（このFunctionの部分を関数コンストラクターという）
// 引数は文字列で定義
// 一番最後の引数は関数宣言でいうところのボディ部分
// 関数fn1に入れる
const fn1 = new Function(“a”, “b”, “return a + b”);
// 値を入れて結果を出力する
const result = fn1(1,2);
// 結果は3と出力される
console.log(result);

// 関数宣言に直すと以下の通りと

8アプリモバイル学習コード

今日、携帯電話の力強い成長により、多くのアプリケーションやWebサイトが生まれました。 コーディングの学習を容易にします。 例：アプリを使用して、仕事に行くなど、暇なときに学びたいプログラミング言語について詳しく知ることができます。
#SoloLearn
SoloLearnは、Python、Java、Javascript、C ++などの多くの一般的なプログラミング言語を簡単に学習して操作するのに役立つ場所です… 2つの電話回線用の2つのバージョンはAndroidとiOSです。 さらに、インストールしたくない場合は、オンラインで簡単に習得できるWebアプリも入手できます。 あなたが何か新しいことを学んだ後、それは私たちがより長く覚えるためにその知識に関連した演習を提供します。
[SoloLearn](https://www

「あけちゃダメ」って書かれてて、開けたら反応する箱を作りたい。（未完）

#子どもが大好きな「ぜったいにおしちゃダメ？」
子どもが大好きな絵本の一つが、こちらの「ぜったいにおしちゃダメ？」です。

https://www.ehonnavi.net/ehon/116213/%E3%81%9C%E3%81%A3%E3%81%9F%E3%81%84%E3%81%AB%E3%81%8A%E3%81%97%E3%81%A1%E3%82%83%E3%83%80%E3%83%A1%EF%BC%9F/

子どもに限らず、「押しちゃだめ」と言われれば押したくなるし、「開けちゃダメ」と言われれば開けたくなるって気持ちがわかる方は多いと思います。

そこで今回、obnizとLINE Bot、それに100均で買った箱を用いて、開けちゃいけない箱を開けたら光って音が鳴り、さらにLINEにお知らせがくる仕組みを作ろうと思いました。
が、エラーがクリアできずLINE Botとの連携はできませんでした。

#環境
**ソフトウェア**
Visual Studio Code v1.60.2
Node.js v16.10.0

**ハードウェア**
[obniz Board 1Y](https

JavaScriptで配列内オブジェクトの文字列ソート

# 概要
JavaScriptの文字列ソートで少しハマったので記事にします。

## やりたいこと

“`JavaScript
//before
var array2 = [
{label:’apple’},
{label:’かきくけこ’},
{label:’computer’},
{label:’あいうえお’},
{label:’book’}
];
//after
/*
[
{label:’apple’},
{label:’book’},
{label:’computer’},
{label:’あいうえお’},
{label:’かきくけこ’}
];
*/
“`

## 単純な配列ならうまくいく

“`JavaScript
var array1 = [‘apple’,’かきくけこ’,’computer’,’あいうえお’,’book’];
array1.sort();
//result
/*
[‘apple’, ‘book’, ‘computer’, ‘あいうえお’, ‘かきくけこ’]
*/
“`

## 連想配列のソートどうやるんだっけ？

「コアラのマーチずっとまもるくん」をLINEBotと連携したい（obniz×LINE Bot）

#「コアラのマーチ”ずっと”まもるくん」に進化
[前回の記事](https://qiita.com/Izumi0711/items/67beedef9df05dfa32c5)で紹介させていただいた
7秒の儚い命だった「コアラのマーチまもるくん」

[Q&Aで解決方法](https://qiita.com/Izumi0711/questions/dbf333411b955403bbfd)をいただき、
ずっと距離を測り続けて、ブザーが鳴らせる
**「コアラのマーチ”ずっと”まもるくん」**に無事に進化を

nuxt3のuseStateでページ遷移しても消えない状態管理。vuexもpluginも不要。

# 概要
* nuxt3はuseStateでグローバルかつページ遷移しても消えない状態管理が可能。（vuex不要）
* 型推論が簡単に効いて快適・・・！
* 公式（[こちら](https://v3.nuxtjs.org/docs/usage/state/)）ではぱっと見「pluginの中のdefineNuxtPlugin内で定義」の様に読めるが、pluginの中でなくてもよい。
* 公式はssrContextを使用しようとしているからpluginの中で定義しているだけ・・・！
* 公式ではstring（プリミティブな値）を例にしていたが、もちろんオブジェクトも可能。
* １ページ内のリアクティブなメンバーを一発で丸ごと管理して、型推論も効く・・・！
* ライフサイクルはjavascirptのグローバル変数と同じなので、ブラウザリロードなどで消える。
* これはvuexなどと同様。

# 実装時の要点
* “`useState<[型]>(“[識別子]”, [初使用の際に初期値を返す関数（省略可）])“`
* “`reactive(・・・)“`と組み合わせることも可

`

ママのテンション爆上げ!?　obnizで娘からママへX’masプレゼント

## ママもX’masプレゼント欲しい!

　と、いうことで「子供からどんなプレゼント欲しい？」とママにヒアリング。

　その結果・・・

　**「ここまで育ててくれてありがとう」と子ども言われたい!**

　ママならでは。「パパからは何が欲しい？」なんて聞く訳もなく作業開始。

## 成長 × 感謝　＝　身長が伸びた × 感謝の言葉

　obniz×LINEbotを組み合わせて

:::note
①LINE×obniz距離センサーで「娘が自分で」身長を調べる
②マトリックスLEDでメッセージを流し　子供からママに言ってもらう
:::

　obnizの完成形はこちら

　obniz×距離センサー×マトリックスLED をカチューシャにくっつける


　親が身長を測っても面白くないので、LIN

【React】React Routerを使って簡単に画面遷移をしよう

# Reactで画面遷移をしよう

Reactで画面遷移をすることが多くあるので方法をまとめていきます。
Reactの画面遷移には、“`React Router“`を使うと簡単に作成することができます。
基本的なルーティング設定の書き方と、分割方法などまとめます。

https://reactrouter.com/

## React Routerの導入

create-react-appでプロジェクトを作成した後、はじめにReactRouterのパッケージをインストールします。

“`sh
$ yarn add react-router-dom
“`

## 画面遷移するためのページを用意しよう

試しに画面遷移先を作成したいと思います。今回はHomeとPage１〜Page３を用意しました。

“`react:/react-basic/src/components/Home.jsx
export const Home = () => {
return (

Home

);
};

“`

“`

obnizとLINE Botを組み合わせて、ビールの飲み頃温度を教えてくれるIoTに挑戦！

##ビールの温度をを教えてくれるLINE Bot
**ビールの温度を教えて！**と入力すると、ビールの温度を教えてくれます。毎度入力するのが面倒なので、リッチメニューを使い、タップ1回で返してくれるようにしました。

使用風景も載せておきます。
温度を教えてくれるタイミングで、**ビールの温度が4℃以下ならLEDが黒色に光る、4℃以上なら青色に光ります。**
かわいいビールケースが売っていたのでついつい買ってしまいました!
（ちょいおふざけ入れるとテンション上がりますよね笑）