2025-01-01から1年間の記事一覧
これまで、トップページ、投票ページを作成してきました。 で、投票ページには投票ボタンと投票結果を表示することにしたのですが、投票の候補者を追加できるようにする必要もあります。 今回はそのためのページを作成していくことにします。 候補者を追加す…
前回、投票ページのHTMLを作りました。 <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>投票ページ</title> </head> <body> <header> <h1>投票ページ</h1> </header> <main class="vote-main"> <table> </table></main></body></html>
前回言った通り、投票ページでは投票の項目を表すところと、投票の結果を表すところを作ります。 html-css-javascript.hatenadiary.com 投票結果はテーブルのような形になりますので、使うタグは<table>ですね。 <table> <thead> <tr> <th>順位</th> <th>候補者</th> <th>投票数</th> <th>投票ボタン</th></tr></thead></table></table>
前回まででトップページとそのヘッダーを作りました。 次はメインコンテンツである掲示板を作ります。 タイトルでもある投票型の掲示板です。 候補があって、候補の横に添えられている投票ボタンを押したら数値が増える、という感じで。 トップページでメイ…
さて、ここまででハンバーガーメニューのHTMLとCSSを書いてきました。 以下の通りです。 HTML <html lang="ja"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>投票ボタン付き 横棒グラフ</title> <link rel="stylesheet" href="style.css"> </link></meta></meta></head></html>
前回はハンバーガーメニューの骨子となるHTMLを作成しました。 <html lang="ja"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>投票ボタン付き 横棒グラフ</title> <link rel="stylesheet" href="style.css"> </link></meta></meta></head></html>
前回、ページのHTMLを作りました。 タイトル、投票する場所、リセットを作りましたので、今回はその投票する箇所を作っていくことになります。 まずはCSSでデザインを作り、そのあと投票を反映させるようにJavaScriptを作っていきます。 ヘッダーを作る まず…
前回も言ったとおり、まずは投票ページを作ります。 まずはHTMLとCSSから作ります。 HTML自体はそんなに難しくないと思います。 まずは大きく分けてみます。 タイトル 投票をするところ リセットボタン この三つだけ、ということになりますね。 骨組み とい…
前回までの記事で、サーバーを使った掲示板の作成までは終了しました。 で、今後の方針なのですが、いくつかルートがあります。 いくつかというか、二つですね。 一つはHTMLとCSSで掲示板の構成を書いていく。 もう一つはMySQLを勉強して、サーバーの知識を…
前回までで掲示板の骨子はできあがりました。 もくじの「バックエンドを使った掲示板」を見ていただければ、その変遷はわかっていただけると思います。 私もわからなくなるたび、これらの記事を見直すことになります。 で。 フロント側、サーバー側のコード…
掲示板のサーバーも（おそらく）今回で完成し、掲示板の骨子は完成します。 では、やっていきましょう。 バックエンド側のコード（Node.js) const express = require('express'); const cors = require('cors'); const app = express(); const PORT = 3000; …
前編はこちら。 この記事では前回の記事をよく出しますので、このリンク先はタブを消さないで適宜参照するとよいかと思います。 さて、前置きは置いといて、とっとと進めましょう。 まずフロントエンド側の全体のJavaScriptはこちら。 document.getElementBy…
さて、前回やっと掲示板が動くようにできました。 とは言ってもChatGPT先生が教えてくれたのをそのままコピペしただけですが。 そんなコピペしただけのコードを動かすのに必死になっていろいろ修正してたんだから死にたくなり笑えてきます。 さて、そんなCha…
今回は、掲示板を動かすコードを教えてもらい、実際に動かしてみます。 教えてもらったことを勉強して、「実は教えてもらったコードは間違っていました」では悲しすぎますので。 あくまで動かすだけですので、「fetch通信」みたいな用語は次回からやっていき…
基本操作まとめ 説明 コマンド リモートリポジトリをクローン git clone https://github.com/ユーザー名/リポジトリ名.git 作業ファイルをステージに追加 git add . 変更をコミット git commit -m "コミットメッセージ" GitHubにプッシュ（アップ） git pus…
前回の記事で、「Node.jsとExpressで使ってJSONを扱うAPI」に関する話をしました。 もっと正確にいうなら「Node.js + Expressで、JSON形式のデータをやりとりするAPI」と言ったほうがわかりやすいかもしれません。 JSONのNってnotation、つまり表記法って意…
とりあえずはフロントエンドで動作する掲示板を作ることはできたので、ここからはサーバーも使った掲示板の作成に入っていきたいと思います。 つまりやっとブログ名であるNode.jsを勉強していくことになります。 本来ならNode.jsを順番に勉強していくのが正…
HTML、CSS、JavaScriptだけだとフロントエンドの掲示板しか作れず、自分以外の人には見えない掲示板になってしまうので、Node.jsを使ってサーバーを作ります。 サーバーを使うことによって、ユーザーがフォームに書き込んで送信した内容はサーバーに書き込ま…
さて、前回の最後で２つの問題が生じていました。 1.エンターキーで送信されないこと 2.送信したあとも文字が消えないこと このふたつの問題に対処していきたいと思います。 但し、エンターキーの問題の方について記述したことは完全に無駄足ですので、暇で…
JavaScriptの常識シリーズ④。 addEventListenerです。 「何かをしたときに何かを起こす」ということはわかると思います。 では document.querySelector("form").addEventListener("submit", e => { e.preventDefault(); }); というような場合。 addEventList…
VS Codeを使う最大の理由はエメットなので、これをつかわないなんてとんでもないです。 Windows版 基本操作 操作内容 ショートカットキー Emmet展開 Tab（展開可能な略語の後） Emmet展開（改行で強制展開） Ctrl + Enter 連結要素（兄弟） +（例：div+p） …
VS Codeのショートカットキー一覧です。 何かをするのにいちいちカーソルを合わせにいったり右クリックをしたり、という手間もチリと積もればエベレストになるので、できるところはなるべくショートカットキーで。 特に覚えておいたほうがいいものは太字にし…
プライバシーポリシー 当ブログ（以下、「当サイト」といいます）は、訪問者の皆様のプライバシーを尊重し、個人情報の保護に努めています。 個人情報の収集について 当サイトでは、コメント欄やお問い合わせフォームなどで、訪問者の皆様から名前やメールア…
今回は③thisです。 なんかわかりそうでわかってなさそうでわかってるような気がするけど、という微妙な理解だったので、ここで確実に理解しておきたいと思います。 thisの基本 thisとは、もうそのまんま「こいつ」って感じです。 オブジェクトを指定してる中…
今回はアロー関数の話なんですけど、よくある「こう書けば省略できて便利ですよ」みたいな説明じゃなくて、もうちょっと直感で理解しやすい感じで話していきます。 タイトルにも書いている通り、アロー関数はJavascriptの常識です。 ただ、私、その常識すら…
辞書替わりのページです。 適宜参照してください。 Windows版 ✅ 基本コマンド 目的 コマンド 説明 Node.jsを起動 node 対話モード (REPL) を開始。Ctrl+C で終了 Node.jsをnodemonで起動 nodemon コード変更時、サーバーを再起動する必要がなくなる nodemon …
掲示板の書き込みフォームができたので、次は書き込んだ内容を反映させるようにします。 普通はサーバーに書き込んだ内容を送って、返ってきたものを掲示板に反映させるのですが、まずはJavaScriptだけを使ってサーバーは通さず反映させるようにしていきます…
フロントエンドのみの掲示板作成 バックエンドを使った掲示板作成 html-css-javascript.hatenadiary.com html-css-javascript.hatenadiary.com スマホファーストで投票ページを作成する html-css-javascript.hatenadiary.com html-css-javascript.hatenadiar…
JavaScriptの便利なところなのに、なかなか理解しにくいものにコールバック関数というのがあります。 どういうものなのか、ここにメモを置いておきます。 JavaScriptの常識というタイトルで書いてますが、おそらく私自身がわからない、忘れてるであろうこと…
はじめに 前回はAPIの役割についてお話しました。 送られてきたURLエンコード文字列のデータをJavaScript形式にして処理する、といった流れでした。 今回はAPIに実際にデータを送って、ちゃんと送られたか確認します。 やる内容は「名前を書いて送信する」だ…
