【JavaScript 関数ドリル】中級編のpullAll関数の実装アウトプット

## pullAll関数の課題内容

\_.pullAll関数を自分で実装する課題。
https://lodash.com/docs/4.17.15#pullAll

「課題内容」/「解説動画」/「解答例」を確認したい場合は、以下リンク先のページを参照。

【中級】pullAll関数の実装

## 課題に取り組む前の状態

– 前回取り組んだpull関数と同じようなものなので、解答を見ずにできそうだと思った。

## 課題に取り組んだ後の状態

– 解答例と同じように実装できてよかった。

## pullAll関数の実装コード（答えを見る前）

“`javascript
function pullAll(array, values) {

for (let i = array.length – 1; 0 <= i; i--) { if (values.includes(array[i])) { array.splice(i, 1); } } return

【JavaScript 関数ドリル】中級編のpull関数の実装アウトプット

## pull関数の課題内容

\_.pull関数を自分で実装する課題。
https://lodash.com/docs/4.17.15#pull

「課題内容」/「解説動画」/「解答例」を確認したい場合は、以下リンク先のページを参照。

【中級】pull関数の実装

## 課題に取り組む前の状態

– 解答を見ずにできそうだと思った。

## 課題に取り組んだ後の状態

– 実行結果は同じになったものの、解答例を見ると、自分のコードには余計な記述が多いと分かった。

## pull関数の実装コード（答えを見る前）

“`javascript
function pull(array, …values) {
const valueArray = […values];

if (arguments.length < 2) { return array; } for (let i = 0; i< valueArray.length; i++) { if (array.incl

計算苦手な妻「構成比？前年比？伸び率？」←Webサービス作って解決してみた【React】

## 妻は計算ができない

ワイ (｀･ω･´) 「

こんにちは。masakichiです。

あなたの身近に計算が苦手なひとはいませんか？

ワイの妻は仕事につかう計算が苦手で、構成比やら前年比やら伸び率やらを出さないといけない時、ワイにヘルプを求めてきます。

たまにならいいのですが、ほぼ毎回ヘルプミーしてくるのです。

そんなわけで、いっそのことWebサービス作って、そっちで計算してもらおうと思ったわけです。

」

## つくったもの


URL
https://react-calculator.cocoroworks.net/

ワイ (*´ `) 「仕事でよく使う計算が簡単にできるWebサービスをつくりました！」

計算苦手な人 ( ´･ω･)　「あれ？この計算ってどうやって求めればよかったんだっけ？」

↑これを解決することができます。

### 仕事でよく使う10種類の計算ができま

# 【JavaScript 関数ドリル】中級編のintersection関数の実装アウトプット

## intersection関数の課題内容

\_.intersection関数を自分で実装する課題。
https://lodash.com/docs/4.17.15#intersection

「課題内容」/「解説動画」/「解答例」を確認したい場合は、以下リンク先のページを参照。

【中級】intersection関数の実装

## 課題に取り組む前の状態

– 解答を見ずにできそうだと思った。

## 課題に取り組んだ後の状態

– 解答例はevery関数を使用して簡潔に書かれており、every関数を新たに知ることができてよかった。

## intersection関数の実装コード（答えを見る前）

“`javascript
function intersection(…arrays) {
const copiedArray = […arrays];
const newArray = [];
let value = [];
let flag = true;

for (let i = 0; i < copied

初心者プログラマーのための英語命名法

## はじめに
「なんか、レビューのたびに変数名を指摘されてる気がする…」
「日本人なんだから、英語で命名とか無理…」
こんなお悩みありませんか？

この記事では、「プログラマーが英語の命名で悩んだ時にどうすれば良いか」をフローチャート形式で解説します！
これであなたも駆け出しエンジニアを卒業できるかも!?

※本記事はLaravel,Vue.jsのプロジェクトで運用されているルールを元に解説しています。
プロジェクト内だけの内輪ルールも含まれていますので、ご了承ください。

## 対象者
この記事は下記のような人を対象にしています。

– 駆け出しエンジニア
– プログラミング初学者
– PHP(Laravel),JavaScript(Vue.js)で英語のネーミングに苦戦中

## 前提知識
下記のような中学・高校で学ぶ内容については理解していること前提で解説します。悪しからず。
– 三単現のsって何？
– 5文型(SV/SVC/SVO/SVOO/SVOC)って何？
– 品詞(名詞/形容詞/動詞)って何？
– ~ingとか~edで形容詞になるってどういうこと？

## 結

IE11を考えなくなったClientSide JS

> デスクトップアプリとしての IE11 は 2022/06/16(JST) にサポートが終了されます。

jQuery全盛期を経てIE9, 11の対応を考えながらWebサイト・Webサービスの開発に関わってきた身としては、そりゃもう待望の瞬間です。
遂にIEをサポート外にできる未来が現実になるのです。

これで何が変わるのかというとIEがサポート対象外となれば
Chrome系やSafariなどはすでに最新バージョンのみのサポートとなっていることから
2015年に決まったJSの規格ECMA6とそれ以降のバージョンが標準になっていきます。

今までnodejsでは当たり前に使っていた文や多くの機能がトランスパイルしなくてもそのままClientSideでも使えるようになるのです。
ということでClientSideのJSでよくあるRESTなどのWebAPIを使ったケースがどのようになるか交えながら軽くまとめていきます。

# 積極的に使いたい機能
– [for .. of](https://developer.mozilla.org/ja/docs/Web/JavaScript/Refer

JS 文章の一部を正規化で書き換える為に：1

この記事ではJSと正規化を用いて文章の一部を書き換えていきます。
## 今回のゴール：JSを用いて文章の一部分を取り出す
今回、業務の中で「正規化を使って文章の一部分を変更する」
という作業を行っているコードを見かけ、
「そろそろ正規化を使えるようになりたい」という思いから
まとめつつ勉強することにしました。

そこで、まずはJSをつかって自分の取ってきたい箇所を含む、全体の要素を取得してみましょう。

## 生JSの方法:document.getElementを用いる
こちらに関しては複数方法が考えられますね。
“`html:HTML

あばたけたぶら

彼は背後にひそかな足音を聞いた。
それはあまり良い意味を示すものではない。
誰がこんな夜更け

Reactを学ぶ前のJavaScriptのお作法をおさらい(ES6)

## 経緯
Reactを学び直ししています。いや、ちゃんと学んだことはなかったので初学に近いです。これをもとに一丁前にできるようになろうかと思っております。そのためにもJavaScirptのES6な書き方を身につけるべくReactで使う考え方や構文、メソッドをおさらいしています。
これはUdemyの特定の動画を見ながら復習しているので、その動画をやったことある方は「あれね」とわかるかなと思います。

## 変数

| 　変数　　　|　　再宣言　　　| 再代入　　 | 　スコープ　　　　　 |
|:—-:|:—-:|:——:|:———:|
| var |　　　◯　　　　　 | ◯ | 関数内 |
| let |　　　×　　　　　 | ◯　　 | ブロック内 |
| const |　　　×　　　　　 | × | ブロック内 |

※まあ、varは使わないに越したことないということですね

## 分割代入
普通の代入
“`javascript
const myProfile = {name :

ワイ「VueでもユーザーのタイミングでPromiseをresolve()できんへんか？」

# Abstract

[ユーザーのタイミングでPromiseをresolveする記事](https://qiita.com/Yametaro/items/b6e035fe06530a9f47bc)が先日投稿されました。その記事ではReactによる実装が行われていますが、Vueを愛用している筆者にとってはVueの実装が欲しくなります。
そこで本記事では、ユーザーのタイミングでPromiseをresolveするVue 3の実装を紹介します。

# Introduction

最近こちらの記事: [6歳娘「パパ、ユーザーのタイミングでPromiseをresolve()できないの？」](https://qiita.com/Yametaro/items/b6e035fe06530a9f47bc)を読みました。こちらの記事ではReactによる実装が紹介されていますが、Vue3愛好家の筆者的には「これVue.jsでも似たようなことしたいよね」と思いました。ネットの海を漂うと、似たような記事はありますが、最新の記法(script setup)でかつTypeScriptで書かれている記事が見当たらりま

streamlitの仕組み調査

pythonで手軽にWebアプリケーションを作れるフレームワークstreamlitの仕組みについて調べてみました。（誤解がありましたら、どうぞご指摘ください。）
周辺の業務で使うことが結構増えて来たため、何か性能で問題になった場合や拡張が必要な場合にも対応出来るようにと調べてまとめました。

#### 対象読者
データサイエンティストではなく、ゴリゴリのエンジニア向けの記事になります。

githubのコードと公式のドキュメントを参考に調査しています。
https://github.com/streamlit/streamlit

### アーキテクチャ
streamlit は Python(tornade)+React(typescript)で実装されています。
streamlitでは、次の2つのパートがあります。

1. web server : streamlitのpythonアプリケーションコードをブラウザに表示するためのフロントエンドのHTML+jsをインスタンス化して通信するために使用します。例えば、アプリケーションでcsvのデータを読み込んで、ブラウザには折れ線グラフのH

【Nuxt.js】Nuxt.jsで部分的に静的なhtmlファイルを表示させたい

# ファイル構造を以下にする（結論）

“`ruby:ファイル構造
├── static
│　　　　　　└── aaa.html （htmlファイル）
├── pages
│　　　　　　├── bbb.vue
│　　　　　　└── ccc.vue
“`

# なぜこんな記事を書いたか
シンプルだが意外とhtmlファイルを表示させる、といった記事がなかったため。
もし誰かのお力になれましたら幸いでございます。

ESLintでParsing error…となった時の対応　parserOptionsを設定する

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

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

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

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

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

【JavaScript】LoadイベントとDOMContentLoadedイベントの違い

LoadイベントとDOMContentLoadedイベントの違いはイベント発火のタイミングです。
・Loadイベントは、すべての読み込みが完了した時点でイベントが発火します。
・DOMContentLoadedイベントはDOMツリーに加えて画像やすべてのスクリプトが読み込まれた時点で発火します。

***
HTMLからブラウザに表示するまでの流れの中で二つのイベントがどのタイミングで発火するのか大まかに説明します。

1.ブラウザはグローバルオブジェクトであるWindowオブジェクトを生成します。そしてWindowオブジェクトのプロパティとしてDocumentオブジェクトが生成されます。

2.DocumentオブジェクトはDOMツリーを読み込んでいきます。HTMLの解析が終わると**DOMContentLoadedイベント**が発火されます。

3.DOMツリーの構築が完了した後に、画像が読み込まれていきます。読み込みのすべてが完了するとWindowオブジェクトに対して**loadイベント**が発火されます。

***
例えば、画像のプレビュー機能を実装するときなどは、Loadイベン

【JavaScript】フルスクリーンから抜け出せなくなる未来

フルスクリーンでゲームなどをプレイしているときに、うっかりESCを押してしまってフルスクリーンから脱出してしまって興がそがれた、なんて経験はありませんか？

フルスクリーンモードでは、`ESC`をキャプチャすることが[できません](https://stackoverflow.com/questions/25126106/capture-esc-event-when-exiting-full-screen-mode)。
また`Ctrl+W`や`Windows+D`といったOSによって制御されるショートカットは、そもそもJavaScriptから操作することが[できません](https://stackoverflow.com/questions/21695682/is-it-possible-to-catch-ctrlw-shortcut-and-prevent-tab-closing)。

ということで、そのあたりのキーボード入力を制御できるようにしようというAPIがWICGに提出されています。
以下は該当のAPI、[Keyboard Lock](https://wicg.github.i

debuggerやconsole.traceなどを使ってJavaScriptをデバッグする

:::note warn
クローズ予定の[技術ブログ](https://www.yurikago-blog.com/)に投稿した過去の記事です。
投稿日: 2020/07/28
:::

JavaScript をデバッグする方法をいくつかまとめました。

1. JS の debugger ステートメント
1. JS の console.trace 関数
1. Chrome デベロッパーツールの Event Listeners タブ

検証用のソースは [GitHub](https://github.com/krabben16/sandbox-js-debug) に配置しました。

## debugger ステートメント

ページを表示すると、debugger ステートメントを記述した箇所で処理が止まります。デベロッパーツールの Sources タブでブレークポイントを任意の位置に設定したときと同じ挙動になります。

“`js
const numbers = [1, 2, 3]
numbers.map((n) => {
debugger
console.log(n)
})
“

画像をIE11でpreloadする

:::note warn
クローズ予定の[技術ブログ](https://www.yurikago-blog.com/)に投稿した過去の記事です。
投稿日: 2020/07/10
:::

link 要素の rel 属性に preload を指定するとリソースを先読みします。リソースを先読みすることでレンダリングがブロックされにくくなりページパフォーマンスが向上するのですが、この機能は IE で使えません。この記事では preload の Polyfill を導入して IE で同等の機能を実現する方法をまとめました。

[Resource Hints: preload](https://caniuse.com/#search=preload)

## preload とは

> \ 要素の rel 属性で preload を指定すると、 HTML の \ 要素内で読み込みリクエストを宣言し、ページのライフサイクルの早期の、ブラウザーの主なレンダリング機構が起動する前に読み込みを始めたい、すぐに必要なリソースを指定することができます。これにより、そのリソースがより早

JavaScript 整数の連番を配列として取得する

:::note warn
クローズ予定の[技術ブログ](https://www.yurikago-blog.com/)に投稿した過去の記事です。
投稿日: 2020/02/05
:::

for 文を実行する方法と `Array.from` を実行する方法をまとめました。

## 1. for

“`js
const start = 1
const end = 10
const step = 1

let numbers = []
for (let n = start; n <= end; n += step) { numbers.push(n) } console.log(numbers) ``` ``` [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] ``` ## 2. Array.from ```js const end = 10 const step = 1 const numbers = Array.from(Array(end).keys(), (n) => (n += step))

console.log(numbers)
“`

“

JavaエンジニアによるJavaScript入門2(四則演算、if、for)

## 四則演算
#### Javascript
“` javascript
const test1 = 1;
let test2 = 2;
test2 += 3;
const calculation = test1 + test2;
console.log(calculation);
“`
【コンソール出力結果】

“` text
６
“`

#### Java
“` java
int test1 = 1;
int test2 = 2;
test2 += 3;
int calculation = test1 + test2;
System.out.println(calculation);
“`
【コンソール出力結果】

“` text
6
“`

## if
#### Javascript
条件の書き方
JavaScriptの **「イコール」** のルール
**基本的には「===」を使用する**

|使用| 記号 | 違い |
|:-:|:-:|:-:|
|▲|== | 値が一致 |
|○| === | 値が一致　&&　型が一致 |

######

[javascript,cssアニメーション]魔法陣からテキストが出てくるアニメーション

テキストを入力するだけでメッセージ動画が作れるサービス[Teloppy](https://teloppy.com “Teloppy”)を運営しております！
その中で用いたアニメーションのコードを一部紹介したいと思います！
[Teloppyでの動作](https://teloppy.com/telops/us8d9rd2/?message=U2FsdGVkX18wKSb%2BL0GRHgceDC3qI4EJSl0kaF05a24%3D)

まずは、コードの完成形です。

JavaScript

### コールバック関数
ある他の関数に引数として渡される関数をコールバック関数という。
渡される側の関数であることに注意。
渡す→呼び出す　２つのことが必要。

渡し方は2パターンある。
・事前に定義した関数をコールバック関数として渡す。
・定義した関数内で、関数名を記し、その関数の引数の中に定義したい関数を記す方法

コールバック関数にもプロパティを設定し、後から引数を渡すこともできる。