Djangoで時刻をユーザーの地域（UTC）に合わせて表示させる

django-tz-detect を使う。 （ソースコードは[こちら](https://github.com/adamcharnock/django-tz-detect)）
2019年にリリースされたオープンソースライブラリで、MITライセンス適用済。
＜実行環境＞
Python：3.7.4　Django：2.2.17

###１．ライブラリのインストール

“`python
pip install django-tz-detect
“`

###２．setting.pyを編集

####INSTALLED_APPSの末尾に以下を追加

“`python:setting.py

INSTALLED_APPS (
‘tz_detect’,#追加
)

“`

####TEMPLATESに`’django.template.context_processors.request’`があるか確認（なければ追加）

“`python:setting.py
TEMPLATES = [
{
…
‘OPTIONS’: {

最小二乗法を用いた3次Bezier曲線あてはめ JavaScriptで

# 概要
[最小二乗法](https://ja.wikipedia.org/wiki/最小二乗法)を用いて順番に並んだ4つ以上の点を3次[Bezier](https://ja.wikipedia.org/wiki/ベジェ曲線)を用いて[曲線あてはめ](https://ja.wikipedia.org/wiki/曲線あてはめ)をしてみます。

# 結果

黒い点はクリックした点、赤い点は求められた3次[Bezier](https://ja.wikipedia.org/wiki/ベジェ曲線)のコントロールポイントです。

* 4点を指定したところ


* 7点を指定したところ

![スクリーンショット 2021-01-04 20.59.54.png](https://qiita-image-store.s

[JavaScript] Promise.all() の使いかた

Promise.all()は`Promiseオブジェクトを要素に持つ配列`を引数にとり、すべてのPromiseオブエジェクトが解決するまで処理を待つ。

“`JavaScript
Promise.all([promise1, promise2, promise3]).then((value)=> {
// すべてのpromiseが解決した後に行う処理
// value = [promise1の結果, promise2の結果, promise3の結果]
});
“`

map()メソッドやpush()メソッドと組み合わせて使う例

“`JavaScript
// Promiseを要素に持つ配列を作る
const promises = array.map((a) => {
// Promiseオブジェクトをreturnする
});

// 配列にPromiseを追加する
promises.push(/*他のPromiseオブジェクト*/)

Promise.all(promise).then((value)=> {
// すべてのPromiseが解決した後に行う処理

業界未経験の私がポートフォリオを作って転職をしたい件

自分で作ったポートフォリオサイト・作品集（作成途中）

https://github.com/yapiro/

githubのurlに今まで作ったアプリが入っているので、ぜひご覧ください。

「topページ」
ropページは、誰もが操作しやすく簡単に理解できる見た目にしてみました。構成は４つ。①自分のプロフィール②スキル/制作実績③学習の積み上げ報告（twitter）④Qiita
この４つを意識することが転職活動を成功に導くと仮定して選びました。

「作品集（サイトを見ればもう一つあります）」
![スクリーンショット 2021-01-05 21.18.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaw

[ JavaScript 入門 ] 演算を行うメソッドをクロージャーを用いて作成してみる！

#演算を行うメソッドをクロージャーを用いて作成してみる！
“`
演算を行うメソッドを持ったオブジェクトを
クロージャーを用いて作成してみる。

const calc = calcFactory(10); // 初期値を10として設定
* calc.plus(5); // 出力結果 “10 + 5 = 15”

“`

まずcalcFactory実行して初期値を設定できるようにする:point_up:
そして、オブジェクトを返す為、returnを記述。

“`
function calcFactory(val){
return {
}
}
“`
その中にメソッドとして***plus***を格納する必要がある:raised_hand:

“`
function calcFactory(val){
return {
plus: function(target) {
const newVal = val + target;
console.log(`${val} + ${target} = ${newVal}`);

JavaScript (ES6) 基礎編　switch文とは？

こちらではJavaScript学習の備忘録となります。
プログラミング初心者や他の言語にも興味、関心をお持ちの方の参考になれば幸いです。
* * *
###switch文とは？

if文以外の条件分岐の方法。
ある値によって処理を分岐する場合に、switch文を用いる。

###switch文の書き方とは？

『 **switch ( 変数や定数などの条件の値 ) { 処理 }** 』

また、switch文の中に「 **case** 」を追加することで処理を分けることができる。

“`javascript:script.js
// switch{}の中にcaseを追加して処理を分ける
switch (条件の値) {
case 値1:
// 「条件の値」 が 「値1」 と等しいときの処理
break;
}
“`
switch文では、分岐の数だけcaseを追加していく。

“`javascript:script.js
// 分岐の数だけcaseを追加する
switch (条件の値) {
case 値1:
// 「条件の値」 が 「値1」 と等しいと

JavaScript 初級者から中級者へ（実行環境編）

#ブラウザとJSエンジン
ブラウザの機能の一つにJavaScript Engineがあり、chromeではV8エンジンが使われている
node.jsなどのソフトウェア上でも動く
Universal JavaScriptはソフトウェアやブラウザなどいろいろな環境でJavaScriptが使えるようにしようという設計論
ブラウザごとに様々なエンジンが使われている

##JSエンジンの中身
JSエンジンの中身とは
・ECMAScript
・Web APIs
である

ECMAScriptとはー
JavaScriptとECMAScript（初心者向け）
https://qiita.com/YS114411/items/d69db9b4a0801f548864

Web APIs とは
Web上の API
API = Application Programming Interface
つまり、アプリケーションとプログラムをつなぐもの
ソフトウェアやサービス間で機能を共有したりする
ここにJSエンジンがある

#コードが実装されるまで
JavaScriptコード実行前
JSエンジン
・

ExcelとかWordでクリップボードにコピーしたデータからAsciiDocの表に変換するツールをつくってみた（結合セル対応）

AsciiDocで結合セルを作るのがややこしい（といってもHTMLと同様だが）ので、AsciiDocに不慣れでも表のひな形を作成できるように、Excelの表からAsciiDocに変換するツールを作ってみた。
Excel用に作ってたらWordも小変更で対応できた。（セルの中身の処理はテキトウにつくったので、過度な期待は禁物。）

[オンライン版(CodePen)](https://qiita.com/kob58im/items/8c3c609b828afbc8fec2#javascript%E3%81%AB%E7%A7%BB%E6%A4%8D%E3%81%97%E3%81%A6web%E4%B8%8A%E3%81%AB%E5%85%AC%E9%96%8B%E3%81%97%E3%81%A6%E3%81%BF%E3%81%9F)

# スクリーンショット
## Excel
環境はExcel2019
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/438183/6856e171-802a-d1f

[ JavaScript 入門 ]ブロックスコープの概念を問題を解いたら少し理解できた件

##JavaScriptのブロックスコープに関する問題を解いてみた:raised_hand:　　
###問題:writing_hand:

“`
* 問題：
* 以下のコードではエラーが発生します。
* コンソールで”fn called”と表示されるように
* fn内のコードを変更してください。
*
* ※if文は削除してはいけません。
*/
function fn() {
if(true) {
let a = ‘fn called’;
}
return a; // ReferenceError: a is not defined
}

const result = fn();
console.log(result);
“`
解答:v:
ifの中でletを使って変数定義している為、ブロックスコープが有効になり、ブロックスコープの外で、return a; のようにaを呼び出そうとしてもReferenceError: a is not definedのようなエラーが出てしまう！:frowning2:　　

よって、**ブロックスコー

Writing Cypress tests in TypeScript

# Typescript で Cypress testを書く

## はじめに

Typescript で Webアプリケーションを書いている際に、テストプログラムが必要になる。
比較検討した結果[Cypress](https://www.cypress.io/)が何かと使い勝手が良いようなので使うことにした。

## 環境要件

– OS: WSL2上で動作するUbuntsu 20.04LTS
– 使用エディタ VScode
– パッケージ管理には yarn を使用

## この記事の目標

– Cypress のインストール完了
– Cypress の起動
– Typescriptによるテストコードの作成・実行

## 前提条件

– 適当なtypescript projectが存在し起動する

## 作業内容

### WSL2上でXが使えるようにする

#### X server インストール
[VcXsrv](https://sourceforge.net/projects/vcxsrv/)をインストールする。
インストール自体は exeなので困ることは無い。

###

Reactコンポーネントの状態で初心者がしてしまう3つの間違い

>本記事は、[Tyler Hawkins](https://thawkin3.medium.com/)氏による「[3 Mistakes Junior Developers Make With a React Component’s State](https://medium.com/better-programming/3-mistakes-junior-developers-make-with-a-react-components-state-997043291b54)」（2020年6月26日公開）の和訳を、著者の許可を得て掲載しているものです。

#Reactコンポーネントの状態で初心者がしてしまう3つの間違い

>そして、それをやめる方法


>Photo by [Jamie Street](https://unsplash.com/@jamie452?utm_source=medium&utm_medium=referral) on [Un

XMLHttpRequestオブジェクトとは

#XMLHttpRequestオブジェクトとは
**スクリプト言語でサーバーとのHTTP通信を行うための組み込みオブジェクト。**

＜よく使うメソッド＞
◎open
　（使える場面）
　・新しく作成されたリクエストを初期化したいとき
　・既存のリクエストを再初期化したいとき

　（例）

“`javascript:index.js
var ajax = new XMLHttpRequest();
ajax.open(‘GET’, ‘URL’);
“`

◎responseType
　列挙型の文字列地
　（使える場面）
　・レスポンスに含まれているデータの型を示したいとき
　・レスポンスの型を変更したいとき

　（例）

“`javascript:index.js
var ajax = new XMLHttpRequest();
ajax.responseType = ‘json’;
“`

◎send
　（使える場面）
　・リクエストをサーバーに送信したいとき

　（例）

“`javascript:index.js
var ajax = new XMLHttpReq

JavaScriptのオブジェクトとJSON型の違い【今更ですが・・・】

今更ならが、JavaScriptのオブジェクトとJSONの違いについてメモっときます。

（「そういえばどこが違うんだっけ・・・」となってしまったので。笑）

##JavaScriptのオブジェクトとJSONの違い

JSONはJavaScriptの記法を元に生まれたので書き方が似ているけど、オブジェクトとJSONは全然別物。

**オブジェクト・・・プロパティの集まりの名称
JSON・・・テキストベースのデータフォーマット**

【補足】
データフォーマット・・・特定の形式 (フォーマット) に当てはめられたデータの集まり

ちょっと理解しづらいですが、まぁ何となく理解できればOKかと。
ちなみにデータフォーマットはJSON意外だと、`XML`や`CSV `などがありまっする。

##JavaScriptのオブジェクトとJSONの書き方の違い

凄く単純で、**キー名を`ダブルクォーテーション(“”)`で囲んでるかどうか**で判断すればOK。

###オブジェクトの書き方
オブジェクトの書き方は以下の通り。
・キー名は`ダブルクォーテーション(“”)`または`シングルクォーテーション

JavaScript~文字列カウント~

#はじめに
あけましておめでとうございます前回記事から日が空いてしまいました。
ここやTwitterでの活動のやる気が認められて案件をもらいそれに取り組んでいました。
今まで全然たいした内容は投稿出来ていなかったですがそれを評価していただいて嬉しかったです。
ただ案件に時間がかかってしまいなかなか記事を書けず仕事をしながら投稿を続ける難しさを実感しました。
自分のように今勉強中で転職活動している人は今回のような例もあるので投稿してみるのをオススメします。

今回の投稿内容は文字列の長さをカウントするというコードです。
これは入力フォームの文字カウントに使えるのでぜひ参考にしてもらえたらと思います。

#文字数カウント
文字をカウントする構文は次のようになります。

“`JavaScript:構文
文字列.length
“`

これを実際に使うと

“`JavaScript:例
‘テスト’.length //3
‘test’.length //4
“`

このように文字の後ろに「.length」をつけるだけでカウントしてくれます。

#入力フォームカウント
これを元に入力フォーム

[ Java Script 入門 ] グローバルスコープとスクリプトスコープは同じものなのか？

##グローバルスコープとスクリプトスコープ　

“`　
let a = 0;
var b = 0;
function c() {}
debugger;
“`

これらを定義し、ブラウザ上で検証をぶちかます。
（**debugger**はブラウザを開いていると、この時点に達すると処理が止まる。）
検証の**Sources**内、Command + R　で更新。

“`
Script
a: 0

Global Window
PERSISTENT: 1
TEMPORARY: 0
addEventListener: ƒ addEventListener()
alert: ƒ alert()
atob: ƒ atob()
b: 0
blur: ƒ blur()
btoa: ƒ btoa()
c: ƒ c()
“`
Scope内にこのように表示された。　　
これがdebuggerから見える変数ということになる！

##グローバルスコープとは？

`Sources内の結果からわかるように、VarやFunctionで定義した際は

GoogleAPIをNode.jsから叩いてみた

今更ながら、GoogleAPIをNode.jsから触ってみます。
Google Drive、Gmail、Google Calendar、Googleフォトなど、皆さんgoogleサービスにお世話になっているのではないでしょうか。
ちゃんと、APIも提供されていて、npmモジュールもあるので、今後もいろいろ使えるかもしれません。
本人認証して簡単なリスト表示をするところまでですが、後はリファレンスを見れば拡張できるかと思います。

GitHubに上げておきます。

poruruba/GoogleApiSample
　https://github.com/poruruba/GoogleApiSample

#参考情報

googleapis/google-api-nodes-client
　https://github.com/googleapis/google-api-nodejs-client

Google Cloud Platform Console
　https://console.cloud.google.com/

Google CalendarのQuickStart
　ht

【アプリ開発 2】【Node.js JavaScript MongoDB】 JavaScriptを用いて端末の現在地を取得する。【2021年1月】

#Node.js Express MongoDBを用いたアプリ開発
Node.js Express MongoDBを用いたアプリ開発を行うことになりました。
開発の中で得られた知見を、支障のない範囲で記録していきたいと思います。

アプリの仕様上、各ユーザーの携帯電話の位置情報を取得し、googleマップ上で表示させる必要が生じました。
まずは、位置情報を取得する機能を実装してみます。

##要件
– ユーザーがログインし、「位置情報通知」ボタンをクリックした場合、位置情報がデーターベースに格納される。
– ユーザーがログアウトもしくは、「位置情報通知解除」ボタンをクリックした場合、位置情報がデーターベースから削除される。
– ２４時になった時点で、ユーザーの操作なしに、「位置情報通知解除」状態となる。
– ユーザーの位置が変更した場合、最新の位置情報がデータベースに格納される。
– 管理者は、定期的にデーターベースにアクセスしGoogleマップを用いて、ユーザーの位置を確認することができる。
– 位置情報には、ユーザーの連絡先と、コメント等が表示される。

##Javascriptを

JavaScriptとECMAScript（初心者向け）

#ECMAScriptとは
ブラウザ間の互換性を高めるために作られたJavaScriptのコアな部分（仕様）

###ECMAScriptのバージョン
| 年 | バージョン | 通称 |
|:-: |:-: |:-: |
| 2009 | 5版 | ES5 |
| 2015 | 6版 | ES2015(ES6) |
| 2016 | 7版 | ES2016(ES7) |
| 2017 | 8版 | ES2017(ES8) |
| 2018 | 9版 | ES2018(ES9) |

###ECMAScriptの仕様の決まり方
機能ごとに仕様を作り、最新版の使用所に追加する
####仕様策定プロセス
| 段階 | 通称 | 概要 |
|:-: |:-: |:-: |
| Stage0 | Strawman | アイデアレベル |
| Stage1 | Proposal | 機能提案・検討 |
| Stage2 | Draft | 暫定的に仕様決定 |
| Stage3 | Ca