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

【3ヶ月】未経験転職したエンジニアが自社開発企業で行なったこと【そこから見えるやっておくべきこと】

## 自己紹介
[yuki](https://twitter.com/yuki82511988)と申します。DMMWEBCAMPにお世話になって、今はWEBエンジニアをしつつ、自分で仲間を集めてサービス開発したり、プログラミングの家庭教師したり毎日エンジニアライフをエンジョイしています。

本日は未経験エンジニアとして、自社開発企業に就職して3ヶ月の間に何をしたか紹介します。
勤務先にもSNSで身分を明らかにすることは承諾を得ているので、その部分もお伝えします。

## 会社の紹介
私は現在、[株式会社ダイアログ](https://www.dialog-inc.com/)という物流×ITの会社に勤務しております。
2020年9月現在、エンジニアの募集はしていませんが、他にも様々な職種を募集しているので、[Wantedly](https://www.wantedly.com/companies/company_3244501)のページをご覧ください。いつか自分のQiitaきっかけで応募してくださる方がいたら、嬉しいなと思います。

[インタビュー記事（入社後の感想など）](https:/

アロー関数 =>

今まで何気なくこのアロー関数を使ってきたのですが、やっぱりJSの基礎がなっていないので気になります
私気になります(？)

##アロー関数とは
`=>`を使って`function`を使わずに関数を作成することができる

具体的に見ていきましょう

“`
function createGreeting(name) {
return “Hello” + name;
}
“`

こういう記述を

“`
const createGreeting = name => “Hello” + name;
“`

こんなに簡単に記述できる様になるんですね〜〜
ただこれは引数が１個で、処理が１行で済む場合です
２個以上２行以上になると

“`
function createGreeting(name, greeting) {
console.log(name);
return greeting + “” + name;
}
“`
こんな処理を

“`
const createGreeting = (name, greeting) => {
console.log(name);

JSでおみくじアプリを作る！

##あいさつ
初めての人は初めまして！知っている人はこんにちは！

今回はJSを使って「おみくじアプリ」を作ってみたいと思います！
では！

##環境
・windows10
・Node.js 12.19.0

##仕様設計

まずはコードを書く前に使用を決めていきます
まず中央にボタンを配置しそれを押すことでボタンの上に運勢を表示することにします
ボタンの色は赤でボタンはcssで押し込めるようにします
あとはカーソルをポインターにしたり細かくしていきます

運勢はこの三つにします
「大吉」「中吉」「小吉」

では仕様設計だけでは楽しくないので作っていきます

##コーティング

自分はエディターにVScodeを使っています
DLリンク張っておきます!
https://code.visualstudio.com/Download
すごく使いやすくまた「Linux」でも使えるのがいいですね！

最後にコード解説をします
まずはHTMLとCSSを使ってボタンを作っていきます！

“`index.html

jQueryプロジェクトでもReact風に書ける？

jQueryを使ったシステム開発で、ES6+Webpack形式でコーディングしていました。

その際に`jQuery.html()`メソッドで追加する目的のHTML文字列を管理していたのですが、分かりやすくするために調整していたら自然とReactのJSX風になってビックリ？というお話です。

# 基本的な例

・ファイル名と定数名は大文字で始めます。

“`UserList.js
// 要素が引数
const Hello = (username) => {
return `

Hello, ${username}!

`;
};
“`

“`ErrorFeedback.js
// 引数でクラス名とinnerHTMLが変わる
const ErrorFeedback = (error) => {
return `

${error ? error.description : ‘OK’}

`;
};
“`

# 連続デ

fluorite-8　実装の軌跡　Part 1　背景とPEG.jsの基礎

# 背景

## fluorite-7について

[fluorite-7](https://qiita.com/MirrgieRiana/items/a0906c72ebfb46693ab5)は、2020年2月あたりから実装および公開が進められている創作プログラミング言語です。

## fluorite-7の文書化が進んでいない

fluorite-7の始まりはTwitterのネタであったため、かなり長い間、非公開の場で開発が進められていました。

fluorite-7はのちに公開状態となりましたが、公開前に作られた機能の大半は文書化されていません。そして、文書化は実装に比べて地道で大変な作業となるので、あまり行われていません。

fluorite-7の現行バージョン（2020年11月1日）には、ソースコードにだけ書かれた機能が多数存在します。

## 臭いものに蓋

fluorite-7は次のような問題を抱えており、フルオライト財団はfluorite-7の文書化に苦戦しています。

– ソースファイルが5000行以上あり、非常に読みづらい。
– 後付けの機能によって参照関係がごちゃ

【初心者向け】予め登録したデータを、選択コマンドで入力フォームに自動入力させたい

# 困っていたこと
– プルダウンに予め登録したデータをセットして、それを選択すると、フォームに自動入力させたいと思っていた
– いろんな記事を試してみたが、formヘルパーを使用していると上手くいかない方法が多かった
– formヘルパーをやめるなどの方法もあったが、セキュリティのためにformヘルパーを使えることが望ましいと考えた

# やりたいこと
– 予め雛形となるデータを登録しておく
– 選択コマンドで選択すると、入力フォームに自動入力される
– 単なるテンプレートではなく、登録時に数値を変えることも可能にしたい

# 開発環境
ruby ‘2.6.6’
gem ‘rails’, ‘~> 6.0.3’, ‘>= 6.0.3.3’

# 実装内容
– undone_actionモデル(カラムは、action_nameとdefault_time)には、予めデータが登録されている状態
– undone_actionsをセレクトボックスにセット
– セレクトボックスを選択すると、イベントが発生し、入力フォームのsavings_nameとearned_timeに値が入る

JavaScript sortにおける比較関数の仕様

JavaScriptで配列の要素(数値)を昇順・降順に並び替えるために、漠然とsortに比較関数を渡して書いていたので、sortに比較関数を渡したときの挙動を理解するために詳細を調べました。
#ソートプログラム
“`JavaScript:sort.js
let array = [1, 5, 4, 2, 3];
console.log(array.sort((a, b) => a – b)); //[1, 2, 3, 4, 5]
console.log(array.sort((a, b) => b – a)); //[5, 4, 3, 2, 1]
“`
シンプルなソートプログラムは上記のようなものになるかと思います。
比較関数内の返り値を、昇順のときは第一引数から第二引数、降順のときは第二引数から第一引数を減算した結果にしています。
このようなsortのコールバック関数の返り値の違いがどのようにソート順に違いを生むのでしょうか。
#sortのコールバック関数の返り値ごとの挙動
sortはコールバック関数として、下記のような引数を二つ取り、値を返す比較関数を定義できます。

“`Ja

Class Component ? Function Component ?

今まで`Class Component`と`Function Component`の違いがよくわかってなかったので少しまとめてみます

これらを語る上で欠かせないのが`state`と`ライフサイクル`こいつらが何かというと

##state
コンポーネント内で使える値で、値の変更が起こると、renderが走って画面が更新される

##ライフサイクル
コンポーネントがMuntingしてUpdatingしてUnmountingする流れ

#今風なのはFunction Component
`Hooks`が導入されるまでは`Class Component`では`state`が使えたり、`ライフサイクル`が使えたりすることがメリットだと考えられていました
ただ`Hooks`内で使う`useState`と`useEffect`あるので`state`と`ライフサイクル`が置き換えられちゃうんですよね
`Function Component`の方が記述が簡単にまとめられて、こっちを使う方がモダンなんです

`ライフサイクル`だと`componetDidMount()`とか`componentDidU

「npm start」をすると「Don’t try to install it manually: your package manager does it automatically. However, a different version of webpack was detected higher up in the tree:」のエラー文が出て来たときの対処法

#この記事について
初学者向けの記事となっています。
https://react-projects.netlify.app/
こちらのサイトでReactを使って実装する際に、**npm start**をしたところタイトルの通りのエラーが出ました。

タイトルのエラー文を訳すとこんな感じ
**「手動でインストールしようとしないでください。パッケージマネージャーが自動的にインストールします。
ただし、ツリーの上位で異なるバージョンのwebpackが検出されました」**
つまり、**「同じディレクトリ内にwebpackが重複してインストールされてるぞ」**ってことですかね。

確かに私のアプリディレクトリには「node_module」が入っていたのでそこと重複しているっぽい。
しかし**node_moduleを削除しても変わらなかった為、最終手段に出ました。**

##結論
いきなり結論になりますがアプリディレクトリの直下に「.env」ファイルを作成し下記の一行を加える事で、解決しました。

“`.env
SKIP_PREFLIGHT_CHECK=true
“`
##エラー文
因みにエラ

AWS EC2でターミナルを落としてもアプリが実行し続けるように設定する（デーモン化手順）

# はじめに

AWS EC2にて、Node.jsを使って自作したWebアプリケーションをデプロイすることは成功したのですが、
ターミナルを落とす（切断する）と、そのアプリケーションが稼働停止します。

ターミナルを落としても稼働し続けられるようには『デーモン化』という処理を行う必要があるようです。

そこで、私が行ったEC2におけるデーモン化処理について書いていきます。

# この記事でわかること

– Node.js + EC2でのデーモン化
– foreverライブラリの導入方法
– foreverライブラリの使い方(start, stop, list)

# 実行環境
– AWS EC2 (Amazon Linux2 AMI)
– Apache 2.4.46
– Node.js 12.19.0
– forever v3.0.2

# 解決方法

## foreverライブラリのインストール

下記コマンドにてインストールするとともに、
正常にインストールされたかどうかを確認します。

“`
$ npm install -g forever

$ forever –vers

LINEBotに尋ねたら温度センサーで室温を計ってみた

# まずは動かしてみた
以前、obnizと温度センサ、LEDを組み合わせてみたのですが、今度はLINEBotと組み合わせてみました。
↓が以前のQiitaの記事
https://qiita.com/heihei15408697/items/a1abef804a5522e73628

### LINE側

### obniz側

# 実現方法
### 使用したもの
・obniz Board 1Y
・高精度IC温度センサー LM60BIZ
・マイコン内蔵RGB 8mmLED PL9823-F8

###

[JavaScript]eclipseでJavaScriptを動かしてみる

前回、eclipseにjavascriptのプロジェクト(の殻)の作成はできたので、実際にhtmlとjsを書いてみて動かしてみる。

最初といえば「Hello, World!」を表示させるのがセオリー(?)ですがそれではつまらないので、ボタンを押したら「Hello, JavaScript!」のメッセージが表示されるように以下のようなhtmlとjsを書いてみた。

“`html:NewFile.html

他人との距離大丈夫？近かったら通知がくるよ！

# まずは動かしてみた
超音波距離センサーから2メートル以内であれば、obniz、LINEともに通知がいくようにしてみました。

## obniz側

## LINE側

# 実現方法
### 使用したもの
・obniz Board 1Y
・超音波距離センサー HC-SR04

### 参考にしたサイト
下記のサイトを参考にしました。

郵便物が届いたらLINEにお知らせ

###ソース
“`javascript
c

簡単なLPを作るだけでも、フルスタックを目指したいと思った話

当方は実務未経験で、エンジニア就職を目指している人間です。
実務を経験してからわかることが99%だと思いながらも、先日友人のためにLPを作る中で、今での職歴等から持っている仕事に関する考え方と目指したいエンジニアの方向性が繋がってきて、**ああやっぱフルスタックエンジニアっていいなあ**と思ったので整理のために文章を書くものです。

※技術的な内容は殆ど出てきません。
※簡単にフルスタックとか言うなとか言わないでください。僕もそう思います。でも目指したいと思っちゃったんだもん。

ちなみになぜフルスタックを目指したいと思ったかというと、**ビジネス的な価値をより高くうみ出すため**、これにつきます。

## 1.略歴

エンジニア転職を志す前に、約7年社会人をやっていました。
キャリアとしては銀行営業5年→ITベンチャー財務経理2年という流れでして、一貫してお金の面から経営をみてきたキャリアになります。
このキャリアを経る中で「ビジネスやそれを生み出すプロダクトに直接携わりたい」と思うに至り現在エンジニアを志望しています。
また、エンジニアだと1人でも稼ぎたい！的な人も多いと思う

モーダルウィンドウ

“`css

body {
font-size: 14px;
}

#open, #close {
cursor: pointer;
width: 200px;
border: 1px solid #ccc;
border-radius: 4px;
text-align: center;
padding: 12px 0;
margin: 16px auto 0;
}

#mask {
background: rgba(0, 0, 0, 0.4);
position: fixed;　絶対位置への配置となるのはabsoluteと同じですが、スクロールしても位置が固定されたままとなります。
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: 1;
}

#modal {
background: #fff;
width: 300px;
padding: 20px;
border-radius: 4px;
position: absolute;　絶対位置への配置となります。

スクロール

“`javascript

function scrollToTop() {
scrollTo(0, 0);
}
“`

“`javascript

var element = document.getElementById(‘target’); // 移動させたい位置の要素を取得
var rect = element.getBoundingClientRect();
var position = rect.top; // 一番上からの位置を取得

function scrollToTop() {
scrollTo(0, position);
}
“`

【JavaScript】値渡しと参照渡しについて

■はじめに

プログラミングの基本に「値渡し」がある。
値渡しが理解出来ることで関数の書き方や引数の設定などを理解することが出来る。

基本だがプログラミングスクールでは値渡しや参照渡しのレクチャーがない。
プログラマーになって、他人にわかりやすいコード、効率的なコードを書きたいと思えるようになった。

昔はパクリでもなんでもいいからシステムの構築ができれば良いという「その場しのぎ」の考えだった。
まずは言葉だけでもいいから知ってほしい。
知ることでスキルアップのきっかけとなるから。

■値渡しについて
　値渡し：変数の値をそのまま渡すこと
　変数の値がNumber型、String型、Boolean型の場合、値渡しになる。
　
　参照渡し：変数で指定した場所を渡すこと
　　　　　　※値そのものを渡していないことを認識すること。この考え方がとても重要！！
　⇢上記以外の型（オブジェクト型や配列）が参照渡しとなる。

■例1

“`
// 値型変数の値渡しの例

let a = 1;
function set(x){
x += 2;
return x;
}
set(a);

強いアトムのチャットルーム

### プロジェクトの概要
?項目は全スタックtypescriptを用いた
全typescript
?プロジェクトを開発し、以後の機能が超のんびりするためだ。もちろん、私自身もtypescriptが好きです。
?現在チャットルームが完全なチャット機能を備え、今後多く酷鍱の機能が、続々と開発の好きな友人のスターに私を励ましてみましょう!
### プロジェクトインターフェース
### プロジェクトデータベース設計
![database.png](https://qiita-image-store.s3.ap-n

【GAS】集計した値を最終行の次に追加する

“`javascript
function myFunction() {
function getUsedRowCount(sheet, rowName) {
var values = sheet.getRange(rowName + ‘:’ + rowName).getValues();
return values.filter(String).length;
}
var ss_copyFrom = SpreadsheetApp.getActiveSpreadsheet();
var ss_copyTo = SpreadsheetApp.openById(‘スプレッドシートのID’);
var sheet_copyFrom = ss_copyFrom.getSheetByName(‘コピーするタブ名’);
var sheet_copyTo = ss_copyTo.getSheetByName(‘コピペするタブ名’);
var copyValue = sheet_copyFrom.getRange(‘コピーする範囲’).getValues();
var targetRo

letによる変数宣言とChrome -v80以降の仕様について

# はじめに
変数宣言のletについて気になる点があったため備忘録のためにまとめました。

# letについて
Javascriptには,var/let/constの3つの変数宣言がありますが、知らない方は下記記事を拝見ください。
[Javascript 変数定義とスコープについて
](https://qiita.com/takiyu713/items/feb7ddec377d1c9c4945)

letは変数の再代入可能/再宣言不可とルールが決まってます。
例えば以下のように変数letで再宣言を行うとエラーが検知されます。

“`js
let num = 111;

num = 222;
// ○

let num = 333;
// Uncaught SyntaxError: Identifier ‘num’ has already been declared
“`
しかし、Javascriptをブラウザで実行せずにchromeのコンソールで直接入力すると以下のようにエラーが検知されません。

![スクリーンショット 2020-11-03 16.45.04.png](https