aaa

“`

“`sample.js
$(functio

ReactでLeafletとMapbox GL JSとOpenLayersの開発環境を構築してみた




![mapboxgljs.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60444/ac9af97c-ba16-82ae-e0fe-38e32427088e.

? GitHubプロフィールをイケイケにするトロフィー(活動実績)が表示できるサービスを開発した話

# 開発・公開したサービス

リポジトリ： https://github.com/ryo-ma/github-profile-trophy

## デモ

## ? Github Profile Trophy

Githubのプロフィールをイケイケにするのが最近流行っております。([github-readme-stats](https://github.com/anuraghazra/github-readme-stats)、[GitHub Readme Stats を利用してGitHubプロフィールをカッコよくする](https://qiita.co

MATLAB のニューラルネットをブラウザで動かす: JavaScript を App Designer でデバッグ

# はじめに

前回、ブラウザ上で手書き文字の認識を行ってみましたが、精度がいまいちなので結果として「数字を正しく認識させる」ゲームとなってしまっていました（笑）
試してみたい方はこちらからどうぞ。[Github Pages: Hand-written Digit Prediction on Browser](https://minoue-xx.github.io/handwritten-digit-prediction-on-browser/)

参照：[MATLAB のニューラルネットをブラウザで動かす: MATLAB > C++ > WebAssembly の自動変換](https://qiita.com/eigs/items/48e782baf3ae617190cb)

## 精度が悪い理由？

もちろん学習画像では悪くない分類精度でした。なので学習に使った手書き文字画像と、ブラウザ上で書かれる手書き画像の特徴が違うんだろうなと推測。**ただ JavaScript 側での画像データの確認は自分には大変難しい・・。**

なので JavaScript (HTML)

[JavaScript] 英語動画 クロージャー(closure) をわかりやすくまとめてみた　No.2

Youtubeチャンネル　Techsithの45万回以上再生されているクロージャー(Closure)に関する動画を日本語でまとめてみました。

#クロージャー(Closure)とは

以下のコードでは、仮引数(parameter)passedが設定してあり、functionの中には定数inner=2があります。
とてもシンプルです。実引数(arguments)に3を入れることで5が出てきますね。

“`
const addTo = function(passed) {
const inner = 2;
return passed + inner;
};

console.log(addTo(3));
“`

しかしJavascriptでは、この仮引数passedを設定しなくても5をconsole.logで出すことが可能なんです。
functionの上にconst passed = 3を置いてみましょう・・・　5が出てきます

“`
const passed = 3
const addTo = function() {
const inner = 2;
return

リスト処理関数（cons,car,cdr,atom,list）実装例まとめ

拙作記事『[7行インタプリタ実装まとめ](https://qiita.com/ytaki0801/items/f56bf2c84b522b51b64a)』について，そろそろSchemeとPython以外にも対応しないとなあと思っていろいろ整理した結果，『S式入力の実装部分がほとんどじゃないこれ？』→『あと，リスト処理内容に基準を設けてないと言語ごとに実装方針がバラバラになりそう』となり，とりあえず『`cons` `car` `cdr` `atom` `list`が使える』ようにする記述例を先にまとめていくことにした次第．ターゲット言語上での[純LISP](https://ja.wikipedia.org/wiki/%E7%B4%94LISP)機能実装に近いとでもいいますか．

※Python版については，これを用いたS式入出力記述例も掲載しています（他の言語版も揃ったら別記事に移すかも）．

#仕様
* [ドット対（cons cells）](https://ja.wikipedia.org/wiki/Cons_(Lisp))を定義
* アトムは全て文字列，空リストはNULL
* `co

15分縛りで非同期, Promise, async/awaitを教える

## この記事を書いた経緯

　この記事は、2020/08/19に会社で実施した「まつもとさん勉強会」（※Ruby生みの親Matz氏の前でLTしてコメント貰ったりMatz氏に質問したりする会）で私が発表した内容をもとに文字起こししたり、多少ブラッシュアップして記事化したものです。約15分の時間制限の中で、JavaScriptの`Promise`や`async/await`を知らないRubyプログラマに知ってもらおうという内容です。おそらくRubyを知らない人でもお役に立てるのではないかと思います。
　わりと時間ギリギリなのでオタク特有の早口言葉でLTすることにはなりましたが、割と好評だったためQiita化しました。

## 対象読者

– JSのアロー関数の書き方が分かる
– JSにおけるコールバック関数（あるいは関数を引数に取る高階関数）を理解している

### 注意点

この記事ではアロー関数での記述が沢山出てきます。ES2015以降、JSではアロー関数での定義は普通に行われるので、モダンJSや関数型プログラミングに慣れていない方には読みにくい箇所があるかもしれません。もし不慣れで

10ホールハーモニカの楽譜もどきを作成するPGM

10ホールハーモニカの楽譜もどきを作成するPGM

---

10ホールハーモニカの楽譜もどきを作成するプログラムを作成しました。
作成した楽譜ファイルはスクリプト内からインポートして読み出すことが可能です。

各記号の意味は以下のように設定してあります。
ただの数値：吐いて音を出す場所
丸文字の数値：吸って音を出す場所
↓と数値：ベンドとどれだけ下げるか
+：その分だけ音を長く出す
zkf, 2kf, 4kf, 8kf, 16kf:それぞれの休符
tempo:音の速さ

楽譜は一段ずつ登録していき、一番下のファイル出力ボタンで
一連の登録した行が出力されます。

---

githubURL: https://github.com/NanjoMiyako/10hpGakufu
サンプルページURL: https://nanjomiyako.github.io/10hpGakufu/

---

スクリーンショット
![image1.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41

これから学ぶ言語について

HTML
・ウェブページを作成するために開発されたマークアップ言語　<プログラミング言語とは違う>
＊他のマークアップ言語　SGML　XML
・基本的に、「タイトル」「見出し」「段落」などの要素から構造化
・HTMLには「HTML」「XHTML」「HTML5」など、いくつか種類があり、使えるタグに違いがある

<身近なHTMLの使用例>
　⑴ウェブサイト
　⑵電子メール（HTML形式）
　⑶スマホアプリ

CSS
・構造化された文章のデザインを変更する言語＝スタイルシート言語
・文字の太さ、色の変更、背景色の変更、余白の調整などを行う
・CSSはHTML＜＝マーク言語＞と組み合わせて使う
・HTMLとCSSで分けることでソースコードを読みやすくする仕組みになっている

Java Script
・ヴレンダン＝アイク氏によって開発された言語
・ユーザー側のWebブラウザと、Webサイトまたはウェブサービスの相互間のやりとりを、円滑にするためのプログラミング言語
・コンテンツを更新したり、

JavaScript: async function内で await を使ってもその関数自身が同期的に実行されるわけではない

# はじめに

async/awaitで勘違いしていたことがありました。
それは、async function 内で 非同期処理を await で待機した場合、そのasync function 自身が同期的に振舞うようになるものだと思っていたことです。
基本的な事とは思いますが、最近同じような問題に直面したので記事にまとめる事にしました。

# async/awaitの基礎

まずは、以下のような非同期処理を含む関数があるとします。

“`javascript:JavaScript
function funcA(){
console.log(“a1”);
new Promise((resolve)=>{
setTimeout(
()=>{
console.log(“a2”);
resolve();
}, 1000
);
});
console.log(“a3”);
}
“`

この関数を実行すると、出力結果は以下のようになります。

“`
a1
a3
a2
“`

これを

“`
a1
a

Denoについて触ってみた

# Deno


[Deno 公式マニュアル](https://deno.land/)
[Deno GitHub]([https://github.com/denoland/deno](https://github.com/denoland/deno))

## Denoとは

Denoは、V8 JavaScriptエンジン及びRustプログラミング言語に基づいた、JavaScript及びTypeScriptのランタイム環境である。Node.jsの作者であるライアン・ダールによって作成され、セキュリティと生産性に焦点を当てている。
Denoは単一の実行ファイル内でランタイム環境とパッケージ管理システムの両方の役割を明示的に引き受けるので、別途パッケージ管理システムを必要としない。

Wiki引用：[Deno](https://ja.wikiped

Laravel CRUD(API)

## はじめに
前回、Laravelを使ってCRUDを作成したので、今回はWeb API版のCRUDを作っていきます。
vanilla JSで簡単なSPAを作って実際にAPIを使ってみます。
認証やセキュリティ対策などは扱いません。

前回までのあらすじ
[Laravelのインストール、初期設定、GitHubの使用](https://qiita.com/takeshisakuma/items/44055d362e2f3e8da3d9)
[Laravel CRUD](https://qiita.com/takeshisakuma/items/8d33b1f10b273f0050b1)

## テーブル、レコードの作成

### 作成するテーブル

|id|name|telephone|email|created_at|updated_at|
|—|—|—|—|—|—|
|ID|名前|電話番号 |メールアドレス|作成日時 |更新日時|

### テーブルの作成

#### modelとmigrationファイル作成

“`:termina

簡易相関図ツールを作成した

## 概要
ログイン不要、無料で簡易の相関図を作れるツールを作成しました。
作成した図はimgタグ情報コピー機能があるので、htmlにそのまま貼り付けられます。
wordpressや記事投稿サイトに使用するときは画像のダウンロード、アップロードが不要です。
(文字数はすごいことになりますが・・・)
png形式でダウンロードも可能です。
https://skz-app.tontonton.work/

## 技術
* フロントエンド
* html
* javascript

* バックエンド
* Firebase

* その他
* google マテリアルアイコン (https://material.io/resources/icons/?style=baseline)

## なぜ作ったか
記事を書いているときに、

「説明するための図が欲しいな」

「そんなに詳細な図じゃなくていいんだけど、図を作成するのがだるい」

「作成するためのアプリを立ち上げるのが煩わしい」

「作成した図を保存→サイトにアップロードというプロセスが面倒」

という、なるべく怠けたい熱い思いか

datetimepicker datepicker 違い

#初めに
僕が携わっている案件での修正部分にdatetimepickerの知識が必要だったので、調べるとともに記事にしてまとめました。
#datetimepickerとは
ユーザーが日付や時間を入力する際に、直感的な操作で簡単に日時を指定できる
jQueryに依存しており、導入も比較的簡単
#datetimepickerとdatepickerの違い
datetimepickerは日付と時間を両方指定できるが、datepickerは日付のみ指定できる(名前の通りでした、、)
datetimepicker
datepicker
![スクリーンショット 2020-08-30 22.56.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaw

Vue の transition で entering/leaving が非対称なトランジションを実装する

Vue には `v-if` などの条件付き描画を使ってコンポーネントを表示/非表示する際に CSS の transition や animation の動きを付与できる [transition ラッパーコンポーネント](https://jp.vuejs.org/v2/guide/transitions.html)というものがあります。今回は表示・非表示で非対称な動きをする Vue transition と CSS の実装についてメモします。

## 時間差でフェードイン、クリック時にフェードアウトするカード

次のようなカードの要素を作ってみます。なおカードの上にあるボタンは動作確認用のものなので、記事の本題とは関係ありません。