- 1. CSSスプライトを使って画像読込を効率化したい
- 2. WebpackとViteをプロジェクト導入して比較した話
- 3. オライリーの特約書店をBlazorでマップ化したウェブサイトを作成した話
- 4. JavaScriptで、for文の初期化部分においてletで宣言された変数は本当にループごとに異なるインスタンスになるのか
- 5. タスクマネージャーをアップデートした！
- 6. 【Node.js】Expressからaxiosを使ってバックエンドサーバーの画像を取得する際はresponseTypeにarrayBufferを指定する
- 7. 【Backlog 2021】 Googleさんの zx で Backlog API を扱う（JavaScript で課題を追加する）
- 8. yarn upgrade-interactive –latestで依存を一気に解決。
- 9. Node-REDのfunctionノードで外部npmモジュールを呼び出す方法
- 10. Node-RED 2.1の新機能: ツアー機能
- 11. 数式が書けるチャットアプリを作りました【TS/NextJS】
- 12. [NodeJs]Expressのrouterを整理する
- 13. IDs in Node.js
- 14. IBM Cloud Operator を使ってIBM Cloudのサービス（Database for MongoDB）の接続情報をOpenShiftのSecretsに取り込み、Node.js のアプリから接続してみる
- 15. DriveAPIでGドラ内ファイルを取得、削除、アップロードする【Node.js】【Express】
- 16. シンプルなGraphQLサーバーでCRUDする（Express.js, Objection.js, MySQL, Docker）
- 17. 回線速度を計測して、Steamの帯域制限を自動で設定するようにした
- 18. Discordで動くLinuxターミナルを作る
- 19. Node.js と ID について
- 20. Docker レイヤー キャッシュ(DLC) で高速なDockerビルドを理解。
CSSスプライトを使って画像読込を効率化したい
この記事は [ミライトデザイン Advent Calendar 2021](https://qiita.com/advent-calendar/2021/miraito-inc) 16日目の記事です。
## やりたいこと
Webページ上でアイコンのような小さな画像ファイルをたくさんロードするのは通信が非効率になりがち。
これらのファイルを1つのファイルにまとめて出力したい！
ということでCSSスプライト＆結合済画像ファイルを自動で生成しよう。今回はnpmモジュールの [spritesmith-cli](https://github.com/bevacqua/spritesmith-cli) を使って変換している。
## 準備
### 変換用JSコード
spritesmith-cli を使って変換するためのコード。
ファイルは必ず `.spritesmith.js` という名前で保存しよう。“`js:.spritesmith.js
‘use strict’;const util = require(‘util’);
module.exports = {
cs
WebpackとViteをプロジェクト導入して比較した話
みなさんこんにちは。suginokoです。
寒くなってきたので布団を着て仕事をしています。（[弊社](https://brewus.co.jp/)はフルリモートで仕事ができます。暖かくして仕事しましょう。）## 前置き
今日は弊社Web開発における開発環境についての記事書いてみようかなと思います。
弊社の開発環境構築に普段はWebpackを使って環境構築しているのですが、* Webpackで別に開発する必要なくない？もっと簡単に導入できそうなのあるのではないかな
* 開発環境の立ち上がりが遅すぎてムカつく。もっとはやく動かないもんかねというのが根底にあり、調べてみることにしました。
[Vite](https://vitejs.dev/)というのは、私自身が前から[esbuild](https://github.com/evanw/esbuild)に注目していて、これWebpackの代わりになるのではないかなと思っていたところで、Viteが出てきた（詳しい話は後述します。中でesbuild使っている）ので比較してみようかなと思った次第です。
（ようやくテストではなくて実際の
オライリーの特約書店をBlazorでマップ化したウェブサイトを作成した話
# 概要
みんな大好き「オライリー」の特約書店をマップとして可視化するウェブサイトをBlazor WebAssemblyで作ったので紹介します。
元は.NET 5時代に作ったものなのですが、.NET 6にマイグレーションをした上で少しだけ手を加えたりしたので改めてネタとして紹介しようかと思います。https://nobu17.github.io/oreilly_map/
## どういったウェブサイト？
オライリーの書籍を販売している書店を、マップや一覧で確認可能なものです。
都道府県別や、現在地点から近い店舗を表示する機能なども備えてます。旅先でオライリーの書籍が欲しくなるような、オライリー中毒のあなたもこれで大丈夫！
(もちろん、レスポンシブデザインなのでスマホでもOK)
全国のオライリー特約店が日本地図にマッピングされてい
JavaScriptで、for文の初期化部分においてletで宣言された変数は本当にループごとに異なるインスタンスになるのか
# 前回
[JavaScriptで、なぜfor文の初期化部分においてletで宣言された変数はループごとに異なるインスタンスを持ちうるのか](https://qiita.com/khond/items/2d22c6b297d58ec914f5)の続き。
# 疑問
前回の調査で、規格上では「ループ各回で環境が作成される」ことがわかった。そうすると「結構コスト高な気が…」という気がしてくる。実際、前回の例のようにクロージャがループ内で作成される場合は、ループ各回で作成されるクロージャ内でそれぞれの環境を参照しているため、ループ各回で環境の生成が必要となる。
“`javascript
const functions = [];
for (let i = 0; i < 3; i++) { functions.push(() => console.log(i));
}
functions[0]();
functions[1]();
functions[2]();
“`だが、以下のようなfor
“`javascript
for (let i = 0; i < 3; i++) {
タスクマネージャーをアップデートした！
#前回の記事
https://qiita.com/kenjirohayashi/items/76403ac70e0733ed6438###作成したタスクマネージャーbot
#追加した機能
・WebViewでタスクの登録
・通知機能
・リッチメニュー#使用した技術
【Node.js】Expressからaxiosを使ってバックエンドサーバーの画像を取得する際はresponseTypeにarrayBufferを指定する
# はじめに
ルー大柴ぽいのが否めませんが表題の通りです。訳あってBFF（Backend For Frontend）を採用する必要があり、クライアントサーバーとバックエンドサーバーでのやりとりで詰まったのでメモを残します。
※個人の見解です。明確なエビデンスを探し切ることができませんでした。根拠が乏しいので、真に受けないことをおすすめします。
# 背景
バックエンドサーバーから画像を取得しようとしたら次のようなレスポンスがクライアントサーバーに返ってきた。
# 結論
`サーバー側でaxiosを使って画像をgetする時はresponseTypeをarrayBufferにする必要があるらしい。`### 引用①（axiosのドキュメントを引用している）
how does axios handle blob vs arraybuffer
【Backlog 2021】 Googleさんの zx で Backlog API を扱う（JavaScript で課題を追加する）
この記事は、[2021年の Backlog のアドベントカレンダー＠Adventar](https://adventar.org/calendars/6325) の 24日目の記事です。
## この記事の内容
今回扱う Backlog の API は、既にいろいろな方が記事を書いていたりもする以下のページに書いてあるものです。●Backlog API とは | Backlog Developer API | Nulab
https://developer.nulab.com/ja/docs/backlog/
その API を扱う方法として、以前見かけて気になっていた Googleさんの zx を組み合わせてみます。
●google/zx: A tool for writing better scripts
https:
yarn upgrade-interactive –latestで依存を一気に解決。
“`
rails s“`
を実行したら
npm rebuild node-sass
npm ERR! code 1
npm ERR! path /Users/soichirohara/coffee_passport/node_modules/node-sass
npm ERR! command failed
npm ERR! command sh -c node scripts/build.js
npm ERR! Building: /usr/local/bin/node /Users/soichirohara/coffee_passport/node_modules/node-gyp/bin/node-gyp.js rebuild –verbose –libsass_ext= –libsass_cflags= –libsass_ldflags= –libsass_library=
npm ERR! gyp info it worked if it ends with oknpm ERR! gyp: No Xcode or CLT version dete
Node-REDのfunctionノードで外部npmモジュールを呼び出す方法
日立製作所OSSソリューションセンタの横井一仁です。今回は、夏に開催した[Node-RED v2.0新機能紹介イベント](https://node-red.connpass.com/event/220079/)(下の動画)の中で紹介したNode-REDのfunctionノードの機能を少し深堀してみます。
https://youtube.com/watch?v=JklLkNr3Ec8%3Fstart%3D1967最新のNode-RED v2.1.4のfunctionノー
Node-RED 2.1の新機能: ツアー機能
日立製作所OSSソリューションセンタの横井一仁です。2021年も[Node-RED Con](https://nodered.jp/noderedcon2021/#speaker)、[OpenJS World](https://openjsf.org/openjs-world-2021/speakers/)などのカンファレンスで講演する機会を頂け、充実した1年でした。講演内容をNode-RED公式Twitterで紹介して頂けるという、嬉しい出来事もありました！(下の2つ目のツイートです)
https://twitter.com/NodeRED/status/1451791296339787776
## ツアー機能
さてNode-REDは、2021年12月現在でNode-RED v2.1.4が最新バージョンです。筆者が注目
数式が書けるチャットアプリを作りました【TS/NextJS】
これは [**N予備校プログラミングコース Advent Calender 2021**](https://qiita.com/advent-calendar/2021/nyobi) の 23 日目の記事です。
みなさん、こんにちは！
私は大学で物理学を専攻しながら、[株式会社ドワンゴ](https://dwango.co.jp)のアルバイトとして **[N 予備校プログラミングコース](https://www.nnn.ed.nico/pages/programming/)**の各種教材開発に携わっています。
この記事では、私が趣味として開発している **数式が書けるチャットアプリ** について、開発の経緯を交えながら紹介します。# 目次
**=== 紹介編 ===**
[00 … **数式**が書けるリアルタイムチャット「**ChatZEMI**」](#00–数式が書けるリアルタイムチャットchatzemi)
[01 … **基本的な機能**の紹介](#01–基本的な機能の紹介)**=== 経緯編 ===**
[02 … **知識ゼロ**から](#02–知
[NodeJs]Expressのrouterを整理する
NodeJsのアドベントカレンダー23日目の記事です
#はじめに
ExpressサーバーでRouteを定義していくとどんどん行数増えていってしまいますよね。
私も今までは処理をapp.jsに書かずfunctionの呼び出しで対応していたのですが、つい先日もっと上手に書く方法を知ったので共有したいと思います。
もしかしたら、当たり前なのかもしれませんが…。#課題
参考書とかWeb見ながらExpress書くとこんな感じで、1つのファイルに全部のRoute書いてしまいがちかと思います。 はい、私がそうでした。“`js:app.js
const express = require(“express”);
const app = express();app.get(‘/user’, (req, res) => {
…
})app.post(‘/user’, …
app.patch(‘/user’, …
app.delete(‘/user’, …
app.get(‘task’, …
app.post’task’, …
“`
※ …はJavaScri
IDs in Node.js
[ [日本語版](https://qiita.com/martinheidegger/items/425112e84f7c12148d90) ]
Following my 2020 blog post about [Promise cancellation](https://qiita.com/martinheidegger/items/3e6355e96e85fc1c841e) this is yet another basic topic.
Identity (short ID) – the way to identify a _thing_ – is something most tools provide out-of-the-box so you don’t need to think about it. But we are building for users. Humans. Often IDs comes in contact with the user – be it in an URL or on a receipt – and then the shape
IBM Cloud Operator を使ってIBM Cloudのサービス（Database for MongoDB）の接続情報をOpenShiftのSecretsに取り込み、Node.js のアプリから接続してみる
## はじめに
IBM Cloud 上で Node.js と MongoDB を使ったアプリケーションの開発を行う上で、アプリケーションコンテナ基盤として、物理サーバ上に OpenShift のクラスターを構築し、データベースとしては、マネージドデータベースサービスである、IBM Cloud Database for MongoDB を利用する環境を用意しました。
OpenShift 上の Node.js アプリケーションから、データベースに接続する上では、MongoDB（IBM Cloud Database for MongoDB サービス）の接続情報が必要となりますが、このIBMのマネージドDBサービスの接続情報を、OpenShiftのSecretsに取り込む（バインドする）一つの方法として、IBM Cloud Operator というツール（仕組み）が提供されており、それを使った一連の手順を簡単にご紹介いたします。
＃ ちなみに、アプリケーションコンテナ基盤として、IBMの提供するマネージドKubernetesサービスである、「OpenShift on IBM Cloud」や「
DriveAPIでGドラ内ファイルを取得、削除、アップロードする【Node.js】【Express】
Webアプリをデプロイする際に、画像を保存するWebストレージを用意する必要がでてくる。
よく使われるのがAWSやGCPになると思が、いかんせんお金がかかってくる。
そこで、無料で使えてよく馴染みのある__Googleドライブ__を利用できたらなと思って、今回チャレンジしてみた。#事前準備
以下を事前に行っておくこと。
※手順は割愛1. Node.js、npmがインストールされている
1. APIが有効になっているGoogleCloudPlatformプロジェクトが作成されていること
1. Googleドライブが有効なGoogleアカウント#1.認証情報の作成
GCPでOAuth2認証の設定をする
__①「APIとサービス」＞「認証情報」画面の「認証情報を作成」から認証情報を作成する__
シンプルなGraphQLサーバーでCRUDする（Express.js, Objection.js, MySQL, Docker）
# はじめに
僕がGraphQLに取り掛かった際なんとなく敷居の高さを感じていました?
「自分がもしもう一度GraphQLを1から勉強するならこんな記事あったら嬉しいな」という観点で、少ないコード量で動作するシンプルなGraphQLアプリを作成しました。20分以内で出来るハンズオンだと思いますが、お忙しいかたは「[ファイルを追加 -> サーバー](#ファイルを追加)」だけでも見ていっていただけると?
プロダクトでGraphQLを使う場合はもっと保守性が高いディレクトリ構造にしたり、N+1対策をしたりと考えることが色々あると思いますが、今回そこらへんはノータッチです。
#### 開発環境と使用した技術
– OS: macOS Catalina 10.15.4
– サーバー: Express.js
– ORM: Objection.js（内部でKnex.jsを利用してる）
– DB: MySQL8系
– ツール
– node: 16.8.0
– yarn: 1.22.17
– docker: 20.10.7
– docker-compose: 1.29.2###
回線速度を計測して、Steamの帯域制限を自動で設定するようにした
## きっかけ
Steamの回線が丈夫なのか、アップデートなどでダウンロードが始まると閲覧しているYoutubeなどのロードが追いつかなくなることがありました。
Steamにはダウンロード帯域制限機能がありますので、はじめは設定画面からちまちま設定していたのですが…
時間帯や日によって毎度毎度手作業で帯域を設定するのが面倒くさいので、何か自動でできる方法がないかと調べました
## インターネット速度の計測方法
ブラウザ経由でFast.comやSpeedtest.netを使って回線速度を調べて、Steamで設定するという方法を今までとっていましたが
https://www.speedtest.net/ja/apps/cli
Speedtest CLIがコマンドラインで実行できてとてもよさそうです。
ただ実行するだけではなく、csvやjsonに吐き出すことが可能
“`speedtest.exe -f json > speedtest.txt“`
みたいな感じで呼び出すとJSONのテキストを吐き出してくれます。
## Steamの帯域制限を設定する方法
この辺を参
Discordで動くLinuxターミナルを作る
[長野高専 Advent Calendar 2021](https://qiita.com/advent-calendar/2021/nnct) 22日目の記事になります．皆さんすごい記事書いてる…
この記事では，Discord上で動くLinuxターミナル…風のbotを作ってみました．
こんな感じのターミナルを作りました．https://github.com/BonyChops/discord-terminal
:::note warn
任意コマンド実行を他人に許可することにより，予期せぬ問題が起こる可能性があります．使う際は必ず信頼できるメンバー間でのみにしましょう．
:::(画像にあるF-langについては以下)
https://github.com/NNCt18J/F-Lang
# きっかけ
黒板があれば学生が数式を
Node.js と ID について
[ [English Version](https://qiita.com/martinheidegger/items/09c48c50136b629f1107) ]
2020年の 「[Promise のキャンセルについて](https://qiita.com/martinheidegger/items/6e8275d2de88174bc7e6)」ブログ記事に続き、これもまた基本的なトピックとして深く掘り下げていきたいと思います。
アイデンティティ（略称ID）、つまりあるものを識別する方法は、ほとんどのツールがすぐに提供してくれるので、普段考える必要はありません。しかし、私たちはユーザーのために作っているのです。人間です。ID は、URL であったり、レシートであったりと、ユーザーの目に触れることが多く、そのときにIDの形が実際の違いを生むことがあります。
この記事を読んでいただければ、このトピックが魅力的であることに同意していただけると思います。その後、あなたはIDを同じように見ることができなくなるに違いありません。:wink:
この記事のコードは、関連する [github
Docker レイヤー キャッシュ(DLC) で高速なDockerビルドを理解。
## はじめに
この記事は[Linkbal (リンクバル) Advent Calendar 2021](https://qiita.com/advent-calendar/2021/linkbal)の15日目の記事です。Webの開発業界ではDockerレイヤー キャッシュ(DLC) より、`Docker`の概念が慣れた方が多いと思います。本日は、Docker レイヤー キャッシュ(DLC) に関して、Dockerビルドの速度を向上する仕組みを調べてみましょう。
## まずDockerについてちょっと調べましょう？
Dockerの仕組みをイメージすると「仮想化」という概念が出てきます。「仮想化」は1台のOSにたくさんの仮想化ソフトウェアをインストールすることにより、複数のサーバとして利用できるものです。ただ、完全な仮想化ソフトウェアを含むのではなく、「コンテナ型」の仮想化物を含んでいます。
## Dockerがどのように動くかをみてみます。
簡単なDockerコンテナを作成します。1. Dockerfileを作成し、ソースコードと一緒に追加します。
2. Dockerf
