言語を比べると見えてくるもの

—
この記事は[リンク情報システム](https://www.lis.co.jp/)の「TechConnect！2022年2月」のリレー記事です。
engineer.hanzomon のグループメンバによってリレーされます。
（リンク情報システムのFacebookは[こちら](https://ja-jp.facebook.com/lis.co.jp/)から）

TechConnect！2022年2月のインデックスは[こちら](https://qiita.com/hs-lis/items/69eee14fd7bec92a854f)

—

#はじめに
初めて記事を書くので、何を書くかで悩みましたが、
IT業界に入って一番最初に気になったことにしました。

色々なプログラミング言語があるけれど、実際どの言語が何に適しているのか、
言語ごとの実際の内容の差はどうなのか……
今回は、どこでも聞いたことのある言語4つ程に絞って軽く書いていきます。

—

#言語毎の特徴と、利用されている分野

**■Java**
よく名前を聞く言語１位と言っても良いのではと言う言語

・特徴
　どん

react-modalでモーダルウィンドウを作る(Typescript)

## モーダルウィンドウの作成
##### Reactを使ってモーダルウィンドウに「Hello World」を表示する

※TypescriptでReactを使えるようにするには、以前作成した[こちらの記事](https://qiita.com/sh19982580/items/5f71856c7949c494d769
)で環境構築して下さい

## react-modal
`yarn add react-modal`
`yarn add -D @types/react-modal`

## src>app.tsx
下記が以前作成したコード

import React from “react”;

const App = () =>

Hello World

;
export default App;

上記のコードを`react-modal`を`import`、`useState`でモーダルを管理

import React, { useState } from “react”;
import Modal from “react

参考書

## JavaScript
### 確かな力が身につくJavaScript「超」入門
https://book.studio947.net/title/1985/

サンプルがあり、手を動かしながら勉強できる参考書。
JavaScript初心者で、JavaScriptの勉強をしたいけど、どこから始めれば良いかわからない。
色々なサンプルがあるので、JavaScriptでできることがわからないという人におすすめ。
本のレイアウトも見やすい。
「JavaScript参考書」で検索すると多くのサイトでおすすめされていたので、JavaScriptの参考書2冊目として購入。
今でも会社の問題作成のネタとして活用中。

「0」をつけて桁数を合わせる(padStart)

## やりたいこと
数字で一桁の場合「01,02,03…10,11」というように頭に0をつけて最大桁数に合わせたい。
数字をつける要素の数の最大桁数に応じて先頭につける0の個数を変える。

## 使用言語
– HTML
– CSS
– JavaScript

## 実装

[String.prototype.padStart()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/padStart)メソッドを使用する。
### `padStart()` メソッドとは
文字列が第一引数で指定した長さになるように、第二引数の文字列を文字列の先頭に追加して (必要に応じて繰り返して) 延長する。
`padStart(文字列の長さ,[埋める文字])`

“`js
const str = “11”
console.log(str.padStart(3)); // ” 11″
console.log(str.padStart(2,”0″)); // “11”
console

MicrosoftのWeb開発教材を使ってみた ④タイピングゲーム 【JavaScriptのイベント処理】

# はじめに

**「Web Development For Beginners」**というMicrosoftがGithubに公開している教材についての記事です。

教材の紹介・選んだ理由など

### この教材を選んだ理由

https://github.com/microsoft/Web-Dev-For-Beginners

– HTML/CSS/JavaScriptを触れるいい感じの教材が欲しかった
– そこそこのボリュームがあり、作りながら学べるタイプの教材
– 基礎的なトピックが一通り網羅されている
– 質が高そう
– なにせあのMicrosoftなので、きっと良いものでしょう。
– 題材が**面白そう**
– 軽く調べた感じだとチュートリアルでよくある題材として「TODOアプリ」「クイズアプリ」などがあるみたいですが、どれもどう実装するのか想像がついてしまって、余り興味がわきませんでした。
– しかしこの教材は「テラリウム」「タイピングゲーム」「ブラウザ拡張機能」「

ブラウザレンダリングの流れをサクッと理解する

## ブラウザレンダリングの大まかな流れ

この4つの工程からなるレンダリングが始まって、最終的に描画(Paint)されるまでのことをフレームという


## レンダリングのより詳しい流れ
より細かい流れを記述するとこの８段階に分けられる。


###

MicrosoftのWeb開発教材を使ってみた ③テラリウム構築 【HTML・CSS基礎/DOM操作/クロージャ】

# はじめに

**「Web Development For Beginners」**というMicrosoftがGithubに公開している教材についての記事です。

教材の紹介・選んだ理由など

### この教材を選んだ理由

https://github.com/microsoft/Web-Dev-For-Beginners

– HTML/CSS/JavaScriptを触れるいい感じの教材が欲しかった
– そこそこのボリュームがあり、作りながら学べるタイプの教材
– 基礎的なトピックが一通り網羅されている
– 質が高そう
– なにせあのMicrosoftなので、きっと良いものでしょう。
– 題材が**面白そう**
– 軽く調べた感じだとチュートリアルでよくある題材として「TODOアプリ」「クイズアプリ」などがあるみたいですが、どれもどう実装するのか想像がついてしまって、余り興味がわきませんでした。
– しかしこの教材は「テラリウム」「タイピングゲーム」「ブラウザ拡張機能」「

【Node.js】過去のバージョンへダウングレードする方法

# はじめに
新規のPJでNode.jsのv16をダウンロードしたら、別PJで使用していたv12が使えなくなったということがありました。その際にv12に戻すのに苦労したため、解決策を紹介していきます:point_up_tone1:

# 前提
– 公式サイトからNode.jsのインストールを2回行い、2回目のバージョンでローカルのNode.jsのバージョンが上書きされた
– 1回目がv12で、2回目がv16です。
– nvm useコマンドによる切り替えができない
– 通常はこのコマンドを使用した場合にはバージョンの切り替えが可能ですが、切り替えができませんでした。nvm availableコマンドを実行した際に変更したいバージョン(v12)が表示されないことが原因かなと考えています。

# 解決策（Windows）
1．PCの設定画面のアプリを開き、Node.jsをアンインストールします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700107/d2b307b2-4429-35

【メモ】Node.jsでAPI通信するサンプル実装

下記の動画のメモです。

ゼロから半年でWeb系エンジニアになろう【完全まとめ版】

“`sh
# expressをインストール
npm i express
“`

“`js:app.js
const express = require(‘express’)
const app = express()
const port = 3000 //通信の宛先を区別する　どのアプリケーションと通信したいのか識別するもの
let booklog = {} //初期化する

app.use(express.json())

// 投稿POSTする
app.post(‘/booklog’, (req, res) => {
booklog = req.body

if (!(booklog.name && booklog.text)) {
res.json({
“ok”: false,
“error”: “invalid parameter”
})
}

【Vue】コンポーネントのcomputedをテストする

## きっかけ
コンポーネントのcomputedをテストする機会がありました。
しかしコンポーネント内の他の要素（ライフサイクルやストアなど）に依存してしまい、純粋にロジックのみをテストできないのだろうか…となっていました。
その際のメモです。
## 使用しているバージョン
– nuxt@2.15.8
– vue@2.6.14
– @vue/test-utils@1.3.0

## 方法
computedのテストには大きく分けて2つあります。
– mountやshallowMountを使う方法
– callを使う方法　**<-** **今回はこちら** ## テストしてみる 今回テストするコンポーネントはこちらです。 ```vue:UserList.vue