f@ctor

JavaScript関連のことを調べてみた2020年05月12日

JavaScript関連のことを調べてみた2020年05月12日
目次

SSR、SSG、Client Side Renderingの違いをまとめた

SSR、SSG、ClientSideRenderingの違いについて言語化。Next.jsチュートリアルの説明が個人的に一番わかりやすい。[Pre-rendering and Data Fetching](https://nextjs.org/learn/basics/data-fetching/pre-rendering)

## Client Side Rendering

「Client Side Rendering = SPA」の文脈で使われることが多い気がする。

ブラウザ上でJavaScriptを実行してDOMを生成、マウントし、コンテンツを表示させる。SPAアプリの場合、以下のような中身が空のHTMLファイルを使うことが多い。

“`index.html


sample




“`

上記のHTMLファイルはルートディレクトリ直下に置くのが普

元記事を表示

【意見募集】新発想？のフォームのセキュリティについて

Twitterのフォロワーさんと話していて、既にありそうだけど、もしかしたら使えるかもしれないフォームのセキュリティを見つけたので書いておきます。

例えば一般的なログインフォームはこんな感じですね？

“`php:index.php

EOM;
}else{
echo <<< EOM



元記事を表示

備忘録：イベントループ処理の理解に苦しんだ

# はじめに
初投稿です。
普段はJavaを使用して、Webアプリケーションの開発に携わっています。（２年ほど）
趣味で自宅でプログラミングをしているのですが、最近Javascriptでローカルサーバーが構築できることを知り、うきうき気分でNode.jsをインストールしました。
そこで最初につまづいたのが、このイベントループ処理という方式なので、備忘録的に残しておこうと思います。
※ 当方、まだまだ経験も知識も浅いため、間違っている点等があれば、遠慮なくご指摘ください。

# スレッドとイベントループ
今まで自分が使用してきたJava言語と何が違うのか、ざっくり違いを挙げていくと

**Javaはスレッドモデルである**
**Node.jsはイベントループ方式である**

– **並列**で処理するか、**並行**で処理するか
– **マルチスレッド**か、**シングルスレッド**か

というイメージです。
並列処理と並行処理の違いについては、以下の記事が参考になりました。
https://qiita.com/Kohei909Otsuka/items/26be74de803d195b3

元記事を表示

アニヲタWiki(仮)のメニューにランダムリンクを追加するユーザースクリプト あるいは過去のランダムリンク機能について

[アニヲタWiki(仮)]は雑多なWikiで、暇つぶしの読み物に使える。
本家？Wikipediaより砕けた文体でパルプっぽく読み流せる。

少し時間が空いたときなどに[中国史](https://w.atwiki.jp/aniwotawiki/tag/%E4%B8%AD%E5%9B%BD%E5%8F%B2)、[映画](https://w.atwiki.jp/aniwotawiki/tag/%E6%98%A0%E7%94%BB)、[mtg](https://w.atwiki.jp/aniwotawiki/tag/MtG)、[SCP](https://w.atwiki.jp/aniwotawiki/tag/SCP%20Foundation)、[秀逸な項目](https://w.atwiki.jp/aniwotawiki/tag/%E7%A7%80%E9%80%B8%E3%81%AA%E9%A0%85%E7%9B%AE)とかを読んだりする。
アンサイクロペディアよりは読みやすさ含めまだ[臨](https://zhongdanhai.hatenablog.com/entry/2019/11/1

元記事を表示

学習記録 #5　select option要素　submit等イベント後に選択肢をselected属性のあるoption要素に（元に）戻す

#行ったこと

– “`select“`, “`option“`要素の実装、修正

#困ったこと
モーダルの中に、
“`input“` 要素で記述式の質問回答欄を、
“`select“` “`option“`要素で選択肢の回答欄を実装。

回答を記入及び選択肢を選んだ後、“`submit“`等イベントを実行すると、
（モーダルを閉じるとともに）
“`input“`欄を空欄にし、“`select“`要素の表示を元に（選択される前の状態）戻したい。

うまく言語化が出来ておりませんが、コードは以下の通りです。

**HTML**

“`