- 1. 思い込みは排除してソースログを確認しながらデバッグする習慣を身につける
- 2. ②フロントとサーバの通信方法(RPC) テキスト 通信
- 3. ()=>()=> なにこれ？ => それはカリー化
- 4. 【JavaScript】Intersection Observerでスクロール処理をする
- 5. 従来の関数宣言（function）とアロー関数（()=>{}）、どちらを使うべきか？
- 6. ✏️初学者がプログラミングを学ぶにあたって心がけていること
- 7. ブラウザゲームを作ってみよう(その13:サンプルゲーム作成その6)
- 8. 10秒おきに乱数(1~100)を生成する、何かを作りたいと思う。
- 9. 【JavaScript】スプレッド構文 シャローコピーの落とし穴
- 10. TypeScriptのenumについて
- 11. JS、CSSファイルのキャッシュ自動削除（PHP不要）
- 12. null + null = 0 になるんだけど in JavaScript
- 13. Gatsbyでよく使うJavaScript知識
- 14. 【Next.js】好きな画像データをfaviconに設定する方法 〜TSでも怒られない〜
- 15. Vite+Vue3+Vuetify3+Expressのプロジェクトを1から作成する（ESLint、Prettier、Node.jsをPJに含めたモノレポ？構成）
- 16. 【JavaScript】コロンのないオブジェクト！？
- 17. なんか、Swiperもっさりしてるな
- 18. lodashはメソッドによってファイルサイズが全然違っていた
- 19. Vue3でコンポーネントを作るときは、ネイティブイベントをいちいちemitしなくて良い。
- 20. keyclaokの認可機能を利用する
思い込みは排除してソースログを確認しながらデバッグする習慣を身につける
# 目次
[1.この記事を書いた経緯](#1-この記事を書いた経緯)
[2. 実装で問題が起きた際の対応マニュアル的なの](#2-実装で問題が起きた際の対応マニュアル的なの)
[① 問題が起きた！！](#-問題が起きた)
[② ログを見て、大まかな原因を確認する](#-ログを見て大まかな原因を確認する)
[③デバッグして落ちている箇所を確認する](#デバッグして落ちている箇所を確認する)
[③-1 ②で「ここが原因だ！！と原因が起きている場所の予想が付く」かつ「予想した箇所がソースコードにブレイクポイントが張れる」場合](#-1-でここが原因だと原因が起きている場所の予想が付くかつ予想した箇所がソースコードにブレイクポイントが張れる場合)
[③-2 3③-1以外の場合](#-2-3-1以外の場合)
[④落ちている箇所でどんなエラーが出ているか・想定した値が入っているか確認](#落ちている箇所でどんなエラーが出ているか想定した値が入っているか確認)
[参考サイト](#参考サイト)# 1. この記事を書いた経緯
私はよく、ソースコードでエラーが出た！！・落ちた！とかの問題が起きた際に
②フロントとサーバの通信方法(RPC) テキスト 通信
今回は、前回「①フロントとサーバの通信方法(RPC) テキスト 定義」の続きです。
実際に、サーバとクライアントで通信をしてみましょう。クライアント側で、ボタンを用意して、ボタンを押す、「greetingService.greetServer」が実行されて
その結果、成功すると「onSuccess()」が呼び出されます。
失敗すると、「onFailure()」です。
今回は、前回「①フロントとサーバの通信方法(RPC) テキスト 定義」の続きです。
実際に、サーバとクライアントで通信をしてみましょう。■クライアントから通信
“`String p_send_txt=nameField.getText();
//文字列「p_send_txt」をサーバに送ります。
greetingService.greetServer(p_send_txt, new AsyncCallback() { //失敗したら、これが呼び出される。
public void onFailure(Throwable caught)
()=>()=> なにこれ？ => それはカリー化
タイトルにあるようにこんな感じの書き方に出くわした。
“`
const nanikore = (hoge) => (fuga) => {
return hoge * fuga
}
“`
なんじゃこりゃ…
引数が二つある….ということで調べてみました。
### 結論から
タイトルにもあるようにこういった書き方を**カリー化**というらしい。
カリー化とは段階的に引数を渡すような構造の関数を作るためのテクニック。
つまりカリー化された関数とは全ての引数(パラメータ)が揃うまで
処理結果を遅延することができる。“`javascript
const add = (a) => (b) => (c) => {
console.log(a + b + c)
}
const addOne = add(1)
const addThree = addOne(2)
addThree(3) //6 ここで初めて計算結果が出力されるadd(1)(2)(3) //6 一気に全ての引数を渡すこともできる
“`
### 使い方
**パラメータを設定した関数を再利用
【JavaScript】Intersection Observerでスクロール処理をする
## やりたいこと
Intersection Observerをつかって要素連動の処理を実装する。すでに、他のライブラリを読み込む数が多かったり、サイトの処理が重い場合などで、更に追加でGSAPなどを読み込むの敬遠される背景がある。
今回は、画面幅＝ビューポート内に対象要素が入ってきたら文字色の変化を加える処理をする。
__実装サンプル__
https://codepen.io/frontnikki/full/wvxVygm
※Codepenでは思ったタイミングでコールバック関数が発火してくれず、何か原因がわかる方いらっしゃれば教えて頂きたいです。。。
## コード
“`JavaScript
const target = document.querySelector(‘.article__title–target’);/
従来の関数宣言（function）とアロー関数（()=>{}）、どちらを使うべきか？
## 初めに
JavaScriptでは、関数の宣言をするのにいくつか方法があります。
従来の関数宣言
“`typescript
function hoge(name){
console.log(name);
}
“`アロー関数
“`typescript
const hoge = (name) => {
console.log(name);
}
“`どちらも「関数を定義する」という点で同じことができるように見えます。
違いもよくわからないし、どちらを利用するか迷ってしまう場面も初学者にはあるかもしれません。
普段はどちらを利用するのがよいでしょうか？## まずは結論
**アロー関数を採用すれば、基本的に困る場面は少ないはずです。**
（ただし、オブジェクトのメソッドを定義する際などは、従来の関数宣言を使いましょう。）——
実際には、関数宣言とアロー関数で機能に違いがあり、それによるメリット・デメリットがあります。
以下では、これらの機能を比較し、アロー関数を利用するメリットを考えていきます。## アロー演算子のメリット
✏️初学者がプログラミングを学ぶにあたって心がけていること
# 意識したこと
### 目標の設定
大きく月ごとに分けるのと、それを細かく週→日ごとに目標の設定。目標は都度見直して、進捗をみつつ修正していく。修正前の目標も残せるよう、スプレッドシートにてバージョン管理。
また、目標は定量目標（学習進度、企業研究、ポートフォリオ作成）と、定性目標（定量目標を達成した時の自分を想像して）を立てる。### 目標に対しての振り返り
毎日の目標振り返りに加え、週→月ごとの目標からの進捗も振り返る。### 目標に近い人をそばに置く
私はコーチングでこれを実現しました。コーチングによって得られるメリットは大きく３つ、「モチベーション維持」「客観的なインプットを得られる」「知識のフィードバックがもらえる」
目標を立てて日々行動を続けられているのも、ひとえにコーチングのおかげであると感じます。### インプットした内容の理解度が何%か
理解できているところとできていないところを明確に言語化。
１００％理解できなくていい。むしろ何度も復讐することを前提に、学習を進める。
復習するときに参考にでき、結果的に学習効率の向上が図れる。
ブラウザゲームを作ってみよう(その13:サンプルゲーム作成その6)
# はじめに
[その12](https://qiita.com/noji505/items/9afdd2de99dcb1a14718)ではランキングの追加を行いました。
今回はサウンド処理を作成してみたいと思います。# サウンドについて
HTML5のaudioを使ってサウンドを再生します。
サウンドを扱うプログラムは以下を作成します。読み込み
サウンドファイル名を配列にしてaudioオブジェクトを生成します。
以下の処理をアプリ起動時に実行することでファイルを読み込み、再生することが可能になります。“`javascript:サウンドファイル読み込み
// 変数
var audioObject;
var isAudioPlay;var audioFileNames = [ “bgm.mp3”, “se.mp3” ];
audioLoad( audioFileNames );function audioLoad( fileNames )
{
var objBody = document.getElementsByTagName( “body” ).it
10秒おきに乱数(1~100)を生成する、何かを作りたいと思う。
# 作成にあたる経緯
先日友人から、ポーカーにおいて使用する乱数ソフトなるものが欲しいと言われたため、作成することにしました。
どういう場合において使用するのかと聞くと、自身のハンド(手札)が勝負に出るか降りるかの微妙な場合、乱数を見て判断をするということだ。
しかし、乱数ソフトはネットを調べればいくらでも出てくるのだが、友人曰く、ある間隔で生成される類のものはないとのことで、それを作成してほしいと言われました。# 詳細
– 乱数が生成されるまでのカウントが表示される。
– ある一定の時間が経てば乱数生成がストップされる。
– 自身で生成をストップすることができる。# まとめ
今後こちらの内容で作成をしていきます。
定期的に進捗を報告していきます。
【JavaScript】スプレッド構文 シャローコピーの落とし穴
スプレッド構文がシャローコピーであることをしっかり理解できていなかったために業務中に落とし穴にはまりました。備忘録としてまとめます。
## スプレッド構文とは？
スプレッド構文は、配列やオブジェクトの中身を展開する事ができます。“`JS
const numbers1 = [1, 2, 3]
const numbers2 = […numbers1, 4, 5]
console.log(numbers2)
“`
上記の実行結果は、
となり、“` JS
const fruites1 = {
apple: ‘りんご’,
banana: ‘ばなな’,
grape: ‘ぶどう’
}
const fruites2 = {
…fruites1,
le
TypeScriptのenumについて
TypeScriptでは、「enum」というものがあります。これは、固定された値の集合を定義することができます。
列挙型は、数値や文字列といった型によって表されます。数値列挙型は、通常、0から開始して、各値に数値を割り当てます。これらの数値は、次の値を持つことができます。
文字列列挙型は、通常、固定された文字列リテラルに対応します。使用するには、次のように定義する必要があります。
“`typescript
enum Color { Red, Green, Blue };
let c: Color = Color.Green;
“`
列挙型は、コードの読みやすさを向上させ、名前付きの定数を使用することによって、バグのリスクを軽減することができます。
JS、CSSファイルのキャッシュ自動削除（PHP不要）
JavaScript、CSSファイルのキャッシュを削除する場合、読み込むファイルの末尾にHTMLなら`?ver=1.0.1`、PHPなら`?`を記述する文献が多くヒットすると思います。
しかしこれは、前者だと更新するたびに手動で更新する必要があるし、後者だと、WordPressなどをインストールし、PHPファイルにする必要があります。
今回はHTMLファイルだけでで自動更新する方法のメモです。~~~ html
~~~
scriptタグで囲み、文字列を出力します。
null + null = 0 になるんだけど in JavaScript
JavaScriptを使って画面側で文字列を結合させて、サーバ側で更新処理をしようとしたらなぜか数値の0として受け取っていたのでなぜか調べてみたら、データがどちらもnullで算術演算子の+を使ったら数値に変換されていることがわかりました。
同じことで詰まる人がこれからいなくなるように発生する理由とリファクタリングの方法を紹介します。## null + null = 0 (int型) になる訳
JavaScriptでは、`null`値は空または存在しない値を表します。
`null`値と`+`演算子を使用すると、数値加算として評価されます。
`null`が`0`と評価されるため、2つの`null`値を加算すると`0`になります。```js
let sFirstName = null
let sLastName = null
let sFullName = sFirstName + sLastName
console.log(sFullName) // 出力： 0 (integer)```
## リファクタリング
1. ||演算子を使用してnullなら空文字を入れる
`||`
Gatsbyでよく使うJavaScript知識
趣味で Gatsby をいじり始めて知見が溜まってきたのでメモる。
この知識を使った実際のソースは
[拙作の gatsby-theme(GitHub)](https://github.com/tenpaMk2/gatsby-theme-figure-blog)
に転がってるので、参考まで。## 配列操作
Gatsby は配列操作を非常によく使う。
例えば、markdown の全記事は GraphQL で ↓ のように query する。
```graphql
{
allMarkdownRemark {
nodes {
id
frontmatter {
tags
title
}
}
}
}
```結果が `data.allMarkdownRemark.nodes` に配列として格納される。
で、記事タイトルを集めて element にしようと思ったら、↓ のように `Array.prototype.map()` を使う。
```jsx
const titles = nodes.
【Next.js】好きな画像データをfaviconに設定する方法 〜TSでも怒られない〜
# 【はじめに】
先日Next.jsの環境構築を終えて、さあ開発していくぞ！と思った矢先、
「faviconを好きな画像に変更したいけど、どうしたらいいんだろう、、？」
と、ふと思い調べてみても、なかなか自分の求めている情報に出会えなかったため、備忘録も兼ねてここにまとめておきます。# 【環境】
- Node.js - 16.14.0
- Next.js - 13.1.4
- React - 18.2.0
- TypeScript - 4.9.4# 【faviconを設定する方法】
1. public/favicons内にfaviconに設定したい画像を用意
1. src/pages/_document.tsxで、faviconを設定```_document.tsx
~~~
~~~// // rel属性にshortcu
Vite+Vue3+Vuetify3+Expressのプロジェクトを1から作成する（ESLint、Prettier、Node.jsをPJに含めたモノレポ？構成）
## はじめに
個人開発で使うプロジェクトをVue-CLIから移行して、Vueも3.xに上げて新しくテンプレ化してみようと思った。その新プロジェクトの作成時の手順を備忘録として残しておきたく。
完成したプロジェクトは以下。
https://github.com/yuta-katayama-23/vite-vue3-vuetify-express
## `yarn create vite`で初期プロジェクトを作成する
まずは[公式](https://ja.vitejs.dev/guide/#%E6%9C%80%E5%88%9D%E3%81%AE-vite-%E3%83%95%E3%82%9A%E3%83%AD%E3%82%B7%E3%82%99%E3%82%A7%E3%82%AF%E3%83%88%E3%82%92%E7%94%9F%E6%88%90%E3%81%99%E3%82%8B)にある通りの方法（`yarn create vite`）で初期プロジェクトを作成する。
を配列のようにカンマで羅列させていました。
混乱しましたが、結果自分で解決できました。くっそ簡単な理論でした。
## コロンのないオブジェクトの正体とはいったい！？
このコロンのないオブジェクトを考えていると、あることを閃きました。
**波括弧の中の変数(定数)は「変数名:変数の値」を表しているんじゃね？**
居ても立ってもいられず書いてみました
```JavaScript:test.js
const hoge = "hogeだよ";
const fuga = "fugaだよ";
const piyo = "piyoだよ";const testDict = {
hoge,
fuga,
piyo
}console.log(testDict);
// =>{ hoge: 'hogeだよ', fuga: 'fugaだよ', piyo: 'piyoだよ' }
```## 正解
なんか、Swiperもっさりしてるな
# 主旨
Reactのスイープ処理ライブラリ、Swiperを使用してみたけど、意外ともっさりしてた。
pure jsでスイープ処理を実現するサイトを参考にして、スイープ処理を自作した話。# Swiper
[こちら](https://swiperjs.com/demos)。
Reactでスイープ処理を実現しようとすると、一番の候補となる。## なんか、思ってたよりももっさりしてるな
実現したい要件としては、ネイティブアプリのTrelloのリスト切り替え時くらいのレスポンス。
だけど、スマホでSwiperのdemo操作をして、もっさりすることが判明。また、実際にアプリに組み込んでみても、案の定、もっさり動作することが判明。
普通にストレスフル。## pure js ならばどうか
[参考サイト](https://dianxnao.com/javascript%E3%81%A7%E3%82%B9%E3%83%AF%E3%82%A4%E3%83%97%E5%87%A6%E7%90%86%E3%82%92%E3%81%99%E3%82%8B/)
[デモサイト(スマホのみ反応)](htt
lodashはメソッドによってファイルサイズが全然違っていた
# 概要
Lodashは便利なnpmパッケージですが、ファイルサイズが非常に大きいです。
圧縮前で71.5kB、圧縮後で25.2kBなので、`import _ from 'lodash'` をフロントエンド開発でやってしまうと、画面のJSロード時間に影響が出てしまいます。
解決策として、`import range from 'lodash/range'`のように、1つのメソッドだけをインポートすることが知られています。
しかし、実はメソッドによってファイルサイズが異なります。
例えば、`lodash/max` は 1.6kB ですが、`lodash/omit` は 21.5kBもあります。これは `lodash/omit` がいくつかの内部メソッドをインポートしているためで、特に `_baseClone.js` のファイルサイズが大きいからです。
このようにインポートする内部メソッドによってファイルサイズがかなり異なるため、全てのメソッドのファイルサイズを計算してみました。# メソッドごとのファイルサイズ
| Function Name | File Size(kB) | G
Vue3でコンポーネントを作るときは、ネイティブイベントをいちいちemitしなくて良い。
Nuxt3もRC版になったということで、勉強も兼ねて自分のWebサイトを作っている途中に遭遇した問題(その2)について。
# 環境
node.js v18.13.0
Typescript v4.7.4
Nuxt v3.0.0-rc.14
TailwindCSS v3.2.4
vue-gtag-next v1.14.0
※Vueは3.0系（ここ大事）
開発環境はWSL(Debian)だったりChromeOS(Crostini)だったり色々。# 発端
## ボタンだけのコンポーネントを作った。
せっかくTailwindCSSやVueを使っているのだから、要素単位でコンポーネントを作って使いまわそうと考え早速ボタンを作った。
```html:AppBtn.vue
```
コンポーネント内でclickイベントが発火したら、親コンポーネントにイベントをemitする割とよくあ
keyclaokの認可機能を利用する
keycloakと連携した認証認可制御を行う場合、Open ID Connectの認可フローを実装することが多い。
keycloak側で好きなclaimとscopeの設定ができるため、ほとんどの場合はアクセストークンの情報だけで認可制御ができる。
しかし、より細かな認可を行うために、keycloakではより細かな認可制御を行う機能が提供されている。
（例えば時間や条件に応じてアクセス可否を変更したい等）:::note
keyclaokの公式ドキュメントにはjavaを利用したpolicy enforcerの実装が出てくるが、webを漁っても他の実装がなかなか出てこなかったので、メモがわりに。。
:::作ったもの
https://github.com/m-masataka/keycloak-authorization-demo
# keycloakの認可
keycloakの認可機能ではAttribute-based access control (ABAC)やRule-based access controlに対応した様々な認可機能を備えている。https://www.ke
