素のJavascript(Vanilla)だけでフロントエンド開発(01:目的、設定編)

このページでは、ReactやVueではなく、Vanillaと呼ばれる素のJavascriptのみで、フロントエンド開発が可能であるか?を解説します。今回は目的やサーバー設定について。

今回は、前回…

の続きになります。

目次

今回の課題のゴールは?

フロントエンド開発の目的(目標)を定めましょう。

また、Webサーバーを立ち上げ、JSONが使えるかを確認してみましょう。

目的(目標)を定める

ここでは、実際に作成する場合の目的(というか目標)を、ざっくり書いていきます。

こちらは、記事を書くに連れて、増えたり減ったりするかもしれません。
予めご了承ください。

  • SPAでもSSRでもないCSRを目指す
    • 画面遷移では別のhtmlファイルへ
    • 紙芝居で作った、個々のhtmlファイルにJavascriptを埋め込むようなイメージを想定
    • submitでの遷移は行わない
  • セッション管理はCookieで ⇒ 該当記事へ
  • DBへのアクセスはすべてAPIで
  • 確認画面は用意しない
    • 用意する場合の手法も考えてはみる(hidden地獄が待っている?) ⇒ 該当記事へ
  • 入力画面の照会モードも考えてみる(多分に無理) ⇒ 該当記事へ
  • 入力画面は明細行も考えてみる(行追加・行削除・修正画面の再表示) ⇒ 該当記事へ
  • 一覧画面も考えてみる ⇒ 該当記事へ
  • HEADタグ内の共通部分は個々に置くか、SSIを活用するか?は考える ⇒ 該当記事1 該当記事2
  • Javascriptは、その画面固有と、共通部分に分けて管理
  • この記事ではCSSフレームワークは考えない(CSSフレームワーク用のDIVやSPANがウザいので)

こんなところでしょうか。

Vanillaでは逆立ちしてもできない部分をどうするか?は先に決めておく

こちらは、前回の記事、

および、こちらの記事、

にて、考えておきます。

この記事以降の各テクニックについては、共通箇所について、HTMLの分割については考えず、ひとつのHTMLのみで対処することを前提に記していきます。

HTML5およびHTML Living Standardについて

まずは、ひな形のHTMLファイルを作りましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<body>
Hello world!
</body>
</html>

随分とシンプルなHTMLですが、これがイロハのイのようです。

以前であれば、もっと記載する情報が多かったはずですが、HTML5およびHTML Living Standardでは、記述が省略できます。
覚えておきましょう。

<!DOCTYPE html>について

これを先頭行に置くと、HTML5標準モード、これがないと互換モードと、ブラウザが認識します。

「lang=”ja”」および「charset=”UTF-8″」について

ブラウザによっては、こちらを省略すると、一部あるいは全部の日本語が正しく表示されないケースがあります。

とりあえずWebサーバー立ち上げ

Windowsの場合

Windowsの場合はこちらを参照してください。

【簡単】Windowsで簡易Webサーバを立ち上げる方法

Macintoshの場合

まずは導入確認

Macの場合は標準でApacheが入ってるはずです。

> httpd -v

でバージョンは表示されていればOKです。

> sudo apachectl start

で、開始します。
http://localhost/
で確認してみてください。

自分のユーザーで実行

まず、/etc/apache2/にあるhttpd.confを編集します。
コマンドラインのエディタに慣れていないければ、コマンド+iで鍵を外し、everyoneを読み書きできるようにすれば、お使いのテキストエディタで修正できます。
(終わったら戻してください。)

#LoadModule userdir_module libexec/apache2/mod_userdir.so

#Include /private/etc/apache2/extra/httpd-userdir.conf

のコメント(#)を除去します。

次に、/etc/apache2/extra/にあるhttpd-userdir.confを編集します。

#Include /private/etc/apache2/users/*.conf

のコメント(#)を除去します。

さらに、/etc/apache2/users/(Macのユーザー名).confを作成します。
(適当なconfファイルをコピペしても構いません。)

<Directory "/Users/(Macのユーザー名)/Sites/">
    AllowOverride All
    Options Indexes MultiViews
    Options +FollowSymLinks
    Require all granted
</Directory>

上記をコピペし、「(Macのユーザー名)」を変更してください。

自分のユーザーに「Sites」フォルダを作成します。
前章で作成したhello.htmlを置いておくと良いでしょう。

修正後はリスタートします。

> sudo apachectl restart

http://localhost/~(ユーザー名)/hello.html

で、表示されればOKです。

このlocalhostは、自分のMacのIPアドレスが分かれば、
http://192.168.0.x/~(ユーザー名)/hello.html

といったようにLAN内の、他のPCからもアクセスできます。

この記事以降の例題については、ユーザー名を前提にしたURLを使用していますが、どこでも動作するようには作成しています。

JSONファイルも置いてみる

JSONファイルをWebサーバーが認識するか?

下記のJSONファイルを、Site内においておきます。

{
    "id" : 1,
    "name": "xxx"
}

http://localhost/~(Macユーザー名)/test.json

で、表示されれば、問題はないと思います。
レスポンスヘッダーの「Content-Type:」は「application/json」になっているはずです。

Mac版はOK。
ただし、Windows版のChromeでは、ダイレクトに表示すると「application/json」になっていないようです。
しかし、fetch()で取り込むと、MacもWindowsも「Content-Type:」は「application/json」になっています。

JSONファイルがAPIで取り込めるか?

ついでなので、先程のJSONファイルがAPIとして取り込めるかを試してみましょう。
api_mockというフォルダを作成し、JSONファイルをそこに移動します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script>
async function getJSON() {
//const getJSON = async () => {

  // API実行
  let result = await fetch("api_mock/test.json", {
      method: "GET"
  });

  // JSONを取り出す
  let jsonData = await result.json();

  alert(jsonData.id);
  alert(jsonData.name);

  //console.log(jsonData.id);
  //console.log(jsonData.name);

}

// DOMコンテンツのロード完了時に実行
window.addEventListener('DOMContentLoaded', (ex) => {
  // JSONを取得
  getJSON();
});
</script>
</head>
<body>
</body>
</html>

http://localhost/~(ユーザー名)/test_json.html
でJSONの値がポップアップできたら、OKです。
(ソースの下にコンソール表示もありますので、コメントを外して実行してみてください。デバッグはどちらでも良いと思います。)

Javascriptの関数にasyncという見慣れないキーワードが付いていたり、awaitというキーワードが付いていたりしますが、とりあえずは、そういうものだと思ってください。

今後の記事で説明するかもしれません。

最後に

とりあえずはここまで。

次回は、Cookieおよびログイン画面の解説になります。

それでは、また。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA

目次