名所と名言、動的に変化させ表示させる(JavaScript)

# はじめに
絶景と名言が好きなので、まとめて表示してみようと思います。（”絶景を見ながら偉人の名言を”、という本は、たくさん出版されていますが、それと同類のものです）

# 内容
– Webサイトに写真を表示し、そこに文字を入れる（写真＝自分で撮影した世界の名所、文字＝名言集）
– アクセスする度に、写真も文字も動的に変化させる
– 写真のリスト、名言のリストはGoogleスプレッドシートに用意してAPI連携する

##### 使用する技術
– Javascript / GoogleスプレッドシートAPI連携
– bootstrap(v5)のimage-overlays
https://getbootstrap.jp/docs/5.0/components/card/#image-overlays

# サイト
[作成したサイトはこちら](https://anotherskyjp.site/pic_proverb/pic_proverb.html)　
![Screenshot_2.png](https://qiita-image-store.s3.ap-northeast-1.ama

JavaScript基礎概念勉強ノート6

# 初めに
今回はES6一部の基礎概念を勉強ノートとしてまとめてみました。

# Scope in JavaScript
基本的に以下の四種類があります。
– Global Scope：どこでもアクセスできる。
– Function Scope：関数式内だけ。
– Block Scope：ブロック（｛｝）内だけ。
– Module Scope：モジュール内だけ。
参考資料はこちら↓
[function – What is the scope of variables in JavaScript? – Starck Overflow](https://stackoverflow.com/questions/500431/what-is-the-scope-of-variables-in-javascript)
[javascript – ES6 module scope – Starck Overflow](https://stackoverflow.com/questions/30287977/es6-module-scope)

## `let` & `const` – Block

メモ:条件演算子(?:)とNull合体演算子(??)の違い

## 概要
つい最近TypeScriptでコードを書いていて、条件演算子(?:)とNull合体演算子(??)の違いに引っかかったので忘れないようにそれぞれの違いと、どこに引っかかったのかをメモした記事です。

## 条件演算子(?:)
条件演算子は以下の形式で使用され、**条件が真値であった場合**に左辺を、**条件が偽値であった場合**に右辺を実行します。
“`
条件 ? 左辺 : 右辺
“`
JavaScriptで偽値として扱われるのは次の値です。
– false
– 0
– 0n(BigInt)
– 負の値
– 空文字列(“”)
– null
– undefined
– NaN

そのため、上記の値を条件として利用した場合は全て右辺が実行されます。
“`TypeScript
false ? “true value” : “false value”
// false value

0 ? “true value” : “false value”
// false value

“” ? “true value” : “false value”
// false value

【非同期処理(Ajax)】SpringBootでJavaScriptによる非同期処理(Ajax)の実装方法

# はじめに
今回は、SpringBootによるAjaxの実装について解説します。

プライベートでのWebアプリ開発で実装した方法なので、比較的実践に近い方法だと思いますので、参考にしていただけますと幸いです。

なお、今回の実装では、**jQueryではなく素のJavaScriptを用いての実装**となります。
(全然、素のJavaScriptでの実装を書いた記事がなかった・・・)
※ 本記事の内容は、以下の前提に当てはまる方向けです

# 前提
– JavaScript中級レベル以上
– Ajaxについて基礎知識がある
– SpringBootのMVCモデルについての基礎知識がある
– SpringのRestについての基礎知識がある

# 実装方法
実装する方法は、コントローラーを`Rest`とし、非同期通信処理を行うリクエストをJavaScriptで指定し、JavaScriptでサーバーとやり取りするという流れで実装します。

そのため、メインはフロントエンド部分の実装となり、CRUDなどのビジネスロジック(Serviceクラス等)については触れませんので、ご了承ください。

【discord.js v13 + Discord Player】よくあるmusic botを作成する

# はじめに
こんにちは、こんばんは、ナマステ
今までdiscord.js+@discordjs/voice+ytdl-coreでmusic botを動かしていたのですが、
[Discord Player](https://discord-player.js.org)を使用したところかなり便利だったのとQiitaにこれを使ってる記事が無かったので、備忘録がてら基本的な使い方を書きます
[Discord Developer Portal](https://discord.com/developers/applications)からアプリケーションを作成して～みたいな初っ端の手順は、他の記事が大量に転がってるので端折ります

# 前提
この辺知らないと途中で混乱するかも、知ってても文章がヘタクソだから混乱するかもゴメン
– JavaScript/Node.jsがとりあえず書ける
– discord.jsを触ったことがある
– discordのスラッシュコマンドを知っている([この記事べんり](https://qiita.com/gaato/items/55b32bc4777905ac162

Azure Functions で 認証ユーザー情報にアクセスする

リクエストヘッダに、`X-MS-CLIENT-PRINCIPAL-NAME` および `X-MS-CLIENT-PRINCIPAL-ID`などのキーで含まれている。

***ただし***
> Different language frameworks may present these headers to the app code in different formats, such as lowercase or title case.

https://docs.microsoft.com/en-us/azure/app-service/configure-authentication-user-identities#access-user-claims-in-app-code

`JavaScript` の場合小文字でした。


ExpressでREST APIを実装する時にreq/resのvalidationを楽に実装できるライブラリを使ってみた

## 以下の記事を参照して頂ければと思います

https://note.com/shift_tech/n/n66f43685f2f9

**※Qiitaの記事は全て個人的な記載であり、所属する組織団体とは無関係です**

## 補足
ソースコード全体は以下。

https://github.com/yuta-katayama-23/node-express/commit/7e5a64e54f99b7fb8019f89b6dbfe5846e205148

何か作れるようになるまで

# あらすじ
ひょんなことからフロントエンドコーダーとしてインターンで採用され、WEBサイトをコーディングしてきたが、今一度立ち返って自分の能力を評価すると「HTMLとCSSしかちゃんとかけてないじゃん」となった。
将来は立派なエンジニアになりたい私はこの1年間で立派なポートフォリオを作って大学を卒業しようと心に決めた。。

# 技術選定
とりあえずRubyとReactを選びました。理由は特にないです。
なんでもいいからとりあえずプログラミングをできるようになりたいという理由だけなので、特に深く考えずに「プログラミング言語　おすすめ」で検索して無難そうなものを選んだ感じです。

# 今後の予定
各言語でキャッチアップを始めています
– Ruby
– まずはRubyだけで色々なものを作ってみる
– 目的としては、「基礎文法の理解」と「のちのフレームワークの理解を早めるために言語の仕様はしっかり理解しておく」
– Paizaとか使おうかな
– React
– チュートリアル
– 脳死で作れるようになる→PropsやStateの理解を完璧にする

Javascriptの基礎 概要編

## JavaScriptとは

HTML/CSSで作られたサイトは静的なものになってしまします。
※突き詰めるとCSSでアニメーションのようなものも作れるみたいですが、僕は初学者なのでまだ理解していません、、すみません。

ただ、JavaScriptを用いることで、サイト自体に『動き』を出すことが可能になります。

例えば、、、
– 入力の際に間違いや、空欄があったときのエラーメッセージ
– googleの検索フォームで、文字を入力時に予測変換で出てくる
– 地図の拡大や縮小

その他にも様々な場面で使われています。

2021年時点ですが、世界的に見てもJavaScriptは一番習得されている技術のようです。

また移り変わりの激しいITの業界でもこの言語だけは変化することなく、常に求められている言語のようです。。

**現在のWebサイトには欠かせないプログラミング言語**としてJavaScriptは習得した方がいいと思いました。

基礎から勉強していきたいと思います。

## まず第一歩目として

まず実際にchrome表示させてみたいと思います。

使用する物
– Visua

Vue.jsの不思議【emit】【複数の引数】

emitの基本

子→親へデータを渡す場合、emitを使用する

emitの書き方

“`vue
this.$emit(“親で実行する関数名”, “引数1″,”引数2″,”引数3”);
“`

引数は何個でも取れる

“`App.vue

//コンソール
test
テストメッセージ
“`

“`Child.vue