現役エンジニアがプログラミング学習サービス「Progate」のおすすめコンテンツを5つ+α厳選してみた

# 読んで欲しい方
– プログラミングでも始めてみようかな、と思っている方
– できれば無料で勉強したいと思っている方
– 何から始めたら良いかワカンネ状態の方

# Progateとは？
> Progateはオンラインプログラミング学習サービスです。「初心者から、創れる人を生み出す」ことが、私たちの理念です。

[公式サイト](https://prog-8.com/)より

# なぜProgateなのか？
イラストを使った説明がわかりやすく、迷わない！
文系出身の自分でも挫折することなく、おかげさまで「創れる人」になりました！
Progateさん、ありがとう！！謝謝！！

# おすすめコンテンツ一覧 （言語別コース編から厳選）
では、さっそく！
おすすめコンテンツは以下になります。

* JavaScript
* Python
* Command Line
* SQL
* Git

５つ上げていますが、**プログラミング言語** と **その他**に分けられます。
## プログラミング言語
* JavaScript
* Python

## その他
* Command Line

ゼロパディングでsliceとpadStart使ってみた

過去に投稿した記事のコメントを元にコードをブラッシュアップしたい。
今回は時計機能で使うゼロパディングをif文以外のやり方である
・slice
・padStart
について自分なりに整理する

ブラッシュアップ対象である僕の記事がこちら↓

https://qiita.com/KK1989/items/c5060a09f9986c86d983

コメント内容

コメント
「ゼロパディング処理は、sliceを使う方法やpadStartを使う方法が簡潔に記述できて良いかと思います。
」
→if文以外にも便利そうな方法があるのか、やってみよう

ゼロパディングとは

例えば、「5時30分」の表記を「5:30」から「05:30」と表記すること
そんな定数をtwoDigitalと言う名前で宣言して使おう

if文の場合

“`js:if-padding.js

const twoDigital = function(num) {
let digit /
if (num < 10) {digit

var,let,constの違い

主旨

この記事は過去投稿記事に頂いたコメントを参考として、コードのブラッシュアップを行い、よく分からず使っていたvar,let,constについて自分なり整理する。自分なりに噛み砕いたノート、のようなもの

https://qiita.com/KK1989/items/c5060a09f9986c86d983

コメント内容

コメント

「JavaScriptを今から学習するのであれば、変数宣言にはvarではなくconstやletを使う癖をつけたほうが良いかと思います。」
→変数宣言にはconstやletを使おう
→そもそも「var」「let」「const」って良く分かってないなぁ。

整理

以下、記事が綺麗にまとめられていた。

https://tcd-theme.com/2021/04/javascript-let-const.html?gclid=CjwKCAiApfeQBhAUEiwA7K_UHzC4AlrlLbrq9_N30dqPPloltGqnBJWkG9sfHWXjzlZgh_p4YB-fxxoCZ8cQAvD

【ブロックチェーン】スマートコントラクトをテストネットにデプロイしてみる。

## はじめに
[先日投稿した記事](https://qiita.com/soldes17/items/6f0b7a8a57361529e600)の続編として、前回ローカル環境にデプロイしたスマートコントラクトをイーサリアムのテストネット（Ropsten）にデプロイしてみます。

イーサリアムには本番環境（メインネット）の他に、検証用の環境（テストネット）が用意されています。メインネットの場合、コントラクトのデプロイなどブロックチェーンへの書き込み時に仮想通貨（ETH）が必要となるため、取引所などで入手する必要がありますが、テストネットではfaucetというサイトから融通してもらえます。テストネットにはRopsten,Kovan,Rinkebyなどがありますが、今回はRopstenを使います。

なおブロックチェーンの性質上、テストネットであっても一旦デプロイしたコントラクトは削除も変更もできない（半永久的に残る）ため、その点はご留意ください。

## システム構成
システム構成は以下の様になります。ローカルとは違い、テストネットの接続には仮想通貨のウォレットが必要となります。これはメ

HTML5プロフェッショナル認定 レベル1 試験対策

# 概要
HTML5 と言いつつ、HTML+CSS+JavaScript のお勉強。
レベル1 では、JavaScript の比重は高くない。
Ping-t を解けるようになるまで繰り返す。

# ウェブ問題集
Ping-t のプレミアムコンテンツを解きまくる
https://ping-t.com/modules/premium/index.php

FlaskとVue.jsでSPA Webアプリ開発

### 参考記事

https://qiita.com/y-tsutsu/items/67f71fc8430a199a3efd

https://tech-market.org/vue-flask-cooperation/

https://rise-of-kantan.com/2021/07/06/91/

https://webjin.work/install-vue-js-on-ubuntu-16-04-at-npm/

https://xvideos.hatenablog.com/entry/ubuntu-vuejs-env-settings

https://noauto-nolife.com/post/startup-npm-install/

https://rise-of-kantan.com/2021/07/06/91/

https://qiita.com/watataku8911/items/26f2ce546fcd562e4b46

https://qiita.com/Toshiaki0315/items/1ab4e479007bb0f76f06

https:

アンカーリンクの smooth scroll の実装

# 概要
smooth scroll（ページ内のリンク先に、スルスルとスクロールする動き）の実装についてのメモ。

# jQueryで実装

jQeryの場合は、`animate`メソッドで、実装できる。
`animate`の第一引数で動作、第2引数でduration（動作にかかる時間）、第3引数にeasing を指定する。

## サンプル

“`index.html

ページ内リンク

“`

“`index.js
$(function() {
$(‘.js-scroll’).on(‘click’,(e) => {
e.preventDefault();
let $target = $($(e.currentTarget).attr(‘href’));
if ($target.length > 0) {
$(‘html, body’).animate({
scrollTop: $target.offset().top

Chart.jsで凡例を消したりとかツールチップに単位を表記したりとか

Chart.jsを使っていて、仕様変更によって少しハマったので覚え書き。結論から言えば**公式のドキュメントを読むだけで解決**しましたが…

公式サイトは以下。

http://www.chartjs.org/

ドキュメントは以下から。

https://www.chartjs.org/docs/latest/

# ダメな例

『Chart.js 凡例 非表示』とかで適当にググると、以下のような感じの例コードが出てくる。

“`html:exsample.html


“`

あるいは『Chart.js ツールチップ 単位』とかで適当にググると、やはり以下のような感じの例が出てくる。

“`html:exs

【JavaScript】JSONファイルの読み込み方

JavaScriptでのJSONファイルの読み込み方をメモしておく。

# JSONファイルの読み込み方
まず、JavaScriptでJSONファイルを読み込むためには、“fs“モジュールの“readFileSync()“を使用する。

“`javascript
fs.readFileSync(<ファイルパス>, )
“`
“encoding“はオプションなので省略できる。しかし、ファイルから読み込んだだけでは文字列として扱われる。
そのため、JSON文字列をJavaScriptのオブジェクトに変換する必要がある。変換には、“JSON.parse()“を使用する。
書き方は引数にJSONとして解析したい文字列を指定する。
上記の読み込みと合わせて書くと以下となる。

“`javascript
const fs = require(‘fs’); // モジュールの読み込み

const json = fs.readFileSync(<ファイルパス>, )
const data = JSON.parse(json)

//

食事を楽しく最後まで「もぐもぐメーター」#obniz

# プロト版もぐもぐメーター

# もぐもぐメーターって何？
お皿の上にのった食品が減った量によって、目盛りが動き、音が鳴り、LEDが光る、というものです。
食べ勧める達成感を得ながら、動きや音、光りに注目してもらい、食事に集中してもらうのを目的にしています。
マリオの効果音を出すことで楽しんで食事をできるのをサポートします。

# 使ったもの
リンク先はすべて秋月電子通商のページです。
・[obniz](https://akizukidenshi.com/catalog/g/gM-14930/)

オプショナルチェーン

## オプショナルチェイニング演算子とは
Optional Chainingとは、?.構文を用いてnullやundefinedになりうる値へ安全にアクセスできる仕組みです。

“`
A?.B
// AがnullかundefinedでないときBを返す
“`
ちなみに、if文に書き換えられそうですがそうではないです。

“`
const adventurer = {
name: ‘アリス’,
cat: {
name: ‘ねこ’
}
};

const dogName = adventurer.dog?.name;
console.log(dogName);
// 結果：undefined

const dogName = adventurer.dog?.”aaa”;
console.log(dogName);
// 結果：Error: Unexpected string
“`

つまり、`dog`がundefindであれば、後ろのには繋がらないので`Error: Unexpected string`が返却される

## A?.BのAがnullの時でもunde

Reactのbutton要素内でFont Awesomeアイコンを使う時の注意点

## 目的

クリックイベントで関数を呼び出すボタン要素の中にFont Awesomeコンポーネントを使ってアイコンを表示させたい。
しかしなぜか指定したnameがundefinedになってしまう…
“`react
samples.map( sample => {
return (

　　　　

)

const deleteMemo = (e) => {
const id = e.target.name //undefined…
console.log(id); //undefined…?
axios
//割愛
“`

## 原因

以下のようにevent.targetをコンソールに表示してみたところ、
“`rea

Stripe Checkoutを利用した注文ページで、顧客が商品の個数を変更できるようにする

Stripe Checkoutを利用することで、オンラインでの注文フォームを数行のコードで実装できます。

“`javascript
const session = await stripe.checkout.sessions.create({
line_items: [{
price: ‘price_xxxx’,
quantity: 1,
}],
success_url: ‘http://localhost:3000′,
cancel_url:’http://localhost:3000’,
mode: ‘payment’
})
“`

注文画面では、顧客の地域とStripeユーザーの設定に応じて決済情報入力画面が柔軟に表示されるため、複数の決済方法へのサポートもより簡単になります。

![スクリーンショット 0004-02-28 19.52.01.png](https://qiita-image-store.s3.ap-northeas

Canvasを始めよう（入門編）

こんにちは。
今回の記事は、これからCanvasを勉強したいと思っている人向けの入門記事です。

## Canvasって何ができるの？

・図形や画像の描画
・アニメーション
・マウスイベント（お絵描き機能）
・音楽の再生

など様々なことができます。

## Canvasを使う準備

早速Canvasを試していきたいところですが、最初にHTMLとJavaScriptで下準備を行います。

### HTMLの準備

Canvasを使う為には、bodyタグ内の任意の場所にCanvasタグを追加し、
width属性とheight属性を付けます。
widthとheightの数値が、そのままCanvasサイズになります。

“`html

“`

### JavaScriptの準備

JSではcanvas要素をquerySelectorで取得した後、コンテキストを取得しています。

“`js
const canvas = document.querySelector(

世界中のWordleライクなゲーム

### 世界中のWordleライクなゲーム

[Wordle](https://www.nytimes.com/games/wordle/index.html)っていうパズルゲームを知っていますか？
今、世界中で流行っている最もアツイパズルゲームです！

2022年1月頃くらいに爆発的に流行り、NYタイムズが**１億円**近い金額で買収したりしたことでも話題を呼びました。

話題になったのは比較的最近ながら、世界中のエンジニアたちが早速
Wordleみたいなクローンゲームを公開しています。

この記事では世界中の面白いWordleライクなゲームを紹介します！

—

1. [Wordle](https://www.nytimes.com/games/wordle/index.html)
まずは本家。原点にして至高。NYタイムズのドメイン内にサイトが存在しています。
毎日一つだけパズルが午前０時に更新されます。

2. [Svendle](https://exis9.github.io/Svendle/#/)
実はこれ、私が作りました！無限モード、ユーザージェネレーション、クリックで

Electron 18 を使って200行以内でファイルの入出力ができるようなテキストエディタを作ってみる。

## 初めに

実用を目的とはしていません。`Electron`の構造を理解するために、どれだけ骨格を抜き出せるかを目的にしています。

というわけでスクラッチから書いてみます。

`html`中に`style`と`javascript`を直書きしているので、以下のワーニングが出ます。
`Electron Security Warning (Insecure Content-Security-Policy)`

以下のレポジトリにワーニングの出ない、他の機能も入ったバージョンを置いておきます。
ワーニングの消し方や結果だけを知りたい方はこちらで！
https://github.com/Satachito/electron-quick-start-MOD

`npm`,`npx`は入っている前提です。(`node`が入っていれば通常入っています)

## 準備

フォルダを作ってその中に`package.json`を作って`npm`で`Electron`をインストールします。

“`
$ mkdir TE
$ cd TE
“`
“`package.json
{ “main”:

【JavaScript関数ドリル】Lodash関数の実装【勉強用】_.indexOf関数

# 【JavaScript関数ドリル】初級編の_.indexOf関数の実装のアウトプット

“`javascript:_.indexOf関数の挙動
_.indexOf([1, 2, 1, 2], 2);
// => 1

// Search from the `fromIndex`.
_.indexOf([1, 2, 1, 2], 2, 2);
// => 3
“`
第1引数に配列、第2引数に検索する値、第3引数で開始位置を指定し、指定されなければ0が初期値
## _.indexOf関数の課題内容

## _.indexOf関数に取り組む前の状態
– lastIndexOfと同じ要領で作成する

## _.indexOf関数に取り組んだ後の状態
– −１のリターンを深く考えすぎてしまった
– 今後はできるだけシンプルに実装していきたい
– セミコロンの有無をまだまだ理解しきれていないため、指摘があればいただきたい。
– if文の末端にセミコロンをつけていないのは、for文の中身であるため付けるべきでな

TestCafe触ってみる

## はじめに
E2EテストツールのTestCafeのハンズオンです。
ほぼ、公式の[Getting Started](https://testcafe.io/documentation/402635/getting-started)をなぞってます。

## ハンズオンのゴール
ゴールはテスト対象のデモサイトで、簡単なテストを実行してみるところまでです。

## TestCafeのインストール
npmを利用していくので、インストールされていないマシンをお使いの場合は事前にインストールをお願いします。

今回はTestCafeをローカルインストールするので、作業用のフォルダを用意してください。
“`bash
$ mkdir testcafe-sample
$ cd testcafe-sample
“`
npmをinitしてフォルダ内にインストールできるようにします。
“`bash
$ npm init –y
“`
`testcafe`をローカルインストールします。テストなので一応devDependencies指定しておきます。
“`
$ npm install –save

javaScript_Array.filter

MDNの中にfilter()メソッドについて、このように説明しています。
– filter() メソッドは、与えられた関数によって実装されたテストに合格したすべての配列からなる新しい配列を生成します。

例：
“`ruby
const numArr = [1,2,3,4,5];
// 奇数のみを抽出する
const NewNumArr = numArr.filter((num)=>{return num%2 === 1;});
console.log(NewNumArr);
// 値を順番に取り出す
for(value of NewNumArr){
console.log(value);
}
“`

文字列を連結するには、従来は＋を使いますが、ES6の書き方で${}を使います。
例：
“`ruby
const nameArr = [“田中”,”中田”,”藤井”,”蒼井”];

for(let i=0; i

QuillJS を利用している場合にホワイトスペースが圧縮されてしまう問題の対処

# 問題

[quilljs](https://github.com/quilljs/quill) のversion 1.3.7 (記事執筆時点でGithubで表記されている latest リリース) での話。

Quill Editor で編集した値を一度 DB に保存する。 この場合、DB の中身はこのようになる。

“`
# 入力
テストです。　　　　← 全角スペースが４個配置されています。
“`

“`
# DBに保存される値

テストです。　　　　← 全角スペースが４個配置されています。

“`

この値を再編集するために、`

` 要素に以下の通りに出力して Quill インスタンスを生成する。

“`html