axiosの基本的な使い方

#axiosとは
HTTP通信（データの更新・取得）を簡単に行うことができる、JavaScriptのライブラリ。
APIを提供するクラウドサービスに対して、データを送受信することができる。

###インストール
“`
$ npm install axios
“`

###CDNの使用
“`javascript

“`
##主なメソッド

Githubでは以下のメソッドが使用できると記載されています。

今回は基本的なメソッドである、`get`,`post`,`delete`,`put`、また`config`オブジェクトについて軽く紹介して

【javascript】javascriptの記述をhtmlファイルから呼び出す

超初心者向けなお話です。

“`index.html

JavaScriptのお勉強

“`

““この記述を書くことによって、同じディレクトリ内のmain.jsファイルの記述を呼び出すことができます。

“`main.js
alert(‘がんばれ’)
“`

お勉強がんばりましょう。

webpack.mix.jsのmix.jsで親ディレクトリ(parent)にjsファイルを出力する方法

webpack.mix.jsで下記のディレクトリ配置にしてnpm dev buildしてみる

ソース
/www/src/app.js
出力
/www/public/js/app.js

“`js
mix.setPublicPath.js(‘app.js’, ‘../public/js’)
“`

“`console
✔ Compiled Successfully in 17215ms
/public/js/app.js
“`

と表示されるも/www/public/js/はからっぽ…

検索していると下記のgithub issueを発見

Unable to mix output .js file to the parent directory
https://github.com/JeffreyWay/laravel-mix/issues/1220

“`js
mix.setPublicPath(‘../’).js(‘app.js’, ‘public/js’)
“`

として設定すると無事希望通りのディレクトリに出力された

Next.js + RailsでポートフォリオサイトをISR対応＆メンテナンスフリー化した

2年ほど前に[Nuxt.jsを使ってポートフォリオサイトを作成](https://qiita.com/Y_uuu/items/f3e3382ca9f9f22e6677)しました。
今回、このサイトをNext.js + Railsでリニューアルしたので、経緯を記事にまとめます。

## リニューアル後のページ

https://portfolio.y-uuu.net/

デザインは[前回のもの](https://old.portfolio.y-uuu.net)を踏襲していて、ほとんど変わっていません。

## リポジトリ

– フロントエンド: https://github.com/yuuu/portfolio_v2_ui
– バックエンド: https://github.com/yuuu/portfolio_v2_api

## リニューアルの目的

【imi-enrichment-date】年号を含む日付表示の正規化

# imi-enrichment-dateとは
経産省のジービスインフォというサイトで公開されているオープンソースライブラリの１つで、
`令和３年２月２６日`のような日付表示を`2021-02-26`といった形式に正規化することができます。
MITライセンスで公開されているので商用利用も可能です。

## インストールの仕方
このツールはnpmのようなパッケージ頒布サイトでは公開されていないようで、
経産省のサイトあるいはプロジェクトのGitHubページからダウンロードして用います。

“`bash
# on your own project
npm install https://info.gbiz.go.jp/tools/imi_tools/resource/imi-enrichment-date/imi-enrichment-date-1.0.0.tgz
“`

## 使い方
ここでは自分のプロジェクトに組み込んで使う方法を紹介します。
ライブラリから適当な名前で読み込んだ関数は、引数に`2021年2月26日`や`令和三年二月二六日`のような日付を表す文字列か、`{“@

RustでWebAssemblyを使ってみた時の記録

# この記事について
プログラミング独学3年目の文系大学生の開発メモ。

# なぜWebAssemblyなのか
特に理由はありません(笑)
最近話題になっていると聞いて触ってみました。

# なぜRustなのか
これも特に理由なしです。
システムプログラミング言語なのに低レベルだけではなく、色々なアプリケーションを開発するためのライブラリが揃っていると聞いて興味を持ちました。

# 開発環境 (2021/02/26現在)
Windows10 Education バージョン 20H2 (Windows10 Home バージョン 20H2上のVMware Workstation Player 16仮想マシン)
Visual Studio Code
gcc 8.1.0
node 11.13.0
npm 6.9.0
rustc 1.50.0
cargo 1.50.0

# 開発開始
[MDNに掲載されているRust用のWebAssembly入門](https://developer.mozilla.org/ja/docs/WebAssembly/rust_to_wasm “Rust から We

javaScript 正規表現　お問い合わせフォーム　のメモ

名前

JavaScriptでHTMLを取得する方法

#JavaScriptでHTMLを取得する
まず、大きく方法は３種類あります。
・id名から取得する方法
・class名から取得する方法
・セレクタ名から取得する方法

これからそれぞれの方法でHTMLの取得方法を説明します。
###　id名から取得する方法

**STEP1**
HTMLの取得したい要素に「 id 」を設定

“`haml

“`

**STEP2**
getElementByIdというメソッドを使います。

“`JavaScript
document.getElementById(“id名”)
“`

###　class名から取得する方法
getElementsByClassNameというメソッドを使う。classの中に要素が複数あってもすべて取得することができます。

“`JavaScript
document.getElementsByClassName(“class名”)
“`

###　セレクタ名から取得する方法

querySelectorAllメソッドを使う。指定したセレクタ名に

javascript　配列を操作するメソッド

javascriptにおいて配列を操作するメソッドです。

# 1. forEachメソッド
– `forEachメソッド`とは、要素を１つずつ取り出して、全てに繰り返し処理を行うメソッドです。

“`javascript:example.js

const numbers = [1,2,3];
console.log(numbers);
//出力結果 [1,2,3]

numbers.forEach((number) => {
console.log(number);
});
// 出力結果
// 1
// 2
// 3

“`

という結果になります。

“`javascript:example.js

numbers.forEach((number) => {
console.log(number);
});

“`

こちらの記述に注目します。
このように引数に関数を入れたものを`コールバック関数`と呼びます。
コールバックとは関数の中に違う関数を入れて関数を呼びだすための関数を指定することです。

# 2. pushメソッド
– `pushメソッド`と

JavaScriptについて考える静的型付け言語と、動的型付け言語について

##主題
本記事は、JavaScriptについて考える静的型付け言語と、動的型付け言語についてまとめたみたものです。

まずそれぞれの型についてまとめる前に、
「二進数」
「16進数」
について簡単にまとめました。

##二進法について

コンピュータが扱うデータは全て二進数で表現できます。0と1だけであらゆる「情報」を表現できるのです。数値は勿論、画像や文字も0と1の二進数で表現できます。

##16進数について

2進数には 0と1の2種類の数字で表現しましたが、16進数には 16種類の数字があります。 文字としての数字は 0 から 9 までの 10種類しかないので、 アルファベットの A ～ F を 「数字」 として借用します。
16進数は 0 から F までの 16種類の数字を使って数を表し、 数が 0 から 1、2、3… と順に増えていくとき、7、8、9 の次は A、B、C と続き、 D、E、F までは 1桁ですが、 次に桁上がりして 10 になります。

// 例の記載
0, 1, 2 .. d, e, f, 10, 11, 12 … 1d, 1e, 1f

JavaScriptの関数とメソッドの違いとは？

JavaScriptを始めたばかりの初学者にとっては、両者の違いは分かりづらいものです。

どちらも引数を入れたり、戻り値を返してくれたりと似通っているため、見分けが付け辛いですよね。

またやってること自体もそんなに差はないのです。

ただ概念として違います。

##関数とは？

関数とはいくつかの処理がまとまったブロックのことを言います。

console.log(“こんにちは”);
console.log(“Hello”);
console.log(“Guten Tag”);
console.log(“ニーハオ”);

何度も繰り返し同じ処理を行うとき、同じ処理を繰り返し使うというのはメンドクサイものです。

そこで関数があると便利なわけです。

const greet = function() {
console.log(“こんにちは”);
console.log(“Hello”);
console.log(“Guten Tag”);
console.log(“ニーハオ”);
};
greet(); //関数の呼び出し

一度関数として設定しておけば

変数・定数・関数宣言方法

#変数の書き方
“`
const testScope = (scope) => {
if (scope === ‘block’) {
let message = ‘ブロックスコープ’
console.log(message)
}
// console.log(message)//letの場合ブロック内{}のみ参照可能
//よってこちらはエラーになります
//ReferenceError: message is not defined
}
testScope(‘block’)

let mutableText = ‘let変更前’;
mutableText = ‘let変更後’; //再代入可能
console.log(mutableText);
“`

#定数の書き方
“`
const immutableText = ‘const変更前’;
immutableText = ‘const変更後’ //再代入不可
console.log(immutableText);

const mutableArray = [1,2,3];
mutableArra

Web API

##XMLの利用

getElementsByTagName()
getAttribute()

##JSONの利用

Request → Respnse.json() → data

リスト：[]
→要素数を指定してあげる。先頭のデータなら[0]をつける
辞書：{}
→ドットでつなぐ

##JavaScriptでの利用方法

#####1 . fetch
#####2 . axios

【JavaScript】 海外Teck系YouTuberを真似てみた！ BookList App | No Frameworks

#１，はじめに
>この記事は、**海外Teck系YouTuberの動画**を参考に、同じプロジェクトを作成してみたものになります！
簡単にですが、動画を通して学べた技術や知識をまとめました！

#２，学んだこと
Frameworksを使わずに、BookListを作ることができました！
主に、
>①　**class**の作成
②　**static メソッド**の作り方と使い方
③　**localStorage**の追加と削除

**Bootswatch**や**Font Awesome**も使いながら、デザインについても学ぶことができました！

#３，参考動画

[](http://www.youtube.com/watch?v=JaMCxVWtW58)
YouTube: https://youtu.be/JaMCxVWtW58

#４，完成:tada:
![2021-02-25_16h47_16.gif](https://qiita-image-stor

Promiseで配列を逐次処理する

# Promise で配列を逐次処理する
Promiseを再帰的に呼び出すことで配列を逐次処理します、配列を元にWEBAPIを１回ずつ呼び出す必要があり作成に至りました。
ソースコード内 sequentialPromise 関数が逐次呼出しする関数です、sequentialPromiseSub をAJAX等でAPI呼び出しする関数に置き換えて考えれば使用用途がわかりやすいかと思います。

“` javascript

【Node.js】日時処理を扱う方法

#プログラミング勉強日記
2021年2月25日

#日付処理を使うための準備
　Node.jsで日付処理を扱うために、今回はdate-utilsを使用する。
　date-utilsはnpmパッケージの1つで、簡単にインストールすることができる。

“`:date-utilsをインストールする
$ npm install date-utils
“`

#現在時刻を表示する

“`js
// date-utilsを呼び出す
require(‘date-utils’);
let now = new Date();
console.log(now.toFormat(‘YYYY年MM月DD日 HH24時MI分SS秒’));
console.log(now.toFormat(‘YY年M月D日 H時MI分SS秒’));
console.log(now.toFormat(‘DDD MMM DD YYYY HH24:MI:SS’));
console.log(now.toFormat(‘M/D/YY’));
“`

“`:実行結果
2021年02月25日 01時52分13秒
21年2月25日

Node.js セキュリティアップデート + Node.js v15 について

# Node.js セキュリティアップデートが出てた

[https://nodejs.org/en/](https://nodejs.org/en/)

2.23 に、Node.js の新しいバージョンがでたのでチェックしよう。
[https://nodejs.org/en/blog/vulnerability/february-2021-security-releases/](https://nodejs.org/en/blog/vulnerability/february-2021-security-releases/)

### 10.x, 12.x, 14.x 15.x 用のセキュリティアップデート

重大(1), 高い深刻度(1), 低い深刻度(1)

1. HTTP/2 の unknownProtocol があまりにも多くなった時、DoS 攻撃を受ける可能性がある問題
– ファイルシステムが漏洩する可能性
– メモリリークを引き起こす可能性
2. localhost6 がホワイトリストに含まれている場合、DoS 攻撃を受ける可能性がある問題
– /

JavaScriptで String (文字列) を昇順 (asc)・降順 (desc) にソートする

#はじめに:

##やりたいこと
JS で 文字列 (String) をソートしたい。
・ “627118” -> (昇順) -> “112678”
・ “627118” -> (降順) -> “876211”
・ “Hello World” -> (昇順) -> ” HWdellloor”
・ “Hello World” -> (降順) -> “roollledWH ”

#考察

## 昇順ソート
・String => 1文字1文字を配列にする (str.split(”)) => sort() => 配列から文字列に戻す (strArr.join(”))　

## 降順ソート
・上記にプラスして、sort() の後に reverse()

#やったこと

“`JavaScript
/**
* @param {String} str
* @return {String}
*/
function sortAsc(str){
// 各文字を区切って、配列に変換
let strArr = str.split(”);
// 昇順
strAr

readonlyしてないのにreadonlyエラー

# なんでだろう

~~~js
interface UserModel {
name: string;
}
const newUser = Object.create(UserModel);
newUser.name = ‘xxx’ // ←TypeError: “name” is read-only
~~~

## 調べてわかったこと

* JavaScript組み込みオブジェクトのFunctionに[name](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/name)という名の
「読み取り専用」プロパティがある
　　　　　↓
* TypeScriptの言語的な特性上、その読み取り専用のプロパティに代入しようとしたと
判断されてしまった？

## どう対応したか

* UserModelのnameをuserNameに変更しました。

・・・ほかにも方法があったのか、詳しい人いたら教えてくださいまし m(__)m

文字列連結時、大量の場合➡効率について

文字列連結時、大量の場合➡効率について、以下は参考になります。

“`sample.js
//効率悪い例：
　　detail += “aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa”;
　　detail += “aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa”;
　　detail += “aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa”;
//改善例：
　　detail += “aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa”
+ “aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa”;
+ “aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa”