- 1. 最初はスパゲティコードでもいいからまず書く
- 2. エンジニアになるためのマインドについて
- 3. Tree Maker_Convert Markdown to tree!_WebAssembly&ServiceWorker
- 4. クリック時に他の要素がblurする前に処理を実行する
- 5. JavaScriptの要素のイベント発火順序
- 6. イテレーターのクローンもどき
- 7. ChromeでJavaScriptを編集できなかった。
- 8. JSの非同期の進化過程
- 9. 【OpenLayers】ラインデータを表示する
- 10. 【プチDXコンテスト2022】kintone・obniz・MESHを連携する
- 11. Adobe Illustrator用スクリプトの書き方
- 12. 【React】UseContext、createContextの使い方
- 13. 【JavaScript】初心者が引っ掛かりがちな罠をクイズにしてみた
- 14. バーコードから書籍情報を取ってくるApp
- 15. リンク先のドメインが詐称されているアンカーリンクを警告するChrome Extensionを書いてみた
- 16. JSのツール管理ライブラリVoltaとは
- 17. 【JavaScript】setTimeoutから返るIDは絶対0じゃないし、clearTimeoutに0を渡しても何もしない
- 18. input type=”file”の「ファイル名」を表示させたくない時はbutton要素で装飾しよう！
- 19. 【React】UseEffectで取得した値をUseContextに渡す
- 20. Mapbox GL Jsを使って町丁目ポリゴンを表示してみる
最初はスパゲティコードでもいいからまず書く
スパゲッティは、たらこスパゲッティが好きです。最近は、大盛りで食べれません（笑）
スパゲティコードとは、処理が整理されていない複雑に入り混じったコードのことです。
業務的に言うと、後から修正しにくい、新規機能を追加しにくいコードのことです。作成する時も、機能を追加する時も、後から改修しやすい・自分以外の人が見てもわかりやすい（属人化しない）コードを書いたほうが親切です。
業務時間を減らすことにもつながるので、コスト面を考えても配慮したいポイントです。最近は、どのプログラミング言語もフレームワークが増えているので、気にせずともMVCモデルなどオブジェクト指向を取り入れてコードを書くことが多いと思います。
（現場にも寄りますが・・・笑）## 最初はスパゲティコードでもいいからまず書く
**コードは綺麗に書くことが大事です！**
と言っていますが、実際にコードを書く時は **「スパゲティコードでもいいから書く！」** ことをオススメしています。
コーディングは文章を書くのと同じで、書き始めると自然と筆が進むものです。
だから、 **考えるよりもまずは書きましょう！**##
エンジニアになるためのマインドについて
# はじめに
近年、プログラミングスクールの乱立やprogateなどの教材が増えたことでエンジニアに興味を持ったりそういった仕事をしてみたいと感じている人は増えていると感じています。また、実際にエンジニアになった人でも自信が持てず辞めてしまったり、劣等感などの不安を抱いたりしてしまう人は少なくないでしょう。こちらに実際に挫折した人のデータがあります。
* [プログラミングの挫折率は約90％](https://www.sejuku.net/blog/109190#:~:text=%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E3%81%AE%E6%8C%AB%E6%8A%98%E7%8E%87%E3%81%AF%E7%B4%8490%EF%BC%85,-%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E5%AD%A6%E7%BF%92%E8%80%85&text=%E3%81%A4%E3%81%BE%E3%82%8A%E3
Tree Maker_Convert Markdown to tree!_WebAssembly&ServiceWorker
https://ddddddo.github.io/gtree/
# これは何か？
Markdown形式の入力を与えると、treeコマンド結果のような表示がされるWeb appです。
以下の4種類の記号が使えます。
`*`, `-`, `+`, `#`また、出力されるツリーの各階層は、入力となるMarkdownでは半角スペース2つずつインデントすることで表現します。
# このサイトの特徴は？
– Markdownからtreeを生成する処理はGoで書いており、その処理部分はTinyGoでWebAssembly(.wasm)としてコンパイルしています。
– コンパイルされたバイナリはJavaScriptから呼ばれます。
– ServiceWorkerを利用していて、このWeb appを構成する静的ファイル(.wasm含む)はブ
クリック時に他の要素がblurする前に処理を実行する
## 何をしたかったのか
ページ内に複数のElement（要素A,要素Bとする）が設置されており、
要素Aにフォーカスがある状態で、要素Bをクリックする時に、要素AのOnBlurが発生する前に要素Bのクリック処理を実行したい。
例えば…– 要素Aのフォーカスが外れると要素Bが消えてしまう
– 要素Aのフォーカスが外れると自動的にsubmitが走る“`HTML
“`## 解決策1
要素BのmouseDownイベントを取得し、クリック処理を実装する。
※要素Bのclickイベントは要素Aのblurイベントより遅いため、処理の前に割り込めない。“`HTML
JavaScriptの要素のイベント発火順序
特定イベントの前に処理を行いたかった時に発火順序がはっきりわからなかったので調べました。
# 検証コード
検証するイベントについては、以下のイベント一覧から利用頻度の高いor気になるものを抜粋しました。
https://html.spec.whatwg.org/multipage/webappapis.html#event-handlers-on-elements,-document-objects,-and-window-objects
また、複数のイベント間でどうなるかも調べました。行った操作としては、クリックでフォーカスを当て、その後文字入力を行いました（複数あった場合はそれぞれ）
#### 単体の要素
“`HTML
イテレーターのクローンもどきJavaScript のジェネレーターでは実行途中のイテレーターをクローンできません。無理やりそれっぽいことをしてみました。
# 実装
`next()` に渡す引数をキャッシュして、毎回最初からやり直すことで強引にクローンのように見せかけます。
“`js
function makeCloneableIterator(g) {
const it = g();
const args = [];
return {
next(arg) {
args.push(arg);
return it.next(arg);
},
clone() {
const ret = makeCloneableIterator(g);
args.forEach(ret.next);
return ret;
}
};
}
“`## 使用例
途中から再開しているように見えます。
“`js
const it = makeCloneableIterator(function*(){
yield
ChromeでJavaScriptを編集できなかった。
# 経緯
JavaScriptで遊ぼうと思いVisualStudioCodeで編集していたが、実行の段階でデバッガーにブラウザを指定してくるので、ブラウザで編集しようとおもった。しかしコード表示はできるものの、編集できなかったので「やっぱりVSCodeで編集かな」と思っていたが、検索すると皆さん編集、保存、反映、できているようで納得できなかった。
例えば矢印の部分をコメントアウトしようとしたが編集できなかった。
# 解決方法
### 設定
設定⇒ワークスペース⇒フォルダーを追加⇒許可する。
### 確認
矢印部分に
JSの非同期の進化過程
## 序文
このセクションでは、主な対象は非同期性を学んだばかりの方であるため、著者はこの側面の内容をより一般的な言語で簡単に整理するつもりです。## 同期と非同期
非同期の進化過程について話したいので、もちろん、同期と非同期の概念についても言及する必要があります。
#### 同期とは
同期とは、次のタスクが前のタスクの実行を待ってから実行することであり、実行順序はタスクの配置順序と一致します。
次は同期です。
“`
console.log(‘hello 0’)console.log(‘hello 1’)
console.log(‘hello 2’)
// hello 0
// hello 1
// hello 2
“`
#### 非同期とは
非同期処理では呼び出し側は止まらずに次の処理に進みます。
“`
setTimeout(() => {
console.log(‘hello 0’)
}, 1000)console.log(‘hello 1’)
// hello 1
// hello 0
“`
#### なぜ非同期の概念を導入するのですか?
もちろん、
【OpenLayers】ラインデータを表示する
## はじめに
この記事は#30DayMapChallenge2022 18日目の記事です。
テーマはColour Friday: Blueです。
OpenLayersを使って栃木県の河川のラインデータを表示してみます。
https://30daymapchallenge.com/
## OpenLayersとは
簡単にダイナミックなマップを設置することができるJavaScriptライブラリ
地図タイル、ベクトルデータ、マーカーを表示することができる
フリーかつオープンソースで、2条項のBSDライセンス（FreeBSDとしても知られています）の下でリリースされている
執筆時の最新バージョンはv7.1.0でした## ラインデータを取得する
今回はGeoJSONを使って表示してみます。
国土数値情報から栃木県の河川データをダウンロードします。
https://nlftp
【プチDXコンテスト2022】kintone・obniz・MESHを連携する
# [プチDXコンテスト2022](https://page.cybozu.co.jp/-/dxcontest-2022?utm_source=Twitter&utm_medium=display&utm_campaign=CBDN_TWlink_KW_DXcontest_ITC)に応募しよう！
まずはkintone・obniz・MESHの3製品を連携させるところに挑戦しました！# 環境
* kintone（お試し版アカウント）
* obniz Board 1Y（obnizOSバージョン3.5.0）
* MESH温度湿度センサー（バージョン1.2.5）
* Visual Studio Code# やったこと
主にコンテストページにリンクのある[この記事](https://blog.obniz.com/make/mesh-obniz-kintone)を参考に進めました。いくつかつまづいた点があったので、順を追ってご説明します！##### （1）kintoneの準備をします
* [kintoneのお試し版アカウント作成](https://kintone.cybozu.co.jp
Adobe Illustrator用スクリプトの書き方
イラストレーターをスクリプトで操作する機会があったので、備忘録としてまとめます。
言語はExtendScriptで、JavaScriptの書き方とほとんど同じですが、ECMAScript3に準拠しており、書き方が古いため注意が必要です。
# スクリプト例
## アートボードに四角のオブジェクトを追加
“`javascript
// アートボードのx軸20、y軸-30の位置に縦横100の四角のオブジェクトを追加
addRectangle(20, -30)function addRectangle(x, y) {
// アクティブのアートボードにグループアイテムを追加
var groupItems = activeDocument.groupItems.add()
// 縦横のサイズを12の四角に設定
var rect = groupItems.pathItems.rectangle(0, 0, 100, 100)
// 座標の設定
rect.position = [x, y]
// 枠線の有無
rect.stroked = false//
【React】UseContext、createContextの使い方
## Contextとは？？
`コンテクストは各階層で手動でプロパティを下に渡すことなく、コンポーネントツリー内でデータを渡す方法を提供します。`
参考:https://ja.reactjs.org/docs/context.htmlContextを使うことで別のコンポーネントにpropsを渡して、さらに別のコンポーネントに渡すといったバケツリレーをする必要がなくなります。
ここでは本当の基礎の基礎でコンポーネント間でcontextを使ってデータを渡します。
（本当はリファクタリングなどやることはいろいろありますが…）* フォルダ構成
src
components
├ HelloChild.js
├ CountChild.js
Example.jsちょっと分りにくいですが、
componentsフォルダの中にHelloChild.js、CountChild.js
srcフォルダ直下にExample.jsを配置しています。Example.jsが親、HelloChild.jsとCountChild.jsが子です
HelloChildは単に「hello」と表示する
【JavaScript】初心者が引っ掛かりがちな罠をクイズにしてみた
# 前書き
よくありそうな間違い、エラーの原因をクイズにしてみました。
エラーが起きてしまったコードを見て、その原因をお答えください。# ①３つの`li`を取得して、先頭を出力するぞ！
間違いは３つあります。“`index.html
Document
- hoge
- fuga
- piyo
“`“`main.js
const items = document.getElementsByClassName(“item”);
const initialItem = i
バーコードから書籍情報を取ってくるApp
個人で持っている書籍の貸し借りが多くなり、書籍を一元的に管理したい！というモチベーションから、バーコードを読んで書籍情報を取得するAppを作りました。
デザインを整えたものはこんな感じになりました。
quagga.jsでバーコード読んで、GoogleBooksAPIから書籍情報持ってくるapp作った#javascript https://t.co/iaDAZFT0fE pic.twitter.com/8QTI68fxBD
— Rj.Chiba (@rj_phys) November 17, 2022
＊本当は書籍をDBで管理したいのですがその話はいずれするかもしれません。知らんけど。
今回は[quagga.js](https://serratus.github.io/quaggaJS/)と[GoogleBooksAPI](https://developers.google.com/books/docs/overview)を用いたシンプルなWebAppにしました。
# アウトライン
– 書籍情報の管理
– quagga.js
バーコードを読み取るために用いるAPIについて。
– ISBNの受け渡し
quagga.jsで読み取ったISBNを書籍情報検索に使うための処方箋について。
– 書籍情報
リンク先のドメインが詐称されているアンカーリンクを警告するChrome Extensionを書いてみた
# この記事の内容
## 記事中で書いてあることの概要
* Chrome Extensionをはじめて書いてみたけど、なぜ書いてみたか
* 書いたChrome Extensionの仕様
* Crome Extensionのソースコード
* Chrome Extensionを書くにあたって参考にしたもの
* 感想## 記事中で書いてないこと
* JavaScriptでの正しい在るべき書き方
* ソースコード解説# なぜChrome Extensionを書いてみたか
会社のメールアドレスに対してセキュリティーに関する訓練メールが届いたから。
よく見ると、差出人が**yumemi_admin@cube-navi.com**という普段利用しないアドレスだったり、`https://seculio.com/cube-navi.html` 部分にフ
JSのツール管理ライブラリVoltaとは
# Voltaとは
[公式](https://volta.sh/)は手間のかからないJavaScriptのツール管理システムと謳っています(The Hassle-Free JavaScript Tool Manager)。
主なユースケースとしてはNode、npmのバージョン管理です。Voltaには三つの宣伝文句があります。
⚡高速
あらゆるJSツールを素早くシームレスにインストールし、実行することができます。VoltaはRustでビルドされ、軽快な静的バイナリとして出荷されます。⚡信頼できる
プロジェクトに参加する全員が同じツールを使えるようにし、ワークフローに支障をきたさないようにします。⚡ユニバーサル
パッケージマネージャ、Nodeランタイム、OSに関係なく、volta installという1つのコマンドで済みます。他より早くて、コマンド一つでプロジェクト内で共有できて、OSに依存ないようなツールということです。
# Voltaのセットアップ
Voltaのセットアップは簡単にできます。[Getting Started](https://docs.volta.s
【JavaScript】setTimeoutから返るIDは絶対0じゃないし、clearTimeoutに0を渡しても何もしない
超小ネタです。JavaScriptのタイマー系関数に`setTimeout`と`setInterval`があります。これらは返り値として数値型のタイマーIDを返し、このタイマーIDを`clearTimeout`及び`clearInterval`に渡すことでタイマーをキャンセルできます。
この**タイマーIDは0よりも大きいことが保証されています**。また`clearTimeout`または`clearInterval`に無効なタイマーIDを渡しても何もしないことも保証されています。（以下参照）
https://html.spec.whatwg.org/multipage/timers-and-user-prompts.html#timers
なのでタイマーを使っていないときはタイマーIDに0を代入しておけば、`clearTimeout`を使うときに毎回タイマーを起動しているかをチェックするようなコードは不要です。
“`javascript:このようなコードは基本的に不要
if(timerId != null) {
clearTimeout(timerId);
}
“`
input type=”file”の「ファイル名」を表示させたくない時はbutton要素で装飾しよう！
# はじめに
HTMLでファイルアップロードを行う際に使用する`input type=”file”`の話です。
通常だとボタンの右側に「ファイル名」もしくは「選択されていません」のメッセージが表示されますよね。
「**オレは選択したファイルのプレビューを表示させるからファイル名の表示はいらねェ！（ドン）**」そんな時ありますよね。
そういった時にこのファイル名を消し去るTipsの紹介です。# 方法
`input要素`のファイル名のみを表示する方法は、公式では用意されていないようです（多分）。そこで「**`input要素`を`label要素`もしくは`button要素`でラップする方法**」で対応します。
[MDNのドキュメント](
https://developer.mozilla.org/en-US/docs/
【React】UseEffectで取得した値をUseContextに渡す
### UseEffectで取得したデータをUseContextで共有する
useContextの記事を色々漁ってもハードコーディングした値をProviderやcreateContextに渡すような非現実的な例ばかりだったので備忘録。
アプリ起動時にuseEffectでデータを取得し、そのデータをコンテクストとしてアプリ内で共有したい場合を想定。
他にも方法はあるのかもしれないが、とりあえず動いた方法をメモ。“`react: App.jsx
import { useState, useEffect, createContext } from “react”;
import axios from “axios”;export const DataContext = createContext(); //コンテクストオブジェクト準備
export default function App() {
const [data, setData] = useState({}); //useContextに渡すデータ用のStateを用意useEffect(()
Mapbox GL Jsを使って町丁目ポリゴンを表示してみる
## 概要説明
Mapbox GL Jsを使ってMapboxに町丁目ポリゴンを表示してみました。この記事は[OpenLayersを使ってOpenStreetMapに町丁目ポリゴンを表示してみる(OpenLayers v6)](https://qiita.com/4gou/items/d914c277ae96158b2165)のMapbox版です。
## 準備するもの
### Mapboxのアカウント
Mapbox GL Jsを利用するにはMapboxのアカウントが必要になります。以下からアカウントを作成することができます。https://account.mapbox.com/
### アクセストークン
Mapbox GL Jsを使用するためにはアクセストークンが必要になります。以下からアクセストークンを取得することができます。https://account.mapbox.com/access-tokens/create
### 町丁目ポリゴン
町丁目とは行政界の一つで「富士見町3丁目」「広尾1丁目」など「●丁目」で表わされる行政区画のことです。行政界は他には都道府県や市区町
