プログラミングの理解が遅すぎる初心者がJavaScript、Node.jsで投票型掲示板を作ろうとしてます

トップページでは記事の順番がごちゃごちゃなので、記事もくじをご覧いただければと思います。

【はじめに】初級者がウェブサイトを作るためのHTML、CSS、JavaScriptを勉強します※追記あり

突然ですが掲示板を作ることにしました。

理由は、完成したらわかると思います。

まあ「この用途で使用したい」と思う掲示板がまだ存在していないから、というだけの理由なわけですが。

なのでHTML,CSS,JavaScriptを勉強していきます。

が、

これらはプログラミング言語ではない

のだそうです。なんかマークアップ言語とかなんとか言語とか。

JavaScriptプログラミング言語だそうですけど、命令したらその通り動くのだから別にこだわらなくてもいいだろと思うのですが、そのへんをいい加減にするとhtml警察なんかが動くらしいので、めんどくさいからやめときます

 

とりあえずhtmlは骨組み、CSSは装飾、JavaScriptはそれらを動かす、くらいの認識でやっていこうと思います。

ここではあくまで「私自身が悩んだ」ところを書いて行こうと思います。

まあ要するに自分用メモです。

 

JavaScriptなどを勉強するとは書いていますが、本当に基礎の基礎の基礎みたいなところは省きます。

 

`const`とか`getElementById`とか。

 

さすがにこの辺りは「これから掲示板を作りましょう」という範囲からは逸脱していると思いますので。

 

といいつつ基礎であるはずの`addEventListener`とかはあまりよく理解してなかったので記事にしてますが。

 

※追記

というか、私がよく理解していないところが思ったより多く、普通の記事でもJavaScriptの基礎的なを結構書くハメになってしまいました。

appendとかinnerHTMLとかテンプレートリテラルとかクラスとコンストラクみたいな常識的な言葉も書いてます。

よくある普通の説明(クラスは設計図で、実体化させたのがインスタンスで…というアレです)では私自身が理解できなかったので、かなり他とは違う説明をしています。

 

この記事で、もう普通に「クラスとは」って項目がありますし。

 

分からない言葉なんかがあれば、右カラムにある「記事の検索」から探せば出てくる可能性も結構あるかと思います。

 

まあそんな感じで、言っちゃなんですが、私自身かなり理解が遅いタイプです。

その理解が遅いタイプの私でも、見返したらすぐに理解できるような書き方をしています。

 

基本はchatGPT先生に教えてもらおうと思っています。

結構間違えることもある先生ですので、あとから修正を加えたりすることもあると思います。

勉強したときのことも思い出すという目的もあって、あっちに行き、こっちに行き、とぐるぐる回っている様子も書いていくつもりです。

正直、まとまりは無いと言っていいでしょう。

ついでに言うと、詳細な説明が無いところもあります。

「とりあえずこんな感じで覚えておけばOK」みたいな感じで。

ただし、必要に応じてそういった説明も追加していきます。

 

なお、記事中にコードは書きますが完成図を書くつもりはありません。(いちいちスクショを撮って載せるのは面倒ですし。もちろん必要なときには載せます。)

なので完成図も見ていきたいという方は以下のサイトを使ってください。

コードを書いたら、そのまま完成図が見ることができるサイトです。

 

codepen.io

 

左側に「start coding」というのがあるので、そこで書けます。

サインアップしておくと、一度書いたものはセーブしておくこともできます。

 

ただし以下のことに注意してください。

 

HTML欄に書き込むのは bodyタグ内のみです。

 

headタグ内のものを書くとエラーが出ます。

 

headタグ内のものは以下のようにしてください。

 

  • CodePen エディタの上にある「Settings(設定)」ボタンをクリック

  • 「HTML」タブを選ぶ

  • 下の方に “Stuff for <head> という入力欄がある

この入力欄に書き込んでください。

 

使うエディターはVS Codeで。

code.visualstudio.com

エメット(コードを補完してくれるツール)が使えて便利なので。

あとCSS(サイトの装飾をするコードです)のときにもSassという便利な機能が使えますので。

 

それでは、よろしくお願いします。

 

※追記

掲示板を皆が使えるようにするには、サーバー側も設定する必要があるとのことで、Node.jsも勉強しないといけないとわかりました。

なのでそれも書いていきます。

 

※ブログタイトルはこれがわかってから変更しています。

「それも書いていく」というより、そっちがメインになっていきます。

Image