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

ReacrtNativeとは何か

## はじめに

こんにちは！20歳大学2年生の小川と申します！

最近ReactNativeを勉強し始めたので、メモがてら情報発信していけたらなと思います。

私自身も勉強中なので曖昧なところもあるかと思いますが、初心者目線でわかりやすい記事を書いていければなと思います！よろしくお願いいたします！

では、さっそくいってみましょう！！

[ReactNative 公式より](https://reactnative.dev/)

##ReactNativeとは？

さっそく本題に入っていきましょう。ReactNativeとは何なのでしょうか？

ReactNativeとは、Facebook社が開発したiOSとAndroidの両方のアプリを作ることができる、JavaScriptのライブラリです。ライブ

SmartDeviceLink WebEngine Projection mode を試す

## Docker はてきとうに用意してね

“`bash
$ docker run -d -p 12345:12345 -p 8080:8080 -p 8087:8087 -p 3001:3001 –name core smartdevicelink/core:latest
“`

これで、http://localhost:8080 でひらくのは、sdl_hmi で、なんとなくカーナビっぽいHMIなんだけど、実験つかいにくいというか古いUI.

というか、docker hub で build されたイメージが、2017年とかでふるかった。orz

てことで

“`bash
$ git clone https://github.com/smartdevicelink/sdl_core_docker.git
$ cd sdl_core_docker
$ cd master
$ docker build .
“`
エラー出た。めんどうだ。

## Generic HMI をためす

手抜きでごめん。ぼくは、Windows 10 の WSL な Ubuntu でためした。
Mac

【JS】２次元配列を１次元にする方法。reduce & concatで多次元配列の次元を１つ下げる方法。

reduceとconcatを使うことで２次元配列を１次元にすることができる。

##できること

`[[1,2], [3,4]]`のような配列を、内側のカッコを外して`[1,2,3,4]`とすることができる。

##実例

“`js:
arr = [[1, 2], [3, 4], [5, 6]]

res = arr.reduce( (newArr,elem) => {
return newArr.concat(elem)
}, [] )

console.log(res) //[1, 2, 3, 4, 5, 6]
console.log(arr) //[[1, 2], [3, 4], [5, 6]] 非破壊
“`

– `配列.reduce( (処理結果, 要素) => 処理, 初期値 )`
– reduceは指定した配列の要素を一つづつ取り出し、記述した処理を実行し、最後の処理結果を返す。（値は一つ）
– 第１引数が処理結果、第２引数が配列の一つ一つの要素が入る変数。
– 処理の後ろに「 , 」をつけて処理結果の初期値を指定できる。

Laravel6 表示するビューにJavaScriptを含める

# 目的

– LaravelのビューにJavaScriptのコードを含めて動的なページを作成する方法をまとめる

# 実施環境

– ハードウェア環境

| 項目 | 情報 |
| — | — |
| OS | macOS Catalina(10.15.5) |
| ハードウェア | MacBook Pro (13-inch, 2020, Four Thunderbolt 3 ports) |
| プロセッサ | 2 GHz クアッドコアIntel Core i5 |
| メモリ | 32 GB 3733 MHz LPDDR4 |
| グラフィックス | Intel Iris Plus Graphics 1536 MB |

– ソフトウェア環境

| 項目 | 情報 | 備考 |
| — | — | — |
| PHP バージョン | 7.4.8 | Homebrewを用いてこちらの方法で導入→[Mac HomebrewでPHPをインストールする](https://qiita.com/miriwo/items/cd54077aad7e139cf518) |
|

「好みの問題」 存在しない説

# はじめに

皆さん、コードレビューで「好みの問題ですが、〜」と言ったことや、言われたこと、ありませんか？

あるいは、言いはしなくとも
「（これは好みの問題だから指摘しなくてもいいか…）LGTM！」
と片付けてしまったことはありませんか？

「好み」と言われると、蕎麦とうどんどっちが好き？みたいな話に聞こえますが、
実際はそんな好き嫌いで片付けずとも、みんなちゃんとコードの書き方にロジカルな理由を持っているんじゃないか？
とたまに思っています。

多分「好みの問題」と曖昧に片付けられてしまうケースの多くは、
コードを書いている本人としても、「なぜ自分はその書き方にしたいのか？」が明確になっていないのかもしれません。

「好む」ということは、きっと何かしらの好む理由（そちらのほうが優れたコードであると思う理由）があるはずで、
それを明確にしていけば、自分にとっても理解が深まるし、より良いコードレビューができるんじゃないか？
というのがこの記事で伝えたいことです。

# 例

新人エンジニアAさんが、以下の仕様を実装したときのコードレビューを例に考えてみます。

“`
仕様書: 「掲

React 未学習者 Q.「React って学習コスト高いんでしょ？」A.「

いやいやいやいや！高くない高くない、全く高くない！
簡単！React なんてホント簡単だから！！超簡単だよ？
ほら、これみて！

“`html

Hello world

“`

これ React で表示するなら、

“`jsx
ReactDOM.render(

Hello world

,
document.getElementById(‘root’)
);
“`

ってするだけだからね？
`ReactDOM.render([描画したい要素], [描画する位置])` って書いてるだけだからね？

# Q.「コンポーネントって難しいんでしょ？」A.「

いやいやいやいや！難しくない難しくない、全く難しくないって！
簡単！コンポーネントなんてホント簡単だから！超簡単だよ？
ほら、これみて！

“`jsx
const App = () => {
return

Hello world

;
}
“`

これ App って名前付けたコンポーネントね。
コンポ

11tyで作る最低限の静的サイト

[Jamstack Advent Calendar 2020](https://qiita.com/advent-calendar/2020/jamstack)の3日目の記事です。

## 最小限の静的サイト
https://hatebu.noplan.cc

1リクエスト（最小限）

半年ぐらい前に11tyのドキュメントを読んでから、そのうち試したいなあと思っていたので、以前に作ったサイトを11tyで書き直しました。11tyはシンプルに必要な機能が揃っていて、文字通りの静的サイトジェネレーターの仕事をしてくれる所がよいです。

ドキュメントがわかりやすいので、そっちを読んでもらった方が確実ですが、ドキュメントを読むのが面倒くさい人もいると思うので、やったことをまとめてます。Markdownで書けるブログのテンプレー

JS 関数　後編　(JSアウトプット)

##あいさつ
初めての人は初めまして！知っている人はこんにちは！
中学生バックエンドPGのAtieです！
今回は今までの奴と比べて難易度が跳ね上がります
それでは！

##匿名(無名)関数と関数式
匿名関数と関数式について解説していきます！

匿名関数とは”関数の名前がなくても実行できる関数”です
コールバック関数に一度きりで使われる場合によく使われます
普通の関数と匿名関数の文法を比べてみました！

“`main.js
/*普通の関数*/
function 関数名 (仮引数1,仮引数2) {
//処理
};

/*匿名関数*/
const 変数名 = function(仮引数1,仮引数2){
//処理
};
“`
違いは名前が関数名なのか変数名なのかの違いです
関数式は関数を変数に入れる式です

“`main.js
const 変数名 = function(仮引数1,仮引数2){ //関数式
//処理
};
“`

匿名関数も変数名で実行できます

“`main.js
変数名();
“`
##コールバック関数
コールバック関数とは関数の引数に渡さ

UUIDバージョン4を生成する

UUIDにはいくつかの変種やバージョンがあるが、その中でも*RFC 4122*の中で定義されているバージョン4(以下v4)は単純に乱数で生成するという非常にシンプルな仕組みである。

そのようなシンプルさのため自前で書くのも容易である。
実際にJavascriptでも書いてみた。

“`JavaScript:UUID生成コードの実装例1
class UUID {

static #uuidIte = ( function* () {

const HEXOCTETS = Object.freeze( [ …Array(256) ].map( ( e, i ) => i.toString( 16 ).padStart( 2, “0” ).toUpperCase() ) );
const VARSION = 0x40;
const VARIANT = 0x80;

for (;;) {

const bytes = crypto.getRandomValues( new Uint8Array( 16 ) );
yield “

Railsで地図投稿機能　地名検索　一覧表示　GoogleMapsAPI(JavaScript)

#作る機能
######・投稿する際に緯度と経度を保存する
######・すべての投稿内容を一つの地図上で一覧表示させる
######・マーカーをクリックすると投稿の内容が出る
######・地図上で詳細ページまでのリンクを表示させる

#完成デモ
新規投稿画面

一覧ページ

#それでは作っていきましょう！

まずは先人の知恵を借ります。
以下の記事を参考に最後まで作り上げてください！

【Rails6 / Google Map API】初学者

Google Mapsに複数のマーカーと情報ウィンドウを表示

#はじめに
Google Maps Platformを利用してGoogle Mapsに複数のマーカーと情報ウィンドウを表示する方法をまとめました。
テーマは「javascript初心者によるjavascript初心者のための解説」です。丁寧すぎたかも。

#前提

Maps JavaScript API と Geocoding API のAPI KEYを取得している前提で進めます。
未取得の方は下記などを参考にしてみてください。

– [Google Maps API を使ってみた](https://qiita.com/Haruka-Ogawa/items/997401a2edcd20e61037 “Google Maps API を使ってみた”)
– [Get an API Key(Google Maps Platform)](https://developers.google.com/maps/documentation/javascript/get-api-key?hl=ja “Get an API Key”)

##バージョン
ruby 2.6.3
Rails 6.0.3

文字列の中に変数？テンプレートリテラル

変数に値を定義する際に、**文字列の中に変数を含める**方法

**テンプレートリテラル**
—

テンプレートリテラルは、JavaScriptの構文です。**バッククォート**で囲むことで、文字列内に挿入することができます。

特徴
・文字列の中に変数を埋め込むことができる
・改行を入れることができる
・HTMLの要素を作成することができる

“`csharp:テンプレートリテラル使用
const name = “John”
const age = 25

const introduction = `私の名前は${name}、${age}歳です`
console.log(introduction)
// => 私の名前はJohn、25歳です と出力される

“`

“`csharp:テンプレートリテラル使わない
const name = “John”
const age = 25

const introduction = “私の名前は” + name + “、” + age + “歳です”
console.log(introduction)
// => 私の名前はJohn

【JavaScript】基本的な書き方

JavaScriptは、ブラウザを「動かす」ためのプログラム言語。

# 基本的な書き方

#### Javascriptを書く場所

scriptタグは、bodyタグの閉じタグのすぐ上に書く。
（’use strict’と書いておくと、ブラウザが厳密なエラーチェックをしてくれる）

“`index.html

“`
外部ファイルとして読み込む。

“`index.html

“`

#### 文字列を出力する

コンソールに文字列を出力。

“`main.js
console.log(‘Hello World’); //出力結果：Hello World
“`
（文字列の連結は、’文字列’ + ‘文字列’）

– \ … 直後の記号を文字列として読み込ませる
– \n … 文字列に改行を入れる
– \t … 文字列にタブを入れる

※JavaScriptでは、数値からなる文字列も数値として計算される

Everything about Cancellation of Promises

以下は英語版です。日本語版はまだ準備中です。申し訳ありません。今日中に公開するつもりです。

In this **thorough** post about JavaScript and Node.js you can learn about the history of cancellation of [Promises][Promise]; why it is relevant to Node.js and what you should be aware of when you try to use it with the [async/await][async-await] API.

This post is for you if you have a good insight into the `JavaScript` Promise API and some experience with `Node.js`.

## History

Ever since the [Promise][Promise] API was introduced to browsers in

[新感覚パズルゲーム]type-challenges初級編へTry

# はじめに
昨日のKPTで激ムズtype-challengesについて盛り上がったので、今度はしっかり学びながら問題を解いていき、まとめていこうと思います。
[type-challenges](https://github.com/type-challenges/type-challenges/blob/master/README.md)

# さっそく
## warm up
[問題1](https://github.com/type-challenges/type-challenges/blob/master/questions/13-warm-hello-world/README.md)

* 僕の解答↓

“`anser.ts
/* _____________ Your Code Here _____________ */
type HelloWorld = string // expected to be a string

/* _____________ Test Cases _____________ */
import { Equal, Expect, NotAny

BootstrapでValueつきDropdown

##例
### HTML
“`html

性別

男性
女性

“`
### Javascript
“`javascript
$(function () {
$(‘.dropdown-menu .dropdown-item’).click(function () {
var v

【個人アプリ作成】情報管理アプリ制作4日目

Toshiです！ ああ、、、、２日間も取り組みをできていなかった。。。

リスタートせねばですね。がんばります。

#今日やったこと

>・メイン画面のイメージ、イメージを検索、デザイン
・タグ付機能の勉強
・タグ検索機能の勉強
・タグメンション機能の勉強

それでは書いていきます。自分のインプットをアウトプット。

#メイン画面のデザインについて

初日ではログイン画面と新規登録画面と機能を実装しました。画面のイメージはあれからは少し離れてもいいのかなと考えています。
学校のメンバーがデザインに関してすごくいい情報共有をしてくれて参考に載せます。

・【初心者必見】Bootstrapのテンプレートの使い方を解説 ＜Bootstrap>
https://blog.codecamp.jp/bootstrap-template-howto

・おすすめのChrome拡張機能「Wappalyzer」を紹介！色んなサービスのプログラミング言語やフレームワークが丸わかり！ ＜しまぶーのIT大学さん＞
https://youtu.be/q92r_WrQjoY

JS どんな関数でも部分適用するpartial関数

作ったら、lodashにも存在した、みたいな。まあいいけど。

# 部分適用化関数

“`js
const testFunc = (value1, value2, value3) => {
return `1:${value1} 2:${value2} 3:${value3}`;
}
console.log(testFunc(‘A’, ‘B’, ‘C’)); // “1:A 2:B 3:C”

const partial = (func, applyArgs) => {
return (…funcArgs) => {
const args = […applyArgs];
for (const funcArg of funcArgs) {
const emptyIndex = args.indexOf(partial.empty);
if (emptyIndex !== -1) {
args[emptyIndex] = funcArg;
} else {
args.push(funcAr

Garmin Connectから自分のデータを取得する~ランサムウェアへの超個人的抵抗~(その1)

# 私事からの導入で恐縮ですが
家族から禁煙外来を受診しろという圧がものすごく、先日あまり気乗りしないながらも受診したんですよ。受診の際、お医者さんから言われたのが、禁煙したいという目的がないとダメですよ的な話でした（当たり前）。
いや、禁煙したい・できたらいいなという漠然とした思いはあったんですが、どうやら私の場合はその思いが漠然としすぎていてダメなようで、もともと家族からの圧で嫌々受診したという背景もあり、これは自分なりのモチベーションを作ることが必要だな、と強く思ったのがこの記事を書くことになった背景です。

# モチベーションを作る
やっぱり20年以上たばこ吸ってるとですね、運動した時とかに心肺能力の衰えが結構深刻だったりするんですよね。個人的に禁煙できたらいいなぁという漠然とした思いはほぼこれが理由でした。
なので、この思いをより強いモチベーションに昇華すべく、活動量計なるものを購入してみました。妻にも承諾を得てしまったので退路を断つという意味もありますね。
単に心拍とかだけでなく、GPSのログとかも重要視してGarminの時計の安めのやつを購入しました。

# Garmin

Kotlin/JSとは何者だ！！

# はじめに
今回はKotlin/JSについてまとめていきます

# Kotlin/JSとは
[Kotlin/JS Overview](https://kotlinlang.org/docs/reference/js-overview.html#kotlinjs-overview)

“Kotlin/JSはKotlinのコード、ライブラリ、JSと互換性のある依存関係をトランスパイルする機能を提供します“

つまりKotlinで書いたコードがJavaScriptにトランスパイルされるのです。

これはブラウザ上でも動きますし、node.js上でも動きます。

Kotlin最強では？？？

# 使用例

こちらも公式ドキュメントに載っています。

[Some use case for Kotlin/JS](https://kotlinlang.org/docs/reference/js-overview.html#some-use-cases-for-kotlinjs)

### Webフロント
DOMを作成し、ブラウザAPIやWebAPIを活用できます。
また型安全なReactの開発