開発 ルーティング app/配下のみに集約し、component/は同階層に分ける app/ | |-page.tsx | |... | components/ | ... コンポーネント なるべくデフォルトのServerComponentを使い、hooksを使う時はClientComponentを使う ClientComponentの子は全てClientC…
開発 Djangoと 内容 同じ model, URLconf 違う serializer, view なし form, template 認証はJWTを使う トークン自体に認証情報を含み、サーバ側でログイン状態を管理する必要がないため、RESTの考え方と整合している ブラウザのlocalStorageに保存する 参考…
開発 比較 比較は===、!==を使う(==はあいまい比較となるため不可) if (test1 === test2) {} 関数 関数はアロー関数で書く const test = () => {} オブジェクト オブジェクトはobj.keyで書く const obj = { test: "test1" } obj.test そのオブジェクトがどの…
開発 設定ディレクトリ名はconfigとする django-admin startproject config . staticとtemplatesはプロジェクト直下に project |--manage.py |--config/ |--app/ |--static/ |--templates/ viewは基本のクラスベースで書き、徐々にリファクタリングする clas…
はじめに RDB(Postgresなど)コンテナとDjangoコンテナのシークレット変数の設定を整理しました。 docker-composeで組むことが多いのですが、いつも迷うのでdocker-composeの場合で整理しました。 シークレット変数は環境変数又はファイルから読み込みますが…
アプリ開発時の気付き事項を記す。 github.com アプリ開発 JSXでは全ての要素は閉じる <input type="text" /> formに含まれるボタンが押されたとき、デフォルトでform全体が送信されるため、ページのリロードが発生する。そのため、追加されたToDoがすぐに消えてしまう。よってfor…
カレンダーアプリなど作成時の気付きを記す。 github.com github.com エントリーポイントとは、アプリケーションの中で一番最初に呼び出される部分のこと Fetch APIはHTTP通信を行ってリソースを取得するためのAPI fetch Promiseを返す thenメソッドが使える…
ハンズオンの結果を記す。 社内SNSアプリ render # views.py from django.shortcuts import render def signupfunc(request): # httpresponseオブジェクトの作成 # {}はモデルの情報 return render(request, 'signup.html', {}) ユーザーの作成と取得→Userモ…
ハンズオンの結果を記す。 TODOアプリ Views CRUD Create: CreateView Read: ListView, DetailView Update: UpdateView Delete: DeleteView ListVeiw 一覧表示 # views.py from django.views.generic.list import ListView from .models import TodoModel cl…
ハンズオンの結果を記す。 ECサイト classbasedviewのカスタマイズ メソッドのオーバーライドによりカスタマイズ # views.py class ItemList(ListView): template_name = 'list.html' model = ItemModel # メソッドをオーバーライドし商品をid順に取得する d…
気になったところのハンズオンの結果を記す。 公式チュートリアル（Django4.0） テーブル間のリレーションシップの貼り方 # models.py class Question(models.Model): question_text = models.CharField(max_length=200) class Choice(models.Model): # リレ…
Herokuは個人開発でたまに使うくらいで実務では使ったことがない。 Heroku 各ファイルの作成 Procfile gunicornのインストール runtime.txt settings.pyの設定 whitenoise デバッグ環境と本番環境 アプリの作成（+名前付け） heroku apps:create ecapp herok…
開発でよく使う。 DBリセット 方法①ロールバック 1.migrate履歴の確認 docker compose exec web python manage.py showmigrations 2.ロールバック docker compose exec web python manage.py migrate twapp 0001_initial←戻したいファイル名 3.戻した以後のm…
テストすると理解が深まる。 テスト UIテストはseleniumを使用 Django, Docker, SeleniumのUIテストではまった所 SeleniumサーバーからブラウザでDjangoアプリに接続する際、「http://名>:3001/」と接続できるが、そうするとテスト環境のDBではなく開発環境…
API Gateway経由でLambdaを呼び出す際、うまく呼び出せず少しはまった。 Lambdaのコード自体は問題なかったが、Deployボタンを押していなかったことが原因。 一見すると自動保存のように見えるが、Lambdaを更新した際はDeployボタンを押さないと保存されない…
基礎 ※古いため参考程度 terraformは権限をFullAccsessにした方が便利 tfenvでバージョン管理する→古い、tenvにする git-secretsでAWSアクセスキーのコミットを防止する git secrets --register-aws --global git secrets --install ~/.git-templates/git-se…
GHA基礎 GHAの構成要素 イベントをきっかけにワークフローが起動する ランナー(OS)でジョブを実行する ジョブは処理の最小単位のステップで構成される ワークフロー構文基礎 環境変数 コンテキストは環境変数で定義する 環境変数はダブルクォーテーションで…
リポジトリ保護 GitHubのコード保護機能でシステム的に制限をかけることができる ローカル上で.github/CODEOWNERS を作成 @<GitHub上のユーザー名> GitHub上でSettings/Branches/Branch protection rule より設定 GitHub Actions Terraform terraformコマンド # 初期化 terraform i</github上のユーザー名>…
ビルド npmの整理 Node.js Python npm pip package.json requirements.txt buildの整理 ソースコードを本番などのサーバに動かす形式に変換すること Pythonなどはbuildがない Dockerイメージの作成もbuildと呼ぶ GitHub Actions GithubActionsの基礎 .github…
ECS準備 Cloud FormationでVPCのリソースを一式作成できる ドメインの取得方法 お名前.comでドメインを取得 Route53のホストゾーンにドメインを登録 ホストゾーンのnameserverをコピーしお名前.comに登録する Certificate Manager(ACM)で証明書を取得 ALBの…
Dockerコンテナ 1タスク内でコンテナを分割する基準 改修のしやすさ 同一ホスト内通信により遅延なし ECSのオーケストレーション機能 ECSのタスク数を増やすことで以下の機能が簡単に実現できる 自動復旧（つまり一つのタスクを停止してもすぐに自動復旧され…
インフラ インフラをやるとサービスが作れる インフラをやるとは サーバの構成を考え、OSやソフトウェアを入れて作る ネットワークの構成を考え、サーバをネットワークに接続する ネットワーク ネットワークを構築するとはVPCを作ること IPアドレスは2進数32…
設計周りは強くなりたいところ。 コンテキスト図は開発するシステムと関わる人を整理した図 ユースケース図は関わる人物がシステムで何をするかを整理した図 OpenAPIはWebAPIの定義を記述するための仕様のこと インテグレーションアーキテクチャはシステム間…
設計 SSRはシンプルだがUXを損なう恐れがあるため、SSG＋CSRがおすすめ SSG＋CSRはSSGで共通部分は先に表示させて必要な箇所はCSRで非同期で表示させる Pages Routerは安定しているが、App Routerはまだ不安定な所がある 今後はApp Routerが推奨されているも…
他人が書いたコードをどう読むか、参考になった。 準備 ドキュメントの査閲、開発者へのヒアリング、コードの実行、入力・出力・処理の想像の内、出来るものを行う 全体を把握する メイン部、データ構造(グローバル変数)を読み取る 入力、出力、処理の順番で…
概要 NoSQLとは非RDB ドキュメント型(JSON)で保存 集約(Aggregation)で複雑な集計が可能 インデックス利用可能 レプリケーション(データを複数のサーバで共有) シャーディング(スケールアウト(サーバを増やす)) RDBとの対応表 RDB MongoDB DB DB Table Colle…
環境構築 各コマンド // 雛形作成(xxxは雛形名) npx create-next-app xxx // 開発環境スタート npm run dev // 本番前のビルド npm run build // ビルドしたものが見れる npm run start VSCodeにNextjs snippetsを入れてnfでタイプ補完 開発 SSGはビルド時に…
結論 gh-pagesというnpmパッケージを使用するのが効率的。 ステップ1: GitHub リポジトリの準備 まずはプロジェクト用の GitHub リポジトリを作成する。既にリポジトリがある場合はそのリポジトリを使用してもOK。 ステップ2: ローカルプロジェクトの準備 プ…
フロントやるならReactやっとく。 全般 プロジェクトの作成 npx create-react-app xxx npm start React18の決まり構文 import { StrictMode } from "react"; import { createRoot } from "react-dom/client"; const rootElement = document.getElementById("…
つよつよエンジニアの思考法に触れられたのがよかった。 以下心得とします。 基礎の理解の徹底 一番重要な一つだけ 自分の作業をクリアに説明できる 主体的に動き楽しむ 定時で作業をやめる 専門性を高め批判をしない 参考文献 牛尾 剛 (著)/文藝春秋/2023/…
