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

テレワークでサボってない？そんな上司の不安に応えたいLINE Bot

皆さんテレワークされてますか？
私の働いている会社ではコロナでの出勤人数制限が進み、テレワークをしている人が多くいます。
そんな最中雑談半分で本当にテレワーク中まともに働いてるの？と言われたので少なくともPCの前にはちゃんと座っていることで上司を安心させてあげようと思いました笑

#作ったもの
カメラの前から一定時間いなくなるとLINEへメッセージが飛ぶ監視装置

#こんなふうに動きます(動画)

#使ったもの
– Teachable Machine
– codepen
– LINEmessagi

RailsでJavaScriptファイルからのパスの通し方

## 実現したいこと
RailsのJavaScriptファイル内に記載した、画像・音楽ファイルへのパスを正常に読み込ませたい✅

## 開発環境
Ruby 3.0.2
Rails 6.1.4.4

## 結論
パスの指定を以下のように、“`asset_path“`を使用する。
※ JavaScriptの記載は、viewファイルのscriptタグ内に記載するか、“`hghg.js.erb“`のように、Rubyの埋め込みが可能な状態にする必要があります⚠️

“`ruby:任意のファイル
var ASSETS = {
sound: {
music: “<%= asset_path("energy.mp3") %>“,
ring: “<%= asset_path("tamborine.mp3") %>“,
},
json: {
beatmap: “<%= asset_path("notes.json") %>”
},
image: {
‘bg’:

和訳: TypeScript 設計目標 (TypeScript Design Goals)

TypeScript Wiki にある”TypeScript Design Goals”の和訳です。TypeScript という言語が**目指しているもの**と**目指していないもの**がまとめられています。何のためにTypeScriptで書いているのか解らなくなった時に役に立つかも知れないような気がしたので、ここだけ翻訳してみました。

(原文) TypeScript Design Goals · microsoft/TypeScript Wiki
https://github.com/Microsoft/TypeScript/wiki/TypeScript-Design-Goals

#TypeScript 設計目標
(2020/2/27)

##前書き
この文書は、私達が TypeScript 言語の基礎にした基本的な設計原理の概要を説明するものです。完全ではありませんが、言語を形作ってきた多くの決定の根拠となる規則の要約をねらいとしています。これら規則のいくらかは主観的で、また時には互いに矛盾しています ― 適切なバランスを保ち適切な例外を作る事は、プログラミング言語がいかに成

個人開発２年続けて、やっぱりヒカキンはすごいってこと

こんにちは。ぬこすけです。

1年ほど前に「[開設後３週間で収益１０万円を得た個人開発サイトに立ち向かった話の全部を公開する](https://qiita.com/nuko-suke/items/652366597ce2ce0a91f9)」を記事を公開し、Qiitaのトレンドの載ったりTwitterでもシェアされるなど、多くの方に読まれてうれしい限りです。

https://qiita.com/nuko-suke/items/652366597ce2ce0a91f9

さて、もうすぐ個人開発が２年目になるのですが、個人開発を続けていたからこそ思うことがいくつか思うところが出てきました。
**これから個人開発をしようとしている方の参考**になったり、あるいは**今も個人開発を続けていて「あーこれわかる！」みたいな共感**が得られたらうれしいです。

## どんなサイト作ったの？
知らない方が多数だと思うので簡単に個人開発しているサイトを紹介します。

「[ぬこぷろ](https://nuko-programming.com/)」という技術書ランキングサイトを開発しています。

https

GraphQLとコードジェレータでスキーマファーストな開発

> ### フロントエンドとバックエンドを結合テスト:exclamation: …動かない :sob:

みたいな手戻りは最小限に抑え、効率的な開発を行っていきましょう。

この記事では、GraphQLのスキーマ定義からコード生成してフロントエンドとバックエンドを実装するスキーマファーストな開発について紹介しようと思います。

また、この記事で紹介するコードは以下のリポジトリに置いてます。

https://github.com/akhrszk/schema-first-development-with-graphql

## 技術スタック

#### TypeScript

バックエンド、フロントエンド共にTypeScriptで実装しています。

#### GraphQL.js

GraphQLのJavaScriptライブラリです。

https://graphql.org/graphql-js/

#### React

フロントエンドは`create-react-app`で作りました。

https://create-react-app.dev/

#### Apollo G

[JS]インラインスタイルを操作できるようになろう

アウトプットとして

#インラインスタイルとは
HTML要素の開始タグの中に直接CSSのソースコードを記述するプロパティの指定方法。
JavaScriptでは,メソッドを使って指定した要素上に新しい属性を追加、または既存の属性の値を変更したり、属性を取得することができます。

##setAttributeメソッド
指定した要素上に新しい属性を`追加`、または既存の属性の値を`変更`できます。

“`javascript
要素.setAttribute(name, value)
“`
要素の取得の仕方はこちら
[HTMLの要素を取得する方法](https://qiita.com/Shi-raCanth/items/7ae6c1efac28668571b3)

– nameは属性の名前を文字列で指定します。
– valueは属性に設定したい値を指定します。

例

“`haml:HTML

テスト

“`

“`javascript:JavaScript
const sample = document.getElementById(“test

JavaScriptで日付をフォーマットする

### 1. やること

– JavaScript(TypeScript)でDateをフォーマットした文字列を取得する

### 2. バージョンなど

– “typescript”: “^4.4.4”,

### 3. やったこと

#### 3.1. Intl.DateTimeFormatを使った

– [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat)
– サンプルコードは以下
– `Intl.DateTimeFormat().resolvedOptions().locale`でロケールを取得できる
– `Intl.DateTimeFormat().resolvedOptions().timeZone`でタイムゾーンを取得できる
– `formatToParts`でパーツごとのフォーマット値が取得できるので、それを利用してフォーマットできる

“`
format(date:

async await multiple 自分の使う言語まとめ

コンパイラの言うがままにasync awaitして結局同期的じゃんと言うコードを死ぬほどみてきた。
いいかげんそこそこ使いこなせる程度には知っておきたいね。

# JavaScript
https://qiita.com/im36-123/items/c0678a46ee0f8e44e150
`await Promise.all`使う

“`javascript
function get(url) {
return fetch(url);
}

async function fn() {
const results = [];
const urls = [‘https://hoge/api’, ‘https://fuga/api’];
for (const url of urls) {
results.push(get(url));
}
console.log(await Promise.all(results));
}
“`

# Kotlin
https://stackoverflow.com/a/62966043/5598088
`awaitA

[Vue]lazyload+ローダーの制御

# はじめに

– 画像のlazyloadしたかった時につまづいたので覚え書き
– 同じ悩みを持つ人がいらっしゃったら1mmでも参考になれば幸いです。

# 環境

– OS : Windows Home 10
– ブラウザ : Chrome
– 言語 : Vue(2.x)

# やりたいこと

以下2点がやりたいこと

– lazyloadを使った画像の表示
– lazyload中によくあるローダー（クルクル回るやつ）を表示させたい

## 状況
* S3などのクラウドにある画像データをダウンロードストリーミングしているとブラウザの表示までにかなり時間を要する
* これを「必要な分だけ表示する」ためにlazyloadを導入した

※「lazyloadとは？」という状態から始めたので、参考にさせていただいた記事を引用します。

– lazyload

[https://paralux.co.jp/blog/358](https://paralux.co.jp/blog/358)

イメージ画像があってわかりやすかったです。

※ついでに「こんなやつね」くらいのイメージを捉えるためにロ

N予備プログラミング　〜冬コンテスト作品制作過程を晒してみる⑤〜

みなさんこんばんわ

やたらとかたいカビゴン、もとい”18.【サービス開発3】データモデルの実装とユーザーの保存”の手順をなんとか攻略したところで、残り納期日数の半分使っちゃった(泣)
DB設計と定義でかなり日数使うだろうなと予想はしてたけど、これほどとは。。
やっぱりDB作るところでビビっちまったなー（作業負荷というより精神的負荷に。）とほほ。

実際にコード書く作業して、冬アプリ制作のポイントだと実感した事を下記にメモ。
◎意外と大活躍！！つくって良かったアプリ設計書?
　　⇒コードで迷うたびマジで何度も見直す。特に短時間で実装するには無いとムリかも。
◎よく使うリンク（自分のやつ）のブックマークボタンを作っておく！（これは。。マジ必須！！）
　　⇒調子に乗ってテキスト通り写経してると、テキスト通りリンク踏んじゃってあ”-ってなる
　　⇒『not found 404だって！うぎゃー。』とパニック気味にコード見直し。
　　　　⇒我に返って『違うリンク、踏んでんじゃん。。』とハッと気付く。何回もやった。。
　　⇒こりてブックマークバーの右側の２つを作ってからは超快適に。早く作れば良かっ

住所から無料でGoogleMapを作成しよう

こんにちは、今回は住所を入力したら地図が作成出来るシステムを作成したので
紹介したいと思います。下の方で郵便番号から住所を取得する方法もまとめています。

[時間がない方向け](#悲報)

#使用した技術
・Windows10(PC)
・TypeScript
・HTML/CSS

#仕組み
①ユーザに住所を入力してもらう
②緯度経度を取得出来るAPIで緯度経度を取得　
③GoogleMapのURLに組み込む

※本当はGoogleMapAPIを使用すると簡単に緯度経度も取得出来るようなのですが
一部有料な部分があったり、制限があるようだったので何とか無料で使用できる方法を模索しました。

##APIを使用して住所から緯度経度を取得する
今回は「国土地理院API」を使用しました。
まず下記URLを使用してAPIでGETします。

“`typescript
//みんな大好き東京タワーの住所
const address = “東京都港区芝公園４丁目

【Chrome拡張】同じWebサイトにアクセスしている人と交流できる大規模多人数参加型ブラウジング機能を作った

## 概要
本機能を導入すると、ブラウザ上に同じWebサイトにアクセス人たちのマウスカーソルが表示され、自由にコミュニケーションを取ることができるようになります（下図）。


※本機能は、ブラウザ上のマウスカーソルをMMORPGでいうところのプレイヤー、Webサイトをフィールドのように扱うため、大規模多人数参加型ブラウジング(MMOBrowser)と名付けました。広大なインターネットの世界を皆で探検しましょう！

## 開発動機
+ 開発者はMMORPG好き（特にメイプルストーリー）で、フィールド上での一期一会の交流が楽しみだった
+ Webブラウジングして良い個人サイトを見つけたときに、それを見たことある人と交流したかったが、Twitterのハッシュタグ等のコミュニティがなかった
+ MMORPGのように現在同じサイトを見ている人とコミュニケーシ

便利ページ：ASN.1をデコード

「[便利ページ：Javascriptでちょっとした便利な機能を作ってみた](https://qiita.com/poruruba/items/6c67c7eef34ed302feb3 )」のシリーズものです。
別の投稿で、X.509証明書を作成したときにノウハウがたまったので、X.509証明書ファイルなどで採用されているASN.1のパーサを便利ページに追加しました。

ソースコード一式は以下のGitHubにあります。

poruruba/utilities

https://github.com/poruruba/utilities

単に使うだけの場合は以下を参照してください。ユーティリティタブからASN.1を選択してください。
※ASN.1のフォーマットを確認する目的で作ったので、かなりローレベルな情報を表示してます。

https://poruruba.github.io/utilities/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/711c3c30-08cf

vistaでphotoshop その8

#概要

vistaでphotoshopやってみる。
キャンバス作って、jpg読んで、リサイズして、移動して、pngで出力やってみる。

#写真


#サンプルコード

“`
preferences.rulerUnits = Units.PIXELS;
var docObj = app.documents.add(640, 480);
var fileObj = new File(“/Users/ore/eki.jpg”);
open(fileObj);
activeDocument.selection.selectAll();
activeDocument.activeLayer.copy();
activeDocument.close(SaveOptions.DONOTSAVECHANGES);
docObj.paste();
active

vistaでphotoshop その7

#概要

vistaでphotoshopやってみる。
キャンバス作って、jpg読んで、リサイズして、pngで出力やってみる。

#写真


#サンプルコード

“`
preferences.rulerUnits = Units.PIXELS;
var docObj = app.documents.add(640, 480);
var fileObj = new File(“/Users/ore/eki.jpg”);
open(fileObj);
activeDocument.selection.selectAll();
activeDocument.activeLayer.copy();
activeDocument.close(SaveOptions.DONOTSAVECHANGES);
docObj.paste();
activeDocum

vistaでphotoshop その6

#概要

vistaでphotoshopやってみる。
キャンバス作って、jpg読んで、pngで出力やってみる。

#写真


#サンプルコード

“`
preferences.rulerUnits = Units.PIXELS;
var docObj = app.documents.add(640, 480);
var fileObj = new File(“/Users/ore/eki.jpg”);
open(fileObj);
activeDocument.selection.selectAll();
activeDocument.activeLayer.copy();
activeDocument.close(SaveOptions.DONOTSAVECHANGES);
docObj.paste();
var pngOpt = new E

vistaでphotoshop その5

#概要

vistaでphotoshopやってみる。
jpg読んで、pngで出力やってみる。

#写真


#サンプルコード

“`

var fileObj = new File(“/Users/ore/eki.jpg”);
open(fileObj);
//alert(activeDocument);
var pngOpt = new ExportOptionsSaveForWeb();
pngOpt.format = SaveDocumentType.PNG;
pngOpt.optimized = true;
pngOpt.interlaced = false;
pngOpt.PNG8 = false;
var filePath = new File(“/Users/ore/test4.png”);
app.activeDocument.

JavaScriptのコールスタックと挙動の確認方法

どうも。前回の記事で、月に1度更新できたらいいな〜とか言ってて早々に更新し始めました、maruquiです。

今回はJavaScriptのコールスタックについてと挙動の確認についてメモしておきます。

まだまだ技術の経験値が少ないこともあり、ベテランの方から見たら意味が違うような発言をしてしまうかもしれませんが、あたたかく見守ってください。

## コールスタックとは

簡単にいうと、どの関数がどの順番で呼び出されているのかを保存しておく仕組みのことです。文字で説明するだけじゃ意味不明だと思うので、コードで。

“`JavaScript:コールスタック

function a() {
console.log(‘a is first.’);
}

function b() {
a();
console.log(‘b is second.’);
d();
}

function c() {
b();
}

function d() {
console.log(‘d is last.’);
}

c();

// 実行結果
// a is f

ZOZOTOWNに生首を置いて絶対に似合う服を見つけるChrome拡張を作る

この世を生きるエンジニア女子の皆さんみなさんこんにちは。

突然ですが、みなさん **「似合う服が全然わからん」** と感じてはいないでしょうか？

ちなみに私はわからなさすぎて血迷い出したので、友人に進められて世間で流行っていたパーソナルカラー診断と骨格診断というものに最近行ってきました。

そう、 **「むらかみちゃんって何ベ？？？？？」** とかわいい女子に言われた時にわけがわからず **「えっ、、、、えっっと、、手延べ…..?」** と答えそうになる危機はこの先訪れることはないのです。診断行きは私にとっての歴史的一歩となりました。

話題が飛躍しましたが、当日診断をしてくれたきれいなお姉さんに「似合う服が全然わからんのですがどうすればいいですか」と聞いたところ、 **「雑誌にお前の生首載せればだいたいわかるねんで」** と言われ、実際に私の生首をたくさん雑誌の上に載せてくれました。

![face_sample.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529505/8de8bd26-

JavaScript入門(データ型とリテラル)

# 概要
JavaScriptを学習、理解を深めるため「[JavaScript Primer 迷わないための入門書](https://jsprimer.net/)」を読み、
理解した内容等を記載していく。

[JavaScript入門一覧](https://qiita.com/andota05/items/22fae452225b785fd405)に他の記事をまとめています。

※下記「動作環境情報」を参考にし、開発者コンソールで結果を確認してください

動作環境情報はコチラ

**【環境】**
PC：Mac
エディタ：Visual Studio Code
プラグイン：`Live Server`というVisual Studio Codeのプラグインを使用し、サーバ環境を用意。
開発者コンソール：GoogleChrome

**【登場ファイル】**
datatype.js：検証用ファイル
index.html：「datatype.js」を使用、および開発者コンソールで確認する際に開くファイル

**【★ポイント】**
ind