- 1. {{message}}
- 1.0.1. 【JointJS】Elementにクリック以外のイベントを処理させる
- 1.0.2. Array.prototype.reduce() の動きを追ってみる。
- 1.0.3. Astroで高速Webサイトを簡単に！遅いサイト作成はもう過去の話
- 1.0.4. JavaScript・TypeScriptにおけるfor (const key in x)に気をつけて！
- 1.0.5. Node.jsでYouTubeにアップロード済みの動画のタイトルや概要を更新する – GPTに最初嘘つかれた
- 1.0.6. [Udemy網羅系]ドキュメント一読後におすすめJavaScript講座
- 1.0.7. 【JointJS】ドラッグ中のCellのイメージを表示する
- 1.0.8. Azure Logic Apps で Javascript Action を使う時は統合アカウントの紐付けが必要
- 1.0.9. 正規サイトを改竄し、コインマイナーを配布する不正なJavaScriptについての情報共有
- 1.0.10. Cryptocurrency exchange development setup guide
- 1.0.11. 【v0】プロンプトでUIを生成！v0の所感と簡単な使い方。
- 1.0.12. 【javascript】【jquery】のセレクタ関連
- 1.0.13. Node.jsでYouTubeのプレイリストから動画を削除する
- 1.0.14. [最強]ビギナー向けFlutterの教科書 – UdemyとYouTubeだけで１か月でFlutterをマスターする
- 1.0.15. Node.jsでYouTube再生リストに含まれる動画リストを取得
- 1.0.16. Google APIのトークン取得で”このサイトにアクセスできませんlocalhostで接続が拒否されました。”
- 1.0.17. 不倫発覚Next.jsと君たちはどう生きるか？-Reactコンポーネントの中にSQL書いてるのなぁぜなぁぜ-
data?.resultsの?ってなに？
# はじめに
data?.resultsという表記の意味がわからなかったので調べた。
# オプショナルチェーン
この？という表記はオプショナルチェーンまたは、オプショナルチェイニングというらしい。オプショナルチェーンの方がかっこいいからそう呼ぶことにする。
# 意味
?の前にある変数、定数がnullまたは、undefinedの場合にアクセスを中断し、undefinedを返すという意味。
# 使用例
user.likes.foodは存在するため’sushi’を出力
user.addres?.prefectureは存在しないが、?があるためundefinedを出力
user.address.prefectureは存在しないし、?もないためエラーを出力
“`diff_javascript
const user = {
age: 30,
likes: { food: “sushi” },
};console.log(user.likes?.food); // ‘sushi’
console.log(user.address?.prefecture); //
Eclipse中毒者がEclipseでよく使うショートカット一覧
私の記事に興味を持っていただきありがとうございます。
突然ですが、あなたはEclipseを触っていてこんなことを思ったことはないでしょうか？
・調べるまではいかないけどわざわざマウスポインタを移動させるの面倒だな…
・いざショートカットを調べてみたけど全部記載されていて使うのを選ぶのが大変だーーそのようなお悩み、あと1分で解決できます！
というわけで今回は約2年間Eclipseばかり触ってきた
Eclipse中毒者の端くれである私が
普段の業務で使い倒しているショートカットをご紹介いたします。それではどうぞ！
# Eclipseでよく使うショートカット一覧
| ショートカット | 操作結果 |
|:———–|————:|
| Ctrl+メソッド名にマウスポインタを合わせる+クリック |そのメソッドの実装へ飛ぶ |
| Ctrl+メソッド名にマウスポインタを合わせる+「実装を開く」をクリック | 抽象メソッドの実装を選択して飛ぶ |
| メソッドを選択して右クリックし、「呼び出し階層を開く」をクリック | 選
VueとFlaskを連携させる
こんにちは、mottyです。
簡単なVueとflask
いろいろ記事は見つかったのですが、諸々の場面で各論に入ったりで理解に時間がかかったので、シンプルな備忘録を書いていきます。## Vue側
超簡単なvue。
最終的にはVueは解釈され、プレーンなjavascriptに変換されます。“`index.html
Flask Vue.js Example
{{message}}
【JointJS】Elementにクリック以外のイベントを処理させる
[以前の記事](https://qiita.com/acnaman/items/ba8a1dcb0a3cf812b7d9#element%E3%81%AB%E8%A8%AD%E5%AE%9A%E3%81%A7%E3%81%8D%E3%82%8B%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88)で、Elementに対するイベントの設定方法をご紹介しました。
その中で、`event`属性をつけるとカスタムイベントを発行できることを紹介しました。“`js
joint.shapes.standard.Rectangle.define(‘example.MyRectangle’, {
size : { width: 100, height: 40 },
attrs: {
body: {
stroke: “#999”,
fill: “#999”,
event: ‘myrect:click’,
},
label: {
stroke: “#EEE”,
fill: “#EEE”,
Array.prototype.reduce() の動きを追ってみる。
こんにちは！！株式会社エイチームライフデザインの @TMDM と申します。
この記事は、[Ateam LifeDesign Advent Calendar 2023 シリーズ1](https://qiita.com/advent-calendar/2023/ateam-life-design)の23日目の記事です。## reduceメソッドってなんなの？
reduceメソッドは、配列の各要素を一つずつ処理して最終的に一つの値を得るために使います。
これを使えば、数の合計、平均の計算、さらにはオブジェクトの組み立てなどができます。どのようなことが起こっているかは下記に記されています。[公式ページはこちら](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce)
> reduce() は Array インターフェイスのメソッドで、配列のそれぞれの要素に対して、ユーザーが提供した「縮小」コールバック関数を呼び出します。その際、直前の要素における計算結果の返
Astroで高速Webサイトを簡単に！遅いサイト作成はもう過去の話
# はじめに
初めまして！[システムアイAdvent Calendar 2023](https://qiita.com/advent-calendar/2023/systemi23) 23日目の担当です。
何を書こうかと考えていましたが、良い機会なので今年よく名前を聞き、気になっていたAstroについて学びながら記事を書いてみることにしました。
# Astroとは？
皆さん、Astroをご存知ですか？
2022年6月8日に正式版がリリースされた比較的新しいWeb開発フレームワークです。
執筆時点でのGitHubのスター数は37.9kと、非常に注目されています。最近では、2023年12月5日にv4.0.0がリリースされました。
https://astro.build/blog/astro-4/
Astroは、高速な静的サイト（SSG）作成に特化したWeb開発フレームワークです。
ビルド時にJavaScriptを最小限（デフォルトでは全て）に削減し、高速なパフォーマンスを実現しています。また、MPA（Multi-Page Application）を採用し、クライアントサイ
JavaScript・TypeScriptにおけるfor (const key in x)に気をつけて！
## はじめに
JavaScript・TypeScriptにはオブジェクト、配列に対するさまざまな操作が提供されています。
この記事では中でも`for…in`の扱う上で注意すべき点について解説します。
“`ts
const object = {
apple: ‘red’,
banana: ‘yellow’,
orange: ‘orange’,
};for (cont key in object) {
console.log(object, object[key]);
}
// apple red
// banana yellow
// orange orange
“`:::note warn
後ほど記述しますが、`for…in`は多くのスタイルガイドやリンターで非推奨となっています。利用するときは明確で固い意志を持ってください。
:::## 列挙可能な全ての値で反復する
`for…in`はオブジェクトのキーで反復処理を行う文法ですが、厳密にはオブジェクトのキーだけではなくプロトタイプなど列挙可能な全ての値で反復処理を行います。
“`ts
c
Node.jsでYouTubeにアップロード済みの動画のタイトルや概要を更新する – GPTに最初嘘つかれた
この辺りの記事の続きです。
https://qiita.com/n0bisuke/items/edce78c7eca9ecedea2b
https://qiita.com/n0bisuke/items/75062256622d83f49df4
## videos.updateでいけそう
https://developers.google.com/youtube/v3/docs/videos/update?hl=ja
こんな感じでいけそうでした。
“`js
const res = await youtube.videos.update({
part: ‘snippet’,
requestBody: {
id: videoId,
snippet: {
title: newTitle,
description: newDescription,
categoryId: 27 //カテゴリID
}
}
});
“`### 動いたコー
[Udemy網羅系]ドキュメント一読後におすすめJavaScript講座
## はじめに
とある工業大学1年生の@ko_y0205です。
現在Webアプリケーションメインで学習しており、まとめるついでに皆様に私的おすすめUdemy講座を共有できたらと思います。
基本的に私は、ドキュメントを読んでから動画で内容を確認する勉強法が合っていたため、初学者からでも入りやすく、また復習したい方におすすめとなっています。Qiita様もこれが初投稿で勝手が分からず読みにくいところがございますが温かい目でご覧ください。
:::note warn
あくまで私個人的なおすすめ講義となっております。
:::## 講義概要
| 項目 |概要|
|:———–:|:————:|
| タイトル | はじめてのJavaScriptプログラミング入門 |
| レクチャー数 | 88 |
| 総動画時間 | 6.5時間 |
| 学習環境 | macOS または Windows |
| ツール | Google ChromeとVisual Studio Code |
|
【JointJS】ドラッグ中のCellのイメージを表示する
通常のHTMLでは[`ドラッグ＆ドロップAPI`](https://developer.mozilla.org/ja/docs/Web/API/HTML_Drag_and_Drop_API)を用いることでドラッグ中のイメージを表示することができます。
以下は画像をドラッグした場合の挙動です。
ですがこのドラッグ＆ドロップAPIは現時点でSVGでは動作しません。
そのため、JointJSで描画されるSVGの図では上記のような挙動が発生しません。## でもやりたい
JointJSの場合、まずPaperに`interactive=true`が設定されている場合、ドラッグしたElementはカーソルに合わせて移動します。この場合は問題なし。
今回はPaperに`interactive=false`が設定されている状況を考えます。Elem
Azure Logic Apps で Javascript Action を使う時は統合アカウントの紐付けが必要
# 背景
自社では Power Automate の制限が厳しい
Logic Apps なら比較的緩いので、そっちで遊ぼうと思った際に見つけた Javascript Actionただ、いざ使おうとしたら、動かねーってなったので、その対処記録
# 概要
– 統合アカウントを作成して、Logic Apps に紐づけてやる
# 補足
統合アカウントの作成は以下で
– [Enterprise Integration Pack で、Azure Logic Apps の B2B ワークフローを使用するための統合アカウントを作成、管理する](https://learn.microsoft.com/ja-jp/azure/logic-apps/enterprise-integration/create-integration-account?tabs=azure-portal%2Cconsumption)作ったら、ロジックアプリ側のワークフロー設定で紐づけてやるだけ。
Cryptocurrency exchange is the first entrypoint for users to buy cryptocurrencies. Then the users trade those cryptocurrencies with NFTs like in-game assets, lands, avatars in exchange to get participated inside web3 ecosystem.
This is why setting up the crypto exchange seems to be a promising idea for entrepreneurs because of the mass adoptio
【v0】プロンプトでUIを生成！v0の所感と簡単な使い方。
## はじめに
Vercel Labsから「v0.com」という、AI を活用した生成ユーザー インターフェイス システムが開発されました！chatGPTのようにプロンプトを投げるとAIが、Tailwind CSSとShadcn UIをベースにしたUIを実装してくれます。
実装してくれたHTMLとReactのソースコードはコピペで使えます！
現状はベータ版との事ですが、使ってみて便利だと思いましたので感想と簡単な使い方を纏めたいと思います！
## V0で出来る事
▪️プロンプトを入力・画像を添付してAIがUIを作成してくれる。→作成してくれたUIのHTML・Reactのソースコードをコピーできる。
▪️作成してくれたUIに対してプロンプトを入力し、AIが更にブラッシュアップしてくれる。
▪️他の人のプロンプトを参考にUIを作成することができる。
## 早速使ってみた
### ▪プロンプトを入力してAIがUIを作成してくれる。トップ画面はこんな感じです。
シンプルで見やすい！
.on(‘click’,function(){ //処理 });$(‘input[type=”radio”]’).on(‘change’, function() { //処理 });
ドロップリストやラジオボタンが変更されたら
$(‘select[name=”user_name”]’).on(‘change’, function() { //処理 });入力または削除がされたら
$(‘input[name=”user_name”]’).on(‘input’, function() { //処理 });“`
# 判定
“`javascript
チェックされていたら
if ($(this).is(‘:checked’)) {
//処理
}
チェックが外れてたら
if (!$(this).is(‘:checked’)) {
//処理
}“`
# イベントを起こす
“`javascr
Node.jsでYouTubeのプレイリストから動画を削除する
動画自体の削除ではなく、再生リストから削除します。
ベースの記事はこちらです。
https://qiita.com/n0bisuke/items/75062256622d83f49df4
## 再生リストから動画削除コード
“`js
‘use strict’;const fs = require(‘fs’);
const {google} = require(‘googleapis’);const googleAuth = () => {
const CREDENTIALS_PATH = ‘client_secret.json’;
const TOKEN_PATH = ‘token.json’;
const credentials = JSON.parse(fs.readFileSync(CREDENTIALS_PATH, ‘utf8’));
const token = JSON.parse(fs.readFileSync(TOKEN_PATH, ‘utf8’));const {client_secret, client_
[最強]ビギナー向けFlutterの教科書 – UdemyとYouTubeだけで１か月でFlutterをマスターする
## 序
コロナの厄災で、海外でやっていたホテル運営、レストラン、ショップという全てのビジネスが死に絶え、**後には文字通りゼロになった貯金残高と支払いのみが残るという、まさに明日をどう生き残るのかという過酷な生活の中**、なんとかロックダウン下でも取得できるようなスキルを身につけようと始めた独学プログラマー生活も今では２年半ほどたち、Qiitaの何とかカレンダーでUdemyの名を見つけ、我がメンターUdemyについて書いてみようという気になったのです。## 海外でのロックダウン、師との出会い
フィリピンでロックダウンされ、セブの海沿いのアパートメントに籠り、プログラムを２０数年ぶりに始めた自分には、誰一人として周りにプログラマーなどいなく、**プログラムについて何か教えてくれるような人も全くおらんかった。**
で、始めるにしても何をどうして始めたら良いのか？いわゆるオンランスクール等を見てみても、バカみたいに高い学費であり、１日３００ペソの予算で日々生きていた自分からすれば不可能である。あんなものは貴族か王族の子息が通う場所である。**学習コストは限りなくゼロに近く、かつモチ
Node.jsでYouTube再生リストに含まれる動画リストを取得
こちらの記事の続きです。
https://qiita.com/n0bisuke/items/680ab634463eee2dbfd3
## OAuthクライアントとトークン情報を準備
– client_secret.json
– token.jsonの二つを準備しておきます。
## 再生リストから動画の検索
色々なAPIがあっていまいちわからなかったのですが、ChatGPTに聞いて出てきたサンプルが役立ちました。
playlistItemsのメソッドが該当する模様です。
> 
ドキュメントを調べる -> サンプルではなく、ChatGPTに聞く -> ドキュメントを見るという流れ、効率的かも
https:/
Google APIのトークン取得で”このサイトにアクセスできませんlocalhostで接続が拒否されました。”
自分が管理しているYouTubeの再生リストを操作したいなと思ってAPI調べつつの詰まったところです。
何回かやってるけどいつも忘れている
## YouTube DATA APIのクイックスタート
こちらをやっていきます。
https://developers.google.com/youtube/v3/quickstart/nodejs?hl=ja
> 
### 準備など
– OAuthクライアントIDを作成して認証情報のJSONをDL
– `client_secret.json`
– サンプルコードを作成して実行### スコープ
サンプルコードでトークン作成するときにスコープの指定がありますが、何をしたい
不倫発覚Next.jsと君たちはどう生きるか？-Reactコンポーネントの中にSQL書いてるのなぁぜなぁぜ-
# 本記事の対象者
– フロントエンジニア
– [React|Next.js]チョットデキル(App Router経験者お断り)
– 最近のNext.jsの動向に不穏なものを感じているが、具体的にはよく分かっていない
– 実装方法、ハウツー的な話はしません。[公式読んでください。](https://nextjs.org/learn)
– 動作原理的な話はしません。[公式読んでください。](https://nextjs.org/docs/app)# 発端
あなたはReact使いのフロントエンジニアです。
伴侶であるNext.jsと蜜月の日々を過ごしていました。
しかしある日、あなたは[Next.js Conf 2023](https://www.youtube.com/watch?v=9CN9RCzznZc&list=PLBnKlKpPeagl57K9bCw_IXShWQXePnXjY&index=2)でとんでもないものを見つけてしまいました。
