- 1. 素朴な疑問 ~ モジュールバンドラーって何？ ~
- 2. 【ブックマークレット】画面をスリープさせない
- 3. X（Twitter）で自動的にいいねするスクリプトを公開する
- 4. Javascriptでこれ知ってますか？直接idのvalue指定で表示変更？
- 5. 【未経験】入社して３ヶ月経過してみて入社までにしておくべきだったと感じたこと
- 6. paizaプログラミング問題をやってみた：Dランク
- 7. reduceって？
- 8. 【JavaScript】ローカル環境でCSSのimportができない
- 9. JavaScriptからRubyへ：初心者が感じた違いと学び
- 10. apiリクエストのエラーハンドリングでトースト通知させる(axios interceptors / react-toastify)
- 11. PostgrestFilterBuilder についての備忘録
- 12. [date-fns] JST環境下で eachDayOfInterval に UTC時刻を突っ込んだ時の挙動が微妙な話
- 13. YouTube の IFrame Player API を使って p5.js Web Editor の中に YouTube動画を呼び出す
- 14. レガシーなBackbone.jsのコードをES6で書く
- 15. Tailwind CSSをNext.jsで使用してみた
- 16. ブラウザ完結型のチュートリアルを手軽に作れるツールキットが出たので触ってみる
- 17. 自己紹介ページのフッターを編集
- 18. JavaScript クロージャ
- 19. 【Tauri・Rust・Vue3】ストレージの使用状況をサンバースト図により可視化するためのアプリを作成しました
- 20. 【オブジェクト型】同じ値でも比較結果がfalseになる理由
素朴な疑問 ~ モジュールバンドラーって何？ ~
# 素朴な疑問
筆者が新人教育する中で、プログラミング実務未経験者がよくされる質問を紹介します。
未経験者に限らず、「そういえば何のために使っている技術（ツール）なんだっけ？」とよく理解していないまま利用しているケースも少なくありません。
この記事で、その純粋で素朴な疑問を改めて明確にして理解を深めていきましょう！# 今回の疑問
今回の疑問は表題通り、「**モジュールバンドラー** って何？」 です！
モジュールバンドラーの代表的なものとして[webpack](https://webpack.js.org/)がありますね。
# モジュールバンドラーって何？
一言で言うと、
「モジュールを**一つ（少数）のファイルへと変換する**ツール」 です。ここでいうモジュールとは、プロジェクト内の各ファイルのことを指します。
実際、我々がプログラミングしたモジュールは、そのままではブラウザ上で読み込ませることができません。
それには理由があります。以下の画
【ブックマークレット】画面をスリープさせない
# ページを見ている時にスリープされないようにする
レシピを見ている時に画面がスリープされること、ありませんか？
そんなときに役立つブックマークレットのご紹介です！実行するとこのようになり、スイッチがオンになっているときには画面がスリープしないようになります。
元々、クラシルのサイトでは料理モードという名前でスリープしない機能がありました。
それをすべてのサイトで使えるようにしたいと思い作成しました。
仕組みとしてはScreen Wake Lock APIを使用しています。
X（Twitter）で自動的にいいねするスクリプトを公開する
今回は、JavaScriptを使ってTwitterの自動いいねスクリプトを作るコードを紹介します。
## 実際のコード
“`javascript
let likeCount = 0; // いいねカウンターfunction autoLikeTweets() {
// すべてのツイートのいいねボタンを取得
const likeButtons = document.querySelectorAll(‘button[data-testid=”like”]’);if (likeButtons.length > 0) {
// 最初のいいねボタンをクリック
likeButtons[0].click();
likeCount++; // いいねカウントを増やす
console.log(`いいねしました: ${likeCount} 件`);
} else {
// いいねボタンがない場合、ページをスクロール
window.scrollBy(0, 100
Javascriptでこれ知ってますか？直接idのvalue指定で表示変更？
https://developer.mozilla.org/ja/play
のサイトで偶然下記のようにjavascriptを入力したら
getElementById を使わなくても id 属性で要素を指定できる。
一般的な記述
HTML
“`
“`
Javascript
“`
const cityx = document.getElementById(“city”)
cityx.value = “新たなデータ”
“`
を
“`
city.value = “新たなデータ”
“`
だけで表示された！！参考サイト：
https://mseeeen.msen.jp/elements-can-be-referenced-without-using-getelementbyid/
【未経験】入社して３ヶ月経過してみて入社までにしておくべきだったと感じたこと
## はじめに
4月中旬に未経験から受託開発企業に入社して3ヶ月が経過した中で、入社までにしっかりと理解しておけばよかったと感じた知識についての備忘録になります。## 入社までの私の学習状態について
学習期間は中断している期間も含めるとだいたい2年ぐらいで、主にPythonを中心に学習していました。フレームワークはDjangoとFlaskを使用した経験があり、それぞれでログイン機能付きのTODOアプリなどのフレームワークの理解に役立つ簡易的なアプリを2~3個を作成しています。フロントに関してはHTML５＋Bootstrapをメインに扱っており、javascriptは必要最低限使用する状態にしていました。ポートフォリオはDjangoを使用して過疎地域での高齢一人暮らし世帯の見守り負担軽減を目的としたLINEのようなメッセージアプリを作成しました（＊現在使用を停止しています）。ボットで定期的にメッセージを送信し、一定期間手動の既読ボタンがクリックされなければ管理者側に通知がいくといったものです。## 入社後の状態
ありがたいことに未経験入社ということで約２ヶ月トレーニング期間を設
paizaプログラミング問題をやってみた：Dランク
## はじめに
少し前から自己研鑽のためにLeetCodeという競技プログラミングの問題を解いています。
paiza×Qiita記事投稿キャンペーンを機にpaizaの問題を解いていこうと思い、コードを公開します。まずはDランクの問題です。
言語はJavaScript（TypeScriptがなかった…）を選択しています。## 文字の一致
“`javascript
process.stdin.resume();
process.stdin.setEncoding(‘utf8’);var lines = [];
var reader = require(‘readline’).createInterface({
input: process.stdin,
output: process.stdout
});
reader.on(‘line’, (line) => {
lines.push(line);
});
reader.on(‘close’, () => {
if(lines[0] === lines[1]){
console.log(“
reduceって？
## Reduceって？
[MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce)には、下記のような説明が記載されています。
> Arrayインターフェイスのメソッドで、配列のそれぞれの要素に対して、ユーザーが提供した「縮小」コールバック関数を呼び出します。配列の各要素に対して、処理を実行するメソッドですかね。
使い方は、
“` js
const arr = [1, 2, 4];
const res = arr.reduce((acc, curr) => acc + curr, 0);
console.log(res); // 7
“`
上記のように。### 構文
“` js
配列.reduce(コールバック関数, 初期値)
“`
– コールバック関数：配列のそれぞれの要素に対して、呼び出す関数
– 初期値（省略可）コールバック関数内の引数
– accumlator：前回のコールバック関数の戻り値
– currentValue：
【JavaScript】ローカル環境でCSSのimportができない
# はじめに
UdemyでJavaScriptの学習中に少しハマったので共有します！
講座内ではオンラインの開発環境で解説がすすめられていたのですが、理解を深めるためにローカル環境で再現しようとしていたところタイトルの現象に遭遇しました。https://www.udemy.com/course/modern_javascipt_react_beginner/?couponCode=ACCAGE0923
# 問題
以下のように、JavaScript内でCSSをimportする記述をしてもスタイルが反映されず、ディベロッパーツールで確認するとエラーが出ていました。
## はじめに
たまによく見るapiリクエスト時にレスポンスがエラーだったときのトースト通知を、axios interceptorsとreact-toastifyで実装します。
axios interceptorsを使うことでapiリクエストのエラーハンドリングを共通化出来るので、apiの呼出都度エラー処理のコーディングが不要になって便利です。*イメージ
## axios interceptorsについて
apiリクエスト/レスポンス時に処理を追加できるaxiosの機能です。
#### メリット
* 一度設定すれば、すべてのaxiosリクエストに対して自動的に適用できる
* 複数のinterceptorを設定して順番に実行させることもできるaxiosの日本語docsにサンプルコードあります👇️
https://axios-http.c
PostgrestFilterBuilder についての備忘録
`Supabase`の`PostgreSQL`を操作できる`PostgrestFilterBuilder`の使い方について、わかりづらいところがあったため、そのメモです。
公式ドキュメントは、以下ページですhttps://supabase.com/docs/reference/javascript/using-filters
## 関数一覧
関数を、メソッドチェーン形式で呼び出すことで、And 条件で検索が可能##### 等しい（列名 = 値）
`.eq(列名, 値);`##### 等しくない（列名 != 値）
`.neq(列名, 値);`
※列の値が`null`のレコードが取得されなくなる
→ `null`のレコードを取得できる様にするには、`.neq()`を使用せず、
`or(“列名.is.null,列名.eq.値”)`の様な実装が必要##### より大きい（値 < 列名） `.gt(列名, 値)` ##### 以上（値 <= 列名） `.gte(列名, 値)` ##### より小さい（列名 < 値） `.lt(列名, 値)` ##### 以下（列名 <=
[date-fns] JST環境下で eachDayOfInterval に UTC時刻を突っ込んだ時の挙動が微妙な話
## 本資料における前提
システムのタイムゾーンはJSTとする。## まずは問題のないケース
27日、28日、29日の連続した日付を生成したいとき、以下のようにJST時刻を使用しparseISOでDateオブジェクトを生成する。こうすることで、問題なく連続した日付を生成することができる。というか一般的にはこうすると思う。“`ts
import { eachDayOfInterval, parseISO } from “date-fns”;test(“JSTを使った場合の eachDayOfInterval の挙動が意図通りか確認するテスト”, () => {
const start = parseISO(“2024-07-27T00:00:00+09:00”);
const end = parseISO(“2024-07-29T00:00:00+09:00”);
const dateList = eachDayOfInterval({ start, end });
expect(dateList).toEqual([
parseISO(“2024
YouTube の IFrame Player API を使って p5.js Web Editor の中に YouTube動画を呼び出す
完全に「思いついたからやってみた」という内容で、何に活用できそうかはこれから考えるというものなのですが…
https://x.com/youtoy/status/1816840415871685094
以下の YouTube の「IFrame Player API」を使った YouTube動画の表示を、p5.js Web Editor上でやってみたというものです。
●iframe 組み込みの YouTube Player API リファレンス | YouTube IFrame Player API | Google for Developers
https://developers.google.com/youtube/iframe_api_reference?hl=ja
上記のページでサンプルとして示されている内容は、以下
レガシーなBackbone.jsのコードをES6で書く
レガシーなコード
“`javascript
var DocumentRow = Backbone.View.extend({tagName: “li”,
className: “document-row”,
events: {
“click .icon”: “open”,
“click .button.edit”: “openEditDialog”,
“click .button.delete”: “destroy”
},initialize: function() {
this.listenTo(this.model, “change”, this.render);
},render: function() {
…
}});
“`こういうレガシーコードはインテリセンスがまっっっったく働かないので、クラス式に書き換える。
“`javascript
const DocumentRow = class extends Backbone.View {ev
Tailwind CSSをNext.jsで使用してみた
[この記事](https://coliss.com/articles/build-websites/operation/work/animate-ui-interaction-and-animations.html)を見て、Animataの中にあるflip-cardを試してみようと思ったら日本語の記事がなく思ったよりセットアップに時間がかかったので備忘録としてまとめておく
# 目標
以下のようなカードを作成する
セットアップさえできれば[このページ](https://animata.design/docs/card/flip-card)のコードをコピペするだけで導入できる
# 環境
– Windows 11
– VSCode
– npm各ツールのインストール方法については割愛
# 手順
ブラウザ完結型のチュートリアルを手軽に作れるツールキットが出たので触ってみる
タイトルの通りです。ブラウザ完結型のチュートリアルを簡単に作れるツールキットをStackBlitzが出してくれました。
https://x.com/stackblitz/status/1816478595407077393
[こういう感じのチュートリアルサイト](https://demo.tutorialkit.dev/forms-tutorial/introduction/welcome/)の雛形がコマンド一発で作れるので、チュートリアルコンテンツの作成に集中することができます。ただし、このツールキットは[WebContainers](https://webcontainers.io/)の技術を使っているため、ブラウザ完結型で動かすことが可能な一方、WebContainersのコンテナ上で動くものに限定されてしまうので、現状としてはJS、CSSなどのライブラリやフレームワークのチュートリアルを作成できるツールと認識しておく必要があります。
## 早速触ってみる
公式のアナウンス通り、まずはプロジェクトを作成してみます
“`
$ npm create tutorial
“
自己紹介ページのフッターを編集
お疲れ様です。
今日は自己紹介文のフッターに貼り付けている画像に動きをつけました。
内容は以前紹介した **「1冊ですべて身につくJavaScript入門講座」** を進んだり戻ったりしながら書きました。**css**
“`diff_css
.other {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
max-width: 1020px;
gap: 30px;
margin: auto;
padding: 30px;
}.item{
width: 300px;
height: 300px;
}
“`
**JavaScript**
“`diff_javascript
// footer画像のアニメーション
// .itemの配列要素を個別に取得
const imgItem = document.querySelectorAll(‘.item’);for(let i = 0; i < imgItem.len
JavaScript クロージャ
# クロージャとは
[mozilla](https://developer.mozilla.org/ja/docs/Web/JavaScript/Closures)から引用させてもらうと、内側の関数から外側の関数スコープへのアクセスを提供するものだそう。## どんな時に使うのか
複数回のメソッドコールに渡って変数の状態を管理したいけど、メソッドの外からは変数を触られたくない。といったケースにおいて、変数をメソッドの内側に定義した上で外から操作できるようにするための手法。## 例
整理券を発行する用のメソッドを例に確認してみる。
名前を引数に渡すことで、番号を採番して名前と番号を返却するメソッドを作るとする。変数の隠蔽を意識せずに書くと以下のようになる。
この場合、採番値(i)は自由に書き換えることができてしまう。“`javascript
let i = 0;function numbering(name) {
return `${++i}番 ${name}`;
}console.log(numbering(“田中”));
console.log(numbe
【Tauri・Rust・Vue3】ストレージの使用状況をサンバースト図により可視化するためのアプリを作成しました
# 作ったもの
https://github.com/fksms/DirWalker
# アプリの特徴
– ストレージの使用状況をサンバースト図により可視化することができます。サンバースト図のアークを左クリック
【オブジェクト型】同じ値でも比較結果がfalseになる理由
# はじめに
同じ値のオブジェクト型について、比較結果がfalseになるのはご存知でしょうか？最近動画を使って勉強をしている中で、個人的には割とびっくりした内容でした。
実際に下記のようなソースコードを書いてみると、値が同じであるにもかかわらず、falseと判定されてしまいます。
“`js
// オブジェクト型
const o1 = {“age”: 20};
const o2 = {“age”: 20};console.log(Object.is(o1, o2)); // 比較結果が「false」と判定される
“`そこで、本記事では同じ値のオブジェクト型での比較結果がfalseになる理由を紹介します。
# プリミティブ型とオブジェクト型の違い
前提として上記の理由を説明する前に、オブジェクト型との比較結果が異なるプリミティブ型についても併せて紹介します。
|種類|型の具体例|
|:-:|:–|
|プリミティブ型(基本型)|String型, Number型, Boolean型, undefined型, null|
|オブジェクト型|配列, オブジェクト などプリ
