KAEDE Hack blog

JavaScript 中心に ライブラリなどの使い方を解説する技術ブログ。

Entries from 2021-01-01 to 1 year

Linux コマンド -- grep -- 正規表現を用いたファイルの内容の抽出

grep よく ls の内容を絞るのに使う。 ls a ab abc ls | grep ab ab abc 引数の文字を含むモノに絞る。 cat の戻り値も絞れる。 fgrep との違い mondai.ping-t.com この問題によると fgrep では正規表現が使えない 試してみる そもそも正規表現が機能してな…

JS ゲーム製作 p5.js 複数円の衝突を関数化する - 円を増やす準備

何をするか p5.js kei-s-lifehack.hatenablog.com 前回の記事で 2円の衝突判定の実装をやったが、関数化はされていなかったので、 ゲームを作るために必要な関数化を行う。 そのために以下の処理を行う 2円のオブジェクト化 円の描画 テキストの描画 2円のオ…

Linuc 101 Linux コマンド - ファイルタイプ、権限、タイムスタンプの変更

why vi で作り、開き編集し保存し rm で削除して mv で移動させて cp でコピーする のは基本の前提式として、 それ以外にも普段気にしない ファイルの状態操作があったのでまとめる 作成時刻 アクセス時刻 権限 所有者 などがある 参考 山本 道子,大竹 龍史.…

Linux 権限の見方と変更の仕方 -- rwx と 752 --

why ファイルの詳細確認記事を書いていたら、権限まわりが長くなったので、単体で記事にした ファイルの権限について - rwx rw- r-- などの文字列の詳細 www.guru99.com ls -l で各情報を表示 ls -l では 各ファイルの種類や時刻のほかに、 パーミッション (…

JS ゲーム製作 -- p5.js で円の衝突を実装する

why 前回のライブラリがうまく使えなくて困っていたところ パフォーマンス遅くてもいいなら自分で作ればすぐだよ と聞いたので作ってみる 参考 www.youtube.com ヘロンの数学 さんのチャンネル この動画では円と線分の衝突を扱っているが、円の方が圧倒的に…

JS ゲーム製作 -- box-intersect で四角形同士の衝突を検知したいが想像通りの挙動にならない

why qiita.com この記事を Twitter で見た。 衝突判定ライブラリなんてあるんだ、触ってみようかなって思った box-intersect github.com box-intersect とは? D 次元や N と M ボックスでそれぞれの交差を見つけるライブラリ。 O((n+m) log^d(n+m)) という…

Linuc 101 Linux コマンド -- job ( -l, -s , -r ) , bg, fg -- ジョブの発動と停止と表示と裏表管理

job とは ターミナルで実行中の fore-ground または back-ground での動作のこと 通常のブラウザなどが中心の生活では使うことはなく、普段は動いていないと思う sleep を表で動かして一時停止して jobs で見てみる eng-entrance.com この記事を参考に sleep…

Linuc 101 Linux コマンド -- kill -15, kill -9, killall, -- 掃除して、強く、同じコマンド由来のプロセスを殺す

kill とは 指定した引数のプロセスを殺す。止めるのではなく消し去る。 kill PID で tmux を殺す とりあえず何かを殺してみよう。 tmux は常時起動している。 これなら止めても PC が止まることはないだろうし試しに殺してみる ps PID TTY TIME CMD 57464 tt…

Docker 停止中 or 稼働中の Ubuntu コンテナの Bash に入る - docker start attach

why Docker で Ubuntu をプロセス関連の学習のために動かしたかった kei-s-lifehack.hatenablog.com コンテナのリスト表示 docker ps または docker container ls で起動中のコンテナのリストを表示できる。 docker container ls CONTAINER ID IMAGE COMMAND…

Docker Ubuntu 復習 - docker run と exec で新しいコンテナを動かす

参考 過去の自分の記事 kei-s-lifehack.hatenablog.com ファイルとイメージとコンテナってなんだっけ? hacknote.jp Dockerfile から Docker Image を作成してそれを走らせると Docker Container になる プログラムを走らせるとプロセスになる感じか...? イ…

CSS Animation で Loading Animation を作る

why モンハンの Loading... が流れているのを作っている夢を見た 2ndG で遊んでいただけのあの頃とは違い、今なら作れるはず pure な HTML CSS っていうのもやってみたかった アニメーションってどうやるんだっけ? www.w3schools.com www.w3schools.com 調…

Linuc 101 Linux コマンド -- ps aux と ps -e -u -l -f -eu -- プロセスの詳細表示

前提 WSL で試した。 ps qiita.com uxmilk.jp ProcesS 、プロセスを表示するコマンド 引数におなじみの UNIX 方式のつけかたと、見慣れない? BSD 方式がある。 ps PID TTY TIME CMD 125 tty1 00:00:00 init 126 tty1 00:00:00 bash 220 tty1 00:00:00 ps 単…

はてなブログの不満点 -- なぜたまに乗り換えたくなるのか

Hatena Blog はたまに乗り換えたくなる時があるから、不満点をまとめておく はてなブログの不満な機能 下記の理由からや別のサービスに移行か自作を検討している アプリでコメント返し出来ない Android App で記事についたコメントを返せない。まぁコメント…

Linuc 101 Linux プロセス プログラム メモリアドレスの概念

プロセスとプログラムとの違い devconnected.com この記事がわかりやすかった。 プロセスとは processes are running programs on your Linux host that perform operations such as writing to a disk, writing to a file, or running a web server for exa…

Linuc 101 Linux systemd - sytemctl コマンド、target, isolate reboot, shutdown -10,

systemd systemd とは システム D www.freedesktop.org www.designet.co.jp コンピューターが起動するときに、必要な様々なプログラムを並列して動かすプログラム。 PID ( Process ID ) が 1 である原初のプロセス。 カーネルの次に起動する。 sysVinit と違…

成果物一覧--KAEDE WORKS

kaede0902 在学中 成果物一覧

Win10 Home VMware で centOS の Installation Source の setup が終わらず挫折

why ssh で遊べる remotehost が欲しい 無料サーバーでは無理そうだった X Server に月額 980 払いたくない VMware でマシンの中に仮想マシン作れば無料でやれるらしい!! eng-entrance.com VMware Workstation を win に download vmware から 無料のを選…

月 14k のサブスクの整理 ( 2020-03 )

why 月額 980 円の X server を SSH と公開鍵認証を試すために契約する必要がでた これ以上追加するのが怖くなって、何を減らそうか検討した サービスたち Prime, Apple Music, YT Music, Netflix, Wimax ルーター, friday, qs, kk, を契約している Amazon P…

Linux ホスト関連のコマンドを WSL で試すが 接続先がない...

why Linuc 101 で出たコマンドを動かしたくなった whoami root@DESKTOP-8G3A2F8:~# whoami root Who am I? のユーザー名を聞くコマンドを打つと 現在のユーザー名がわかるらしい ここでは WSL だからか root になっていた hostname root@DESKTOP-8G3A2F8:~# …

Linuc 101 Linux - 秘密鍵方式の通信と GitHub を例にした認証

秘密鍵と公開鍵 秘密鍵とは ja.wikipedia.org 公開鍵暗号(こうかいかぎあんごう、Public-key cryptography)とは、暗号化と復号に別個の鍵(手順)を用い、暗号化の鍵を公開できるようにした暗号方式である。 二つの鍵を用意し、一方の鍵を公開しても良いの…

初めての確定申告@2021.04.01

確定申告とは? www.nta.go.jp 自分の売り上げなどと税金の自己申告 & 自己納税。 2021.04.15 締め切りで 2020.01.01 ~ 2020.12.31 までの給与、事業所得などの why 業務委託の分。 初めてなので覚え書きしとく 税金のかかり方についての問合せ。 まず横浜の…

Linux Process

why Linuc 101 プロセスを表示 ps ps PID TTY TIME CMD 802 ttys000 0:00.06 -bash 7328 ttys000 0:00.01 tmux 7445 ttys001 1:47.95 npm start プロセスをユーザーごとに表示 - ps u ps u ps u USER PID %CPU %MEM VSZ RSS TT STAT STARTED TIME COMMAND ka…

JS ES6 の復習 - 複文と単文、式と文、演算子

why カンマ演算子や式と文など、わかっていないことが多かった 複文と {} アロー関数で説明すると {} で括らないで複文を入れた場合 const A = () => console.log('A'); const B1B2 = () => console.log('B1');console.log('B2'); A(); B1B2(); これを実行す…

JS の知識を前提として C++ を学習する - cin, cout, 関数化

参考 柴田望洋の https://www.amazon.co.jp/dp/B0787YH4L2/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1 ヘッダ node.js の import みたいな感じで include を使う std と count using namespace std; これで std の使用を明示すると cout をそのまま 使え…

C++ の環境構築 - 文字化け

why 完全に趣味、気分転換 競技プログラミングに Node より向いてそうだから VScode qiita.com これを参考にした VScode を開いて Extension の Code Runner を入れる #include <iostream> using namespace std; /** * Hello!VisualStudioCodeを出力 */ int main() { c</iostream>…

js array.reduce(func, arg) の第二引数がある場合とない場合の処理

why map とは別のこの処理が必要になった main developer.mozilla.org MDN のサンプルを読み解く accumlator は「計算に使う貯めておくもの」 だけど stack の方がわかりやすいので stack にします!!!ただの名前なので!!! currentValue は現在の値。 r…

React react-i18next 「1つの」 json file から各言語のテキストを展開する

map を使わず読み込む場合 en.json { "welcome": "Welcome to i18next", "hello": "Hello", "changeLang": "Change Language" } ja.json { "welcome": "i18next へようこそ!", "hello": "こんにちわ", "changeLang": "言語を切り替える" } App.js/import im…

React で ./src/locales/ の中身を全て読み取ろうとしたが無理だった - react は複数の json を読み込めない!

why kei-s-lifehack.hatenablog.com 前回の記事で 5言語の切り替えを実装したが、毎回 import xxJson from './locales/xx.json' xx: { translation: xxJson, }, <button onClick={ () => setLang('xx') }> XXXXXX これを書かないと言語を追加できないクソ設計なので直す やったこと </button>…

React react-i18next 挨拶サイト 5言語の切り替えをできるようにした

why kei-s-lifehack.hatenablog.com 前回の記事で 日英の切り替えだけ作って満足していたら ブラッシュアップに 対応言語に、中国語(簡体字)、中国語(繁体字)、スペイン語、韓国語、ポルトガル語を追加しろ それができれば、設計の最小限のレベルだ と言…

React react-i18next で日英切り替え Ark 生物紹介サイトを作る

why kei-s-lifehack.hatenablog.com 前回の記事で、react-i18next で二言語の切り替えができるようになった これを使って何かを作りたい! Hatena ではなく、自分で攻略サイトを作りたい Next.js で react-i18next が使えそうにないことからガッツリはつくれ…