- 1. 【JavaScript】現在のウェブページのURLを取得する（window.location.href）
- 2. Leafletで地図に円を描き、人口データの属性を持つ町丁目ポリゴンを取得して表示してみる
- 3. 【クイズ】. の使い方を見分けろ！
- 4. perplexity先生（無料版）がすごすぎて楽な件
- 5. 28歳未経験からいきなりフリーランスエンジニアになったらこうなった
- 6. JavaScript 変数宣言について
- 7. Next.jsでのバリデーション
- 8. Next.jsでのパラメータ取得
- 9. 【React/Tailwind】YouTube動画を埋め込むためのコンポーネントを作ってみる(レスポンシブ)
- 10. JavaScriptで `fetch` を使う時のエラーハンドリングの方法
- 11. 完全未経験（元消防士）からWEB系エンジニアへの道
- 12. javascriptで作るゲーム【ジャンケンマンフィーバー】ロジック編
- 13. 「ことのはたんご」で連勝
- 14. Javascriptでイベントカウントダウンを作る
- 15. JavaScript ページをリロードしないと動かない(RubyonRails)
- 16. javascriptで初期化した配列を作成する方法
- 17. Javascript 高階関数
- 18. laravel-vite-pluginを用いてJavaScriptのモジュールをバンドルする
- 19. CDNから読み込んだ(Moduleではない従来型の)JSライブラリに対して、後付けで型を適用する方法
- 20. 【Figma Plugins】はじめてのFigmaのプラグイン作り（セットアップ）
【JavaScript】現在のウェブページのURLを取得する（window.location.href）
現在のウェブページのURLを取得する（window.location.href）
JavaScriptで現在のウェブページのURLを取得するには、window.location.hrefプロパティを使用します。このプロパティは、ブラウザのアドレスバーに表示されているURLを文字列として返します。以下はその使用例です。
var currentUrl = window.location.href;
console.log(currentUrl);
このコードをウェブページのスクリプト内に記述すると、コンソールに現在のページのURLが表示されます。var currentUrl = window.location.href; // この行は、Webページの現在のURLを取得します。
console.log(currentUrl); // この行は、取得したURLをブラウザのコンソールに出力します。
window.location.href プロパティは、現在のページの完全なURLを返します。このコードがWebブラウザ内のJavaScript環境で実行されると、ページの完全なUR
Leafletで地図に円を描き、人口データの属性を持つ町丁目ポリゴンを取得して表示してみる
## はじめに
今回は、Leafletを用いて地図上に円を描き、円に交差する町丁目ポリゴンとその属性である人口総数データを取得して表示する方法を試してみました。主な技術要素・使用しているものは以下になります。
– [Leaflet](https://leafletjs.com/)
– JavaScript
– TerraMap API（区画ポリゴンや統計データ等を提供するWeb API）※今回使用している人口総数データは、令和2年国勢調査（2020年国勢調査）の結果に基づいております。
https://www.mapmarketing.co.jp/terramap-api?grid=qiita&utm_source=qiita.com&utm_medium=referral&utm_campaign=qiita_leaflet_circle_area_cb96b832fffa5f3b30cc_01
弊社の記事では、Leaflet以外でも円・ポリゴン・座標を指定してサーバーへのリクエストに利用する方法をご案内してきました。今回と同じ目的で、Google マップでの実現にご興味をお
【クイズ】. の使い方を見分けろ！
# はじめに
プログラミング全般において、`.`がさまざまな形で使われています。
今回は、クイズ形式の記事です。`.`の知らない使い方があるかも？
全11問、お楽しみいただければ幸いです。
# クイズ
### 1
以下の使われ方をするとき、`.`は何を表す？
“`bash
ls -a .
cd ./dir
cp -r . /path/to
“`答え
「カレントディレクトリ」
「現在のディレクトリ」を指します。
### 2
以下の使われ方をするとき、`..`は何を表す？
“`bash
cd ..
ls ..
cat ../file
“`答え
「親ディレクトリ」
一つ上の階層（ディレクトリ）を指します。
### 3
以下の使われ方をするとき、`.`は何を表す？
“`
example.txt
example.json
“`答え
「拡張子」
perplexity先生（無料版）がすごすぎて楽な件
## 0.はじめに
この記事は、非エンジニアのドシロウトが書いています。プロ向けではありません。
内容的には、ポエムなんですが、一応コード貼るので、ポエムのタグは外しました。この記事を要約すると
* サイドバイサイドでローカルのMP4を２本同時に表示する動画プレーヤーが欲しかった
* 生成AI [perplexity](https://www.perplexity.ai/) 先生（無料版）に聞くとほぼできちゃった
* 自分で直したのはCSSのマージンと一時停止ボタンだけ
* すごいので[perplexity](https://www.perplexity.ai/) 先生（無料版）とのやり取りを記事にする誰でも知ってるかも？ですが、こんな感じです。
## 1.作ったもの
[codepen](https://codepen.io/sf-os/pen/KKYYLLE) に貼ってます。
28歳未経験からいきなりフリーランスエンジニアになったらこうなった
現在32歳で約4年間フリーランスエンジニアをやってきて現状こんな感じ！というのを自分自身の振り返りも兼ねて「しくじり先生」風に書いていく。
## 自己紹介
1991年6月生まれ
趣味はサッカー観戦(柏レイソルが好き、ドラム)### 略歴
* 16歳 サッカー推薦で進学した高校を3ヶ月で辞めて通信の高校に転校
* 18歳 大学に進学
* 22歳 医療機器の営業職
* 26歳 仕事を辞めてバンドを始める
* 27歳 バンドを辞めてこれからはITだと意気込んでSES企業に就職
* 28歳 30歳までに起業すると決めたのでとりあえず会社を設立し独立
* 現在(32歳) 大手ベンチャーにてフロントエンジニア(業務委託)として働きつつ、自社サービスを作る## 27歳 バンドを辞めてこれからはITだと意気込んでSES企業に就職
これからエンジニアになるべくバンドの経験を面接で話したら簡単に就職が決まった。
だが現場ではコードは一行も書かず、こんなはずじゃなかった。
これは紛れもなく自分に実力がないのが原因だ。## 28歳 仕事ではコードを書けないから自分でやろう
略歴でも記載したが27
JavaScript 変数宣言について
JavaScriptの変数宣言について、調べたことを備忘録として書きたいと思います。
# 目次
[参考](#参考)
[事象説明](#事象説明)
[変数宣言について](#変数宣言について)
[勘違い](#勘違い)
[まとめ](#まとめ)## 参考
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Grammar_and_types## 事象説明
“`JavaScript:sample1.js
// 以下のvarでの変数宣言をしても、しなくても関数でエラーが起きない理由は何であるか調べました。
var hoge = “”;
// var hoge = “”;function testFunc() {
hoge = “”;
console.log(“hoge” + hoge);
}
“`#### 変数宣言について
JavaScriptでの変数宣言方法
|キーワード|概要|例|
|:—|:—|:—|
|var|ローカル変数とグローバル変数の両方の宣言可能|var x = 1|
Next.jsでのバリデーション
Next.jsではバリデーションの機能が提供されていない。
そのため、外部のReactライブラリである、`React Hook Form`を利用する。“`
$ yarn add react-hook-form
“`
Next.jsでのパラメータ取得
Page関数に引数を定義すると、URLのパラメータを動的に取得することができる。
“`tsx: page.tsx
export default function Page({ params }: {
params: { id: number },
}) {
// ここに処理
}
“`
【React/Tailwind】YouTube動画を埋め込むためのコンポーネントを作ってみる(レスポンシブ)
## 概要
ReactでYouTube動画を埋め込むためのカスタムコンポーネントを作成してみました。スタイリングには、Tailwind CSSを使用し、レスポンシブに対応させました。## コンポーネントの機能
– YouTube動画の埋め込み
– タイトルの表示
– カスタムスタイリング（Tailwind CSSを採用し、レスポンシブに対応）
– 動画情報のURLまたは動画IDの両方に対応**対応している動画のURL形式について**
“`
https://www.youtube.com/watch?v=VIDEO_ID 標準形式のURL
https://youtu.be/VIDEO_ID 短縮URLhttps://youtube.com/watch?v=VIDEO_ID%E3%80%80%E5%9F%8B%E3%82%81%E8%BE%BC%E3%81%BF%E3%83%97%E3%83%AC%E3%83%BC%E3%83%A4%E3%83%BC%E3%81%AEURL“`
## デモ
https://react-youtube-embed.vercel.app/
## 使用例
### Propsの説明
| プロパティ名 | 説明
JavaScriptで `fetch` を使う時のエラーハンドリングの方法
## はじめに
JavaScriptでAPIをFetchするときのエラーハンドリングの方法をまとめます
。この記事では、`fetch` を使った非同期処理で起こり得る異なるエラータイプと、それらを効果的にハンドルする方法について解説します。## エラータイプ
非同期処理では主に次の三種類のエラーが考えられます：
1. **ネットワークエラー**:
– これは `fetch` がネットワーク接続がない、またはリクエストが何らかの理由で送信できない場合に発生します。2. **HTTPエラーステータス**:
– リクエストが送信され、サーバーがエラーステータスコード（例: 404 Not Found, 500 Internal Server Error）と共にレスポンスを返した場合です。3. **データ処理エラー**:
– レスポンスが正常に受信されたが、例えばJSONとして無効であるなど、データの処理中に問題が発生した場合です。## エラーハンドリングの実装
以下は、これらのエラーを適切に処理するための一般的な実装例です：
“`
完全未経験（元消防士）からWEB系エンジニアへの道
私は、今年の3月で消防を退職しWeb系エンジニアを目指す２６歳男 すず。
こういった、ブログは初めて書く。続くかは、分からないけどなるべく長く続いたらいいなくらいの気持ちで記録として残していこうと思う。一番最初のきっかけは、WEBデザイナーになりたいと思ったことからIT業界に興味もった。
そこから、WEBスクールやYouTubeでデザインの勉強をしたが、表向きはフルスタックに活躍できる人材を目指して、プログラミング学習を始めた。（まだ半月くらい笑）正直、未経験からどうやってITの世界に飛び込んでいけばいいか道筋が曖昧で、それに悩んでいる未経験の人間も多いのではないだろうか。
そんな中、本日『Web系エンジニアになろう』という本を、たまたま図書館で見つけた。
そこには、私が求めていた内容が分かりやすく、且つ、見やすくシンプルな白と青を基調としたデザインで眠くならずにスラスラと読めた。
『Web系エンジニアとはなにか』から『Web系エンジニアになる方法』、『WEBスクールの選び方』、『Web系エンジニアのキャリア形成』など基礎から必須知識まで載っているため未経験な人間からすると非常
javascriptで作るゲーム【ジャンケンマンフィーバー】ロジック編
https://ja.wikipedia.org/wiki/%E3%82%B8%E3%83%A3%E3%83%B3%E3%82%B1%E3%83%B3%E3%83%9E%E3%83%B3_(%E3%82%A2%E3%83%BC%E3%82%B1%E3%83%BC%E3%83%89%E3%82%B2%E3%83%BC%E3%83%A0)
こいつのクローンを作ろうと思います笑
あ、ちなみにプログラムとか関係なく、単に遊びたい方は
見た目もそのまんまのゲームを見つけたのでそちらへどうぞ。
（権利的なものは大丈夫なんだろうか？）
https://hitoikigame.com/blog-entry-8538.html# STEP1: ロジックを完成させる
MVCじゃないですけど、見た目は完全無視して、Controller的な部分から作成。（Modelもか？）
コンソール上で対話すればそれっぽく動くところまでを完成させます。
早速ですけど、できあがりはこちら。“`javascript
class JankenFever {
#status; // プライベートプロパティ、ゲーム
「ことのはたんご」で連勝
## 概要
「[**ことのはたんご｜単語推理ゲーム**](https://plum-chloride.jp/kotonoha-tango/index.html)」はシンプルでとてもよくできたゲームです。正解にたどりつけないと悔しいので、JavaScript の勉強を兼ねて対策用のプログラム「[**ことのはレンズ**](https://sense-n-react.github.io/Kotonoha-Lens/kotonoha.html)」を作りました。
### 使い方
**ことのはたんご**の評価（緑、黄、灰）の通りに [**ことのはレンズ**](https://sense-n-react.github.io/Kotonoha-Lens/kotonoha.html) に文字を入れるだけです。
### 仕組み
約8000語のひらがな５文字の単語をデータベースとして保持しています。
これは人間の語彙力、記憶
Javascriptでイベントカウントダウンを作る
# Javascriptでイベントカウントダウンを作る！
この記事を読むと次のようなカウントダウンタイマーが作れるようになります。
https://kanetyengineer.github.io/Exam_Support/
詳細説明はコード全文の後にあります。しっかりと内容を学びたい方は参考にしてください。コードは私的利用に限りコピペ使用しても構いません。
## １.コード全文### HTML
“`html:indx.html
JavaScript ページをリロードしないと動かない(RubyonRails)
RubyonRailsにてフリマアプリ実装中、JavaScriptがうまく動かなかった件について。
初学者のアウトプット用記事なので、情報の信憑性の低さについてはご容赦ください。同じところで苦戦している初学者の方にも参考になれば幸いです。当記事はRails７で実装した際の記録であり、具体的にはgemfileに以下のTurbolinksに関する記述がある場合を想定しています。該当しない場合は、当記事の内容が合わない場合がありますのでご注意ください。
“`ruby:gemfile
# Hotwire’s SPA-like page accelerator [https://turbo.hotwired.dev]
gem “turbo-rails”
“`# 不具合の具体的な内容
商品出品ページで販売価格を入力した時に、販売手数料と利益も同時に表示されるようにしたい。JavaScriptの実装後、ローカル環境で動作を確認したときに問題発生。JavaScriptのコードは問題なく書けているのに、商品出品ページに遷移しても動かない。なぜ？商品出品ページを開いた状態でリロードする
javascriptで初期化した配列を作成する方法
## 方法その１：変数に配列を格納する
“`javascript
const array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
“`## 方法その２：for文で作成する
“`javascript
const array = [];
for (let i = 0; i <= 9; i++) { array.push(i); } ``` ## 方法その３：Array.formを使う ```javascript const array = Array.from({ length: 10 }, (v, k) => k);
“`## 方法その４：Array()を使う
“`javascript
const array = […Array(10)].map((v, i) => i);
“`:::note warn
Array(10)について補足
Array(10).map()と書きたくなるところだが、Array(10)で作成した配列は空配列ではなくemptyとなる。
※ここでの「空配列」とは[undefined, undefined
Javascript 高階関数
業務でJavascriptを使っていますが、業務では普段使わないので、理解を深めるためにメモです。
# 高階関数とは
関数を引数や戻り値とする関数のことを言います。
例えば、下記のような関数が高階関数です。### コード例
“`js
function curry(fn, arity) {
return function curried() {
if (arity == null) {
arity = fn.length;
}
var args = [].slice.call(arguments);
if (args.length >= arity) {
return fn.apply(this, args);
} else {
return function() {
return curried.apply(this, args.concat([].slice.call(arguments)));
};
}
};
}
“`転載元：[just-curry
laravel-vite-pluginを用いてJavaScriptのモジュールをバンドルする
### 開発環境
– Windows 10 Pro(64bit)
– laravel/framework 10.101.モジュールを入れるmodulesディレクトリをresources/jsディレクトリ内に作成する
2.modulesディレクトリ内に以下の3ファイルを作成する
“`javascript:a.js
export default (function(){
alert(“a.js”);
})();
“`
“`javascript:b.js
export default (function(){
alert(“b.js”);
})();
“`“`javascript:c.js
export default (function(){
alert(“c.js”);
})();
“`3.app.jsを開いて、以下に書き換える
“`javascript:app.js
import “./modules/a”;
import “./modules/b”;
import “./modules/c”;“`
4.プロジェクトのルートディレクトリ上で以下
CDNから読み込んだ(Moduleではない従来型の)JSライブラリに対して、後付けで型を適用する方法
## はじめに
CDNからJSライブラリを読み込むと常に`any`型となってしまい、VSCodeのサポート(IntelliSense)を利用することができません
ところが、VSCodeは(賢いので)ヒントを与えてあげると、型を認識できるようになります
* CDNから読み込んだライブラリだけではなく、型定義のないJavaScriptの変数、関数に後付けで型を適用することができます
* (VSCodeに組み込まれている)TypeScriptの機能を利用
* 設定ファイル(tsconfig.json)やコンパイラ(tsc)は不要です(ファイルの拡張子は.jsのままで大丈夫です)### 最初にまとめると
* 想定する環境
* VSCode＋JavaScriptの(npmを利用しない従来型)プロジェクト
* CDNから読み込
【Figma Plugins】はじめてのFigmaのプラグイン作り（セットアップ）
## はじめに
みなさんは、Figmaのプラグインを作ろうとしたことがありますか？
私は、デザインテクノロジストとして、デザイナーの業務効率化をしようとFigmaのプラグインの作り方を調べていたら、JavaScriptか、TypeScriptが触れれば、意外と簡単に開発することができるのだとわかりました。
そのため、この記事では、Figmaプラグインの作りの第一歩である、セットアップの方法についてまとめます。この記事では、以下の公式ドキュメント通りに、できるだけわかりやすく、初心者でもわかりやすくまとめようと思っています。
この記事を読みながら、詰まったところがあれば、コメントで教えていただけたら、記事を更新していきたいと思っているので、ぜひコメントもお願いします。https://www.figma.com/plugin-docs/
## 事前準備
F
