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

Node.jsを使用してWebアプリケーションからAlibaba Cloud Object Storage Serviceにコンテンツをアップロード

このチュートリアルでは、**Node.js**を使って**Webアプリケーション**から**Alibaba Cloud** Object **Storage** Serviceにコンテンツをアップロードする方法を検討します。

*本ブログは英語版からの翻訳です。オリジナルは[こちら](https://www.alibabacloud.com/blog/how-to-use-node-js-to-upload-files-to-alibaba-cloud-object-storage_594077)からご確認いただけます。一部機械翻訳を使用しております。翻訳の間違いがありましたら、ご指摘いただけると幸いです。*

#必要条件
このチュートリアルを実行するには、以下のものが必要です。

1、Alibaba Cloud [Object Storage Service](https://www.alibabacloud.com/ja/product/oss)に登録し、秘密のアクセスキーを取得します。
2、マシン上でNode.jsとnpmを実行します。[Node.js Downloads](ht

【JavaScript】プログラミングクイズでよく使う記法

# 結論
– プログラミングクイズでよく使う記法と知見をメモしています。
– 初〜中級者向けの内容です。
– 手短に結論だけ欲しい方は、各タイトルの見出し〜ソースまでをお読みいただければ十分です。

# はじめに
プログラミングのクイズを200問解いてみました。
難易度は文を読む時間を含めて1分〜3分ほどで解ける簡単な問題が多かったですが、解き方を調べるうちに

「 **こうしたら短く書けるんだ！** 」　　とか、

「 **この関数、こんな使い方できたんだ・・・** 」

などといった気づきを得ました。
基本的な文法も改めて学習することができて非常に有意義でした。
その時の知見をここにメモしようと思います。

けっこう好みがわかれる書き方もしてると思います。
暇つぶし感覚で読んでみてください。

—

## 1.`console.log(値1,値2)`
`console.log(）`にカンマ区切りで複数の値を渡すと、**記述した順番通りにスペース区切りで値を出力**してくれます。

“`javascript

CentOS 7にOpenProjectをインストールする

今回は、Alibaba Cloud ECS CentOS 7サーバーにOpenProjectをインストールします。

*本ブログは英語版からの翻訳です。オリジナルは[こちら](https://www.alibabacloud.com/blog/how-to-install-openproject-on-centos-7_593890)からご確認いただけます。一部機械翻訳を使用しております。翻訳の間違いがありましたら、ご指摘いただけると幸いです 。*

#前提条件
1、Alibaba Cloud [Elastic Compute Service (ECS)](https://www.alibabacloud.com/ja/product/ecs)インスタンスが有効化されており、有効な支払い方法を確認している必要があります。新規ユーザーの場合は、Alibaba Cloudアカウントで[無料アカウント](https://account.alibabacloud.com/register/intl_register.htm?spm=a2c65.11461447.0.0.34735319zxKY

JavaScript FizzBuzz問題の作り方

##目次
– はじめに
– FizzBuzz問題の作り方
– HTML
– JavaScript
– 学んだこと
– おわりに

##はじめに
今回はJavascriptの基本的な概念`DOM`を操作して、FizzBuzz問題を作っていきます。
イチから全部作り方を書くというよりは、作っていく流れを書き、
実際に作る中で僕が躓いたり、ここは大事だなと感じた箇所などを説明していきます。
同じようなことで行き詰まっている初心者の方のお力になれれば幸いです。

##FizzBuzz問題の作り方
基本的にHTMLとJavaScriptを使って作成します。
CSSは特に使いません。
HTMLの要素も至ってシンプルです。
なぜなら、今回の実装では**JavaScriptを使ってDOMを操作すること**が目的だからです。
HTMLで作った画面を作り、それに対してJavaScriptで色々操作していく、という流れになります。

###HTML

まずはHTMLから作っていきます。
HTMLの作りはとてもシンプルで簡単なものです。

見出し `h1タグ`
２つの数値入力ボックス `pタグ

varとletとconstの違いメモ

自分的なメモです。
varとletとconstの違いを説明してみろと言われた時のための

* varはES6より前で使われていた宣言方法。
* letとconstは、ES6から採用された、新しい宣言方法。

#再宣言、再代入に関する違い

###var

再宣言、再代入が可能。

“`javascript

//再代入できる
var hoge = ‘りんご’;
hoge = ‘みかん’;

console.log(hoge); // 結果：みかん

// 同じ変数名を使って別のデータを再宣言できる
var hoge = ‘すいか’;

console.log(hoge); // 結果：すいか

“`

###let

letは代入し直すことはできるけど、同じ変数名を使って別のデータを再宣言するとエラーが出る。

“`javascript

// 再代入できる
let hoge = ‘りんご’;
hoge = ‘みかん’;

console.log(hoge); // 結果：みかん

let hoge = ‘すいか’;

console.log(hoge); // 結果：シンタック

AltJS製のNodeモジュールをGitHubから直接インストールすると同時に、そのライブラリのビルドを自動化するpackage.jsonの設定

この投稿では、NodeモジュールをGitHubから直接インストールする際、そのライブラリをインストールのタイミングでビルドする方法を紹介します。

## この手法はどういうときに使うか？

普段、`yarn add ライブラリ名`をすると、npmjs.orgのレジストリにアップロードされたモジュールが、手元のnode_modulesに入ってきます。仮に、ライブラリのソースコードがTypeScriptやBebelなどのAltJSであったとしても、node_modulesにインストールされるのは普通ビルド後のJavaScriptです。これはライブラリ開発者がnpmjs.orgに公開するとき、AltJSからJavaScriptにビルドしたものをアップロードしてくれているからです。

なので、モジュール利用者は、ライブラリのソースコードがもともとどんな言語で書かれているかを気にする必要がありませんし、ましてや、モジュール利用者が`npm install`しするたびに、わざわざライブラリのソースコードからビルドする必要は普通ありません。

### どうしてもソースコードからインストール&ビルド

共通jsの発火位置を秒で特定する

# はじめに
.js-accordionとクラス名に当てるとアコーディオンになるみたいな、
良く使われるjs処理がどこで記述されてるかを一瞬で見つける方法です。

結論を先に書くと
**Networkタブで検索かけたら一瞬で見つかりました！**

# 使い所
サイト全体で共通のjsファイルなんかを読み込んでおいて、
その中で良く使われるアコーディオンなり、アンカーリンクなりの処理を書いておいて、どこでも呼び出せるようにみたいなことって良くあるかと思います。

ただ、ある程度長く運用を続けているサイトになってくると、
共通で読み込んでるjsファイルが数が増えてきちゃって

– base.js
– share.js
– utilty.js

みたいな後から入った人からするとどこに何が書かれてるか分かんない状況になっちゃうんですよね。
で、アコーディオンの挙動に問題があった場合とかまず調査するためにその処理がどこに書かれてるか探すところから始めるかと思いますが、これを僕は検証機能の「source」タブを使って読み込まれたjsファイルを一つ一つ開いて「.js-accordion」で検索かけたり

VSCodeのChromeのデバッグが実行できないときにはtimeout属性を入れてみましょう

# 問題発生
JavaScriptをVSCodeでデバッグしようと思い、二つの拡張機能を導入しました。

|# | 拡張機能 |
|—|—————— |
| 1 |[Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome)|
| 2 |[Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)|

launch.jsonに`”type”: “chrome”`の構成を追加し、意気揚々とデバッグ実行したところ….
こんなエラーが出ました。
**「ランタイム プロセスに接続できません。10000 ミリ秒後にタイムアウトになります – (理由: ターゲット アプリから応答を受け取りましたが、ターゲット ページが見つかりませんでした)。」**

メッセージ的に、URLが誤っているの

express+postgreSQL+HerokuでWebアプリを公開した手順

使用するパッケージがexpress,pg（とejs）のみで作成したWebアプリを、Herokuにて公開するまでをまとめました。git自体の説明は省いたりしていますが、基本この通りやっていけば公開まではいけると思います。
全体的に情報が古めだったけど、良いサイトないかな。

OS:Windows10
terminal:powershell
テキストエディタ:VScode

#1.準備

#####1-1.ローカル環境でexpress+postgreSQLのアプリ作成

この記事は主にローカル環境で出来上がっているけど公開の手順が分からない人向けなので、ここは省略します。

#####1-2.Herokuアカウント作成
https://www.heroku.com/

#####1-3.HerokuのCLIを使えるようにする
https://devcenter.heroku.com/articles/heroku-cli
でDLしたあとpathを通す。

“`console:terminal
> heroku -v
heroku/7.42.1 win32-x64 node-v1

JSFiddleでReactを実行する

## Reactとは
Reactとは、WebサイトのUIパーツを構築するためのJavaScriptライブラリです。
Facebookが開発し、OSSとして公開されています。
また、Reactは「宣言的な」ライブラリなので、Webデザイナー向けとも言われています。

## JSFiddleとは
HTML、CSS、およびJavaScriptを簡単に実行できるオンラインのIDEサービスです。

■JSFiddle
https://jsfiddle.net/

## JSFiddleでReactを実行する
JSFiddleでReactを実行してみましょう。
今回は「Hello World」を表示してみます。
ソースコードは以下の2つです。

“` hello.html