- 1. はじめに
- 2. 使ったパッケージ等
- 3. SSGform
- 3.1. 【Webpack】デプロイ後に発見したJavaScript難読化の落とし穴
- 3.2. 【MapLibre GL JS】ラスタータイルを表示する
- 3.3. GeoJSON を力技で PowerPoint へ取り込む
- 3.4. 初めての投稿
- 3.5. paizaラーニング レベルアップ問題集 Aランクレベルアップメニュー JavaScript 重みあり有向グラフの隣接行列と隣接リスト
- 3.6. paizaラーニング レベルアップ問題集 Aランクレベルアップメニュー JavaScript 有向グラフの隣接行列と隣接リスト
- 3.7. ゼロパディング
- 3.8. paizaラーニング レベルアップ問題集 Aランクレベルアップメニュー JavaScript 隣接リスト
- 3.9. ES Lint がJSのimportを勝手に削除するのを止める方法
- 3.10. paizaラーニング レベルアップ問題集 Aランクレベルアップメニュー JavaScript 隣接行列
- 3.11. 【JavaScript】同一オリジン間ではwindow.postMessage()ではなくBroadcastChannelを使う
- 3.12. 【未経験・独学】アパレル卸売ECモールアプリの開発 / マルチログイン【PHP/Laravel/JavaScript/Vue】
- 3.13. JavaScriptをもうちょっと理解する54のトピック
- 3.14. こんな形の日記、、、知らない
- 3.15. YellowfinでHighchartsのワードクラウドを描画する
- 3.16. 芸術は爆発だ！私の頭もだ！やり場のない怒りを芸術の域に昇華させるアプリです。「なんで忘れるかなぁ俺の格言。それならつくる！《企画編➁》」
関数は変数である – Good Concepts in Programming –
# 概要
プログラミングの良い概念を理解するとプログラマーレベルが上がると考えています。
良い概念は特定のプログラミング言語に縛られないので、様々なプログラミング言語で役に立ちます。
前回は[良いコードは良い名前から生まれる](https://qiita.com/masaki_nakada_ari/items/d5fd8df6f515debf00fa)を紹介しました。
今回紹介する良い概念は「関数は変数である」です。本記事のタイトルを見て「ちょっと何言ってるかわからない」と感じた方はぜひ最後まで読んでほしいです。
関数の見え方、使い方が劇的に変わります。# 第一級関数
あまり聞き慣れない用語ですが、第一級関数は関数がその他の変数と同様に扱われることを表します。
JavaScriptで関数を宣言するサンプルコードを見てみましょう。## 関数宣言（functionオブジェクト）
足し算をする関数（add）を宣言してみましょう。“` function_add.js
function add(a, b) {
return a + b;
}add(100, 23);
JavaScriptから使いやすいWebAPIをRPCでお手軽に
JavaScriptから使いやすいWebAPIを考える回。
WebAPIといえばRESTが有名ですが、今回はRPCを実装してみます。## 基本的な使い方
“rpc.js“はローカル関数を実行するような感覚で、サーバ側の関数を実行できます。
“`js:基本的な使い方
import API from ‘./rpc.js’const result = await API.plus(1, 2) // 関数名plusと引数[1,2]が送信される
“`ここでplusメソッドは幻で、定義はありません。
裏で**関数名**と**引数**がHTTP送信されて、サーバ側で同名の関数が実行され、結果が返ってくる仕組み。基本的にGET送信ですが、**関数名の最初が大文字**の場合はPOST送信になります。
“`js:POST送信
const result = await API.Save(data) // POST送信
“`以上がJavaScriptからWebAPIにアクセスする最善の書き方だと思います。
サーバ側も関数定義＋αで済むので、全体を通してシンプルで分かり
javascriptを基本から ① ボタンクリック時、何かjavascript（alert()メソッド）を実行する
初めまして。Junです。
猫のような気分屋な時があるのに、真面目にコーディングのノートを書いたりしています。根っこは真面目なんだろな・・多分・・。まぁ、今回は、javascriptの復習をしながら、プログラミングノート的なものを、Qiitaに載せていこうかなと思います。
初めてで、拙いところたくさんあると思いますが、ご了承いただけましたら幸いです。
では、この記事の発想がどこから来たかというと、
– – –
「実装したい機能」→「完成形のコードが思いつき、書ける。」
– – –を目標に、たくさんのノートを作っていくことで、実力アップを目指して、この記事を書きました。
今回、初めて取り組みたい機能は、下記の– – –
ボタンをクリックした時に、alert()メソッドが実行される。
– – –
です。
下のGIFが結果の画面です。
と言うサービス。
無料会員登録さえ行えばJSX内のformやinputにちょろっと記載するだけでフォーム機能を実装できる優れもの。コード例
“`html
【MapLibre GL JS】ラスタータイルを表示する
## はじめに
この記事は#30DayMapChallenge2022 7日目の記事です。
テーマはRasterです。
MapLibre GL JSを使ってラスタータイルを表示してみます。
https://30daymapchallenge.com/
## タイルとは
タイル状の地図データのこと
ズームレベルを大きくするとタイルの数が増える地図の配信配信方式には、XYZ方式とWMSがあり、XYZ方式がデファクトスタンダードになっている
– あらかじめタイル状に分割したデータを配信する方式（XYZ方式）
– 地図表示のリクエストがある度にその範囲をサーバ側で切り抜いて配信する方式（WMS：Web Map Service）
https://paiza.jp/works/mondai/a_rank_level_up_problems/a_rank_graph_step4
# 解答例
隣接リストを作成する際、重みkを()の中に入れ、配列にします。
“`javascript
const fs = require(“fs”);
const input = fs.readFileSync(“/dev/stdin”, “utf-8”).trim();
const lines = input.split(“\n”);
//頂点の数 N と、辺の数 M
const [N, M] = lines[0].split(” “).map(Number);
//隣接行列g
let g = Array(N).fill(0).map(v => v = Array(N).fill(0));
//隣接リストh
let h = Array(N).fill(0).map(v => v = []);for (let i = 1; i <= M; i++)
paizaラーニング レベルアップ問題集 Aランクレベルアップメニュー JavaScript 有向グラフの隣接行列と隣接リスト
有向グラフの隣接行列と隣接リスト (paizaランク B 相当)
https://paiza.jp/works/mondai/a_rank_level_up_problems/a_rank_graph_step3
# 解答例
隣接行列と隣接リストをそれぞれ作成して、出力します。
“`javascript
const fs = require(“fs”);
const input = fs.readFileSync(“/dev/stdin”, “utf-8”).trim();
const lines = input.split(“\n”);
//頂点の数 N と、辺の数 M
const [N, M] = lines[0].split(” “).map(Number);
//隣接行列g
let g = Array(N).fill(0).map(v => v = Array(N).fill(0));
//隣接リストh
let h = Array(N).fill(0).map(v => v = []);for (let i = 1; i <= M; i++) {
ゼロパディング
# ゼロパディング
__概要__
ゼロパディングとは、画面や帳票などで数値を表現する際、書式で指定した桁数に満たない部分をゼロで埋めることである。
ゼロパディングの「パディング」には埋める、詰め物をするといった意味がある。
ゼロパディングは、例えば「123」を5桁で表す場合、2桁足りない部分をゼロで埋めて「00123」と表記する。もともと5桁の数であればゼロを埋めるスペースがないのでそのままの数を表記する。
[ゼロパディング](http://www.weblio.jp/content/%E3%82%BC%E3%83%AD%E3%83%91%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0)
### スクリプト
__padStart使用の場合__
“` js
const str1 = ‘5’;console.log(str1.padStart(5, ‘0’));
// ５桁になるように０で埋める
// 00005
“`__slice使用の場合__
“` js
var num = 5;
console.log((‘00000’ + 5)
paizaラーニング レベルアップ問題集 Aランクレベルアップメニュー JavaScript 隣接リスト
隣接リスト (paizaランク B 相当)
https://paiza.jp/works/mondai/a_rank_level_up_problems/a_rank_graph_step2
# 解答例
問題文に沿って実装します。ソートをすることを覚えておいてください。
“`javascript
const fs = require(“fs”);
const input = fs.readFileSync(“/dev/stdin”, “utf-8”).trim();
const lines = input.split(“\n”);//頂点の数 N と、辺の数 M
const [N, M] = lines[0].split(” “).map(Number);//隣接リストh
//準備
let h = [];
for (let i = 1; i <= N; i++) { h.push([]); } for (let i = 1; i <= M; i++) { const [a, b] = lines[i].split(" ").map(Number);
ES Lint がJSのimportを勝手に削除するのを止める方法
## 症状
Nuxtのpluginsを利用し、
“`
import {foo} from foofoo;
// 保存すると、import from foofoo; になってしまう
“`
と記述しても、ESLintの不要なimportを自動削除(整形)するオプションがONになっていると消されてしまいます。普段は良いのですが、pluginのようにimport関連だけ記述しておきたいような場合には非常に邪魔で、保存できなくなります。
## 解決方法
VSCodeの拡張機能のESLintの設定を変更します。
ESLintのsettings.json内に
“`
“editor.codeActionsOnSave”
“`
という項目があるはずです。そこで
“`
“source.organizeImports”: false,
“`
と記述し、importの整形をオフにします。これで完了です。
paizaラーニング レベルアップ問題集 Aランクレベルアップメニュー JavaScript 隣接行列
隣接行列 (paizaランク B 相当)
https://paiza.jp/works/mondai/a_rank_level_up_problems/a_rank_graph_step1
# 解答例
問題文に沿って実装します。
“`javascript
const fs = require(“fs”);
const input = fs.readFileSync(“/dev/stdin”, “utf-8”).trim();
const lines = input.split(“\n”);
//頂点の数 N と、辺の数 M
const [N, M] = lines[0].split(” “).map(Number);//隣接行列
//初期化
let g = [];
for (let i = 0; i < N; i++) { g.push(Array(N).fill(0)); } for (let i = 1; i <= M; i++) { //各辺の両端の頂点 a_i , b_i const [a, b] = lines[i].split(" "
【JavaScript】同一オリジン間ではwindow.postMessage()ではなくBroadcastChannelを使う
ブラウザのウィンドウ間でメッセージをやりとりする方法は`window.postMessage()`を使う方法が有名ですが、もう一つ`BroadcastChannel`というものを使った方法もあります。二者の特徴をまとめたのが以下です。
– `window.postMessage()`
– 異なるオリジン間でメッセージの送受信が可能
– 送信相手のwindowへの参照が必要
– `BroadcastChannel`
– 同一オリジン間でしかメッセージの送受信ができない
– 送信相手への参照が必要がないということで同一オリジンのウィンドウ間のメッセージのやりとりは`BroadcastChannel`を使うべきです。他のサイトはメッセージを受信することができないのでセキュリティ的に好ましいですし、開発者としても送信相手へのwindow参照を持つ必要がなく実装が単純になります。逆にオリジンを跨ぐ場合は`window.postMessage()`を使うしかないということになります。
ちなみに`BroadcastChannel`は主要なブラウザ全てでサポート
【未経験・独学】アパレル卸売ECモールアプリの開発 / マルチログイン【PHP/Laravel/JavaScript/Vue】
# はじめに
独学でポートフォリオを作成しました。（Laravel/Vue.js）
github：https://github.com/ShintaroKurata/job-board本記事では、学習したことを振り返ります。
## 自己紹介25歳
学習期間：2022年6月〜9月
前職：営業→Webディレクター
## アプリについて
### 概要
今回、PHP（Laravel）のポートフォリオとしてマルチログインで実装されるECモールを作リました。
実際には購入機能はないので、カート機能までの実装です。
### サービス画面
#### バイヤーダッシュボード
バイヤーはこの画面から、自分のプロフィールなどを更新できます。#### バイヤープロフィール
https://www.highcharts.com/demo/wordcloud
### バージョン情報
Yellowfin：9.7.0.3
Highcharts：10.2.0# 事前準備
### 1. YellowfinのJavaScriptグラフ機能
芸術は爆発だ！私の頭もだ！やり場のない怒りを芸術の域に昇華させるアプリです。「なんで忘れるかなぁ俺の格言。それならつくる！《企画編➁》」
## 「なんで忘れるかなぁ俺の格言。それならつくる！《企画編➁》」のはずが･･･
趣味の競馬で負けた時に作った勝負事の格言、これが全く活かされていないことを解決するために格言DBを構築して、スマホやPCから登録・検索、週末に向けて格言適用レースの自動配信と機能を考えたのが《企画編①》でした。
[NOTE記事：なんで忘れるかなぁ俺の格言。それならつくる！《企画編①》](https://note.com/xedge748hagi/n/n1352db87dae7)
最近は便利な開発環境やアプリがいろいろあって、組み合わせればWEBアプリが簡単にできてしまう、なんてことは全くもってございませんでした。無料サンプルコードはいろいろありますが、ちょっと直すと動かなくなるんです。原因を調べようにもいろいろ出てきてどれが正解か判断つかないんです。イライラしながらも粘り強くソースコードと格闘しているときにそれは起こりました･･･。## 15時34分の悲劇
もう15時過ぎてるやん、はよせなアルゼンチン共和国杯（東京芝2500m、ＧⅡ）間に合わへん。東スポを開いて馬選びに入ります。･･･（時間経
