JavaScript関連のことを調べてみた2023年01月11日

javascript function からphp sessionへデータを渡す？

PHPとJavascvriptの組み合わせによるSESSIONデータの受け渡しを行うサンプルを、AjaxのsendRequestを利用して遷移せずに、PHPプログラムへSESSION関数としてデータを渡す例を記述してみました。
だいぶ以前から使っている、Ajaxライブラリー/ajax/lib/jslb_ajax.jsを使っています。
また、callbackを使えば、遷移せずにデータを取得することも可能です。
dataget.php
“`
“`
上記のようにPOSTデータをSESSIONデータとして受け取るとして、送る側のjavascriptの記述を下記のようにしてみます。
HTML
“`

```
# vueUseの主な関数
### １)

JavaScriptのスプレッド構文まとめ

JavaScriptで使うスプレッド構文について、初心者なりに勉強したので使用方法をまとめました。
ES2015(ES6)を利用しています
これ、使いこなせたらとても便利なんだろうなあ。。。（初心者）

## スプレッド構文とは
「...」を使用し、配列を展開できる便利な構文
用途としては主に以下の2点があります
1. 配列の展開
1. 配列の結合

### 配列の展開
以下例に示すように、「...」の後に配列変数を記述することで、配列を展開してくれます
```javascript:例
const array1 = [1,2]
console.log(array1) //=>[1,2]
console.log(...array1) //=>1 2
```

また**配列をコピー**して利用したい際にも、スプレッド構文は利用できます
例えば以下のように「=」で代入してしまうと、代入先の変数の内容を変更した場合、代入元の内容も変更されてしまいます
```javascript:例
const array2 = [3,4]
const array3 = array2
array3[

オブジェクトのプロパティを動的に設定する

JavaScriptでは、計算プロパティ名を利用することでオブジェクトのプロパティを動的に設定することができます。

計算プロパティ名は下記のように使用することができます。
```javascript
let i = 0
const a = {
['foo' + ++i]: i,
['foo' + ++i]: i,
['foo' + ++i]: i,
}
console.log(a); // { foo1: 1, foo2: 2, foo3: 3 }
```
オブジェクト`a`にプロパティ`foo1` `foo2` `foo3`を動的に設定することができました。
このように、計算プロパティ名を利用することでオブジェクトのプロパティを動的に設定することができます。

動的に設定された値にアクセスする場合は、基本的にブラケット記法でアクセスします。
```javascript
const space = ' ';
const a = {
[space]: 'space',
}
console.log(a) // { ' ': 'space' }
consol

クリスマスにHTML5プロフェッショナル認定 レベル2を取得しました

2022年10月にHTML5プロフェッショナル認定試験 レベル1(ver2.5)、クリスマスにレベル2(ver2.5)に合格したため、それぞれの試験を受けた感想や勉強法を記載します。

# HTML5プロフェッショナル認定試験 レベル1(ver2.5)

## 使用教材

以下の教材を利用しました。
- Ping-t　最強Web問題集（※有料コンテンツです）
- HTML5プロフェッショナル認定試験 レベル1 対策テキスト&問題集 Ver2.0対応版

勉強は8月ごろに開始したため、ver2.0対応版のテキストを購入しました。
現在はver2.5対応版のテキストが出版されているため、そちらの利用がおすすめです。
ただ、ver2.0とver2.5で出題範囲は大きく変わらないため、すでにver2.0を持っている場合、改めてver2.5対応版を購入する必要はないと思います。

## 勉強方法

最初に対策テキストを1周したのち、問題演習としてPing-tを利用しました。
Ping-tはヒット率が100%になるまで模擬問題を繰り返しやりました。

## 試験の感想

Ping-tの問題は実際の

YouTubeの動画サムネイルをダウンロードするコンテキストメニューを作る

YouTubeのサムネイルを別タブで表示したい場面がありまして、URLを手打ちするのは面倒くさいなぁ…と思い、
動画上で右クリックしたコンテキストメニューの一番下に「サムネイル表示」リンクを追加することにしました。

## YouTubeサムネイルURLのパターン

いくつかありますが、以下のどちらかで大きめの画像が取れます。
上がダメなら下で取れます。
http://img.youtube.com/vi/ビデオID/maxresdefault.jpg
http://img.youtube.com/vi/ビデオID/sddefault.jpg

ビデオIDはYouTube動画の v パラメータです。※URLは私の投稿した動画です。

の`Z_LmFZdGhMo`の部分です。

## ダウンロードリンクを作る

URLは上記の通りなので、URLをパースしてvの値を取ってみます。
ブラウザからは location.search でクエリストリングが取れるので、ここから取得を試みます。
上記のURLの場合、

【フロントエンド】駆け出しエンジニアが目指すジュニアレベルのエンジニアとは【2023年版】

## はじめに
こんばんは。
駆け出しエンジニア真っ只中のmamiと申します。
最近ようやく業務にも慣れてきたタイミングで、自分のエンジニアとしてのレベル感や、この先目指すべき道筋を明確にしたいな〜という思いでこの記事を書いております。

これは自分のための記事であると同時に、同じように駆け出し中のエンジニアさんや、ミドル層を目指す手前のエンジニアさんにも刺さる内容になっているかと思います。
今、**自分がどのようにキャリアアップしていく**べきなのか、どのような道筋で**スキルを磨いていけばいい**のか。そんなふうに悩んでいる方は是非読んでみてください。

※内容はフロントエンジニアが対象になりますが、バックエンドの方もなにか通じるものがある…かもしれません。

## 逆算したキャリア戦略の必要性

そもそも何故、キャリア戦略が必要なのかについてお話しします。
結論からお話しすると、**時間は有限だから**です。

おそらく、何も意識せずとも普通に開発経験を積んでいれば、未経験からでも2~3年でジュニアレベルを脱することは可能でしょう。
しかし、何も考えずにただただコードを打ち