- 1. ブラウザから受けたっと CSV を AWS 複数の S3 へ upload しようとして少しハマった件
- 2. JavaScriptを動かすことができるWordpress用チャットボット
- 3. ContentfulにAPI経由でメディアをアップロードして公開する
- 4. DenoでViteのあらゆるフレームワークを動かす
- 5. [Day3] JavaScriptの基礎 part2
- 6. Azure Static Web AppsでReactをはじめーる
- 7. JavaScript 暗黙的な型変換の思ってたよりちょっとだけ深い世界
- 8. [rails]Googlemap APIを使ってプチ食べログを作りたいのでテスト環境で途中まで実装してみた！(Googlemap表示位置の変更、新規投稿編)
- 9. 【完走賞ゲット-3】p5.js Web Editor で p5.func を使ったイージング
- 10. 【Vue.js】画像の配置場所による違いをkwsk
- 11. JavaScript（this編）
- 12. JavaScript のスコープ、クロージャとは？ & スコープと var 非推奨との関わり
- 13. 【KDDI Engineer&Designer】AI にブラウザ用の JavaScript のプログラムをいくつか作ってもらった話 ⇒ OpenAI の ChatGPT で生成されたプログラムの解析も少々
- 14. 【ブックマークレット】スマホからでもソースが見たい！
- 15. 【2022年】JavaScript データ型を MDN 読んで全部まとめる【プリミティブ編】
- 16. React入門
- 17. Alpine.jsのネット上での知名度や評価を調べてみた
- 18. JavaScript 基礎編 (イベント)
- 19. 【Javascript】基礎用語集まとめ
- 20. JavaScript 基礎編 (ブラウザオブジェクト / DOM)
ブラウザから受けたっと CSV を AWS 複数の S3 へ upload しようとして少しハマった件
#### vue から取得した csv ファイルを複数の s3 バケットへ送ろうとしたらできなかった。
## 結論
– s3.put_object で複数を取得してもブラウザから受けったファイルの場合はエラーになるので、 s3.copy_object で複数のバケットへ送った。– 以下スクリプトメモ
“`py:python
def xxx():
# アップロードファイルを取得 –> ここは vue からの通常の受け取り方
uploaded_file = request.files[‘file’]# S3アップロード処理
s3 = boto3.client(‘s3’,
aws_access_key_id=os.environ.get(“ACCESS_KEY”),
aws_secret_access_key=os.environ.get(“SECRET_KEY”),
)bucket_name = “XXX”
s3.put_object(Bucket=bucket_name, Key=
JavaScriptを動かすことができるWordpress用チャットボット
一応プラグインが存在しますが、いろいろとあるので（特にチャットボットでJSを動かしたい）
単純なサーチ系のを作ってみました入力キーワードのHTMLはすべてエスケープして受け付けませんが
botはほぼすべてのHTMLタグを返すことができます。ライセンス MIT (C) neet.co.jp
“`functions.php
date_default_timezone_set(‘Asia/Tokyo’);
parse_str($_SERVER[‘QUERY_STRING’], $queue);if($queue[‘jo’] != “”) {
require ‘json.php’;
jsonexec($queue);
exit;
}function searchChat( $keyword ) {
$args = array(
‘posts_per_page’ => 10000,// デフォはかなり多め
‘orderby’ => ‘date’,// 更新日
‘order’ => ‘DESC’,// 降順
‘post_type’ => ‘ch
ContentfulにAPI経由でメディアをアップロードして公開する
この記事は「[つながる勉強会 Advent Calendar 2022](https://adventar.org/calendars/7752)」の 3日目の記事です。
https://adventar.org/calendars/7752
—
1日目の記事はこちら:point_right:「[フルリモートで働くうえで”テキストコミュニケーション”で気をつけていること](https://yutaro-blog.net/2022/12/01/text-communication/)」
2日目の記事はこちら:point_right_tone1:「[生産性を爆上げするおすすめツール達](https://yutaro-blog.net/2022/12/01/text-communication/)」—
フロントエンドエンジニア兼デザイナーのりょーた（[@RyoTa___0222](https://twitter.com/RyoTa___0222)）です。
神戸（たまに大阪）で[つながる勉強会](https://discreet-cause-4e3.notion.site/
DenoでViteのあらゆるフレームワークを動かす
# はじめに
先日[deno](https://deno.land/)のバージョンが1.28となりました。これによってdenoからnpm互換性の機能を安定して利用することが可能となり、多くのnpmモジュールの利用が行えるようになりました([Release blog](https://deno.com/blog/v1.28))。
この記事では1.28のバージョンアップにともなってViteを用いた環境をDenoでも構築可能になったのでその方法を紹介します。とても簡単にできるのでDenoで開発したい方はぜひお試しください。この記事は[こちら](https://deno.com/blog/frameworks-with-npm)を参考にしました。
型情報を与えてTypeScriptの利用も試みましたが、型がうまく伝わらずdenoの実行時に満足のいくチェックをさせるところまで検証できませんでした。TypeScriptを用いた構築が可能になれば再度紹介したいと考えています。# Viteを用いた環境構築
まず、Nodejsで開発するときのVite環境の雛形が欲しいのでnpmコマンドで環境を作成し
[Day3] JavaScriptの基礎 part2
本記事は一人アドベントカレンダー企画の一つです。
[30代未経験エンジニアが25日後にJavaScriptをマスターするカレンダー](https://qiita.com/advent-calendar/2022)[JAVASCRIPT.INFO](https://ja.javascript.info/)を元にJavaScriptを勉強していき、そこで学んだ知識をアウトプットしていきます。
２５日でJAVASCRIPT.INFOをやりきり、未経験エンジニアがJavaScriptをマスターする過程を投稿していきます。## 2.10 条件分岐: if, ‘?’
### 知らない単語
– 無し### 学んだこと
– if文は括弧の中の式を判断して、Boolean型に変換する
例えば、数値 0,空文字 “”,null,undefined,NaN は「false」になるので「偽」と判定される
if (0) {
…
}
このコードは0で偽なので、実行されない
if (1) {
…
}
しかし1であれば真なので実行される– 条件が偽の場合、「else」での分岐が
Azure Static Web AppsでReactをはじめーる
# はじめに
Azure Static Web Appsで簡単にSPA（シングルページアプリケーション）を作れるようになったので、試してみました。なお、javascript初心者です。静的 Web アプリ https://azure.microsoft.com/ja-jp/services/app-service/static/
# 開発環境
– MacBook Pro
– VSCode# 導入
Azureポータルを開き、「静的」で検索「追加」をクリック
githubアカウントを連携し、リポジトリを作成しておく(gachimoto, private)
index.htmlを追加し、pushしたら、見えたapiの追加をしていく
https://docs.microsoft.com/ja-jp/azure/static-web-apps/getting-started?tabs=react
package.jsonに”react-router-dom”: “^5.2.0″を追加し、
~~~package.json
“dependencies”: {
JavaScript 暗黙的な型変換の思ってたよりちょっとだけ深い世界
2022年に学び残したことを学び切ってスッキリする Qiita アドベントカレンダー 『ひとりJavaScript』 3日目になります。
2日目は [JavaScript のスコープ、クロージャとは？ & スコープと var 非推奨との関わり – Qiita](https://qiita.com/kotaro-caffeinism/items/b2593021f0d90ce82109) でした。本日は JavaScript の型変換について見ていきましょう。
そもそも言語の性質として JavaScript は型についてかなりおおらかだと言えます。
> JavaScript は弱い型付けあるいは動的型付けの言語です。JavaScript では、変数が直接的に特定のデータ型に関連付けられているわけではなく、どの変数にもあらゆる型の値を代入 (および再代入) することができます。
>
> [JavaScript のデータ型とデータ構造 – JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Da
[rails]Googlemap APIを使ってプチ食べログを作りたいのでテスト環境で途中まで実装してみた！(Googlemap表示位置の変更、新規投稿編)
#### 初心者がやりたいことを綺麗にできないのでゴリ押ししてやり通しています。
間違いなく綺麗な書き方ではないので、そういったコードが嫌いな方は本気で見ないことをお勧めします。## [やりたいこと]
ポートフォリオ用に、食べログのラーメン屋さん専門みたいなのを作ろうかなと
やろうとしている機能は
– [x] 口コミ投稿機能(今回の主軸)
– [ ] Device機能(既に完了済み)
– [x] GooglemapAPI(ちょっとだけ)
– [ ] 多対多（アソシエーション、フォロー機能）
– [ ] AWS(デプロイ済み)
などです。## [注意]
かなり行き当たりばったりな記事です。
後々、他のgemなどの影響で書き方など変わる可能性があります。ご承知ください。## [環境]
※使っていない可能性のある環境も記載してます。
Mac M1チップ
rails 6.1.6
ruby 3.0.1
node v16.17.1## [前回まで]
https://qiita.com/_soratanaka_/items/766cf2fd0d56e538593c
##
【完走賞ゲット-3】p5.js Web Editor で p5.func を使ったイージング
## はじめに
こちらは、[完走賞ゲットのため小ネタを毎日投稿しようとチャレンジする Advent Calendar 2022](https://qiita.com/advent-calendar/2022/youtoy) の 3日目の記事です。
アドベントカレンダー初日・2日目と同様、3日目も 2記事を公開する日になっています（もう一つの記事はまだ完成してない…）。
## 本編
### 概要
今回の内容は、p5.js を使ったアニメーションでイージングを扱う話です。
「イージング」については、この「[イージング関数チートシート](https://easings.net/ja)」を見ていただくと、少し具体的な動きを体験することもできます。p5.js でのイージングという話では、過去に Tweenアニメーションを扱えるライブラリの [anime.js](https://animejs.com/) で扱ったことがありました（※ 以下の記事や動画が一例）。
●p5.js と anime.js を組み合わせた Tweenアニメーション – Qiita
https://qiit
【Vue.js】画像の配置場所による違いをkwsk
VueCLI・Viteを用いたVueアプリでは、画像の置き場所として `public/images`と`src/assets/images`の２箇所が用意されています。皆さんは両者の使い分けについて、正しく説明できるでしょうか？ 僕は全く出来ないので、後輩に聞かれた時のためにここに纏めておきます笑(￣∀￣)
## public に置いた場合
public配下の画像は、ビルド時Webpackのコンパイル対象に含まれず、画像の複製がそのまま出力されます。
## src/assets に置いた場合
一方こちらの画像は、ビルド時にWebpackによってコンパイルされます。
この時、画像サイズによって(デフォではVueCLI: 8kb, Vite: 4kb)挙動が異なります。サイズの小さい画像は、b
JavaScript（this編）
# thisは呼び出され方で参照先が違う
JavaScriptの基本的な文法の復習をしている際に、thisの挙動に関して「？？？」となってしまったため、自分自身が見返せるようにまた、同じようなところで詰まっている人にも共有できるようにまとめます。
## 一般的
“`
const infoObj = {
name: “foo”,sayName() {
console.log(`My name is ${this.name}.`);
},
};infoObj.sayName(); // -> My name is foo.
“`
こちらはわかりやすいのではないでしょうか。
いわゆるこのthisはinfoObjを指しており、
“`
console.log(`My name is ${this.sayName}.`);
console.log(`My name is ${infoObj.sayName}.`);
“`
これと同じ意味ですね。
ここからわかることは、
**thisは呼び出し元のオブジェクトを参照する（今回の例だったらinfoObj）
JavaScript のスコープ、クロージャとは？ & スコープと var 非推奨との関わり
2022年に学び残したことを学び切ってスッキリする Qiita アドベントカレンダー [ひとりJavaScript](https://qiita.com/advent-calendar/2022/caffeinism) 2日目になります。
1日目は [【2022年】JavaScript データ型を MDN 読んで全部まとめる【プリミティブ編】](https://qiita.com/kotaro-caffeinism/items/f5a8980db3d184c1e844) です。私は初めて勉強したプログラミング言語が JavaScript だったのですが、スコープ、クロージャの概念についてはすごく理解に苦しんだ記憶があります。
今記事では JavaScript におけるスコープとクロージャとは何か？ なんのために存在するのか？ そして変数宣言の `var` が非推奨となっている理由とスコープの関わりについてまとめていきます。
## この記事で書いてある内容の要約
– スコープ: 変数、関数が使用可能な範囲のこと。内側のスコープからは外側のスコープの値を参照することができる
【KDDI Engineer&Designer】AI にブラウザ用の JavaScript のプログラムをいくつか作ってもらった話 ⇒ OpenAI の ChatGPT で生成されたプログラムの解析も少々
## はじめに
こちらは、[KDDI Engineer&Designer の Advent Calendar 2022](https://qiita.com/advent-calendar/2022/engineer-designer) の 2日目の記事です。当初は、「開発環境を作ろうとしたら、中間証明書周りのエラーが出て対策した話」を題材として考えて準備をしていたのですが、アドベントカレンダーの担当日の前夜に「OpenAI の ChatGPT」が登場して話題になったため、「この流れに乗らねば！」と思って、急遽ネタを変更しました。
仕事の合間の休憩中にちょこちょこ試していた内容を、夜に仕事が終わった後から整理し始めて、ゼロから記事を書き始めるという流れでしたが、本日中に記事を公開できました。
### 【余談】 アドベントカレンダー全体に関する話
2022年のアドベントカレンダーシーズンは、昨日、初日を 2記事同時公開という形でスタートさせたのですが、本日も 2記事公開します（明日からも、しばらく 1日2記事の日々が続く予定…）。
本記事以外の 2日目の記事として、[完走賞ゲ
【ブックマークレット】スマホからでもソースが見たい！
# ブックマークレットでページのソースを見る
スマホでページをみているときにページのソースコードが読みたくなるとき、ありませんか？
ブックマークレットを使うと、ブックマークをクリックするだけでスマホでも、iPadでも、ソースコードを見ることができます！# はじめに謝辞
これは@mumeさんのhttps://qiita.com/mume/items/2b6dff93f5aff6a810e2
にシンタックスハイライトを追加したものです。
# コード
新しいタブでソースコードが表示されます
“`js
javascript:(function(){let newwin=window.open(‘about:blank’);newwin.document.write(‘'+(document.documentElement.outerH
【2022年】JavaScript データ型を MDN 読んで全部まとめる【プリミティブ編】
Qiita 初投稿になります。よろしくお願いします。
~~激カワ Qiitan ぬいぐるみ 目当てで~~ 2022年に学び残したことを学び切ってスッキリすべく、 [ひとりJavaScript](https://qiita.com/advent-calendar/2022/caffeinism) というカレンダーを完走しようとしています。必要な記事数は実に25記事/25日です (›´ω`‹ )
1日目とか言いながら既に遅刻していますが、今回は JavaScript のデータ型についてまとめていきます。
最初は私にとってあまり馴染みのない Symbol や Set についてまとめるつもりだったのですが、MDN『[JavaScript のデータ型とデータ構造 \- JavaScript \| MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Data_structures#%E3%80%8C%E9%80%9A%E5%B8%B8%E3%81%AE%E3%80%8D%E3%82%AA%E3%83%96%E3%82%B8%E3
React入門
## はじめに
今回の記事では、日本で非常に人気の高いJavascriptライブラリの1つである
Reactについて、簡単な概要を備忘録として残しておきたいと思います。## Reactはフレームワークではなく、ライブラリである
Reactはフレームワークであると勘違いされやすいですが、公式サイトでは「ライブラリ」と書かれています。フレームワークはアプリ開発で土台として使うプログラムを指し、開発に関する一通りの機能が備わっているもののことです。Reactには多くの機能が備わっていますが、基本的にUI設計に限定したものとなっているため、フレームワークではなくライブラリに分類されます。
## 1. React とは
Reactとは、一言でいうとUIを作ることに特化したJavascriptのライブラリです。
UIとは、ユーザー（利
Alpine.jsのネット上での知名度や評価を調べてみた
# 国内と海外での評価・評判
## ①国内（日本語記事）での評価・評判まとめ良いと言われている点
・シンプル
・覚えること少なめ
・導入が簡単
・学習コストが低い
・手軽
・JQueryの代替になりそう :point_left:わかるその他感想
・日本語の情報が少ない
・TypeScriptがサポートされていない ※たぶん::: note
参考記事
・[Alpine.js 5分で説明するよ](https://qiita.com/kohashi/items/ae8b1186567ec34b2a75)
・[Alpine.jsでサクッとフロントを構築する](https://webty.jp/staffblog/production/post-4734/)
・[Alpine.jsでドロップダウンメニューをスクラッチから作成(Alpine.jsの基礎)](https://reffect.co.jp/html/alpine-js)
:::## ②海外
JavaScript 基礎編 (イベント)
# この記事の内容について
フロントエンドの第一歩としてJavaScriptの基礎学習を始めました。アウトプットとして、JavaScriptのオブジェクトやDOM操作などをまとめていこうと思います！
私はまだエンジニア歴1年未満の初学者なので、間違い等があればご指摘いただけると幸いです。# JavaScript 基礎編
* [ブラウザオブジェクト / DOM](https://qiita.com/Nao52/items/c6b7531b85a5e4a6c8dc)
* [イベント](https://qiita.com/Nao52/items/6705eeca68a77b3f280a)# イベント
### イベントを設定する
```
要素.addEventListenner(イベント名, 関数名);
```
## 様々なイベント### Clickイベント
```html:ボタンをクリックするとアラートを表示する
【Javascript】基礎用語集まとめ
# はじめに
今回の記事では、学習を始めたばかりの方向けに基本用語を解説していきたいと思います。
Javascriptでは紛らわしい用語も多々あるので、1つ1つ具体的に説明できればと思います！# Javascript学習にお勧め
忍者CODEでは、多数の無料問題集から有料のコンテンツまで用意されています。
「初心者でいきなりお金かけて学ぶのは怖いなあ」
「まずはお金をかけずに学びたい」
そんな方には非常におすすめなサービスなので是非活用しましょう！https://ninjacode.work/
## オブジェクト
オブジェクトとは、プロパティの集合体のこと。
「人間」を例に挙げると、その「人間そのもの」のこと。## プロパティ
プロパティとは、「キー：バリュー」の組み合わせのこと。
オブジェクトの要素（中身）を決める役割をします。
先ほど例に挙げた「人間」にはそれぞれ様々な情報がありますよね。
年齢、性別、出身、好きな食べ物など挙げだすとキリがありませんね。
この例に挙げた「年齢、性別、出身、好きな食べ物」が「キー」にあたります。
「バリュー」はその個別な情報「2
JavaScript 基礎編 (ブラウザオブジェクト / DOM)
# この記事の内容について
フロントエンドの第一歩としてJavaScriptの基礎学習を始めました。アウトプットとして、JavaScriptのオブジェクトやDOM操作などをまとめていこうと思います！
私はまだエンジニア歴1年未満の初学者なので、間違い等があればご指摘いただけると幸いです。# JavaScript 基礎編
* [ブラウザオブジェクト / DOM](https://qiita.com/Nao52/items/c6b7531b85a5e4a6c8dc)
* [イベント](https://qiita.com/Nao52/items/6705eeca68a77b3f280a)# ブラウザオブジェクト
### アラートを表示する 「alert('文字列');」
```
alert('アラートです');
```
### 確認ダイアログを表示する 「confirm('文字列');」
ユーザーが「OK」と「キャンセル」のどちらを選択したのか、boolean型のtrueかfalseの戻り値で受け取ることができる。
```javascript:選択式ダイアログを表示する
cons
