雑多な知見

中井圭輔

Pythonのコード整形

リンターとフォーマッターの違い

リンター　　　：ソースのエラーやスタイルを指摘する（修正はしない）
フォーマッター：ソースのエラーやスタイルを修正する

Flake8

リンター
PEP8（Python標準のコーディング規約）の違反を指摘する

Black

フォーマッター
PEP8の規約違反を修正する

isort

フォーマッター
インポート順を修正する

中井圭輔

システム開発に用いる環境をまとめた

1. 開発環境

開発者がシステムをつくる環境
ローカル環境内でコードを書く

2. 検証環境 or テスト環境

開発者がシステムをテストする環境
ミスがないか、コミット漏れがないかなど色々チェックする

3. ステージング環境

顧客がシステムをテストする環境
ここでいうテストは 2 とは異なり、「要件を満たしているか」「運用に支障が無いか」などをチェックする

4. 本番環境

顧客がシステムを使う環境

名称について

案件によって環境名が異なることもある
- 例
  - 1：ローカル環境
  - 2：開発環境
  - 3：検証環境
  - 4：本番環境
さらに環境が増える案件もある
ただ名前が違ってもだいたいの流れは同じ。この流れを押さえる
- （開発者のローカル）→（開発者のテスト）→（顧客のテスト）→（顧客が使う）

中井圭輔

\xnn：16進表記文字（nは0～f）
\x875E

中井圭輔

x{n}：直前のアイテムxをn回繰り返す（/[0-9]{3}/.test("123") // true）

中井圭輔

グローバルipアドレスとプライベートipアドレスを1対1で結びつける：NAT
DHCP：IPアドレスを自動設定する仕組み
DNS：ドメイン名とIPアドレスを結びつけて変換する（名前解決する）仕組み
IPアドレスのクラス：クラスA、～127・クラスb128～191・クラスC192～223
NIC：グローバルIPアドレスを割り当てる期間

中井圭輔

faker ダミーデータを作成できるPythonライブラリ

中井圭輔

Django の view でみるやつ

HttpResponse
- 主に文字列を表示する
- return HttpResponse('Hello Django')
render
- テンプレート単体や変数を反映したテンプレートを表示する
- return render(request, テンプレート名, 変数)

中井圭輔

雑多な知見
Djangoのmiddlewareについて分かりやすすぎる投稿があった（https://qiita.com/shirakiya/items/1503eaffe81f91af5b9d）
軽くお試し実装したい

中井圭輔

雑多な知見
カラーコード

白 ⇒ カラー名: white、16進数: #FFFFFF、短縮形：#FFF
- ffffffもfffも同じ色。
dddは明るめの灰色

中井圭輔

雑多な知見
import順を自動ソートする

settings.jsonに以下を追加

"editor.codeActionsOnSave": {
    "source.organizeImports": true
  }

中井圭輔

雑多な知見
VSCode でタブをピン留め
（タブを選択した状態で）Ctrl + K → Shift + Enter

中井圭輔

pythonのmock

中井圭輔

JavaScript の空配列を勘違いしていた（https://zenn.dev/rynske/articles/bc258e46c72fad）
空配列はFalseではなくTrue。空配列の時にfalseと判定させたい時は、配列.lengthと書く

HTML の記号・特殊文字の文字コード表（文字実体参照、数値文字参照）

HTML では文字コードを書くことで記号などを表示できる
形式は３通り

	文字実体参照	数値文字参照（10 進数）	数値文字参照（16 進数）
説明	定義された名前を入力	定義された番号（10 進数）を入力	定義された番号（16 進数）を入力
書き方	&（記号名）;	&#（数値）;	&#x（数値）;

使い方

文字列実体参照

<div>&copy; 2023 petabyte</div>

数値文字参照（10 進数）

<div>&#0169; 2023 petabyte</div>

数値文字参照（16 進数）

<div>&#xA9; 2023 petabyte</div>

中井圭輔

【Google Chrome】デベロッパーツールで色の値を調べる方法

colorプロパティを指定＞色の横の四角をクリック＞スポイトをクリック＞調べたい色をクリック

中井圭輔

よろしかったでしょうか（https://precious.jp/articles/-/37112）

「よろしかったでしょうか」は現在の出来事の確認に対して過去形を使っているのでNG
- NG）窓側のお席のご予約でよろしかったでしょうか
- 「よろしいでしょうか」、「間違いありませんか」、「構いませんか」などが正解
ただし過去の事柄・相手が承知している事について確認する場合にはOK**
- OK）サンプルを営業部のA様宛て発送しましたが、よろしかったでしょうか
- 「よろしかったでしょうか」は全てNGだと思っていたので衝撃

中井圭輔

オートコンプリートで保存された入力候補を個別に削除
候補にカーソルを合わせ、「Shift」＋「Delete」

中井圭輔

React Routerを使用して作ったページをGitHub Pagesにデプロイしようとしたらうまくいかなかった話(解決法まで)

中井圭輔

2018年のフロントエンドエンジニアならこの程度は知ってて当然だよな？

中井圭輔

[GitHub]「Compare & pull request」のボタンが表示されない

中井圭輔

chrome developer tools の user agent stylesheet
ブラウザで指定されているデフォルトCSS

中井圭輔

WYSIWYG（What You See Is What You Get、ウィジウィグ）
最終的な出力と同じものが編集画面に表示されるエディター

中井圭輔

CSSで画面全体を覆う方法

.sample {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 100;
}

中井圭輔

エラー
Warning: You provided a value prop to a form field without an onChange handler. ...
<input> の value に初期値（固定値）を設定しているからエラー
利用者が文字などを入力しても変更できないから
valueではなくdefaultValueを使おう

中井圭輔

ローカルストレージ

保存

localStorage.setItem('key', 'value');

取得

const value = localStorage.getItem('key')

削除

localStorage.removeItem('key');

保存（配列）

const json = JSON.stringify(array);  // 一度JSONにする
localStorage.setItem('key', json);

取得（配列）

const json = localStorage.getItem('key');
const array = JSON.parse(json);  // JSONを戻す

中井圭輔

参考：idやclass以外の属性から要素を取得したい時（https://zenn.dev/ymmt1089/articles/20220624_query_selector）
あまりないが、id や class がなくて placeholderしかないときがある。

id や class がない

<div placeholder="名前を入力してください/>

こうしたら要素を取得できた！

name = document.querySelector('[placeholder="名前を入力してください"]');

中井圭輔

【マイコーディングルール】

CSS
色の指定はカラーコードに統一し、カラーネームは使わない。
背景色だけ設定したい場合はbackground-colorを使う
background-color：背景の色だけ設定する
background：背景に関する様々なプロパティをまとめて設定できる
色、背景画像、背景画像の位置など

JavaScript
関数名は動詞を頭につける
関数は「何かをするもの」なので

React
useStateで更新を反映したいとき：setCount(count + 1)ではなくsetCount((prev) => prev + 1)

中井圭輔

■tkinter（ティー・ケー・インター）
PythonでGUIを使える

VSCodeでpractice.pyに以下のコードを入力

import tkinter as tk

root = tk.Tk()
root.mainloop()

$ python practice.pyで実行
小さなウインドウが出てくる！！

中井圭輔

■「PythonのTkinterを使ってみる」（https://qiita.com/nnahito/items/ad1428a30738b3d93762）のメモ

#!/usr/bin/env python3
# -*- coding: utf8 -*-
import tkinter as tk

root = tk.Tk()  # メインウィンドウ作成
# ≪実行内容 ここから≫

root.title("Software Title")  # ウィンドウのタイトル
root.geometry("400x400")  # ウィンドウサイズ（横x縦）


#
# ボタンを押すとここが呼び出される
#
def DeleteEntryValue(event):
    # エントリーの中身を削除
    EditBox.delete(0, tk.END)


# ラベル（文字を表示）
Static1 = tk.Label(text="test", foreground="#ff0000")  # 文字列や色を指定
Static1.place(x=150, y=220)  # 座標を指定

# エントリー（一行入力ボックス）
EditBox = tk.Entry(width=40)
EditBox.insert(tk.END, "a")  # プレースホルダー
EditBox.place(x=10, y=30)

# valueにEntryの中身が入る
value = EditBox.get()

# ボタン
Button = tk.Button(text="ボタンです", width=100)
Button.bind("<Button-1>", DeleteEntryValue)
# 左クリック（<Button-1>）されると、DeleteEntryValue関数を呼び出すようにバインド
Button.place(x=0, y=120)

# ≪実行内容 ここまで≫
root.mainloop()

中井圭輔

リセット CSS（modern.css）
ブラウザのデフォルト CSS をリセットする

TEST/public/index.htmlの head タグ内に以下を追加する

<!-- reset.css modern-css-reset -->
<link
  rel="stylesheet"
  href="https://unpkg.com/modern-css-reset/dist/reset.min.css"
/>

中井圭輔

CSS Modules
CSS だとアプリ全体が適用範囲となる。CSS Modules だと読み込んだコンポーネントにしか適用されないので管理しやすいらしい。
ファイル名に.module.scssをつけると CSS Modules が使えるようになる（.module.cssだと CSS 、.module.scssだと SCSS っぽい？）

(scss インストールが必要？)

TEST/src/page/hoge/index.tsxファイルに以下を追加する

import * as React from "react";
import styles from "./hoge.module.scss";

export const Hoge: React.FC = () => {
  return <div className={styles.hoge}>a</div>
};

中井圭輔

Middleware

各ビュー関数で共通して行いたい処理を記述する
Middleware 作成手順

アプリケーションディレクトリ内にmiddlewareディレクトリを作成し、その中に作成

Django
├── config # 設定ディレクトリ
├── app # アプリケーションディレクトリ
│   ├── middleware # 新規
│   │   └── middleware.py # 新規
│   ├── views.py
│   ├── models.py
│   色々...
└── manage.py

中井圭輔

Makefile とは

ソースコードからの実行ファイルの作成（ビルド）を自動化するツール
作業が少し楽になる

基本

基本構文

ターゲット: 依存関係
  コマンド

ターゲット：実行結果として作成されるファイル名
依存関係：実行結果のファイルを作成するために必要なファイル
- 複数あるならスペース区切りで指定
コマンド
- ターゲットで指定したファイルを作成するために実行するコマンド

例

hoge.exe: hoge.c
  gcc -o hoge.exe hoge.c

make hoge.exe コマンドを実行
hoge.c をコンパイルして hoge.exe を作成せよ

依存関係の解決

一度実行した後、ソースコードを変更していない状態だと再度実行できない
実行基準
- ターゲットのファイルがない
- ターゲットファイルの更新時間より、依存関係ファイルの更新時間が新しい

sample.exe: main.c hoge1.c hoge2.c
  gcc main.c hoge1.c hoge2.c -o sample.exe

ダミーターゲット

clean:
  rm hoge.exe *.o

ターゲット名と同名のファイル（clean）があると実行されないが、ダミーターゲット.PHONEYを宣言することで、同名のファイルの有無に関わらずコマンドを実行できる

.PHONEY: clean
  rm hoge.exe *.o

プリフィックス

@:コマンドのエコーバック（実行するコマンドをコンソールに表示）を抑制する
-:コマンドがエラーで失敗しても処理を止めない
変数
- 条件付き代入演算子：?=
  - 定義された同名の変数があればその内容を使い、なければ Makefile で定義した内容を使う

中井圭輔

indent-rainbow

拡張機能indent-rainbowをインストールすると、インデントが見やすくなる

中井圭輔

未使用 import の通知

設定方法
- 拡張機能 Pylance をインストールする
- VScode でコマンドパレットを開く（Ctrl + Shift + P）
- ユーザー設定の JSON を開く
- 以下を追加
```
"python.analysis.diagnosticMode": "openFilesOnly", // 通知は開いているファイルだけ
"python.analysis.diagnosticSeverityOverrides": {
  "reportUnusedImport": "warning", // 未使用の import を PROPBLEMS に表示する
},
```
- 未使用 import があると問題パネル上に表示してくれる
補足
- "python.analysis.diagnosticMode": "workspace"：__init__.pyなどワークスペースすべてのエラーが表示されてうっとうしい
- "python.analysis.diagnosticMode": "openFilesOnly"：開いているファイルだけ。すべて表示していないことに注意。
参考
- https://qiita.com/k_hoso/items/e902f53d60ce71b388c4

中井圭輔

入室時のノックは3回がマナーらしい
社会人の常識らしい
知らなかったorz

中井圭輔

Chrome 複数タブをまとめて更新
Ctrl または Shift を押しながら、更新したいタブをクリック
F5キーを押す
https://masashi-blog418.com/?p=3163

中井圭輔

正規表現　日本語チェック（https://qiita.com/graminume/items/2ac8dd9c32277fa9da64）
ひらがな
\u3040-\u309f

カタカナ
\u30a0-\u30ff

CJK 統合漢字
\u30e0-\u9fcf

々, 〆（記号）
\u3005-\u3006

中井圭輔

正規表現　https://www.tohoho-web.com/js/regexp.htm
正規表現オブジェクト

/正規表現/オプション
new RegExp("正規表現", "オプション")

文法

[xyx] x、y、z のいずれか 1 文字
[x-z] x ～ z までのいずれか 1 文字
[^xyz] x、y、z のいずれでもない 1 文字

中井圭輔

json整形

中井圭輔

チュートリアルを終えたら、Todoアプリ、チャットアプリとかをやるとよい、と
Todoあぷりは何だかんだつくったので、チャットアプリ作るか？

中井圭輔

html 自動整形
https://www.gesource.jp/weblog/?p=7585

中井圭輔

vscode html 閉じタグ自動挿入
Auto Closing Tags

中井圭輔

django html の三項演算子みたいなもの

{{ value | yesno: "Trueの場合, Falseの場合, Noneの場合" }}
試したらyesno:と"Trueの場合, Falseの場合, Noneの場合"の間に空白があるとなぜかエラーに

中井圭輔

listViewのテンプレート

listView なるものを使ってviewを作成。さらにテンプレートに表示する
object_listという変数にデータのリストが保存されているらしい

中井圭輔

djangoキーワード検索について大事なことが書いてある気がするが、よくわからない
- 【Django】超最短で複数キーワード検索の制御をす
  - https://qiita.com/BRSF/items/d840af7a45b3f41b0b05
- Django で「1文字ずつ分解されない複数キーワード検索」をシンプルに実装する
  - https://mirumi.tech/django-multi-word-search/

中井圭輔

Django Qオブジェクト？

中井圭輔

検索フォームの作成

これで検索フォームに入力した文字列に部分一致するデータを取得することができた！

中井圭輔

appearanceプロパティ

フォーム欄で使用するラジオボタンや送信ボタンに標準搭載されているCSSを、真似したり消すことができるCSSプロパティです。

normal：初期値
none：フォーム特有のスタイルを打ち消す

ベンダープレフィックスという、ブラウザごとに対応する接頭辞をつけるといいらしい
-weblit-appearance：Chrome、Safari対応
-moz-appearance：Firefox、Mozilla対応

中井圭輔

https://www.qoosky.io/techs/ca7f68faa6
sass 共通部分の継承
基本

.class1 {
    background-color: #f00;
}
.class2 {
    @extend .class1;
    color: #fff;
}

継承元を使用しない場合
パーセント記号を用いることで、抽象クラスのような実体のないクラス class1 を定義できます。CSS にコンパイルすると class1 は消失します。

%class1 {
    background-color: #f00;
}
.class2 {
    @extend %class1;
    color: #fff;
}

中井圭輔

django で空のクエリセットオブジェクトを生成する
none_query_set = SomeModel.objects.none()

中井圭輔

【Django】filter/get/excludeで複数の条件指定やQuerySetを結合する方法

中井圭輔

viewの仕事：リクエストを受け取りレスポンスを返すこと
それ以外の処理はユーザー次第

中井圭輔

vscodeのユーザースニペットにhtmlの出だしのとこを登録した。便利

{
  "html template": {
    "prefix": "html",
    "body": [
      "<!DOCTYPE html>",
      "<html lang='ja'>",
      "  <head>",
      "    <meta charset='UTF-8' />",
      "    <title>Title</title>",
      "  </head>",
      "  <body></body>",
      "</html>"
    ]
  }
}

typescript、コンポーネントの出だしもつくってみた

{
  "Component Template":{
    "prefix": "comp",
    "body": [
      "import * as React from 'react';",
      "",
      "export const Component: React.FC = () => {",
      "  return <></>;",
      "};"
    ]
  }
}

中井圭輔

【Reactアプリ100本ノック】01 Hello World

中井圭輔

JavaScript において安全に使用できる整数最大値 Number.MAX_SAFE_INTEGER
console.log(Number.MAX_SAFE_INTEGER)で出力したら9007199254740991だった

中井圭輔

Pythonの変数、メソッドについてまとめた

変数
- インスタンス変数
  - What ：インスタンスごとに設定される変数
  - Where：コンストラクタの中で宣言する
- クラス変数
  - What ：クラスごとに設定される変数（全てのインスタンスで共通）
  - Where：クラスの中かつメソッドの外で宣言する
メソッド
- インスタンスメソッド
  - インスタンス化して使用する
  - インスタンス変数にアクセスする
- クラスメソッド
  - インスタンス化不要
  - クラス変数にアクセスする
- スタティックメソッド
  - インスタンス化不要
  - インスタンス変数にもクラス変数にもアクセスしない

Class MyClass:
    CONST = 10  # クラス変数を定義
    # コンストラクタ
    def __init__(self, x):
        self.x = x  # インスタンス変数を定義
    # インスタンスメソッド
    def instance_method(self, y, z):
        return self.x + y + z  # self.変数名でインスタンス変数にアクセス
    @classmethod  # クラスメソッド
    def class_method(cls, y, z):
        return cls.CONST + y + z  # cls.変数名でクラス変数にアクセス
    @staticmethod  # スタティックメソッド
    def static_method(y, z):
        return y + z  # インスタンス変数もクラス変数も使わない

>>> my_class = MyClass(1)
>>> my_class.instance_method(2, 3)
6
>>> MyClass.class_method(2, 3)  # クラスメソッドはインスタンス化不要
15
>>> MyClass.static_method(2, 3)  # スタティックメソッドはインスタンス化不要
5

中井圭輔

これはいつかやりたい...

中井圭輔

Reactで誰もがやりたかった10の機能。アプリ構想はあるけど作れない人の壁をぶっ壊す。

中井圭輔

WebブラウザでPythonが動作する！PyScriptの詳解

中井圭輔

【共有】「強強エンジニア」が言っていた有用な情報 - Qiita

中井圭輔

inputタグがdisabled状態の時の文字色などのCSS・Styleを変更する方法まとめ(Safari, iOS, iPhone にも対応)

safari だと input が disabled だと文字色が灰色になる。

中井圭輔

記事の書き方について
Qiitaで記事を公開するときに気を付けるべきマナーについて〜無断でネットや書籍の内容を丸写しするのはやめよう〜

Qiitaで技術系の記事を書く時に気をつけていること

中井圭輔

クリエイティブ・コモンズ

中井圭輔

JavaScript の基本
JavaScript Primerを読んで、自分用に内容をメモする

ループと反復処理

同じ処理を繰り返す
以下、それぞれの方法を用いて 0 から 9 までを出力してみる

while 文

while 文は無限ループになりやすいのであまり使わないらしい
do-while 文というのもある

let x = 0;
while (x < 10) {  
  console.log(x);
  x += 1;
}

for 文

for (let i = 0; i < 10; i++) {
  console.log(i);
}

forEach メソッド

配列で使う

const array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
array.forEach(value => {
    console.log(value);
})

break 文
continue 文
filter メソッド

for...in 文

オブジェクトのプロパティに使う

const obj = {
    "a": 0,
    "b": 1,
    "c": 2,
    "d": 3,
    "e": 4,
    "f": 5,
    "g": 6,
    "h": 7,
    "i": 8,
    "j": 9
}

for(const key in obj) {
    console.log(obj[key]);
}

for...of 文

iterable オブジェクトというものに使う

const array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
for (const value of array) {
    console.log(value);
}

関数と宣言

関数：文の集まりを 1 つの処理としてまとめる

// 関数宣言を使う方法
function fn1() {
  console.log(1);
}

// 関数を値として定義する方法（function を使う）
const fn2 = function () {  
  console.log(2);
};

// 関数を値として定義する方法（アロー関数を使う）
const fn3 = () => {  
  console.log(3);
};

中井圭輔

＝＝＝＝＝＝＝＝＝

https://maku77.github.io/sass/var.html
scssの変数

$変数名: 初期値;

$main-color: #333;
body {
  color: $main-color;
}

中井圭輔

cssでmixinを使う方法

中井圭輔

sassメモ
ここに書いてる技を一通り試してみたい

中井圭輔

js の基本が分かりやすくまとめられている
記事を書く上でもこういう書き方は参考になる

中井圭輔

公式のJavascriptガイド　結構わかりやすい

中井圭輔

https://ja.wikipedia.org/wiki/ISO_3103

中井圭輔

button要素のほうがスタイリングが柔軟にできるので特に理由がなければbutton要素を使いましょう。

中井圭輔

命名規則

中井圭輔

https://owlcamp.jp/non-computer-mouse/

プログラミング入門者からの卒業試験は『ブラックジャック』を開発すべし

ポーカーではなくなぜブラックジャックなのかが説明されている
ルールも載っている

中井圭輔

JavaScript のごく一般的な用途は、(先ほど例示した) Document Object Model API を介して動的に HTML と CSS を変更し、ユーザーインターフェイスを更新することです。

中井圭輔

Q「先生は、おられますか」という言い方は、敬語として間違いでは？
A「おられる」という言い方は、謙譲語の「おる」と尊敬語の「れる」を一緒に使っているという理由で誤りだとされることもあるため、放送では使わないようにしています。ただ、「おる」の語感には地域差・個人差があり、間違いとまでは言えないでしょう。