- 1. Vue 3から始める人のための学習ロードマップ
- 2. 【今更聞けない】HTML/CSS/JavaScript でWebページをつくろう
- 3. チュールのうたを圧電スピーカーで音階設定して、動画BGMを作成した話。
- 4. indexedDB の特性まとめ
- 5. React+MUI+React Hook Formでタグ入力フォームの作り方
- 6. 【データモデル】Sharperlight CANVAS
- 7. Javascriptでもアローラロコンをアーロンにする
- 8. Reactのonchangeは、javaScriptのonchangeとは違うらしい。
- 9. Slackが無料ユーザーに厳しくなったので引っ越すことにした
- 10. Array.concat
- 11. dポイントの獲得・利用履歴を表形式で取り出す方法
- 12. 【JavaScript】期間重複をチェックする
- 13. JSX内で配列・オブジェクトをループ処理する
- 14. FormDataオブジェクトにデータをappendしてAjaxでpostする
- 15. HTML関連にはまった新卒1年目のお話
- 16. JavaScript_”use strict”
- 17. 照度計のグラフをいじってみた
- 18. Bloggerの投稿画像の遅延読み込みの自動化にIntersection Observer APIを使ったJavaScriptプログラムと説明
- 19. Bloggerの投稿画像のWebPのrwの自動化のJavaScriptプログラムと説明
- 20. Bloggerの投稿画像のlazy-loadの自動化のJavaScriptプログラムと説明
Vue 3から始める人のための学習ロードマップ
仕事で 1 年目の新人トレーナーをやることになり、 Vue 3 に挑戦することになったのでその際の学習のためのメモです。
筆者は Vue 2 + Vuetify での SPA 構築経験（趣味）があるのみで、お仕事はバックエンド側なので、もっといいアドバイスなどありましたら教えていただけると助かります！まだ進行中なので進捗に応じて更新するかもです。 :bow:
## 対象読者
* Web アプリを構築したい
* JavaScript は触ったことある
* TypeScript はわからない
* React とか Vue.js とかのフレームワークも何もわからん
* 小規模 & 開発スピード優先で Vue 3 を選択
* 新参なので Vue 2 との違いを解説されてもわからないよ！な人です。
## まずはそれぞれの役割を知ろう
### JavaScript
ここはまぁ大丈夫だと思います。 DOM 操作をしたりして HTML を書き換えたりできます。元々はブラウザで動くプログラミング言語として開発されましたが、今や **Node.js** などサーバー用途でも使われてい
【今更聞けない】HTML/CSS/JavaScript でWebページをつくろう
# YouTube
こちらの記事は、本日2022年7月28日18:00~19:30(まもなく公開！) YouTubeライブ配信の資料です。
# スライド資料
https://docs.google.com/presentation/d/1RsJBOrxHDdH25QbEHfRprZc5JlvphvRk7rOimuJZGZc/edit
# Webページをつくる前に
マークダウン記法をご存知ですか？
▼マークダウン記法 サンプル集↓↓↓
https://qiita.com/tbpgr/i
チュールのうたを圧電スピーカーで音階設定して、動画BGMを作成した話。
こんにちは～
私には飼っている猫（こっちゃん♀）をいなばチュールのCMに出演させたい！という
夢があるのですがなかなか叶えることができず・・・
こっちゃんのために自分でＢＧＭを作り、動画までとってみよう！と
実践したことをまとめました！**今回はYoutubeのちゅーるのうたを流すだけでは面白くないので
圧電スピーカーで音階設定して、LINEリッチメニューで使用しやすいように作成しました。**ちなみにチュールはいなば食品グループのいなばペットフードから発売されており、
猫達が食べやすいよう水分を90%含んだペースト状のフードらしいのですが、
我が家ではほぼ猫のおやつです。
そして今年はチュール販売開始から10年という記念すべき年でもあります！## 完成した動画
ここさんに再度お願いしてチュールCM風動画を撮りました?電圧スピーカーの音階設定難しいけど楽しい！ワンフレーズじゃ食べきれないからエンドレスで流れる設定にしつつ、リッチメニューで再生&ストップも楽ちんに✌️#ちゅーる #猫好きさんと繋がりたい #obniz #LINEBot #protoout pic.twitter.com/RjTTplD89A
— hitomi@趣味探しアプリMe Clip（ミークリップ）開発中?♀️ (@nghrhtm1) July 24, 2022
私の多少の音痴がチュールのうたにも出ているし、
obnizが映ってないから2回撮影しましたが、
こっちゃんは喜んで対応してくれました笑## 使用したもの
* [obniz](https://
indexedDB の特性まとめ
# まとめ
– indexedDBのトランザクション分離レベルは一番高いシリアライザブル
– 各種操作にかかるおおよその時間比
– シンプルなオブジェクトのread＝1
– シンプルなオブジェクトのwrite=1
– readonlyトランザクションの獲得=3
– readwriteトランザクションの獲得=40※もちろん、実行環境（Windows10 chromeで実施）によって、傾向が変わってくる可能性はある
# 背景
最近[クロム拡張作成](https://qiita.com/largetownsky/items/ee9db46b372e5adb20f0)で、滅茶苦茶indexedDBを使い倒しているが、細かい仕様を把握しきれていない事が気になってきた。特にトランザクション周りは、RDBなら[トランザクション分離レベル](https://qiita.com/song_ss/items/38e514b05e9dabae3bdb)として明確に規定されているが、indexedDBでは、明確な仕様が見つからなかったので、動作を見てみた。# 検証環境
以下、全て適当
React+MUI+React Hook Formでタグ入力フォームの作り方
## 概要
大変だったのでシェア。やりたかったかことは、タグ入力で使うフォーム。
オートコンプリート＋テキスト入力＋チップで構成してある。React Hook Form的には外部ライブラリを使う場合はregisterではなく、controllerを使いましょう。ということだったのだが、デフォルト値のセットがどうやってやるのかよくわからなかったし、なぜかサブミットに値が入らなかった。
コード的には以下でできたよ。もっといいのあったら教えてー
## コード
“`javascript:uniq.jsx
const [hogehoge, setHogehoge] = useState([]);const { control, handleSubmit, setValue, reset } = useForm({
mode: “onChange”,
defaultValues,
});const defaultValues = useMemo(() => {
let defaultValue = {
hogehoge: [
【データモデル】Sharperlight CANVAS
今回は、[Sharperlight](https://sharperlight.jp/)エンジンを屈指して作成した派生品 **Sharperlight CANVAS** を紹介したいと思います。
Sharperlight CANVASは、お手持ちの画像とデータを結びつけて視覚的にデータを表現するための支援ツールです。
SharperlightのカスタムWebレポート機能をフルに利用して作成しています。
Sharperlightにはこのような使い方もあるということがご理解いただければ幸いです。
### 概要 ###
HTMLとJavaScripでガシガシ書いたコードをSharperlightのWebレポートに梱包しています。
➊記述したコードをリソースとして公開クエリにインポート、➋カスタムHTMLとしてそれを参照します。
そしてSharpe
Javascriptでもアローラロコンをアーロンにする
# やる事
タイトルの通り。入力された文字列を2文字づつ飛ばした文字列にして出力する。Pythonほど楽じゃないけどPHPよりは簡単そう。Typescriptで[もっとすごいこと](https://qiita.com/schrosis/items/1835c8e5787837eb2199)をやってる人がいたけど、こういうのは勢いが大事なのでやっていく。# 元ネタ
アローラロコンを1文字飛ばしで読むと…
>>> "アローラロコン"[::2]
'アーロン'— 清原弘貴@ShodoでAI校正 (@hirokiky) July 27, 2022
## 触発された記事
[PHPでアローラロコンをアーロンにする](https://qiita.com/tadsan/items/828cf43ec902440255cb)# コード
“`javascript:arora.js
function arora(str){
return new Array(…str).filter((_,i)=>(i+1)%2===1).join(“”)
}function main(){
const str = “アローラロコン”
console.log
Reactのonchangeは、javaScriptのonchangeとは違うらしい。
どうやらReactは、Component.onChangeのリスナーをDOM element.oninputイベントに関連付けるようだ。
つまり、Reactのonchangeイベントは、javaScriptのoninputと同じ挙動になるらしい。※javaScriptのイベントハンドラ
onchange – フォーカスを外したタイミングで発火する
oninput – フォームに入力があるごとに発火する以下React公式ドキュメントから引用。
しがたってjavaScriptのonChangeイベントと同じだと思って使用すると
ユーザーの入力後にイベントを発火させたい時はうまくいかない。これを実現するには、onBlurを使えば良いが
値が手動で変更されたことを確認する必要もある。
あとは
Slackが無料ユーザーに厳しくなったので引っ越すことにした
## ０．はじめに
私は、ただのドシロウトです。プログラミングの専門家ではありません。
Slackが2022年9月1日からフリープランの変更を行います。私はがっかりです。
変更前
> メッセージ1万件／ストレージ5GB変更後
> 保存上限が撤廃だが、メッセージの保存期間が90日間
> 9月1日の時点で、5月末以前の投稿は全て非表示化がっかりですね。
## １.…でどうするか？（私の場合）
私の場合は、SLACKは、ぼっち…(;^_^A で運用しており、公開チャンネルふたつにメモとURLをコピペしていただけでした。（オンラインブックマーク代わり）
なのでリプライもないので２つのChannelのメッセージだけ全て取得できればよかったわけです。
私の場合は、Slackに見切りをつけてメッセージを全て取得して引っ越しすることにしました。
## ２．…で調べた
以下の方法があるみたいです。
* 標準のエクスポート機能でJSON出力し、日付毎に分かれたファイルをViewerで見る方法
> Slack Export Viewer
> https://github.com
Array.concat
RubyのArray.concatは破壊的で、
JavaScriptのArray.concatは非破壊的https://docs.ruby-lang.org/ja/latest/method/Array/i/concat.html
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/concat
dポイントの獲得・利用履歴を表形式で取り出す方法
以前は`csv`形式でダウンロードできた表形式のdポイントの獲得・利用履歴を、ブラウザコンソールから`JavaScript`を使って取り出す方法です。
動作環境
> Windows 10
> Firefox:::note info
Firefox のみ動作確認していますが、JavaScript を使用しているので、
> Chrome
Edge
Safari
Operaなどでも同様に動作する可能性があります。
:::## 利用方法
### 1. [dポイントクラブ](https://dpoint.docomo.ne.jp/index.html “dポイントクラブ”)にログインします。
### 2. dポイント合計のポイント数（赤枠）をクリックします。
,
end: new Date(‘2022/07/31’)
}// 期間B：2022/07/31 – 2022/08/30
const dateB = {
start: new Date(‘2022/07/31’),
end: new Date(‘2022/08/30’)
}“`
上記のような期間Aと期間Bがあるとしたとき、ふたつの期間が重複しているか判定するには以下の条件式を使用します。
“`
期間Aの開始時間 <= 期間Bの終了時間 && 期間Aの終了時間 >= 期間Bの開始時間
“`
※比較演算子は、条件に応じて変更します。
期間が重複していればtrueが、重複していなければfalseが返ってき
JSX内で配列・オブジェクトをループ処理する
# 環境
– Node v18.0.6
– Next.js v12.1.6
– React v 18.1.0
# ループ処理する
## 配列で与えられた場合
“`jsx
const array = [“apple”, “banna”, “pear”];
“`
mapメソッドを使います。“`jsx
return (
<>
{array.map((fruit) => {
return{fruit};
})}
);
“`
一応は描画されますが、コンソールに警告が出ます。
ループ処理したReact要素にはkeyプロパティをつけると、Reactが差分レンダリングに活用してくれます。
keyは兄弟間で一意なものであればなんでもいいです。
この場合使えるのはfruit(フルーツの名前)か、配列のインデックスです。
今回はインデックスを使いますが、本当はあまり良くないです。後述。“`jsx
return (
<>
{array.map((fruit, index) => {
FormDataオブジェクトにデータをappendしてAjaxでpostする
サーバー側にpostする値を加工する必要があったので
フォームに対して少し手を加えた。“`javascript
data = new FormData($(“id”))let hoge = ”;
data.append(‘fuge’, hoge)$.ajax({
data: data,
type: “POST”,
dataType: “json”,
url: “url”
})
.done(function(data, textStatus, jqXHR) {
console.log(‘success’)
})
.fail(function(jqXHR, textStatus, errorThrown) {
console.log(‘fail’)
});
“`送信実行結果
“`
Uncaught TypeError: Failed to construct ‘FormData’: parameter 1 is not of type ‘HTMLFormElement’.
“`どうやらnew FormDataで
HTML関連にはまった新卒1年目のお話
## ＊はじめに
みなさん、はじめまして！
新卒一年目の初投稿です:tulip:
簡単に自己紹介します。
– 学生時代は文系
– ゼミでは映像制作をしていた
– 学部が経営情報学部だったためプログラミング入門があった
– 授業はすごく簡単でintやStringの話などだったこんな感じでほぼプログラミングに触ったことがない初心者です。
Qiitaに何か書きたいけど、技術的なことはまだまだ提供できるものではないなと思い何を書こうと悩んだところ、今回は新卒1年目・プログラミング初心者がOJT期間中にHTMLにはまった・楽しいなと感じた話についてみなさんにお伝えできればと思います。## ＊私が作成したもの
以下の通りレスポンシブデザインを用い、モバイルアプリ・webアプリ両方対応のレストランマップのデザインを作成しました。“`css:text.css
@media screen and ( max-width:767px )
“`
このコードの下にモバ
JavaScript_”use strict”
“use strict” : エラーチェックを行う
“`
例１：
例２：
※ メソッド内でも、varをついてない時、グローバル変数になる
function(){
// varをついてないため、グローバル変数
testName = “test”;
// varをついてるため、ローカル変数
var testProperty = “test”;
}
“`
照度計のグラフをいじってみた
おうちモニター(oumon)で照度計のデーターをChart.js V2でグラフを表示しているのですが、いまいちピンときません。
センサーは東向きの窓際にあり、ほぼほぼ自然光の値です。
気圧のグラフを流用して作っていました。
元々48時間分のデーターをsqlite3からmrubyでjsonにして受け取っていたのですが、cgiにパラメータを追加して3日分とかの取得を取得を可能にしました。
“`ruby
if params[“days”]
count = (params[“days”].to_i – 1) * 24 + Time.new.to_s[11,2].to_i
else
count = 48
endi = 0
sel = “select date(datetime(date,time,’localtime’)
Bloggerの投稿画像の遅延読み込みの自動化にIntersection Observer APIを使ったJavaScriptプログラムと説明
Bloggerの記事／追加ページの投稿画像や動画の遅延読み込みをIntersection Observer APIを使って自動化するJavaScriptプログラムの内容を説明する。
“`JavaScript:JavaScript
// 記事の本文の要素（psbd）と記事の本文の中身に付けたnoscript要素（psbd）と記事の本文の要素の複製（npsbd）の取得
const psbd = Blog1.querySelector(“div.post-body”), blct = psbd.querySelector(“noscript.blog-content”), npsbd = psbd.cloneNode(false);// 記事の本文の複製にnoscript要素のソースコードを入れる（noscript要素のソースコードはテキストだからそのままではHTMLとして扱えないため）
npsbd.insertAdjacentHTML(“afterbegin”, blct.innerText);// 記事の本文の複製から画像要素を取得
const blimgs = npsbd.q
Bloggerの投稿画像のWebPのrwの自動化のJavaScriptプログラムと説明
Bloggerの記事／追加ページの投稿画像にWebPへ軽量化するrwのパラメーターを自動的に付けるJavaScriptプログラムの内容を説明する。
“`JavaScript:JavaScript
// 記事の本文の要素（psbd）と記事の本文の中身に付けたnoscript要素（psbd）と記事の本文の要素の複製（npsbd）の取得
const psbd = Blog1.querySelector(“div.post-body”), blct = psbd.querySelector(“noscript.blog-content”), npsbd = psbd.cloneNode(false);// 記事の本文の複製にnoscript要素のソースコードを入れる（noscript要素のソースコードはテキストだからそのままではHTMLとして扱えないため）
npsbd.insertAdjacentHTML(“afterbegin”, blct.innerText);// 記事の本文の複製から画像要素を取得
const blimgs = npsbd.querySelectorAll(
Bloggerの投稿画像のlazy-loadの自動化のJavaScriptプログラムと説明
Bloggerの記事／追加ページの投稿画像や動画に遅延読み込みのHTML属性のloading-lazyを自動的に付けるJavaScriptプログラムの内容を説明する。
“`JavaScript:JavaScript
// 記事の本文の要素（psbd）と記事の本文の中身に付けたnoscript要素（psbd）と記事の本文の要素の複製（npsbd）の取得
const psbd = Blog1.querySelector(“div.post-body”), blct = psbd.querySelector(“noscript.blog-content”), npsbd = psbd.cloneNode(false);// 記事の本文の複製にnoscript要素のソースコードを入れる（noscript要素のソースコードはテキストだからそのままではHTMLとして扱えないため）
npsbd.insertAdjacentHTML(“afterbegin”, blct.innerText);// 記事の本文の複製から画像要素を取得
const blimgs = npsbd.querySe
