さて、今まで作ってきたのは管理者側のページでした。 候補者の名前や年齢、IDなんかも与えて登録するのは管理人がやることになります。 本当はそこもユーザーに任せてしまおうかと思ったりもしたのですが、二重で書き込んだり、「こういうのを書くのは禁止…
JavaScriptの常識シリーズ第７弾。 クラス、コンストラクタ、インスタンス。 葬送のフリーレンを読んでいるとわかりやすいかもです。 読んでなくてもわかりやすいとおもいます。 html-css-javascript.hatenadiary.com この記事ですでに実践しているんですけ…
ついに三部作が６作目まで来てしまいました。 ４作目のときに謝ったので、もう謝罪はしません。 前回の記事はこちら。 html-css-javascript.hatenadiary.com HTMLから送られてくる数値は、すべて文字列に変換されてしまうのが問題だというところまででした。…
三部作も早いもので、もう５作目まできました（これ如何に）。 前回はイベント委譲についてやりました。 html-css-javascript.hatenadiary.com もうタイトルでは何をやってたのか全くわからなくなってしまいましたね。 これ、どっかでタグ付けでもしておきま…
嘘ついてすいませんでした 三部作と言っておきながら、三つ目の記事ではまだ問題があったのでヌケヌケと４つ目に入ります。 html-css-javascript.hatenadiary.com 前回でも言いましたが、コード的には特に問題はありませんでした。 コードはこんな感じです。…
html-css-javascript.hatenadiary.com 前回まででコードの書き方は全て終わりました。 問題点 さて、ここまでをまとめてみます。 let candidates = JSON.parse(localStorage.getItem("candidates")) || []; document .getElementById("addCandidateForm") .a…
「配列の整列」は３部作になっています。 前回のはこちら。 html-css-javascript.hatenadiary.com 前回作ったコードが以下のようになります。 forEachを回すためにnewCandidateを変数candidateに置き換えました。 candidates.forEach(candidate=>{ const lis…
※本来は配列の整列は１記事で書くつもりだったのですが、寄り道やなんやと余計なことばかり書いてるせいで最終的に１６０００文字を超える大長編になってしまいました。 なのでいくつかに分けて投稿します。 では本編。 前回は投票ボタンを作って、それを押…
前回はローカルストレージに配列を文字列に変換して保存し、保存した文字列をキーで指定してロードして配列に変換しました。 html-css-javascript.hatenadiary.com で、こんな感じになりました。 let candidates = JSON.parse(localStorage.getItem('candida…
（今回は怪獣八号ネタです。） 本編を進めていくと、やっぱり「ここ、理解が足りてないな」と思うところがあります。 今回はevent.targetです。 あっさり行ける人もいるんでしょうけど、タイトルの通り私は理解が遅いのでここで一旦備忘録の記事を挿入するこ…
前回までで配列を作りました。 一応コードをここに書いておきます。 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.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を使ってサーバーを作ります。 サーバーを使うことによって、ユーザーがフォームに書き込んで送信した内容はサーバーに書き込ま…
