つー｜Web開発 @tsb_code

@Parslay12 いえいえ。全然自分なんてまだまだです！ 家では少しの時間でもパソコンを触る習慣をつけて勉強するようにしてます。 ただモチベが上がらない時もあって困っているので、秘訣があればぜひ教えてほしいです。

Node.jsとHTMLでパスの意味が違うの知らなかった ・Node → / はPCのルート(絶対path) ・HTML → / はサイトのルート 同じ「/」でも意味が全然違う

@Parslay12 松井さん初めまして！ フォローありがとうございます！ こちらこそよろしくお願いいたします はい！勉強頑張ってます！

フロントの表示方法まとめ ・EJS（サーバーサイドレンダリング） →サーバーでHTML生成、res.render()で完成HTML返す、中小規模 ・JS（クライアントレンダリング） →ブラウザでHTML生成、fetchでデータ取得 ・React（モダンフロント） → JSの進化版、開発効率高い、主流 EJS勉強中✍️

お問い合わせフォーム作成 ・Node.js / Expressでフォーム送信処理 ・入力画面 / 確認画面 / 完了画面を実装 ・Nodemailerで管理者宛にメール送信 ・dotenv + .gitignore で認証情報を安全に管理 GitHub github.com/tsubasa-devx/c… #今日の積み上げ #学習記録 #プログラミング学習

簡単なToDoアプリ作成 ・ExpressでAPI作成 ・fetchでフロント連携 ・CRUD（追加・取得・削除）実装 GitHub github.com/tsubasa-devx/t…

学習記録✍️ Expressで簡単なToDoアプリ完成 ・GET /api/todos（一覧取得） ・POST /api/todos（追加） ・DELETE /api/todos/:index（削除） フロントはfetchで通信しDOM操作 フロントとバックの連携を少し理解 #今日の積み上げ #学習記録 #プログラミング学習

学習記録✍️ ボタン押下 → fetchでPOST送信 → サーバーで受け取り → 配列に追加 → 再取得して表示 ・body: JSON.stringify({ task }) →フロントからサーバーにデータを送る ・req.body.task →サーバーで受け取る データを渡す流れを理解した🙆‍♂️ #今日の積み上げ #学習記録

Expressメモ fetch = JSでサーバーにリクエスト送るやつ GET：取得 POST：送信 DELETE：削除 fetch → app.use(express.json()) form → app.use(express.urlencoded({ extended: false })) formは画面遷移するけど fetchは裏で通信できる

Node.js / Expressでクイズアプリ作成 ・POSTでanswer送信 → req.bodyで取得 ・スコアをURLで引き継ぎ ・hidden inputでスコアを引き継ぎ ・redirectで画面遷移 ちょうシンプルだけど、 Webデータの流れが理解できた！ 次はToDoアプリつくる #今日の積み上げ #学習記録 #プログラミング学習

Node.js / Express この3つをまずは自力で作っていこうと思う！ ① クイズアプリ ② ToDoアプリ ③ お問い合わせフォーム

<form action="/api/v1/quiz">送信先 ⇄ app .post('/api/v1/quiz')受け取る場所 この2つが一致すると、 リクエストが届いて処理が動く

Express フォーム送信 ①formのmethod ・GET：取得（URLに出る）/api/v1/quiz?answer=hello ・POST：送信（bodyに入る）req.body = {answer:"hello"} ②app.use(express.urlencoded()) ・ミドルウェア ・formデータを解析してreq.bodyに入れる ③req.body.answer ・inputのname="answer"の値を取得

Expressの基礎まとめ ・app.use() → ミドルウェアを登録する関数 → リクエスト〜レスポンスの間に処理を挟める ・express.static() → HTML / CSS / 画像などの静的ファイルを配信するミドルウェア ・path.join() → 今のファイル基準で絶対パスになる

Node.jsの基礎を復習中！ Node.jsでJSON扱うときは、 ・fs.writeFile →JSON.stringify()でObjectからStringに変換して保存 ・fs.readFile →JSON.parse()でString→Object に戻す fsは「文字列」しか扱えないので、Input/Output時の型変換は必須。 #今日の積み上げ #学習記録 #プログラミング学習

Electronで画像保存機能を実装 Playwrightで画像URL取得 → 保存先フォルダ選択 → ダウンロードまで繋げられた。 ・Electron dialogで保存先フォルダ選択 ・download.image({ url, dest })でurlの画像をdestに保存 オブジェクト.メソッド()がかなりでてきた。 使って自然に覚えていこ！

Playwright学習メモ const imgSrc = await imgLocator.evaluate((node) => node.currentSrc); PlaywrightのコードはNode.js側で動いている。 DOM(<img>など)はブラウザ側にあるため、直接アクセスできない。 evaluate()を使うと ブラウザ側でJSを実行→DOMの値を取得→Node.js側に返す処理ができる。

// renderer.js window.imgDl.fetchImgs(url); // preload.js contextBridge.exposeInMainWorld('imgDl', { fetchImgs: (url) => ipcRenderer.invoke('fetchImgs', url) }); // main.js ipcMain.handle('fetchImgs', (_e, url) => `got: ${url}`);

Electron学習メモ ・renderer：画面側(JS) ・preload：橋渡し ・main：アプリ管理/Node側 流れ：renderer → preload → main 返り値：main → preload → renderer

Electron学習メモ ElectronはHTML / CSS / JavaScriptでデスクトップアプリを作れるフレームワーク。 Main Process(Node.js)がアプリやウィンドウを管理し、Renderer Process(Chromium)がUIを表示する。 new BrowserWindow() を作ると新しいウィンドウとRenderer Processが生成される。