- 1. 【Javascriptの基本的な文法を学ぼう①】デベロッパーツール編
- 2. Descontos Top – Cupom de Desconto
- 3. Node.jsにおいてGoogle認証機能の実装にチャレンジした話
- 4. ワクチン接種予約サイトに学ぶフォームバリデーション+α
- 5. child_processでデータ転送する時、進捗を取得する
- 6. ReactでGoogleAnalyticsの設定【UA, GA4対応版｜プラグインなし】
- 7. （paiza スキルチェック見本問題）「長テーブルのうなぎ屋 JavaScript編」
- 8. 【JavaScript初心者】数字当てゲームを作った。
- 9. 【実例あり】ABテストとは？最適なUIを分析して導き出してみよう
- 10. React チュートリアル発展 モジュール化編
- 11. -0の符号反転(JavaScript)
- 12. reduceメソッドの使い方
- 13. 【Javascript】Switch文を書かずに、特定のパターンのときに処理を切り分けたいときの書き方
- 14. ループの処理について
- 15. オブジェクトの扱い方
- 16. 配列の扱い方
- 17. 関数について
- 18. ブラウザバックで画面遷移してきたことを判定し、処理を動かす
- 19. 2021年に作るべき7つのフルスタックプロジェクト
- 20. JavaScript初心者のためのTypeScript入門
【Javascriptの基本的な文法を学ぼう①】デベロッパーツール編
#はじめに
今回からは複数回に分けて`Javascript`についての基本的な文法を見ていこうと思います。
ではなぜ今回Javascriptの基本的な文法をアウトプットしようと思ったかというと、`私自身、プログラミングを初めて学んだ際、難しいと思い、挫折しかけた言語の一つだからです。`
しかし、Javascriptを学ぶことで、`ユーザーにとって利用しやすいWebページを作成することができます。`
また、以下の表をご覧ください。
>
この表は、簡単に言うとよく使われているプログラミング言語のまとめのような表なのですが、`Javascriptは７０％近くのアプリ開発に使用されており、需要の高い言語とも言えます。`
これらのことから、今回は「難しいけど、需要の高い言語」であるJavascriptの基本的な文法をアウトプットしていきます。#この記事を読むべき人
・プログラミングを学んでみたいと思っている人
・Javascriptを学んでいる初学者
・３ヶ月前の自分
Descontos Top – Cupom de Desconto
O Descontos Top (https://descontostop.com.br) é um site que ajuda o consumidor a economizar através de cupom de desconto. Utilizando os códigos promocionais ou as ofertas fornecidas por nossos parceiros, é possível poupar em compras das principais lojas virtuais.
Procuramos criar um ambiente que contribua para uma jornada de compra segura. Além da distribuição de cupons de desconto e ofertas, também fazemos a análise de reputação dos nossos parceiros e publicamos materiais adicionais no site, c
Node.jsにおいてGoogle認証機能の実装にチャレンジした話
#はじめに
私はプログラミング初学者です。
これから各記事はN予備校の「【2021年度】プログラミング入門 Webアプリ」を一通り終えて、今まで習ったことの復習と応用機能の実装を目的に開発を行っています。この記事は、自身の行ったこと、躓いたところ、どうやって解決できたかを残すことで、同じ立ち位置の方に少しでも役に立てればと思って書いています。
内容、質ともに取るに足らない、何を言っているんだ？というところが殆どかもしれませんが、生温かい目で見守っていただけると幸いです。
#今回やろうと思ったこと
N予備校のプログラミング入門ではGithubの認証を用いてログインする機能を実装する。
ただ、今後開発することを考えると、Githubのアカウントもっている利用者はどれだけいるの？と思い、Googleでの認証機能を実装しようと思いました。#まず…
今回はプログラミング入門を終えて間もなく、今まで学んだことの復習を兼ねているので教材に沿って進めていった。
内容に戻ること第４章「実践サーバーサイドプログラミング」
####17.【サービス開発2】プロジェクトの作成と認証の実装
ワクチン接種予約サイトに学ぶフォームバリデーション+α
話題の「[自衛隊東京ワクチン接種web予約](https://www.vaccine.mrso.jp/)」サイトをモデルにHTMLとJavaScriptでクライアント側のフォームの実装（バリデーションなど：詳しくは[MDN](https://developer.mozilla.org/ja/docs/Learn/Forms/Form_validation)を見てね）を練習しました。
HTMLのフォームバリデーションを利用することで、サーバーへ送信する前にクライアント側で値が適正か（少なくとも様式が正しいか）をチェックできます。無駄なリクエストを減らせます[^validate] [^m1]。
[^validate]: クライアント側でバリデーションをしたからと言ってサーバー側でサボるのは良くありません。ちょっとの知識があればHTMLのバリデーション程度はごく簡単に回避できますし、もう少し知識があればリクエストを改竄（偽装）することもできます。
[^m1]: 今回のモデルにした本家様は「サーバーへ負荷をかけないために」とか言いつつ、HTMLで簡単に実装できる桁数チェックをわざわざサーバ
child_processでデータ転送する時、進捗を取得する
## 概要
ローカルマシンからリモートマシンにデータ転送する時、進捗を取得する方法で少し手こずったのでメモ。
scpを使った方法ではうまくいかず、rsyncを使っています。## サンプルコード
“`js
const childprocess = require(“child_process”);const sourcePath = “転送するデータのパス”;
const destPath = “転送先ユーザー名@転送先ホスト名(IPアドレス):保存先パス”;const spawn = childprocess.spawn(“rsync”, [
“-avzP”,
“-e”, // ホスト名だけで接続できる場合は不要
“ssh -i ローカルマシンの秘密鍵ファイルパス(~/.ssh/xxx.pemなど)”, // ホスト名だけで接続できる場合は不要
sourcePath,
destPath,
]);spawn.stdout.on(“data”, (data) => {
var per = data.toString().match(/
ReactでGoogleAnalyticsの設定【UA, GA4対応版｜プラグインなし】
GoogleAnalyticsを設定しようとした際に色々詰まったのでメモ
(師匠、ありがとうございます。)[サンプルコード](https://github.com/mamezou/send-ga-react)も用意しました。
# 現在のGoogleAnalytics事情について
現在GoogleAnalyticsは2バージョンあり、2020年10月から新しいGA4という方式が正式リリースされています。
（ちなみにGoogleアナリティクス4プロパティという名称だそうです。）
ですが、登場してからまだ時間もそこまで経っておらず、開発においてもまだまだ旧式のUAを利用しているケースも多いかと思います。調査したところ、ga-4-reactやreact-gaなどのプラグインがありましたが、両対応はしてないということで見送りました。
※今回実装で紹介する、新しい形式のGA4ではGoogleAnalyticsの通信が遅く、5.0 ~ 6.0sほどかかります。旧式のUAは0sとかなり速く、パフォーマンスを求める場合はUAのみ導入するのがいいのかもしれません。その場合はreact-gaで十
（paiza スキルチェック見本問題）「長テーブルのうなぎ屋 JavaScript編」
#長テーブルのうなぎ屋
paizaラーニングのスキルチェック見本問題セットについて、、、
この問題はなんとか正解することはできたが、絶対にもっと効率の良い書き方がある、、、と思い、解説を見てみた。
すると、簡潔なわかりやすいコードが、、、↓↓↓
#ポイント
・空席状況を管理する変数 (配列がいい) を用意し、すべて空席としてマークしておく。
・グループが来店する度に、そのグループが座れるかどうかを判定。
座れるなら、座った座席を使用済みとしてマークする。座れないなら、何もしない。
**・座席 n と座席 1 が隣り合っていることに注意。**
**これをプログラム上で表現するには、n で割った剰余を用いる！**
⏩ここがわからなかった。。。#実装例
“`javascript
process.stdin.resume();
process.stdin.setEncoding(‘utf8’);
// 自分の得意な言語で
// Let’s チャレンジ！！
var lines = [];
var reader = require(‘readline’).createInterface({
【JavaScript初心者】数字当てゲームを作った。
JavaScriptの勉強のため、数字当てゲームを作りました。
遊んでみるのもよし、自作して私のものと比較してみるのもよしだと思います。
#本記事の環境
※PCに環境構築を行う必要はありません。
WEBブラウザ(Google Chome)
テキストエディタ# 数字当てゲームとは
1対1の対戦ゲーム。0～9から3つを選択し並び替える(012～987)。プレイヤーは相手が選択した3つの数字の組み合わせと並びを推理する。交互に数字を言い合い、相手より早く特定したほうが勝ち。
数字と並びが合っている場合はEAT(イート)、数字だけが合っている場合はBITE(バイト)と相手に伝える。要するに、相手に「3(スリー)EAT」と言わせられれば勝ち。
※「EAT」、「BITE」の呼び方はモノによって様々ある。
本ゲームを題材としたテレビ番組やアプリゲームがある。←自作してみようと思ったきっかけ。#要件・仕様
* 言語の勉強が主目的なので、見た目はこだわらない。
* 言語の勉強が主目的なので、処理は小分けにするし、コメントも残す。
* フレームワークは使わない。
* 勝敗くらいは表示する。
* 対
【実例あり】ABテストとは？最適なUIを分析して導き出してみよう
日々改修しているサイトや個人サービスなどで、ここをこう変更すればユーザーがもっと使いやすくなるのでは？と考えたことはないでしょうか。
しかし大きなサイトであるほど簡単には変えられず悩む事になります。変えたとしてもそれで良くなるとは限りません。今回はそいういった案が毎日上がる弊社、ユーザー数570万人以上のサービス『[**DLsite**](https://www.dlsite.com/)』にて実際に実施されている
『**ABテスト**』
について、どういったものなのかを雰囲気だけでも知っていただけるよう解説していきます。
# ? ABテストとは
ウェブサイトにおけるABテストとは、サイト内の一部分を`比較したパーツ「A」と「B」のどちらがよりユーザビリティの観点から優れているか`を分析する手法です。
A,
React チュートリアル発展 モジュール化編
初めてReactを学ぶために公式チュートリアルをやり、さらに深く理解する為に追加実装を行いました。この記事では追加実装についてまとめています。私と同じようにReact初心者にとって参考になればと思います。
React公式チュートリアルをやっていることが前提なので、まだやっていない方はこの記事を読む前に確認することをお勧めします。
https://ja.reactjs.org/tutorial/tutorial.htmlまたJavaScriptに関しても基本を理解していることが前提になります。不安な方はこちらのページがお勧めです。
https://jsprimer.net/## 追加実装の流れ
– 公式チュートリアルのタイムトラベル機能実装まで完了(https://ja.reactjs.org/tutorial/tutorial.html#wrapping-up)
– モジュール化 **⇦この記事**
– 関数コンポーネントに書き換え
– 追加課題の実装追加実装は上記の流れで進めました。この記事ではその中のモジュール化につ
-0の符号反転(JavaScript)
# -0の符号反転(JavaScript)
速度を追い求める人のための-0の符号反転## 符号反転の一般的な例
“`javascript
const a = -0;
console.log(-a);
“`## 速い方
こっちの方が2ms秒ほど速い“`javascript
const a = -0;
console.log(a + 0);
“`
reduceメソッドの使い方
###reduceメソッドの使い方
取得した文字を列を分割した後に、分割された文字に||で区切りを入れたいとする。そのときに役立つのがreduceメソッド。
“`php:
const text = “ABCDEFGHIJK”;
//取得した文字列を１文字づつ分割する。
const textArray = text.split(“”);//aは蓄積された文字 bは現在取得している文字
//第2引数に空文字に入れているのは、最初の取得した値はaにはいるので||が効かなくなる為const result = textArray.reduce(function(a,b){
return a+’|’+b+’|’;
},””)//|A|B|C|D|E|F|G|H|I|J|K|と表示される。
console.log(result);
“`
【Javascript】Switch文を書かずに、特定のパターンのときに処理を切り分けたいときの書き方
“`javascript
const statusLabel = returnLabel(1) // 成功function returnLabel(labelNumber) {
const label = {
0: ‘成功’,
1: ‘キャンセル’,
2: ‘エラー’
}return label[labelNumber]
}
“`
ループの処理について
#目次
①for文について
②for…in文について
③for…ofについて###①for文について
“`php:
const array =[1,2,3,4,5,6];for(let i=0; i < array.length; i++){ console.log(array[i]); } //iに0を代入して、array.lengthで配列の長さを取得している。今回の場合は、配列の長さは６になるので、 //i<6になる。一回の処理が終了したら、 i++(i = i + 1;という意味) iに1が追加され、同じ処理が5回繰り返される。 ``` ###②for...in文について ```php: const array= [1,2,3,4,5,6]; for(let i in array){ console.log(array[i]) } // 配列のインデックスを取得することができる。 ``` ###③for...of文について ```php: const array = [1,2,3,4,
オブジェクトの扱い方
#目次
①オブジェクトとは
②オブジェクトの扱い方####①オブジェクトとは
オブジェクトとは、データと属性が一緒になったものをいう####①オブジェクトの扱い方
“`php:
//オブジェクトの作り方
const person = {}//以下のようにデータと属性を入れた状態で生成することもできる
const perosn ={
name:[“Ito”,”Taro”],
age:36,
gender:”male”,
hobby:{
sports:”baseball”,
music:”hiphop”
}
getFirstName(){
console.log(this.name[0]);
}
};//以下のように記述をすれば年齢を変更することができる
person.age= 34;//以下のように記述をすればメソッドを実行することができる。
person.getFirstName():“`
配列の扱い方
#目次
①配列とは
②配列の扱い方####①配列とは
データの集合体のこと。一つの変数に対して複数の値を格納できる。####②配列の扱い方
“`php:
//下記のように定義ができる。
const arry = [1,2,3,4,5,6];//要素の数を知りたい時
arry.length で配列の要素の数を知ることができる//配列の末尾にitemが追加される
arry.push(“item”);//配列の先頭に代入できる
arry.unshift(“hello”);//配列の末尾を削除できる
arry.pop()//配列の先頭を削除することができる
arry.shift()
“`
関数について
#目次
①関数について
②関数の利便性
③関数の種類###①関数について
関数とはあるデータを受け取り、定められた独自の処理を実行し、その結果を返す命令のことです。###②関数の利便性
“`php:
let name = “Ito”
let name2 = “Satoconsole.log(“hello”+ name);
console.log(“hello”+name2);“`
関数を使わない場合、何度も変数を定義しなければいけない。“`php:
funciton hello(name){
console.log(“hello”+name);
}hello(“Ito”);
hello(“Sato”);
“`
上記のように関数を一度使ってしまえば、使い回しが可能になる。
同じ作業が発生する場合、関数を使用すると便利。###②関数の種類
・無名関数“`php:
const hello = function(name){
console.log(“hello”+name)
return na
ブラウザバックで画面遷移してきたことを判定し、処理を動かす
## はじめに
ページの離脱直前に確認ダイアログを出すなど、そのページから遷移しようとすることをトリガーに処理を書く際は[beforeunload](https://developer.mozilla.org/ja/docs/Web/API/Window/beforeunload_event)イベントを使用するメジャーなやり方がありますが、ページの読み込み時( jQueryの$(document).readyが動くタイミング )に**ブラウザバックでこの画面に遷移してきたどうか**を判定して処理したいケースがあり、無事実現できたのでご紹介します。（とてもレアケースだとは思いますが…）どんなケースで必要だったか気になる方に向けて使用した際の用途にも触れておきます。Bootstrapの[tagsinput](https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/)というプラグインを導入してフォーム画面のinputへの入力がタグ化されるようにしていたため、ブラウザバック時のフォーム復元には別途処理を実装する
2021年に作るべき7つのフルスタックプロジェクト
以下はHenry Boisdequin( [dev.to](https://dev.to/hb) / [Twitter](https://twitter.com/henryboisdequin) / [GitHub](https://github.com/henryboisdequin) )による記事、[7 Fullstack Projects You Need to Make in 2021](https://dev.to/hb/7-fullstack-projects-you-need-to-make-in-2021-bdn)の日本語訳です。
—
どのようなフルスタックプロジェクトを作るべきか？
もしこのような疑問を持ち続けているのであれば、あなたは正しい場所にいます。
私は、2021年に作るべき7つのフルスタックプロジェクトのリストをまとめました。
早速、挑戦してみましょう！# E-commerce Site
>progate様##TypeScriptのインストール
下記のコマンドをターミナルで実行するだけです“`shell
npm i -g typescript
“``tsc -v`と入力してエラーが返ってこなければ成功です
“`shell
tsc -v
Version 数字
“`## Hello World
好きな場所に`フォルダ`と`index.ts`を作ってください
今回は`Desktop/typescript/index.ts`の構成でいきます
### 下準備
ターミナルで
“`shell
cd ~/Desktop/typescript/
“`### コーディング
好きなエディターでコ
