プログラミングに関連して: 2月 2021

2021年2月27日土曜日

github clone ssh

githubからidとpasswordでgit cloneしたらgithubから怒られました。

2021年8月頃にidとpasswordでは、操作できなくなるそうです。(詳細)

少しハマったのでキーの作成方法と公開キーの登録方法をメモしておきます。

sshキーの作り方

$ ssh-keygen -t rsa -b 4096 -C "your_email@example.com"

キーをgithubへ登録する方法

catで表示してコビーペーストでも問題ない。

2. 左端のメニューの"SSH and GPG keys"

3. 右上の"New SSH key"

sshの接続テスト

$ ssh -T git@github.com

The authenticity of host 'github.com (52.192.72.89)' can't be established.
RSA key fingerprint is SHA256:nThbg6kXUpJWGl7E1IGOCspRomTxdCARLviKw6E5SY8.
Are you sure you want to continue connecting (yes/no/[fingerprint])? yes   <== 入力
Warning: Permanently added 'github.com,52.192.72.89' (RSA) to the list of known hosts.
Hi user-ID! You've successfully authenticated, but GitHub does not provide shell access.

または

Hi user-ID! You've successfully authenticated, but GitHub does not provide shell access.

のように表示されたらOK

cloneの例

$ git clone git@github.com:abcd/efghi.git

2021年2月21日日曜日

javascript ファイル出力

セキュリティの問題から、ブラウザのjavascriptから直接ファイルの操作はできない。

Blobを作成して、アンカーに紐づけダウンロードすることによりファイルを出力できる。

window.onload = () => {
    let data =  Array("abcdefg", "xxxxx");
    let blob = new Blob(data, {type: "text/plan"});
    let link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = 'testfile.txt';
    link.click();
};

2021年2月15日月曜日

javascript internal slot [[Prototype]]について

Internal methods and internal slots are identified within this specification using names enclosed in double square brackets [[ ]].(© Ecma International 2020)

[[ ]]は、ECMAScriptでの表記方法

普通のオブジェクト(ordinary object)は、[[Prototype]]を持っています。

[[Prototype]]は、nullまたは、他のオブジェクトの参照を持っています。

普通にオブジェクトを作成すると、[[Prototype]]は、Object.protorypeの参照を持ちます。

例

let obj1 = {};
let obj2 = {};
let obj3 = Object.create(obj1);   // [[Protorype]]は、obj1

Object.prototype.my_prop = "AAA"

// すべてAAAが表示される。
alert(obj1.my_prop);
alert(obj2.my_prop);
alert(obj3.my_prop);

alert("abc".my_prop);  // 文字列も[[Protorype]]を持っており、最終的にObject.prototypetが参照される。

2021年2月14日日曜日

javascript の特殊なプロパティー proto

__proto__は、[[prototype]]にアクセスするための特殊なプロパティーである。色々なブラウザに実装され、デファクト・スタンダードとなった。現在では非推奨である。

代わりに

Object.create(proto, [descriptors])

Object.getPrototypeOf(obj)

Object.setPrototypeOf(obj, proto)

を使う。

__proto__ の例

let obj1 = {
    prop1 : "ABC"
}

let obj2 = {
    __proto__ : obj1
}

alert(obj2.prop1);   // ABCが表示される。obj2.__proto__.prop1 (obj1.prop1)が参照される。

obj2.__proto__ = "TEST";  // プリミティブは代入できない。

alert(obj2.__proto__);　　　// [object Object]が表示される。

obj2.__proto__ = {
    prop1 : "XXX"
};                    // オブジェクトは代入できる。

alert(obj2.prop1);    // XXXが表示される。

objectをmapとして使用した場合、画面入力からキーとバリューを作成した場合、キーに"__proto__"が入力された場合問題が発生する。

Object.create(null);を使うことにより、__proto__の無いオブジェクトが作成できる。

例

let obj3 = Object.create(null);   // [[prototype]] が、nullになる
obj3.__proto__ = "TEST";
alert(obj3.__proto__);    // TESTが表示される。

obj3.__proto__ = {
    prop1 : "XXX"
};
alert(obj3.prop1);　　　　　　　　// undefined 
alert(obj3.__proto__.prop1);   // XXXが表示される。

2021年2月13日土曜日

javascript React web site + JSXの開発方法

JSXを使ってweb siteを開発する場合の手順(Babel)

1. node.jsをインストール(参考)

2. プロジェクトフォルダーを作成する。

3. プロジェクトフォルダーで下記コマンドを実行

$ npm init -y

$ npm install babel-cli@6 babel-preset-react-app@3

以上で開発環境の準備終了

プロジェクトに、srcとjsというフォルダを準備し

下記コマンドを実行する。

$ npx babel --watch src --out-dir js --presets react-app/prod

srcに作られたJSXで記述されたコードが本番用に変換されて

jsに出力される。

Babelのホームページはここ

javascript React web siteで手っ取り早くJSXを使う方法

元ネタ

下記のコードを付け加える。

スクリプトのタイプをtext/babelにする。

例題

<!DOCTYPE html>

<html>

<head>

<title>Hello World</title>

</head>

<body>

ReactDOM.render(

<h1>Hello, world!</h1>,

document.getElementById('root')

);

</script>

</body>

</html>

とりあえずは、この方法でテストできる。

本番環境では、実行速度に問題があるので、この方法はよくない。

2021年2月12日金曜日

javascript minify

ここを参照

xxxxx.jsをxxxxx.min.jsにするツールのひつと

Reactをweb siteに追加する方法

ここをみよ

my_react.html

 <!DOCTYPE HTML>
 <html>

 <body>
   <div id="my_react"></div>
   <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
   <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
   <script src="my_react.js"></script>
 </body>

 </html>

my_react.js

'use strict';

const e = React.createElement;

class LikeButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = { liked: false };
  }

  render() {
    if (this.state.liked) {
      return 'You liked this.';
    }

    return e(
      'button',
      { onClick: () => this.setState({ liked: true }) },
      'Like'
    );
  }
}

const domContainer = document.querySelector('#my_react');
ReactDOM.render(e(LikeButton), domContainer);

本番用のスクリプトは、こちらを使う

<script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>

minificationは、こちらを参照する。

なおJSXを使うためにはここを参照する。

2021年2月11日木曜日

javascript thisについて

オブジェクト中のthisは、紛らわしい動作をする場合がある。

var message = 'aaaa';
let obj1 = {
    message : 'Hello',
    func1: function(){alert(this.message);}
}

obj1.func1();      // Hello   #thisは、obj1

let func2 = obj1.func1;
func2();           // aaaa    #thisは、window
func2.call(obj1);  // Hello　　明示的にthisを指定することができる。

setTimeout(function(){obj1.func1();}, 1000);  // Hello
setTimeout(obj1.func1, 1000);                 // aaaa
setTimeout(obj1.func1.bind(obj1), 1000);      // Hello  bindでthisを決めてしまうこともできる。

callbackにobj1.func1で渡すと、thisは、obj1にならず、windowになる。

"use strict"をつけると

func2();は動作しない。

javascript 入門

javascriptをためすには、

ファイルindex.htmlをつくる。

<html>

<body>

  <script src="index.js"></script>

</body>

</html>

スクリプトは、index.htmlと同じフォルダーのindex.jsに記述する。

index.htmlをブラウザで開く。

2021年2月9日火曜日

ssh memo

ssh 公開キーによる認証

キーペアの作成

$ssh-keygen -t rsa

デフォルトでは、~/.sshに公開キー(public key)と秘密キー(private key)が作られる

id_rsa       秘密キー(private key)

id_rsa.pub   公開キー(public key)

設定ファイルの場所

/etc/ssh/sshd_config

ターゲットのホストへのsshキーの転送

ssh-copy-idコマンドを使用するか

パブリックキーをホストに転送し.ssh/authorized_keys にパプリックキーを登録する。

cat id_ras.pub >> .ssh/authorized_keys

2021年2月8日月曜日

ubuntu node.js インストール

正式版　本家

ダウンロードしたbinaryを/usr/local/lib/nodejsに展開してpathを通す。

LTSの確認　nodejsのホームページで確認する。

 VERSION=v14.15.4
 DISTRO=linux-x64

 wget https://nodejs.org/dist/$VERSION/node-$VERSION-$DISTRO.tar.xz

 sudo mkdir -p /usr/local/lib/nodejs
 sudo tar -xJvf node-$VERSION-$DISTRO.tar.xz -C /usr/local/lib/nodejs

~/.profileの最後に下記を追加する。

# Nodejs
VERSION=v14.15.4
DISTRO=linux-x64
export PATH=/usr/local/lib/nodejs/node-$VERSION-$DISTRO/bin:$PATH

profileを更新する。

. ~/.profile

テスト

node -v

npm version

npx -v

APT INSTALL

$ sudo apt install nodejs npm

$ nodejs --version <== コマンドはnodejs

v10.19.0 <== 古い

node.jsのバージョン管理モジュールをインストール

$ sudo npm install n -g

stableの最新版をインストール

$ sudo n stable

installing : node-v14.15.4

mkdir : /usr/local/n/versions/node/14.15.4

fetch : https://nodejs.org/dist/v14.15.4/node-v14.15.4-linux-x64.tar.xz

installed : v14.15.4 (with npm 6.14.10)

Note: the node command changed location and the old location may be remembered in your current shell.

old : /usr/bin/node

new : /usr/local/bin/node

To reset the command location hash either start a new shell, or execute PATH="$PATH"

$ node --version

v14.15.4

$ sudo apt purge -y nodejs npm

$ exec $SHELL -l

ここまで

参考

$ sudo apt autoremove

Reading package lists... Done

Building dependency tree

Reading state information... Done

The following packages will be REMOVED:

fontconfig-config fonts-dejavu-core gyp javascript-common

libauthen-sasl-perl libc-ares2 libdata-dump-perl libdrm-amdgpu1

libdrm-intel1 libdrm-nouveau2 libdrm-radeon1 libencode-locale-perl

libfile-basedir-perl libfile-desktopentry-perl libfile-listing-perl

libfile-mimeinfo-perl libfont-afm-perl libfontconfig1 libfontenc1 libgl1

libgl1-mesa-dri libglapi-mesa libglvnd0 libglx-mesa0 libglx0

libhtml-form-perl libhtml-format-perl libhtml-parser-perl

libhtml-tagset-perl libhtml-tree-perl libhttp-cookies-perl

libhttp-daemon-perl libhttp-date-perl libhttp-message-perl

libhttp-negotiate-perl libice6 libio-html-perl libio-socket-ssl-perl

libio-stringy-perl libipc-system-simple-perl libjs-inherits

libjs-is-typedarray libjs-psl libjs-typedarray-to-buffer libllvm11

liblwp-mediatypes-perl liblwp-protocol-https-perl libmailtools-perl

libnet-dbus-perl libnet-http-perl libnet-smtp-ssl-perl libnet-ssleay-perl

libnode-dev libnode64 libpciaccess0 libpython2-stdlib libpython2.7-minimal

libpython2.7-stdlib libsensors-config libsensors5 libsm6 libssl-dev

libtie-ixhash-perl libtimedate-perl libtry-tiny-perl liburi-perl libuv1-dev

libvulkan1 libwayland-client0 libwww-perl libwww-robotrules-perl

libx11-protocol-perl libx11-xcb1 libxaw7 libxcb-dri2-0 libxcb-dri3-0

libxcb-glx0 libxcb-present0 libxcb-randr0 libxcb-shape0 libxcb-sync1

libxcb-xfixes0 libxcomposite1 libxcursor1 libxdamage1 libxfixes3 libxft2

libxi6 libxinerama1 libxkbfile1 libxml-parser-perl libxml-twig-perl

libxml-xpathengine-perl libxmu6 libxpm4 libxrandr2 libxrender1 libxshmfence1

libxt6 libxtst6 libxv1 libxxf86dga1 libxxf86vm1 mesa-vulkan-drivers

nodejs-doc perl-openssl-defaults python-pkg-resources python2

python2-minimal python2.7 python2.7-minimal x11-common x11-utils

x11-xserver-utils xdg-utils

0 upgraded, 0 newly installed, 115 to remove and 0 not upgraded.

After this operation, 475 MB disk space will be freed.

Do you want to continue? [Y/n]

multipass ファイル共有

$ multipass list

Name State IPv4 Image

primary Running 10.124.5.162 Ubuntu 20.04 LTS

$ multipass info primary

Name: primary

State: Running

IPv4: 10.124.5.162

Release: Ubuntu 20.04.2 LTS

Image hash: d68d50a4067d (Ubuntu 20.04 LTS)

Load: 0.00 0.00 0.00

Disk usage: 2.0G out of 4.7G

Memory usage: 150.7M out of 981.2M

$ multipass mount /home/myhome/share primary

$ multipass info primary

Name: primary

State: Running

IPv4: 10.124.5.162

Release: Ubuntu 20.04.2 LTS

Image hash: d68d50a4067d (Ubuntu 20.04 LTS)

Load: 0.00 0.00 0.00

Disk usage: 2.0G out of 4.7G

Memory usage: 154.5M out of 981.2M

Mounts: /home/myhome/share => /home/myhome/share

UID map: 1000:default

GID map: 1000:default

解除

$ multipass umount primary

Ubuntu adduser

adduser username 下記の処理も行ってくれる

useradd

cp -a /etc/skel/. /home/username

chown -R username:username /home/username

usermod -a -G adm,cdrom,dip,lxd,plugdev,sudo username <==必要なグループを追加する

などなど

$ sudo adduser xx

ユーザー `xx' を追加しています...

新しいグループ `xx' (1002) を追加しています...

新しいユーザー `xx' (1002) をグループ `xx' に追加しています...

ホームディレクトリ `/home/xx' を作成しています...

`/etc/skel' からファイルをコピーしています...

新しいパスワード:

新しいパスワードを再入力してください:

passwd: パスワードは正しく更新されました

xxのユーザ情報を変更中

新しい値を入力してください。標準設定値を使うならリターンを押してください

フルネーム []:

部屋番号 []:

職場電話番号 []:

自宅電話番号 []:

その他 []:

以上で正しいですか? [Y/n] y

2021年2月5日金曜日

javascript arguments

特殊な変数

arguments 　配列のような変数

　配列ではないため、foreachとかpopなどはない

function test() {

for(let arg of arguments) alert(arg);

// or

//let args = Array.from(arguments);

let args = [...arguments];

args.forEach(arg => alert(arg));

// arguments.forEach(arg => alert(arg)); これはできない

}

test(1,2,3);

rest parametersは、配列である。

function test(...args) {

args.forEach(arg => alert(arg));

}

test(1,2,3);

登録: 投稿 (Atom)