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

5年×10社のエンジニア経験から考えるエンジニアとしての市場価値のあげ方

> **エンジニアとして市場価値を上げるには？**

誰もが考えるこの問いを、僕もエンジニアになってからずっと考えてきました。

学生時代のインターンも含めて10社で5年間のエンジニア経験がある僕が考える市場価値の高いエンジニア・低いエンジニアの違い、また、エンジニアの市場価値の上げ方や今注目している領域についても記していきたいと思います。

# 私のエンジニア経歴・経験値

今から5年前、僕は東京大学工学部システム創成学科で物理シミュレーションを専攻していました。その時は物理学の公式をC言語でモデリングしてシミュレーションをするという研究をしていました。

しかし、僕はそんなコテコテした研究よりもみんなが使うキラキラWebサービスがやりたい！と思い、研究室を飛び出して、スタートアップ企業を転々とします。

未経験ですがやらせてください！と飛びこんだスマートキャンプ株式会社では2年間お世話になり、フロントエンド・サーバーサイド・インフラ・データ分析まわりの力をつけました。次に、株式会社 FiNC Technologiesでデータアナリストとして、株式会社Gunosyでデータサイエンテ

【JavaScript】関数とオブジェクト㉑　getter/setterとstatic

#はじめに

Udemyの[【JS】ガチで学びたい人のためのJavaScriptメカニズム](https://www.udemy.com/course/javascript-essence/)の講座の振り返りです。

前回の記事

https://qiita.com/nao0725/items/3b12a8c1822159363191

#目的

* 関数とオブジェクトについての理解を深める

#本題
###1.getter/setter

* ディスクリプターのオプションの１つ
* 設定すると特別な機能をもたせられる

####例1

getterとsetterの挙動の確認

““js
function Person1(name, age) {
this.name = name;
this.age = age;
}

// ディスクリプターを設定
// Person1のnameプロパティの設定値をsetter,getterにする
Object.defineProperty(Person1.prototype, “name”, {
// getが呼ばれた際の挙動を書く

書籍購入をもっと便利に！！openBDで書誌情報検索！

# オンラインで本を買う
書籍をオンラインで買うときに困るのは、本の中身がイマイチよくわからないことです。ショッピングサイトによって掲載している書誌情報もまちまちで、ときには出版社のサイトまで目次を眺めに行ったりします。このひと手間を怠ると、届いてみたら思っていたものと違った、なんてこともあるので油断はできません。

書籍をサクサク検索できて、書誌情報が１ページに集約されいて、なおかつ常に最安値で買えるようなサイトがあれば…。
そんな願いの第一歩として、書籍情報のAPIであるopenBDを活用してサクっと書誌情報を確認できるWEBアプリを作ってみました！

https://openbd.jp/

# 実行環境
#### API
– openBD 書誌API

#### ライブラリ / フレームワーク
– axios
– Vue.js
– Spectre.css

https://picturepan2.github.io/spectre/

#### ホスティング
– netlify

https://www.netlify.com/

#### ブラウザ
– Google Ch

ナオトインティライミで前置詞を学ぶWEBアプリ

##ナオトインティライミを動かすと前置詞がわかるようにする
この画像を見たことがある方いると思います。
英語の前置詞が一目でわかる画像ですね。一時期ツイッターなどを目に触れた覚えがあります。

Webアプリのネタを考えていた時に、“マリトッツォで学ぶ前置詞”（↓これです）というワードを聞いて、このネタ画像を思い出しました。

マリトッツォで学ぶ前置詞のイメージ pic.twitter.com/Us7DU0WcPM

— こあたん??こあらの学校 (@KoalaEnglish180) October 14, 2021

ちょうど、Webブラウザ上で画像を動かせるアプリを学んで作りたいと思っていたこともあり、
**ナオトインティライミを動かすと、前置詞を教えてくれる**webアプリを開発しました。

##完成品
まずはこちらをアクセスして触ってみてください
ナオトとティライミの位置関係によって表示され

webpack 5からurl-loader/file-loader/raw-loaderが要らなくなった

doc: [Asset Modules | webpack](https://webpack.js.org/guides/asset-modules/)

## Asset Modulesの概要

webpack 5から **Asset Modules** が追加されました。モジュールのタイプを指定するもので、webpack4以前ではloaderを使用していたファイルの読み込を置き換えるものになります。
次のような対応になります。

|webpack 4 (loader)|webpack 5 (Asset Module)|
|-|-|
|url-loader|asset/inline|
|file-loader|asset/resource|
|raw-loader|asset/source|
|url-loader + limitオプション|asset|

## 使用方法

`webpack.config.js` でloaderを使用していた部分をAssetModuleの指定に書き換えます。

“`js:wepback.with-loader.config.js
module.ex

初心忘れるべからずということです。

試したことを記録していくもの。

**以下記事にて実装**
投稿日：2021/11/04
・[「何食べたい？」に対して「なんでもいい」以外の言葉、探してみませんか？](https://qiita.com/yui-kouy/items/5dc0db657e29e677bed6)
カラーコード
・[WEB色見本 原色大辞典 – HTMLカラーコード](https://www.colordic.org/)

#Web上の画面再読み込み
Web上で再読み込みボタンを作る
HTMLとCSSの記述のみで実装可能

**参考**
・[See-SS](https://see-ss.com/)

HTML

“a href=””“の“””“は「再読み込み」を行う指示
“a href=””“を“”#”“にすると「ページ上部へ戻る」の指示になる
やりたいことによって記述が変わるので注意。

“`HTML
他の料理も見たい場合は押してください
“`

【Vue.js】v-ifとv-showの違い

#はじめに
こんにちは！
今回は【Vue.js】v-ifとv-showの違いについてアウトプットしていきます！

#v-ifとv-showの違い

##v-if
・要素をDOMから削除・追加することで表示/非表示を切り替える。
⏩切り替えコストが高い。
・v-else、v-else-ifが使える。

##v-show
・CSSのdisplayプロパティを使って表示/非表示を切り替える。
⏩初期描画コストが高い。
・v-else、v-else-ifが使えない。

#まとめ
・v-ifは実行時に条件を変更することはほとんどない場合に使用するのが推奨されます。
・v-showは表示/非表示を頻繁に繰り返す場合に使用するのが推奨されます。

#最後に
今回はv-ifとv-showの違いについてアウトプットしました。
今回の記事を読んで質問、間違い等あればコメント等頂けると幸いです。

今後ともQiitaにてアウトプットしていきます！

最後までご愛読ありがとうございました！

リアルタイム( ..)φメモメモ　Vue、CSSなど

# VUEのサクっと使えそうなところ
– Vueインスタンスの基本 ⇒とにかくJSON

“`html

　　　

子要素を記述
　　　

#作り方
##使用環境
・CodePen
・Netlify
・[背景](https

「何食べたい？」に対して「なんでもいい」以外の言葉、探してみませんか？#Webアプリ #料理 #献立 #家庭内戦争 #夕飯戦争

:egg::curry::fork_and_knife:**毎日毎日献立を考えるのって大変**:fork_and_knife::ramen::spaghetti:
家族に夕飯を作ってもらっている人は文句は言えないんですよ・・・
「何食べたい？」って聞かれたら「なんでもいい」なんて言ってはいけないのです。
「なんでもいい」なんて言った日には（一方的に受けるだけの）**家庭内戦争**の開始ゴングが鳴るんです。
そんな:warning:**家庭内戦争**:warning:を回避したく、Webアプリを考えてみました。

**戻れるなら「なんでもいい」という前に戻りたい・・・**（クリックで開けます）

ささいなことで手がはなせなくて**つい**クチから出てしまった「なんでもいい」
「もう知らない！勝手に食べて！」と言われたあの日。
「はっ」としたときにはもう手遅れ。
冷

JavaScriptでDateをyyyy/MM/dd HH:mm:ssにフォーマットする方法 (date-fnsなどのライブラリなしで)

JavaScriptで`Date`オブジェクトをdate-fnsなどのライブラリなしに年月日形式(`yyyy/MM/dd HH:mm:ss`)に変換する方法です。

日付のフォーマットには`Intl.DateTimeFormat`を用います。

```js
const date = new Date(2001, 0, 2, 3, 4, 5);
const d = new Intl.DateTimeFormat("ja-jp", {
year: "numeric",
month: "2-digit",
day: "2-digit",
hour: "2-digit",
minute: "2-digit",
second: "2-digit",
}).format(date);
console.log(d); //=> "2001/01/02 03:04:05"
```

カスタムフックと自作javascript関数は何が違うのか

#はじめに
hooksと普段から呼んでいるが、javascript関数と厳密に言えばどういうところが違うのだろうと思い調べた。

#前提
hooks、javascriptともにアロー関数を想定。ここで言うjavascript関数はtypescript関数を含む（どちらかというとtypescriptより）。

#hooksとは
hook,hooks,フック,Hooks API,React Hooksなどいろいろな呼び方がありますがすべて一緒です。

>**フック (hook)** は React 16.8 で追加された新機能です。state などの React の機能を、クラスを書かずに使えるようになります。

React公式[[1]]より引用。

要するにクラスコンポーネントじゃなくて関数コンポーネントでもstateなどのReactの機能を使うためのもの。useState、useEffectなどは特によく使う。自分独自にフックを作成することも出来、自分が作成したフックをカスタムフックと呼びます。

>自分独自のフックを作成することで、コンポーネントからロジックを抽出して再利用可能な関数

JavaScript——深度理解（1）

#従来のコンパイル言語フロー（コンパイル）

1.分詞・品詞分析（形成品詞ユニット流）

2.解析/文法分析
このプロセスは、語法ユニットストリームを要素レベルごとにネストされた構成に変換するプログラムシンタックス解構成を表すツリーです。この木は「抽象文法樹」と呼ばれています。（Abstract Syntx Tree AST）

3.コード生成
JIT Just in time
AOT Ahead of time

#LHSとRHS

LHSは関連容器を見つける。

RHSは対応する値を見つける。

RHSクエリがネストされているすべてのスコープの中で必要な変数が見つからない場合、エンジンはReferenceErrerをスローします。

対照的に、エンジンがLHSクエリを実行すると、最上階（グローバルスコープ）でも目標変数が見つからない場合、グローバルスコープではその名前を持つ変数が作成され、エンジンに返却され、プログラムが非厳格モードで実行されることが前提となる。

ReferenceErrorは作用域判別失敗に関連していますが、Type Errorは作用域判別に成功しました。しかし

Google Apps Script: HTTP APIを呼び出してJSONを取得する方法

Google Apps Script(GAS)で外部のHTTP APIを呼び出し、そのレスポンスからJSONデータを取り出す方法です。

GASで外部サイトにHTTPリクエストを送るには、`UrlFetchApp.fetch`を使います。その戻り値は`HTTPResponse`です。`HTTPResponse.getContentText`でレスポンスボディーが得られるので、それをJSONパースすることでデータが得られます。

```js
function fetchJson(url) {
const res = UrlFetchApp.fetch(url);
return JSON.parse(res.getContentText());
}
```

## 使い方

```js
function example() {
const users = fetchJson("https://jsonplaceholder.typicode.com/users");
console.log(users[0].name); //=> "Leanne Graha

【JavaScript】関数とオブジェクト⑳　ディスクリプター

#はじめに

Udemyの[【JS】ガチで学びたい人のためのJavaScriptメカニズム](https://www.udemy.com/course/javascript-essence/)の講座の振り返りです。

前回の記事

https://qiita.com/nao0725/items/558337083753dd4507ed

#目的

* 関数とオブジェクトについての理解を深める

#本題
###1.プロパティーとディスクリプター

下記の記事も参考にさせて頂きました。
ディスクリプターとは「裏設定」みたいなもの？？

https://javascript.keicode.com/lang/object-object-property-attributes.php#2-1

| プロパティの設定値||
|:-:|:-:|
| value | 値 |
| configurable | 設定変更可能性 |
| enumerable | 列挙可能性 |
| writable | 値の変更可能性 |

####例1

```js
// オブジェクトを１つ