bodyに背景画像や背景色を挿入したものの、containerなどの要素の中も透過して画像や色を反映させたいと思った事はありませんか？

そんな時はrgba(255,255,255,0)と設定しましょう。
以下のようになります。

はじめに

新卒でウェブ制作会社に就職し、コードの量産に嫌気が差し営業に転職。
趣味で作りたいもののために勉強しているウェブエンジニアです、こんにちは。

今まではWordpressを使用しウェブサイトを作ってきましたが、ウェブサービスを作りたく思いバックエンドの勉強を開始しました。
その時、悩んだこと、作ったサービスを簡単に書こうと思います。

「PHP」を選択するか、あるいは「Laravel」選択するか

結果的にタイトルにあるようにPHPを選択しましたが、すごい悩みました。
というのもPHPはあまりいい噂を聞きません。
「やれ、古い」「やれ、汚い」挙句の果てに「オワコン」なんて言葉も見つけました。

それに比べてLaravelはかっこいい。
なんかモダンな香りがしますよね。
「PHP勉強してるより、Laravel勉強してる」の方がかっこいい。

形から入るタイプの私はすごい悩みました。
通勤電車中、仕事中、食事中、ずっと考えました。
考えて考えて考え抜いた結果、「とりあえず手を動かそう、早く作ろう」という結論に至りました。

そうすると環境構築するのも面倒くさいので、もうPHPでいいやと吹っ切れました。

結果的にPHPのことが良く知れたので正しい選択をしたと思っています。
たぶんLaravelの勉強の役にもたったんじゃないかと思い込むようにしています。

勉強開始～制作完了まで

言語選択に時間をかけ過ぎました。
勉強を始めてみるとPHPは確かに学習コストがそこまで高くなく、いい感じで進むので楽しく作成することができました。
学習期間は、ほとんど作りながらの学習だったので、2020年8月20日～2020年10月20日。
丸２か月かかりました。
結構かかりましたが、データベースとPHPをまるっと学べることができたので、有意義な時間でした。
作っているものが形になっていく過程は相変わらず、面白いですね。

ポートフォリオ投稿サイト

作ったのはポートフォリオ投稿サイトです。
機能は見ていただけるとわかりますが簡単にリスト化すると

• ログイン
• 投稿
• イイネ
• コメント
• 投稿削除
• ログアウト

こんな具合。
まあ、多くの投稿サイトと同じ機能を持っていると思います。

サイトは下記URLになりますので、よろしければ投稿してみてください。
またアドバイスもお待ちしております。ぜひとも、何卒。

ポートフォリオ投稿サイト

作ってみた感想と今後

とにかく物を作りたいという欲求を満たすことができました。
学習コストの低いPHPそういった入り口として非常にいい言語なのかもしれません。

ただ実力不足でサービスとしては物足りない部分も多く、例えばセキュリティー対策も最低限しかできていないですし、イイネ機能の非同期通信も結局、実装せずに満足してしまいました。投稿された画像の軽量化とかもしたかった。

そしてにより、作っただけのサービスになってしまいましたので、そこも反省材料として血肉にしていこうと思います。

次はLaravelを使用し、サービスとして確立できるものを作りたいと思います。

とある休日

娘（5歳）「パパ、今日はお休みだから一緒にゲームしよ？」

ワイ「ええで！なんのゲームする？」
ワイ「スーパー正男ブラザーズでもやろか？」

娘「ううん」
娘「コードジャンケンしよ！」

ワイ「なんや、その恐ろしそうな名前のゲームは。。。」

娘「なんか仕様を決めて、どっちが読みやすいコードで実装できるか勝負するの！」

ワイ「おお、ええで」
ワイ「流石に5歳児には負けへんで！」
ワイ「6歳児だと危ういけどな！」

娘「じゃあ、ママ」
娘「何か仕様をちょうだい！」

よめ太郎「ええで」

仕様: 数値を文字列に変換する

よめ太郎「仕様、考えたで」
よめ太郎「数値を文字列に変換する、っちゅう内容や！」

【いま考えた仕様書】

• とあるAPIから0〜2の数値が返ってくるとする
• 0〜2の数値は、ユーザーの申込進捗状況を表しているものとする
• 0〜2の数値は、それぞれ以下の状態を表している
  • 0 → 申込書到着
  • 1 → 申込手続中
  • 2 → 申込完了
• 画面上では、数値ではなく文字列として表示する必要がある。

上記の数値を、画面表示用の文字列に変換する処理を実装せよ。

ワイ「ほう・・・ユーザーの申込進捗状況ねぇ」
ワイ「要するに・・・」
ワイ「APIから0が返ってきたら、画面には'申込書到着'って表示する」
ワイ「APIから1が返ってきたら、画面には'申込手続中'って表示する」
ワイ「APIから2が返ってきたら、画面には'申込完了'って表示する」
ワイ「そのための、数値から文字列への変換処理を書けってことやな？」

よめ太郎「そういうことや」

ワイ「クッソ簡単やん」
ワイ「こんなん、誰が書いても同じやろ」

娘「言語はTypeScriptでいい？」

ワイ「ええで！」
ワイ「ほな勝負や！」

ワイのコード

ワイ「書けたで！」

wai.ts

const userStatuses: Array<string> = [
    '申込書到着',
    '申込手続中',
    '申込完了'
]

ワイ「↑こうや！」

よめ太郎「なるほどな」
よめ太郎「数値は0か1か2な訳やから」
よめ太郎「配列を用意しておいて、その数値でアクセスすればいいって訳か」

ワイ「せや」

wai.ts

console.log(userStatuses[0])
// -> '申込書到着'

console.log(userStatuses[1])
// -> '申込手続中'

console.log(userStatuses[2])
// -> '申込完了'

ワイ「↑こんな感じや！」

よめ太郎「なるほどな、シンプルやな」

5歳娘ちゃんのコード

娘「私も書けたよ！」

musume.ts

type ApiValue = 0 | 1 | 2
type DisplayText = string

const userStatusTextMap: Map<ApiValue, DisplayText> =
    new Map([
        [0, '申込書到着'],
        [1, '申込手続中'],
        [2, '申込完了']
    ])

娘「↑こんな感じ！」

よめ太郎「ほうほう」
よめ太郎「まずは・・・」

musume.ts

type ApiValue = 0 | 1 | 2

よめ太郎「なるほど」

型「APIから返ってくる値は、0か1か2のどれかやで！」

よめ太郎「↑ってことを表しているんやな」

娘「うん！」

よめ太郎「説明的でええやないか」
よめ太郎「ほんで、次の行は・・・」

musume.ts

type DisplayText = string

よめ太郎「string型に、別名を付けてあげてる訳か」

娘「うん！」

型「ここでのstringは、画面に表示するための文字列ですよ！」

娘「ってことを表現してみたの」

よめ太郎「ああー」
よめ太郎「単にstringだと、なんのための文字列なのかってことまでは分からへんもんな」
よめ太郎「せやから、もう少し意味のある型名を付けてあげた訳やな」
よめ太郎「素敵やん」
よめ太郎「そんで、その次は・・・」

musume.ts

const userStatusTextMap: Map<ApiValue, DisplayText> =
    new Map([
        [0, '申込書到着'],
        [1, '申込手続中'],
        [2, '申込完了']
    ])

よめ太郎「なるほどな」
よめ太郎「この・・・」

musume.ts

Map<ApiValue, DisplayText>

よめ太郎「っていう型がエエ感じやな」

型「APIから取得した値と表示用テキストの対応表ですよ！」

よめ太郎「↑こんな感じが滲み出てるな」

ワイ「ああ〜、そうか」
ワイ「Mapって対応表って意味やもんな」

娘「うん」
娘「それで、こんな感じで使うの」

musume.ts

console.log(userStatusTextMap.get(0))
// -> '申込書到着'

console.log(userStatusTextMap.get(1))
// -> '申込手続中'

console.log(userStatusTextMap.get(2))
// -> '申込完了'

console.log(userStatusTextMap.get(3))
// -> コンパイルエラー！！！

よめ太郎「おお〜」
よめ太郎「ApiValueの値を0か1か2に制限してあるから」
よめ太郎「3のぶんを取得しようとすると、ちゃんとコンパイルエラーが起きるんやな」
よめ太郎「ええやん」

娘「てへへ」

よめ太郎「こういうのも、型の旨みやもんな」

勝敗判定中

よめ太郎「娘ちゃんのコードは、全体的に説明的で良いな」
よめ太郎「コードを読んだだけでも・・・」

「こんな仕様書だったんやろな〜」

よめ太郎「っていうことが、なんとなく想像できるわ」
よめ太郎「このコードを後から保守する人も・・・」

保守担当「むむ？」
保守担当「Map<ApiValue, DisplayText>とな？」
保守担当「なるほど、これは・・・」
保守担当「APIから取得した値と表示用テキストの対応表ってことか」

よめ太郎「って感じで、型の意図を読み取りやすそうやな」
よめ太郎「修正フェーズや保守フェーズで価値を発揮しそうなコードやな」

娘「うん、そこは意識してみたよ」
娘「この部分のコードだけ読んでも、できるだけ意味や意図が分かるように、って」

よめ太郎「なるほどな」

娘「小さなプロジェクトなら、仕様書を全部読んで、コードも型も全部読んで」
娘「全部理解してから修正すればいいけど」
娘「大規模な案件だと、全ての仕様を理解して、全体のコードを読んでから修正するとか」
娘「頭がパンクしちゃうもん」

よめ太郎「まあ、できれば全体を把握した方がええんやろうけど」
よめ太郎「一部分だけを見ても分かりやすい、説明的な型やコードが書かれてると」
よめ太郎「あとから読む人は、すごく助かるよな！」

娘「そうだね！」
娘「型は、ドキュメントの役割もするからね！」

ワイ「（型はドキュメント・・・？）」
ワイ「（何を言うてんの・・・？）」
ワイ「（でも・・・）」
ワイ「せやな！型はドキュメントや！」
ワイ「（一応言うとこ・・・！）」

よめ太郎「かたや、やめ太郎のコードは・・・」

wai.ts

const userStatuses: Array<string> = [
    '申込書到着',
    '申込手続中',
    '申込完了'
]

ワイ「う〜ん、まさに」

型「APIから取得した値と表示用テキストの対応表ですよ！」

ワイ「って、型が語りかけてきてる感じがするな！」

よめ太郎「いやどこがやねん」
よめ太郎「どこから感じたねん」
よめ太郎「エスパーか」

ワイ「ぐぬぬ・・・」

よめ太郎「Array<string>という型から分かるんは」

型「文字列が入った配列やで」

よめ太郎「それだけやろ」

ワイ「確かに・・・」

結果発表

よめ太郎「ほな、結果発表するで」

ワイ「ワクワク・・・！」

よめ太郎「ようワクワクできるな」

ワイ「ぐぬぬ」

よめ太郎「勝者は・・・」
よめ太郎「娘ちゃんや！」

ワイ「まぁ、知ってたわ・・・」

よめ太郎「せやろな」
よめ太郎「勝因としては・・・」

• 型や命名で、できる限り仕様を説明していた

よめ太郎「ってとこやな」

ワイ「なるほどな・・・」
ワイ「型はドキュメント・・・」
ワイ「そういうことか・・・」

よめ太郎「しかも、型で書いた通りに実装せんと」
よめ太郎「エラーが出て前に進めない・・・」
よめ太郎「強制力のあるドキュメントやな」

ワイ「確かに」
ワイ「コメントはワンチャン間違っとるかもしれんけど」
ワイ「型は、間違っとったらコンパイルエラーで進めへんもんな」

よめ太郎「せや」
よめ太郎「テストコードと並んで、一番信頼できるドキュメントと言えるかもしれん」

まとめ

• 型の付け方で仕様を説明できると素敵やね
• 元々ある型に別名を付けて説明してあげるのもええね
• 型はドキュメント的な役割も果たすんやね

ワイ「↑こういうことやな！」
ワイ「これで、さらにコメントもちゃんと書けば」
ワイ「だいぶリーダブルなコードになりそうやな」

よめ太郎「せやな」
よめ太郎「あ！でも一点だけ・・・」

musume.ts

Map<ApiValue, DisplayText>

よめ太郎「↑ここは」

musume.ts

ReadonlyMap<ApiValue, DisplayText>

よめ太郎「↑こうの方がええかもな」

娘「あ、そっか」
娘「ReadonlyMap型のほうがよかったね」

よめ太郎「ReadonlyMapにしておけば、上書きできひんから・・・」

musume.ts

userStatusTextMap.set(2, '死亡')

console.log(userStatusTextMap.get(2))
// -> '死亡'

よめ太郎「↑こういう事故が防げるもんな」

娘「そうだね」
娘「それに・・・」

型「上書きする必要のない、読み取り専用の対応表やで！」

娘「ってことも伝わるしね」
娘「あー、そうすればよかったなぁ」

ワイ「そうかぁ」
ワイ「ってことは・・・ワイの勝ちかな？」

よめ太郎「いやちゃうやろ」

〜おしまい〜

ペンギンの「ペンペン」が現れて何かしゃべるところまで。#protoout #AR pic.twitter.com/mew6weQHUA

— 3do. (@3doHi) November 17, 2020

「イヤイヤ期」を解決する子育てサポートWebARアプリケーション

　現在、イヤイヤ期を迎えたこどもを持つパパ/ママ向けの子育てサポートWebアプリケーションを作成中です。

　試作の状態のため、「アプリケーションを作ろうと思った背景」や、「プロダクトの全体像」、「解決しようとしている課題とその狙い」などの詳細説明は、本記事では割愛しますが、制作の状況や、完成品はQiitaにも都度アップデート出来ればと思っていますので、ご興味あれば引き続き記事のチェックお願いします！

　ざっくり言うと、こどもの『ごはんのイヤイヤ（最後まで食べずに遊びたい）と、その後のお風呂のイヤイヤ（お風呂入りたくない）を、お風呂場にあるおもちゃのARコンテンツで解決したい』と思っています！

　現時点で出来ている下記2点までで、娘に使ってもらうテストをしてみましたので、その様子と、見えてきた改善点などを記事にしてみたいと思います。
・ARマーカーを読み取りマーカー上にモデルを出現させる
・モデルを画面に出現させたタイミングでmp3音源を再生する

娘に使ってもらい、その様子を観察した

１．使用感
　1才11か月の娘にはARの世界観を理解してもらえるか（怖がったりしないか）、反応が読めませんでしたが、スマホをかざすと、現実には存在しないペンギンが現れることにかなり興味を示し、楽しんでる様子でした！スマホの中を覗き込んだり、スマホの外からマーカーを直接見たりしながら、「現実にあるようで無い」世界観をニヤニヤしながら楽しんでいました。
　一方で、よっぽど楽しいのか何度も何度も「スマホをかずす」→「やめる」の繰り返しとなり、終わりのない感じになってしまいました。この点は、アプリケーションとしての「終わり」を準備してあげる必要性を感じました。

２．効果
　ペンギンのARが出現したタイミングで、アプリケーション内で流れる「●●ちゃん、お風呂に入ろう！」という音声については、「･･･お風呂」と小さな声で呟いていたので、「お風呂」というキーワードは認識してくれたと思います。さらに妻が「ペンペン(←我が家のペンギンの愛称)がお風呂で待ってるってよ～」と促すと、いつもよりスムーズにお風呂場に向かってくれました。そして、お風呂場にいるペンペンに対面したときは「あーペンペンだー！」と言って、嬉しそうにペンギンのおもちゃを手にしていましたので、お風呂に入りたくないという「イヤイヤ」の改善効果は、ある程度見込めるのではないかと思いました！
　ただし、初めてだったので、目新しもあり、良い反応を示したということもあると思いましたので、継続して利用してもらえるように、ペンギンだけでなく「今日は誰がお風呂で待ってくれてるだろう感」が必要な気がしました。

３．妻へのヒアリング
　娘の反応は結構いいね！という同じ評価をもらえましたが、下記3点の指摘ももらいました。
・ARモデルのペンペン(ペンギン)がリアルすぎてお風呂にいるおもちゃとギャップある。
・娘の操作だと、スマホが固定できずARマーカーの読み取りが途中で切れてしまうことが何度かあった。音声が途中で途切れてしまうと、「お風呂に入ろう！」というキーワードまで辿りつかない。
・うちの娘以外の反応も見てみた方が、色んな観点で評価できるのではないか。

ということで、今後考えたい対策

見えた課題	対策
ARが楽しくて終わりがない	音声再生が終わったらペンペン(←我が家のペンギンの愛称)が自ら立ち去るようにしたい
継続して利用してもらえるかわからない	ペンギンだけでないARモデルも準備したい
ARモデルのペンペンがリアルすぎてお風呂にいるおもちゃとギャップある	もう少しデフォルメされたペンギンのARモデルを探す
娘の操作だと、スマホが固定できずARマーカーの読み取りが途中で切れて、音声が途切れてしまう	対策検討中（持ちやすそうなカメラ型のスマホケース買ってみたので次はそれでテスト予定）
我が子以外のこどもの反応が悪い可能性がある	検証に協力してくれる人を探して、色んなフィードバックをもらう

今回は以上。引き続き頑張ります！

　とりあえずはベースとなる機能と簡単な検証は成功したとと思うので、今回見えた課題の改善に取り組み、より良いモノを引き続き目指していきたいです！！

続く。

自作PCの自動起動を好きにカスタムできる良い感じのアプリが無いので、自分で製作を考えている。試しにobnizを利用してWebアプリから電源ONを試作。　※今回は電源ONの代わりにLED点灯を試す。
ちょっと分かり辛いが、電源ONクリックするとLEDが１秒点灯して消える。

Webアプリ画面

曜日別に起動時間を設定したいので、曜日別時間設定画面を設けた。データベース保存はまだ実装出来ていない。CodePenはコチラから

コード

.html

<!DOCTYPE html>
<html lang="jp" >
<head>
  <meta charset="UTF-8">
  <title>HPC-accede</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css'>
</head>

<body>
<!-- 全体をVue.js有効にする -->
<div id="app" class="container text-white bg-dark p-1">

  <!-- タイトル -->
  <div class="row text-center">
    <div class="col-sm-6 mx-auto"><h1>HPC-accede</h1></div>
  </div>
  <!-- 設定 -->
  <div class="form-group my-3 mx-4">
    <div class="border-bottom col-sm-12"><h5>Obniz ID</h5></div>
  </div>
  <div class="form-group form-inline my-3 mx-5">
    <input v-model:value="ObnizID[0]" class="form-control" type="text" maxlength="4" style="width:80px;">
    <label class="control-label mx-2">-</label>
    <input v-model:value="ObnizID[1]" class="form-control" type="text" maxlength="4" style="width:80px;">  
  </div>

  <!-- 即時電源ON -->
  <div class="form-group my-3 mx-4">
    <div class="border-bottom col-sm-12"><h5>即時起動</h5></div>
  </div>
  <div class="form-group my-3 mx-5">
    <button v-on:click="PowerON" class="btn btn-success">電源ON</button>
  </div>

  <!-- 曜日指定 -->
  <div class="form-group my-3 mx-4">
    <div class="border-bottom col-sm-12"><h5>曜日別時間設定</h5></div>
  </div>

  <div class="form-group form-inline col-sm-12">
    <!-- 日曜 -->
    <div class="form-inline col-sm-4 mb-2">
      <label class="control-label mx-3">日曜：</label>
      <input v-model:value="WeekTime['Sun']" class="form-control" type="time" step="1" style="width:130px;">
    </div>
    <!-- 月曜 -->
    <div class="form-inline col-sm-4 mb-2">
      <label class="control-label mx-3">月曜：</label>
      <input v-model:value="WeekTime['Mon']" class="form-control" type="time" step="1" style="width:130px;">
    </div>
    <!-- 火曜 -->
    <div class="form-inline col-sm-4 mb-2">
      <label class="control-label mx-3">火曜：</label>
      <input v-model:value="WeekTime['Tue']" class="form-control" type="time" step="1" style="width:130px;">
    </div>
    <!-- 水曜 -->
    <div class="form-inline col-sm-4 mb-2">
      <label class="control-label mx-3">水曜：</label>
      <input v-model:value="WeekTime['Wed']" class="form-control" type="time" step="1" style="width:130px;">
    </div>
    <!-- 木曜 -->
    <div class="form-inline col-sm-4 mb-2">
      <label class="control-label mx-3">木曜：</label>
      <input v-model:value="WeekTime['Thu']" class="form-control" type="time" step="1" style="width:130px;">
    </div>
    <!-- 金曜 -->
    <div class="form-inline col-sm-4 mb-2">
      <label class="control-label mx-3">金曜：</label>
      <input v-model:value="WeekTime['Fri']" class="form-control" type="time" step="1" style="width:130px;">
    </div>
    <!-- 土曜 -->
    <div class="form-inline col-sm-4 mb-2">
      <label class="control-label mx-3">土曜：</label>
      <input v-model:value="WeekTime['Sat']" class="form-control" type="time" step="1" style="width:130px;">
    </div>
  </div>
</div>

<!-- CDN -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js'></script>
<script src='https://unpkg.com/obniz@3.9.0/obniz.js'>
</script><script  src="./script.js"></script>

</body>
</html>

script.js

// 任意の秒数待つことができる関数
const sleep = (msec) => new Promise(res => setTimeout(res, msec));
// Obniz関数
let obniz;

// Obniz呼び出し関数
const connect = function(func, ob){
  console.log(ob.connectionState);
  // Obnizへの接続を確認
  if (ob.connectionState === "connected") {
    func();
  } else {
    ob.on('connect', () => {
      func();
    })
  }
}

const app = new Vue({
  el: '#app', // Vueが管理する一番外側のDOM要素
  data: {
    // Vue内部で利用する変数定義
    ObnizID: ['0000', '0000'],
    WeekTime: [
      {'Sun':'00:00:00'},
      {'Mon':'00:00:00'},
      {'Tue':'00:00:00'},
      {'Wed':'00:00:00'},
      {'Thu':'00:00:00'},
      {'Fri':'00:00:00'},
      {'Sat':'00:00:00'},
    ],
  },

  methods: {
    // 関数はココに記述
    PowerON: function() {
      // LED ON
      // Obniz ID 指定
      let obnizid = `${this.ObnizID[0]}-${this.ObnizID[1]}`;
      console.log(obnizid);
      this.obniz = new Obniz(obnizid);

      let me = this; // thisを関数内で使えないので変数に代入
      // connect関数を呼んで、connect関数内で以下のFunctionを実行
      connect(async function() {
        const led = me.obniz.wired('LED', { anode: 0, cathode: 1 });
        me.obniz.display.clear();
        me.obniz.display.print('ON');
        led.on(); await sleep(1000); led.off();   // LED点灯 1s
        me.obniz.display.clear();
      }, this.obniz);
    },
  },
});

弟に使い勝手とかを聞いてみた

今回はLED点灯だが、完成後はPCが起動するようになるイメージを持ってもらったうえで使ってもらった。

操作面

• 初回実行時のLED点灯の動作がちょっとおかしい。　※コーディングミスってるかも。
• 初期設定（ObnizID）は別メニューの方が良いと思う。
• 電源ON を押したらすぐ起動しちゃうの？間違えて起動とか考慮したら？
• 毎日を同じ時間にしたい場合、一つずつ設定するのは面倒では？
• 電源OFF は出来ないんだよね？（聞いてみただけみたい。）
• この日だけ臨時で時間設定とか出来たら良いのでは？
• プリセット登録（パターンを予め設定できる）とかどう？

企画面

• 自作PCじゃないから使わないな。（自作PCでしか出来ない？）
• 同じ仕組みで遠隔起動出来ると良いかもしれないけど、思いつかないね。（私も思いつかない。）

なぜ自動起動したいか（補足）

PCでTV録画しているからって理由。毎日同じ時間で起動はBIOSで設定できるけど、もう少し起動時間をフレキシブルに変更したいっていう私のわがまま。

想定イメージ

今回はWebアプリとObnizの連携部分のみの実装。LED部分をリレーと置き換え、自作PCのPowerSWと置き換えてショートさせれば電源ON出来る想定。（たぶん。）

スコープってなに？

プログラミングにおけるScope（スコープ）とはある変数や関数が特定の名前で参照される範囲のことを言う。

要は今実行中のコードからその変数や関数が見えるか見えないか（参照できるかできないか）ということ

実際に見てみる

↓このコードを実行すると

main.js

{
  let a = 0;
  const b = function () {}
  debugger; //実行中のコード
}

変数aと関数bが参照できているのがわかる

---

↓次にこのコードを実行すると

main.js

{
  let a = 0;
  const b = function () {}
}
debugger; //実行中のコード

aとｂが参照できない・・・

つまり実行中のコード（今回はdebugger;）から変数や関数が見える範囲をスコープという

スコープの種類

JavaScriptには５種類のスコープが存在する。

• グローバルスコープ

• スクリプトスコープ

• 関数スコープ

• ブロックスコープ

• モジュールスコープ

グローバルスコープ

スクリプトファイル直下にvarやfunctionで定義するとここに入る

main.js

var a = 0;
function b() {}
debugger; //実行中のコード

スクリプトスコープ

スクリプトファイル直下にletやconstで定義するとここに入る

main.js

let a = 0;
const b = function() {}
debugger; //実行中のコード

グローバルスコープとスクリプトスコープはそのファイル内であればどこからでも参照可能。

関数スコープ

名前の通り、関数の中のスコープ。

その関数内であれば変数ｂが参照できることがわかります。

一方関数の外では参照できません。

ブロックスコープ

ブロックって？
↓これです

この｛｝の中をブロックスコープと言います。
記事の一番最初の例がブロックスコープの例となります。

if文やfor文の中で定義された変数もブロックスコープとなります。

もちろんこれらもブロック外からは変数を参照できません。

モジュールスコープ

モジュール（ESM）を使用した際にスクリプトスコープがモジュールスコープに切り替わる。
inport / export を使用しないと別ファイルの変数や関数を参照できない。

【JavaScript】基本的なモジュール（ESM）の使い方についてまとめ

レキシカルスコープ

これはどのようにしてスコープが決定するかの仕様のことです。

例として、まず関数f1を定義します。
その中に変数aを定義しています。

ここで1つの関数スコープができました。

main.js

const f1 = () => {
  let a = 0;
}
f1();

さらに関数f1の中に関数f2を定義します。

ここで関数スコープの中にもう1つの関数スコープができました

変数aを出力させ、実行します。
結果として、変数aの値を取得し出力されます。

main.js

const f1 = () => {
  let a = 0;
  const f2 = () => {
    console.log(a); // => 0
  }
  f2();
}
f1();

この時実行中の関数f2の外側にあるスコープから変数を参照しています。
この外側にあるスコープを外部スコープ（レキシカルスコープ）と言います。

また、このようにスコープが複数階層になっている状態をスコープチェーンと言います。

スコープチェーン

スコープが複数階層で、連なっている状態のこと。

スコープチェーンでは一番内側のスコープから順番に変数を取得していく仕様です。

main.js

let a = 0;
const f1 = () => {
  let a = 1;
  const f2 = () => {
    let a = 2; //     <-これ
    console.log(a); // => 2
  }
  f2();
}
f1();

main.js

let a = 0;
const f1 = () => {
  let a = 1; //      <-これ
  const f2 = () => {
    // let a = 2;
    console.log(a); // => 1
  }
  f2();
}
f1();

main.js

let a = 0; //        <-これ
const f1 = () => {
  // let a = 1;
  const f2 = () => {
    // let a = 2;
    console.log(a); // => 0
  }
  f2();
}
f1();

---

以上、スコープについてでした！
ここまで見ていただきありがとうございました。

はじめに

タイトルが全てです．
JavaScriptを使った開発中，FirebaseのFireStoreから受け取った値をsessionStorageに保存し，再利用するコードを書きました．
その際，エラーが出てかなり苦戦したので，備忘録を兼ねて記事を書きました．

出たエラー

コンソールには以下のようなエラー文が表示されました．

.toDate is not a function.

原因

sessionStorageに入れるためにTimeStampクラスのものをJSON形式にすると，出てきたものはただのObjectになるみたい．

toDate()メソッドはTimeStamp型にしか使えないので，エラーが出ていたみたいです．

対処法

原因が分かれば，対処法は色々あると思います．
自分の場合はsessionStorageに入れる前にtoDate()メソッドを用いて，JSのdate型に直してからsessionStorageに入れました．

終わりに

JavaScriptは変数の型を指定しないのでこういったエラーがよく起こりそう．気を付けねば……
とりあえず，

not a function

って出てきたときは，変数の型をチェックするのがよさそう．

以下の公式ドキュメントに沿って勉強しました
https://ja.reactjs.org/docs/hooks-intro.html

フックとは

登場当初のReactはコンポーネントをclassとして書いて、値をclassのsteteやpropとして管理するというお作法でした。しかしながら、javascriptのthisの挙動が他の言語と違っていたり、ステートフルなコンポーネントの使いまわしがやりにくかったり、その結果としてコードが冗長になったり多層に積み重なってとにかく辛い、という事になっていたのを解消するべく、関数として書けるようにしたのがフックだそうです。
https://ja.reactjs.org/docs/hooks-intro.html

元々のコンポーネントやprops, state, コンテクスト, ref, ライフサイクルについてはそのまま使えるように設計されていて変わるのは書き方だけであり、フックを実装済みのコンポーネントについてはclassで書いていたものと同じものをフックでも作れるし、その方が良いよという事のようです。
https://ja.reactjs.org/docs/hooks-faq.html

1. プロジェクトの作成

npx create-react-app my-appで作った新規プロジェクトのApp.jsを書き換えてやってみます。

npx create-react-appについては以下に書いたので省略します
https://qiita.com/studio_haneya/items/539adda6df7b7c909da6

2. ステートフック

コンポーネントのstatesを使えるようにするフックです

classで書いた場合

App.jsを以下のように書き換えます。constructorでthis.stateを定義して、button onClickでthis.state.countを1つずつ増加していくという書き方でした。

my-app/src/App.js

import React from 'react';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

export default App;

カウントアップするアプリになりました

フックで書く場合

上記をフックで書き換えると以下のようになります。useState()がconstructorの代わりをしてくれる関数で、const [count, setCount] = useState(0)と書くと、countという名前のstateの初期値を0として、setCount関数により更新しますという宣言になります。この初期値の代入はApp()が最初に呼ばれた時にしか実行されず、2回目以降では既に定義済みのcountというstateの値を参照するだけで、これをuseState()が上手くやってくれるわけです。

my-app/src/App.js

import React, { useState } from 'react';

function App() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

export default App;

2. 副作用(side-effect)フック

コンポーネント内部から外部データを取得する動作をReactでは副作用(side-effect)または短く作用(effect)と呼んでいるようです。

2-1. クリーンアップが不要な場合

例えば先程の例のようにbutton onClickで増えていくカウントを、本文中だけでなくサイトタイトルにも書き出したい場合、render()される度にdocument.titleを更新したくなります。

クラスで書く場合

これをクラスで書く場合、render()の度に呼ばれるクラスコンポーネントは存在しない為、以下のようにcomponentDidMount()とcomponentDidUpdate()に同じ内容を書くことになります。

my-app/src/App.js

import React from 'react';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  componentDidMount() {
    document.title = `You clicked ${this.state.count} times`;
  }
  componentDidUpdate() {
    document.title = `You clicked ${this.state.count} times`;
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

export default App;

副作用フックで書く場合

react.useEffect()内に書くことで副作用を仕込むことができます。useEffect()はカスタマイズしない限り初回のrender()時と更新がかかって再render()するときに実行されるので、更新がかかったらついでに何かをしたいときにうってつけのやり方になります。

my-app/src/App.js

import React, { useState, useEffect } from 'react';

function App() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

export default App;

2-2. クリーンナップが必要な場合

外部データを読みに行っているような場合はメモリリークが起こらない安全なやり方としてクリーンアップするやり方が推奨されています。これをフックで書く場合はクリーンアップする為の関数をuseEffect()の返り値にすると自動的に処理してくれます。

以下ではChatAPIという外部データ取得用のクラスが既に書かれている場合に、ChatAPI.subscribeToFriendStatus()で取得した値をChatAPI.unsubscribeFromFriendStatus()によりクリーンアップしています。

my-app/src/App.js

import React, { useState, useEffect } from 'react';

function FriendStatus(props) {
  const [isOnline, setIsOnline] = useState(null);

  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    // Specify how to clean up after this effect:
    return function cleanup() {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

  if (isOnline === null) {
    return 'Loading...';
  }
  return isOnline ? 'Online' : 'Offline';
}

副作用が実行される度にクリーンアップも実行される為、render()される度に実行されることになり、パフォーマンス上の問題が生じる可能性があります。その場合には、更新した場合に副作用の実行が必要な値を監視し、値の変化がない場合は副作用を実行しない、という形で負荷を低減することが出来ます。
https://ja.reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects

以下ではcountが更新されていない場合に副作用が実行されないようにしています

my-app/src/App.js

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]); // Only re-run the effect if count changes

3. その他フックAPI

useState、useEffect以外にもいろいろなフックAPIが用意されています
https://ja.reactjs.org/docs/hooks-reference.html

基本のフック

• useState
• useEffect
• useContext

追加のフック

• useReducer
• useCallback
• useMemo
• useRef
• useImperativeHandle
• useLayoutEffect
• useDebugValue

4. フックのルール

Reactフックが正常に機能する為には以下の2つのルールがあります
https://ja.reactjs.org/docs/hooks-rules.html

4-1. Reactの関数のトップレベルから呼ぶ

ループや条件分岐、あるいはネストされた関数内で呼び出してはいけない

4-2. Reactの関数から呼ぶ

通常のJavascript関数から呼んではいけない
(Reactの関数から呼び出すか、カスタムフックから呼ぶ)

eslint

上記をチェックできるようにしたeslintプラグインが公開されていて、create-react-appすると自動で適用されるようになっているようです。
https://ja.reactjs.org/docs/hooks-rules.html

5. カスタムフック

2-2ではAPIからユーザー情報を取得してOnlineなのかOfflineを返す関数を書いていましたが、これを1つのフックとしておいて使い回すことが出来ます。

import { useState, useEffect } from 'react';

function useFriendStatus(friendID) {
  const [isOnline, setIsOnline] = useState(null);

  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }

    ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
    };
  });

  return isOnline;
}

フックだと分かるようにuseStateやuseEffectのように、useから始まるカスタムフック名を設定するように推奨されています。
https://ja.reactjs.org/docs/hooks-custom.html

以下のように書けば同じロジックを複数のコンポーネントから使うことが出来ます。

function FriendStatus(props) {
  const isOnline = useFriendStatus(props.friend.id);

  if (isOnline === null) {
    return 'Loading...';
  }
  return isOnline ? 'Online' : 'Offline';
}

function FriendListItem(props) {
  const isOnline = useFriendStatus(props.friend.id);

  return (
    <li style={{ color: isOnline ? 'green' : 'black' }}>
      {props.friend.name}
    </li>
  );
}

6. まとめ

React用のライブラリのスニペットがフックで書かれていたり、フックに慣れてないとReactを使っていくのに支障が出るようになりつつあるようですので頑張って覚えていきましょう。

湯婆婆言語作ってみた

Qiitaで湯婆婆のセリフをいかに短く実装するかブームらしいので自作言語を作って
実装した話です
ソースコードはここにのってます
https://github.com/riya81/yuba

うぷ主の環境

• macOS Big Sur 11.0.1
• Node 12.16.3

手順
1. 自作言語の構文を考える
2. トランスパイル先の言語を決める
3. ファイルを読みこむ
4. トランスパイラを作る
5. トランスパイラをビルドする

手順は僕の他の記事に詳しく書かれているので省きます
この記事のソースコードを少し変えただけです
https://qiita.com/riya81/items/b1d5261205d13e4740cb

コマンド

y "名前";

これだけで湯婆婆を実装できます
この機能しかないです

まとめ

まとめることなんかほぼ無いうっすい記事ですが以上
湯婆婆言語を作った話でした

数MBくらいあるデータをリクエストボディに載せたいけど、少しは軽くしたいのでゴニョゴニョ。

JS側

import pako from 'pako'
import axios from 'axios'

const bigObject = { /* 超でかいObject */ }
const json = JSON.stringify(bigObject)
const gzipped = pako.gzip(json, { to: 'string' })
const base64Encoded = btoa(gzipped)
axios.post('/api/foo', { compressed: base64Encoded })

• JSONにする
• pako を使ってgzip圧縮する
• btoa() を使ってBase64エンコードする
• 文字列としてリクエストする

PHP側

$gzipBinary = base64_decode($_POST['compressed']);
$json = gzdecode($gzipBinary);
$data = json_decode($json, true);

• base64_decode() でbinaryにデコードする
• gzdecode() でgzipを解凍してJSON文字列にする
  • ext-zlib が必要
• json_decode() で配列にする

余計な処理は入るけど、リクエストボディが 1.5MB から 250KB くらいまでは小さくなったので満足。

Reactってなんだよ

javascriptの基礎を勉強し終えた「駆け出しエンジニア」がよく目にするjsフレームワークとして
"react","vue","Angular"...etc
などあるとおもいます。

でも結局のところ、「react,vue,Angular」って何ができるの？って思いますよね
（僕も今回の記事を書くまで人に説明できないレベルでした、、）

今回はそのjsフレームワークの中のReactについて説明したいと思います。

Reactの特徴３つ

１．リアクティブ！
「リアクティブ」は日本語に直すと「反応的な」という意味合いがあります。
その通りで、Reactで値を変化するとすぐにそれが画面上に表示されます。
今までは、

①エンジニアが値を変更する。→②表示の内容を変更させなければならない。
といった手順が必要でした。

そのReactによってその手間が省けます。
このことを仮想DOMなどと言われたりしています。

一応仮想DOMって何？っていう人は下記の記事をご覧ください。
・
・
・
Reactの仮想DOMとは何か？【仕組みをわかりやすく説明します】

２．大規模なアプリケーション開発に向いている

大規模のアプリケーションを運用するにあたって最も大事なところは運用です。

ページ数が膨大になればなるほど、機能の共通化を図らなければ、膨大な時間をテストや検証にあてなければなりません。

・管理しやすい設計
・カスタマイズしやすい
・複雑な機能に対応できる

という点で大規模開発に向いているといえます。
なのでより大きな会社で働きたいエンジニアにはReactはもってこいだと思います。

３．めちゃくちゃお得（一度かければ汎用性が高いので）
react.jsは一度習得すれば、Webアプリケーションだけではなく

・ネイティブアプリ（Android & iOSが一度にかける)
・VR（React VR)

といった
他のアプリケーションにReact.jsで学んだ事を転移できるので自分の領域が広がります。

ちなみに、僕のQiita処女作です

最後まで読んでいただいて本当にありがとうございます。

現在ぼくは関西の私立大学の文理融合学部に在籍しています。
Qiitaをやり始めたきっかけは、好奇心です。
アウトプットしたらエンジニアとして成長できるのかな？という疑問符の元はじめました。

「自分のアウトプットがが誰かのためになればなあ」ときれいごとながら思っています（笑）

また、自分が学んだことをアウトプットしていく中で
関西地方の大学生エンジニアや社会人エンジニアと仲良くなったりしていきたいなと思っています。

よろしければコメントよろしくお願いします！

参考

この記事はトラハックさんのYouTube動画（https://www.youtube.com/channel/UC-bOAxx-YOsviSmqh8COR0w）のアウトプット記事です。

とても参考になるので、大変助かっています?‍♂️

• Twitter：https://twitter.com/torahack_
• qiita：https://qiita.com/torahack
• github：https://github.com/deatiger

本題

ES6は何が起きたのか

ES6では多くの機能が追加されました。 下記はES6で追加された機能,構文の例です

• let,const
• アロー関数
• 分割代入
• class構文

などなど。簡単に言うとES6では便利な機能や構文が追加されたので、保守性が高く、可読性の高いコードを表現することができます。

今回は「変数」「定数」「関数」に絞って解説していきます！

変数と定数

これまでは変数を宣言するにはvarを使っていました。しかし、ES6以後でletという新たな変数宣言ができるようになりました。letを使うことで、varよりも保守性が高まります。

letを使うことで、無駄にスコープを汚染することなく宣言,代入することができます。下記はサンプルコードです。

const funcScope = (scope) => {
  if (scope === 'function'){
    var hoge = 'varで宣言しました'
  } else if (scope === 'block') {
    let foo = 'letで宣言しました'
  }
  console.log(hoge)
}

funcScope('function');
// => "varで宣言しました"

上記のようにvarで宣言した場合は、ブロックを超えて参照することができます。ではletの場合を見てみます。

const funcScope = (scope) => {
  if (scope === 'function'){
    var hoge = 'varで宣言しました'
  } else if (scope === 'block') {
    let foo = 'letで宣言しました'
  }
  console.log(foo)
}

funcScope('block');
// Uncaught ReferenceError: foo is not defined 

エラーが出てしまいましたね。

letはブロック（{}）内でしか参照することができないという特徴があります。ではでは、次にconstです。

constは定数を宣言するのに使われます。下記にサンプルコートを書きます。

const hoge = '定数です。'

再代入しようとしてみます。

const hoge = '定数です。'
hoge = '代入しようとしてみる'
// => Uncaught TypeError: Assignment to constant variable.

ちゃんと再代入できませんね。しかし、注意点が一つありまして、「配列」や「オブジェクト」の中身は変更することができます。下記のサンプルコード書きます。

const ary = [1,2,3,4]
ary.push(5)
console.log(ary)
// => [1, 2, 3, 4, 5]

ちゃんと配列に追加できていますね。次は、オブジェクトの場合です。

const obj = {
  name: 'おにかん',
  age: 20
}

obj.height = 170

console.log(obj)
// Object {
//  age: 20,
//  height: 170,
//  name: "おにかん"
// }

ちゃんと変更できていますね！

アロー関数の登場

アロー関数というのが登場しました。サンプルコードを下記に書いておきます。

const funcArrow = (text) => {
  return text
}

単純に受けとった値を返すアロー関数です。上記ように一行なら{}を省略して式を書くことができます。式なので return は書きません。

const funcArrow = (text) => text

さらに、引数がひとつであれば引数の括弧も省略できます。

const funcArrow = text => text

以上、簡単にですがまとめてみました。

問題

{JSON.WorkSheets.map((v, i) => (
   <FormControlLabel
     key={v.ID}
     //type int
     value={v.ID}
     control={<Radio />}
     label={v.Text}
   />
))}

JSON内のWorkSheetsという配列をmapで回して動的にラジオボタンを作っている感じですね。
しかし、これだとラジオボタンを選択しても実際に選択されることはありません。

解決方法

{JSON.WorkSheets.map((v, i) => (
   <FormControlLabel
     key={v.ID}
     //int to string
     value={v.ID.toString()}
     control={<Radio />}
     label={v.Text}
   />
))}

stringでないといけませんね。

概要

この記事では、JavaScriptのファイルのインポートやエクスポートについて、超基本的な知識をメモ的にまとめています。
自分用の備忘録なのであしからず。

今回使うコードの詳細はこの記事では、説明しません。
コードの詳細は以下の記事で解説しているので、興味があればご覧ください。

【JavaScriptの超基本】クラスの定義やメソッド・継承について簡単に解説

目次

• ファイルの分割
• エクスポート
  • 名前付きエクスポート
  • デフォルトエクスポート
  • 名前付きエクスポートとデフォルトエクスポートの違い
• インポート
  • 別名インポート
  • デフォルトエクスポートされた値のインポート
• 相対パス
• まとめ

ファイルの分割

コードが増えてくると1つのファイルで管理するのが大変になるため、複数のファイルに分けて管理します。
ファイルを分けて管理することでバグを見つけやすくなるというメリットもあります。

今回は、こちらの記事で作成したコードを分割して管理するようにしていきます。

まず、それぞれのクラスを定義するファイルとメインのプログラムを実行するファイルに分けます。

script.js

const forward = new Forward('Messi', 10);
forward.introduce();
console.log(forward);

barcelona.js

class Barcelona {
    constructor(name, uniformNumber) {
        this.name = name;
        this.uniformNumber = uniformNumber;
    }
    introduce() {
        console.log(`FC Barcelonaの背番号${this.uniformNumber}は${this.name}です`);
    }
}

forward.js

class Forward extends Barcelona {
    constructor(name, uniformNumber) {
        super(name, uniformNumber);
        this.position = 'FW'
    }
    introduce() {
        console.log(`FC Barcelonaの背番号${this.uniformNumber}は${this.name}です`);
        this.introducePosition();
    }
    introducePosition() {
        console.log(`ポジションは${this.position}です`);
    }
}

このような感じでファイルを分割しました。
ファイルを分割しただけだとエラーが起きてしまうので、それぞれのファイルを関連づけるためにファイルのエクスポートとインポートをしていきます。

※注意
ファイルをインポートしたりエクスポートしたりするには、ファイルをモジュール化する必要があります。今回詳しくは解説しませんが、JavaScriptを書いているファイルがあるフォルダ内に次のファイルを追加してくだい。

package.json

{
    "type": "module"
}

エクスポート

クラスや関数などを他のファイルで使うためには、まずそれらを定義した後に、そのファイルからエクスポート（出力）しないといけません。

エクスポートは、大きく「名前付き」と「デフォルト」の2種類に分類されます。

それぞれ見ていきましょう！

名前付きエクスポート

ファイル内で定義してあるクラスや関数、定数などはexport { 〇〇 }とすることでエクスポートすることができます。これを「名前付きエクスポート」と言います。

名前付きエクスポートでは、複数の値のエクスポートが可能です。
その場合、export { 〇〇, ×× }のように,で区切って書きましょう。

example.js

//定義
const 定数名 = ... ;
let 変数名 =  ... ;
function 関数名() { ... };
class クラス名 { ... };

//事前に定義された機能をエクスポート
export { 定数名 };

//複数の機能をエクスポート
export { 変数名, 関数名, クラス名 };

また、それぞれの機能は定義する際に個別に定義することもできます。

example.js

//定義と同時にエクスポート
export const 定数名 = ... ;
export function 関数名() { ... }

デフォルトエクスポート

もう一つのエクスポートの方法が「デフォルトエクスポート」です。
クラスや関数を定義した後にexport default 〇〇と書くことで、他のファイルでも使えるようにエクスポートできます。

example.js

//事前に定義された定数をデフォルトエクスポート
export default 定数名;

//事前に定義された関数をデフォルトエクスポート
export default 関数名;

デフォルトエクスポートは、名前付きエクスポートと同様に定義と同時にエクスポートすることも可能です。

example.js

//定義と同時にエクスポート
export default const 定数名 = ... ;

では、Barcelonaクラスをデフォルトエクスポートしてみます。

barcelona.js

//クラスを定義
class Barcelona {
    :
    :
}

//Barcelonaクラスをエクスポート
export default Barcelona;

エクスポートすることでBarcelonaクラスを他のファイルに渡す準備が整いました。

名前付きエクスポートとデフォルトエクスポートの違い

名前付きエクスポートは、エクスポートできるファイルの数に制限はありませんが、デフォルトエクスポートは、1ファイルにつき1つの値のみ使えます。

これはデフォルトエクスポートの性質に関連しています。
デフォルトエスクポートされたファイルをインポートするとexport default 〇〇と書いた〇〇の値が自動的にインポートされるという性質を持っています。

この性質から、エクスポート時の値とインポート時の値は、名前が異なっていても問題ありません。

インポート

エクスポートされた値をインポートするにはimport { 〇〇 } form “ファイルへのパス”と書きます。

複数の値をインポートする際は、エクスポート時と同様に{ }の中の値を,で区切って書きます。

example.js

//値のインポート
import {定数名} from "ファイルへのパス";

//複数の値のインポート
import {変数名, 関数名, クラス名} from "ファイルへのパス";

名前付きでエクスポートされた値は、このようにしてインポートします。

ファイル名は、基本的に相対パスで書きます。相対パスについては後ほど解説します。

別名インポート

エクスポートした値を別名（エイリアス）でインポートすることもできます。

その場合には、以下のように書きます。

example.js

//別名インポート
import { 〇〇 as エイリアス } form “ファイルへのパス”

別名でインポートした値を使いたい場合は、エイリアスを用いて使うことができます。

また、*を用いると任意のファイルでエクスポートした全ての値をインポートすることができます。
その場合は、as モジュール名としてインポートします。

構文は以下の通りです。

example.js

import { * as モジュール名 } form “ファイルへのパス”

インポートした値を使いたい場合は、モジュール名.〇〇のように書くことでインポートしたファイルでも使うことができます。

デフォルトエクスポートされた値のインポート

デフォルトエクスポートされた値を読み込む際は、import 〇〇 from “./ファイル名”とします。名前付きインポートとは異なり{ }が必要ありません。

先ほど説明したように、デフォルトエクスポートされた値の場合は、エクスポート時の名前とインポート時の名前は異なっていても問題ありません。（例えば、エクスポートしたファイルでは〇〇 という名前の値だが、インポートするファイルでは△△という名前にする）

先ほど分割したファイルに、エクスポートとインポートのコードを追加します。Barcelonaクラスはデフォルトエクスポート、Forwardクラスは名前付きエクスポートし、それぞれインポートします。

BarcelonaクラスはBarcaという名前でインポートします。その際、Barcelonaというクラス名はインポートしたファイルでは使えないので、クラス名をBarcaに書き換えます。

script.js

//Forwardクラスをインポート
import {Forward} from "./forward.js";

const forward = new Forward('Messi', 10);
forward.introduce();
console.log(forward);

barcelona.js

class Barcelona {
    constructor(name, uniformNumber) {
        this.name = name;
        this.uniformNumber = uniformNumber;
    }
    introduce() {
        console.log(`FC Barcelonaの背番号${this.uniformNumber}は${this.name}です`);
    }
}

//Barcelonaクラスをデフォルトエクスポート
export default Barcelona;

forward.js

//BarcelonaクラスをBarcaという名前でインポート
import Barca from "./barcelona.js";

//クラス名をBarcaに書き換える
class Forward extends Barca {
    constructor(name, uniformNumber) {
        super(name, uniformNumber);
        this.position = 'FW'
    }
    introduce() {
        console.log(`FC Barcelonaの背番号${this.uniformNumber}は${this.name}です`);
        this.introducePosition();
    }
    introducePosition() {
        console.log(`ポジションは${this.position}です`);
    }
}

//Forwardクラスを名前付きエクスポート
export {Forward};

この状態で「script.js」ファイルを実行すると正常に処理が実行されます。

相対パス

ファイル名の記述には、通常「相対パス」を用います。
相対パスでは、記述されたファイルから見た位置関係でファイル名を示します。

これまで書いてきたファイル名の前についている./は相対パスが書かれているファイルと同じディレクトリを意味します。

以下のようなフォルダ階層になっているとします。

test
├── script.js
└── class
    ├── barcelona.js
    └── forward.js

script.jsでbarcelona.jsを読み込みたいときは./class/barcelona.jsと書きます。

一つ上のディレクトリに移動するには../と書くことで指定することができます。
barcelona.jsでscript.jsを読み込みたいときは../script.jsと書きます。

まとめ

ファイルの分割は、実際にコードを書く際には非常に大事なのでエクスポートやインポートをしっかり理解しましょう。

最後まで読んでいただいてありがとうございます。では。

何番煎じかわからないネタをやります。

Q.なぜこんなことを？

流行りの湯婆婆にのっかりたかったんです。

Q.JSはみんなやってるよね？

はい、しかもすげーLTGMも稼いでるのでもう勝てないなって。
なのでIE11でも動くのをやってみようと思いました。

Q.IE11って需要あるの？

未だにIE対応が必要だと言われることがあるので、あと数年は需要があるかもしれない。
でも個人的には早く滅びてほしいと思っていますね(笑)

というわけでコード

JSのコード自体はワンライナーの体を保っている・・・はず。

湯婆婆.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>湯婆場</title>
    <script>
    (function(f){alert((function(f,n){return "フン。"+f+"というのかい。贅沢な名だねぇ。今からお前の名前は"+n+"だ。いいかい、"+n+"だよ。分かったら返事をするんだ、"+n+"!!"})(f,f[Date.now()%f.length]))})(window.prompt("契約書だよ。そこに名前を書きな。",""))
    </script>
</head>
</html>

ポイント

まず、一行で書いてしまったJSコードを一旦整形しましょう。

(function (f) { 
  alert(
    (function (f, n) { 
       return "フン。" + f + "というのかい。贅沢な名だねぇ。今からお前の名前は"
              + n + "だ。いいかい、" + n + "だよ。分かったら返事をするんだ、" + n + "!!" 
    })(f, f[Date.now() % f.length])
  )
})(window.prompt("契約書だよ。そこに名前を書きな。", ""))

真面目な書き方をするとこうなる

ワンライナーにするためにクソコードにしてしまった。
そしてこっちのほうが文字数が少ないとかいう問題にも目をつむってほしい。

// プロンプトで文字入力
const f = window.prompt("契約書だよ。そこに名前を書きな。", "");
// 時間使って疑似ランダム
const n = f[Date.now() % f.length];
// 結果表示
alert("フン。" + f + "というのかい。贅沢な名だねぇ。今からお前の名前は"
              + n + "だ。いいかい、" + n + "だよ。分かったら返事をするんだ、" + n + "!!" );

関数を作ってそれを即時実行

JSの関数を作って実行する場合には、だいたい以下のようにします。

function multiple(n) {
  return n * n;
}
const nn = multiple(8);

それを、以下のように書くことで即時に実行することができます。

const nn = (function(n) {
  return n * n;
})(8);

// ES2015だとここまで短縮はできる
const nn = ((n)=>n*n))(n);

正直、普通に書いたらいいじゃん、と思うでしょう。
本来はjQueryプラグインなんかを作るために多用していたテクニックです。

(function($){
  $.fn.myPlugin = function() {
    // ここにプラグインの中身を記載
  }
})(jQuyery);

こうすることで、window.onloadよりも前のタイミングでjQueryプラグインのロードを済ませつつ、
カプセル化を(一応)実現できるようになるのです。

要はclass構文がなかった頃のレガシーコードなので、使ってドヤらないように注意しましょう。

IE11では使えないJSの機能たち

JavaScriptにはES2015という規格があり、いろいろと新機能が追加されました。
しかしながら、IE11は中途半端に対応しているため動かない書き方が多数存在します。

アロー関数

アロー関数とは、関数定義を簡略化して記載するための記法です。
簡易的な計算を記載したり、コールバック関数としての記載をする場合によく使用します。

function(n) {
  return n * n;
}
// 下のように書ける
(n) => n * n;

なお、厳密にはthisの扱いが変わったりしますので、
なんでもかんでもアロー関数にしたらいいというわけではないので注意してください。

テンプレート文字列

テンプレート文字列は、CやJavaでのString.formatに相当する機能で、
文字列の中に変数を定義してテンプレートとして定義できます。

const name = "太郎";

let message = "こんにちは、" + name + "さん";

// これを以下のように書ける
let message = `こんにちは、${name}さん`;

ちなみに、アロー関数とテンプレート文字列を使うだけでも、ここまですっきりします。
(え、すっきりしない？)

((f) => alert(((f,n)=>`フン。${f}というのかい。贅沢な名だねぇ。今からお前の名前は${n}だ。いいかい、${n}だよ。分かったら返事をするんだ、${n}!!`)(f,f[Date.now()%f.length])))(window.prompt("契約書だよ。そこに名前を書きな。",""))

さいごに

短さや可読性は先人の方のほうが上ですので、真面目にJSの勉強をしたい方はそちらを参照しましょう。

IE11の対応を予定していない皆様はこの記事は幻のエンディングだと思って忘れるとよいでしょう。

PS追記

こんなんあったんか・・・
先走ってしまったので皆さんはきをつけてね。
https://qiita.com/advent-calendar/2020/yubaba

はじめに

今回は最近ちょいちょい使われているフロントエンドフレームワーク Svelte.jsについて解説します¹。
最近だと、ロイターの大統領選挙ページで使われてましたね。

Svelte.jsは速くて軽く、簡単に実装できるフレームワークです。

どうやら、React, Vue, Angular, Emberよりも速いらしいです！
https://svelte.dev/blog/frameworks-without-the-framework#Introducing_Svelte

Tutorialも充実しており、サイト上で実際に書きながら学ぶこともできます。

本記事はTutorialを触る前に、ざっと概要を学びたい方向けに書いてます！

YouTube動画

動画で確認したい方はこちらもどうぞ。
【YouTube動画】 VueやReactを超える！？ 次世代のフロントエンドフレームワーク Svelte.jsをご紹介！！

基本の書き方

それでは基本の書き方をみていきます。
Tutorialを始める前に、さらっと読んでおくと理解が捗ると思います！

変数の使い方

svelte.jsでは、scriptタグ内でletを定義するだけで変数として利用できます。

<!-- svelte.js -->
<script>
  let name = 'World';
</script>

<h1> Hello, { name } !! </h1>

Vue.jsで同じように出力しようとすると、以下のようになります。
svelteと比較して、記述量が多めです。

<!-- vue.js -->
<template>
  <h1> Hello, {{ name }} !! </h1>
</template>

<script>
export default {
  data() {
    return {
      name: "World"
    }
  } 
}
</script>

属性の使い方

属性の書き方も簡単です！
vueで画像を表示しようとすると次のようになります。

<!-- vue.js -->
<template>
  <img :src="image" alt='yassun youtube' />
</template>

<script>
export default {
  data() {
    return {
      image: "https://img.youtube.com/vi/rbhMST4A1Hs/0.jpg",
    };
  },
};
</script>

svelteだともっと簡単に書くことができます。
ちなみに、altを省略すると、A11y (Accessibility) の警告が出てきます。

<!-- svelte.js -->
<script>
  let src="https://img.youtube.com/vi/rbhMST4A1Hs/0.jpg"
</script>


<main>
  <img {src} alt='yassun youtube'>
</main>

styleの書き方

styleに直接記述するだけで、スタイルを当てることができます。
また、デフォルトでスコープがコンポーネント内になるため、クラス名の競合を意識しなくて大丈夫です。

<!-- svelte.js -->
<style>
  p {
    color: purple;
  }
</style>

<p>テスト！</p>

他コンポーネントの使い方

インポートするだけで使えます。

<script>
  import Nested from './Nested.svelte'
</script>

<Nested />

Reactive

on:イベントでイベント発火条件を書き、scriptタグ内のメソッドを呼び出すだけで、メソッドが使えます。
vueのようにmethodsを定義する必要がありません。

<script>
  let count = 0;

  function handleClick() {
    count += 1;
  }
</script>

<button on:click={handleClick}>{ count }</button>

preventDefaultやstopPropagationの追加もパイプで繋ぐだけで、簡単にできます。

<script>
  function handleForm() {
    console.log('handleForm');
  }
</script>

<form on:submit|preventDefault={handleForm}>
  <button>ボタン</button>
</form>

ある変数と連動して別のコードが動いて欲しい場合には、$:を使います。
例えば、scriptタグに以下のように書くと、countが変化した時にコンソールにログが流れます。

let count = 0;

$: console.log(`count: ${count}`);

変化するコードをグルーピングしたい場合は{}で括ります。

let count = 0;

$: {
  console.log('hello');
  console.log(`count: ${count}`);
}

ifで別途、コードが連動する条件を指定することもできます。
以下の場合は、countが2以上になったら、動きます。

let count = 0;

$: if (count >= 2) {
  console.log(`count: ${count}`);
}

props

propsはscript内でexportするだけで、別のコンポーネントで使えるようになります。
exportする際にデフォルト値を指定することもできます。

<!-- Child.svelte -->
<script>
 export let answer;
</script>

<p>{ answer }</p>

<script>
  import Child from './Child.svelte'
</script>

<Child answer={10} />

slot

slotはこんな感じで入れます。

Comp.svelte

<div>
  <slot></slot>
</div>

App.svelte

<script>
  improt Comp from './Comp.svelte'
</script>

<Comp>
  <div>スロット</div>
</Comp>

if

if文はこのように書きます。
/ifでif文の終わりを決めます。

{#if count > 10 }
  <p>Big!!</p>
{:else if count > 5 }
  <p>Medium</p>
{:else}
  <p>Small</p>
{/if}

await

awaitはif文と似たような感じで書けます。

{#await promise}
  <p>waiting...</p>
{:then number}
  <p>number is {number}</p>
{:catch error}
  <p>{error.message}</p>
{/await}

loop (each)

for文に慣れていると間違えそうですが、cats as catというように、各要素はasの右側に書きます。

{#each cats as cat, i}
  <div>{i}-th cat is {cat}</div>
{/each}

bind

bindはvueっぽく書けます。

<input bind:value={name}>

Lifecycle

ライフサイクルのメソッドは以下のように、svelteからインポートして使います。
onMount, onDestroy, beforeUpdate, afterUpdate, tickなどが用意されています。

<script>
  import { onMount } from 'svelte'

  let test = '';

  onMount(async () => {
    test = await somePromise();
  })
</script>

<p>{ test }</p>

Store

storeもsvelteに入っているため、以下のようにして使うことができます。
writable(0)をセットすることで、値のupdate, set, subscribeが使えるようになります。

他にもsvelte/storeには、読み込み専用のreadableや別のstoreを使って新しくstoreを作るderivedなどがあります。

import { writable } from 'svelte/store';

export const test = writable(0);

test.update(n => n + 1)
test.set(x)
test.subscribe(value => {})

{ $test }

以下のようにメソッドを制限したカスタムstoreを作成することもできます。
ここら辺の詳しい話もTutorialに詳細があるので、ぜひ確認してみてください。

function createCount() {
  // writable(0)をセットし、メソッドを呼び出す
  const { subscribe, set, update } = writable(0);

  return {
    subscribe,
    // 値を1だけ増やすメソッドを設定
    increment: () => update(n => n + 1),
    // 値を1だけ減らすメソッドを設定
    decrement: () => update(n => n - 1),
    reset: () => set(0)
  };
}

おわりに

Svelte.jsを試してみたくなりましたか？
簡単に始めることができるので、ぜひ試してみてください！

Tutorialはこちら
https://svelte.dev/tutorial/basics

自由に触りたい方は以下の方法もオススメです！
Svelteの公式ページでREPLを試す。
https://svelte.dev/repl

CodeSandboxのSvelte.jsのテンプレートを試す。
https://codesandbox.io/dashboard/home

npxでローカルにインストールして試す。
https://svelte.dev/blog/the-easiest-way-to-get-started

---

1. 公式サイトでもフレームワークと名乗っているので、フレームワークという語を使います。https://svelte.dev/blog/frameworks-without-the-framework#Introducing_Svelte ↩

Mapオブジェクトを初めて使ってみたので、備忘録として簡単に残します。

Mapオブジェクトとは

ES2015(ES6)から導入された、キーと値の組み合わせを保持することができるオブジェクト。

• 参考リンク
  MDN - Map() コンストラクター
  Qiita - JavaScript　Mapオブジェクト

今回のコード

KillerQueen.js

const sutandoTsukai = ["Jyosuke", "Okuyasu"]
const fromKira = ["Jyosuke 2", "Okuyasu 6", "Okuyasu 3", "Jyosuke 4"]
const dict = new Map()

for (let i = 0; i < sutandoTsukai.length; i++) {
    dict.set(sutandoTsukai[i], 0)
}

for (let j = 0; j < fromKira.length ; j++) {
    const target = fromKira[j].split(" ")[0]
    const damage = Number(fromKira[j].split(" ")[1])

    if (dict.get(target)) {
      dict.set(target, dict.get(target) + damage)
    } else {
      dict.set(target, damage)
    }
}

console.log(dict.get(sutandoTsukai[0]))
console.log(dict.get(sutandoTsukai[1]))

ジョジョみあふれるコードです。

これは吉良吉影 VS 東方仗助＆虹村億泰戦の際、四部ボス・吉良に受けたダメージについて
人ごと（スタンド使いごと）にデータを持たせて値を更新⇒最後に表示って流れですね。

配列fromKiraの各値は"名前、ダメージ量"を表しています。

流れを簡単に説明

Mapオブジェクトdictを作成（中身はまだ空）

const dict = new Map()

dictの値として配列sutandoTsukaiの各値（＝各キャラの名前）、ダメージの初期値0をセット

for (let i = 0; i < sutandoTsukai.length; i++) {
    dict.set(sutandoTsukai[i], 0)
}

配列fromKiraについて、まずはキャラの名前・ダメージ量を変数に振り分ける

• 文字列.split(" ")により、スペースを区切り文字として文字列の配列に分割する
• キャラの名前：target／ダメージ量：damageにそれぞれ格納
  （damageは計算するため数値として扱う＝Number()を忘れずに）

for (let j = 0; j < fromKira.length ; j++) {
    const target = fromKira[j].split(" ")[0]
    const damage = Number(fromKira[j].split(" ")[1])

    if (//下記で説明
    }
}

fromKiraの各値を元にdictの値を更新
（吉良の攻撃ごとに、攻撃されたスタンド使いのダメージを増やすッ！）

    if (dict.get(target)) {
      dict.set(target, dict.get(target) + damage)
    } else {
      dict.set(target, damage)
    }

① まずdictオブジェクト内のtargetの値を確認
　存在する場合はTrue、0の場合はFalse
⇒ 最初はJyosukeもOkuyasuも初期値0なのでfalseになる

② Falseの場合：elseに入りtargetの値を今回のdamageに更新（set）
⇒ {Jyosuke=> 0}だったのが{Jyosuke=> 2}に変わる

③ Trueの場合：targetの値について、元の値＋今回のdamageを足したものへ更新（set）
⇒ {Jyosuke=> 2}にdamageの4をプラスして{Jyosuke=> 6}に変わる

※ dict.set内のdict.get（target）にて、元の値を取得（get）しています。

console.log(dict.get(sutandoTsukai[0]))
console.log(dict.get(sutandoTsukai[1]))

あとは、各スタンド使いごとの更新後のダメージ値を表示するだけ。

どうでしょう
なんとなくイメージできたのでは？

---

将来的にはこのコードの中に、「クレイジーダイヤモンドが億泰の傷を治す」アクションとか入れたいッスね。
スタンド使いを増やして遊んでみてもいいかも。（康一くんとか、露伴先生とか）

（ただクレイジーダイヤモンドは本人（仗助くん）の傷は治せないんだ・・・なんて優しいかっこいい・・・。ロジックはちとややこしくなる！？ｗ）

おまけ情報

配列に変換

Mapオブジェクトを配列に変換したい場合は、Array.fromで簡単にできるようです。
sortしたい時とかよさそう。

const arr = Array.from(dict)
console.log(arr)
// [[Jyosuke, 6], [Okuyasu, 9]]

forEach()を使う時

Mapオブジェクトに対してforEachで繰り返し処理を行う時、
引数の順は（key, value）ではなく（value, key）とするようです。
（完全にkey,valueの順だと思っててつまづいた・・・）

その他色々やり方があるみたいなので、詳しくは下記を。

MDN - Map.prototype.forEach()

---

※ ちなみに、Mapオブジェクトはそれ自体がイテレータなので
　for of 構文でループさせることができるようです。

JavaScriptで連想配列を利用する際にObjectではなくMapを使うメリット

あとがき

mapオブジェクト、グレートですよこいつはァ！
ジョジョ四部の仗助くん＆億泰コンビが好きすぎてつい書いてしまいました。

ネタが全く分からなかった人はジョジョ四部原作、もしくはアニメをお勧めいたします。
今回も読んでいただき、ありがとうございましたァン！

_{原本：KO-DEV-JP, [VUE]SPAウェブフロントエンド開発ためのまとめ}

目標

本ポスティングではSPA_{Single Page Application}開発に先立ってSPAについての理解およびJavaScriptのフレームワーク「Vue」に対する基本的な理解を目指したいと思います。MPAウェブサービスやMVCパターンに対する基本的な理解を元に作成することになりました。

目次

1. JavaScript Frameworkの使用背景
2. MPAからSPAまで
3. SPAルーティングに対して
   ①Link方式
   ②Ajax方式
   ③Hash方式
4. JavaScript Frameworkの主な活用の要素
5. VUE
6. 主要ライブラリ
   ①VUE Router
   ②VUE CLI
   ③Vuex
   　(1)Stateとは
   　(2)State管理の必要性
   　(3)構成要素
   　(4)State、Getters、Actions、Mutaitions
   　(5)レンダリングパフォーマンスについて
7. まとめ

1. JavaScript Frameworkの使用背景

JavaScriptのフレームワークが登場する前には、vanilla JSやjQuery^*1をフロントロジックで活用して具現しました。JavaScriptフレームワークはフロントエンドの開発が複雑化によって登場することになりました。

JavaScriptフレームワークを活用すると、SPA_{(Single Page Application)^*2}など高級ウェブアプリケーションを開発するのにもっと容易します。

^*1 _{jQuery：簡単にDOMを操作するためのライブラリ}
^*2_{SPA：単一ページのアプリケーション(Single Page Application)の形でウェブを開発することを意味、詳しい内容は2番を参考}

2. MPAからSPAまで

既存のMPA_{(multiple-page application)}ウェブサービスは、クライアントのリクエスト_requestがある際ごとにサーバからリソース_resourceとデータを受け取って、画面に新たにレンダリング_renderingをするやり方でありました。 リンク<a href="#">をクリックすると、該当ページに移動することになり、明示されている資源をサーバーに要請して回答を受けてきます。
このように、MPA方式は各ページごとにサーバ側でhtml文書を要請するために重複されるデータを受け取るしかありませんでした。

一方、SPAウェブサービスは、上記のような既存のウェブサービスの限界を補完します。 最初のロード時、全体ページをロードした後からは、既存のページと比較して更新が必要な特定の部分だけをjsonの形でデータを持ってきてバインディング_bindingします。
したがって、SPA方式はAjax_(3番参照)にデータを持って来てから必要な部分だけ更新するようにJavascriptを作成します。

3. SPAルーティングに対して

*ルーティング_(Routing)とは。
データを送ることが最適の経路を選択する過程で、与えられたデータを最適化された形でやり取りできる経路を選択する過程です。

①リンク方式(伝統的方式)

リンク方式は下記の過程を含んでいます。

(1) link tag(<a href="#">)のクリック
(2) URLのpathにhref属性_attribute値であるリソースの経路が追加
(3) ブラウザのアドレスバーにpath値を表示
(4) 該当リソースをサーバに要請

クライアント側で(1)~(4)を経ることになると、サーバ側からでは完全なリソースをhtmlの形で回答します。 また、ブラウザ側ではこのhtmlを受けてレンダリングします。 前のページから新たに受けたページまで転換するやり方は、全体のページを再びレンダリングする方式であります。それで、リロード_reloadが発生してヒストリー_historyが残り、前のページに戻ることができます。 この時、クライアントのリクエストごとに重複されたHTMLとJavaScript、CSSについてももらってこなければならないので、パフォーマンスにあって損害がある可能性があります。

_{出典:ASP.NET–Single-Page Applications / 伝統的なページ寿命周期}

②AJAX方式

これを補完するため、JavaScriptで非同期_Asynchronousにサーバとブラウザがデータを交換できる通信方式を活用することになり、この通信方式をAJAX_{Asynchronous JavaScript and XML}と言います。

ページでアップデートが必要な部分だけをロードした後に更新して、リロードしなく不必要なリソースの重複要請を防ぐするので、パフォーマンスにあってもっと優れています。データ部分が空白であるhtmlをサーバーから受け取って、ページロード時JavaScriptでデータを持ってきて満たして入れます。

_{出典:ASP.NET–Single-Page Applications /SPA寿命周期}

この時、AJAXはURLを変更させないので、アドレスバーの住所が変更されません。 これはブラウザの履歴_historyを管理することができないし、前のぺーじでもどることもできないことを意味します。 (このほかにもSEOに対してもよくないです。)

③HASH方式

上のAJAXを補完するため、登場したクライアントルーティング方法がHashです。

Hash方式は、Anchor Tagを使う方式で、link tag(<a href="#hash">など)のhref属性にhash(#)を使用します。 クリックする際に文書で#の後に付けているidを持った要素に移動します。

同一のURLでHashが変更された場合
ブラウザ側ではこれをURLが変わったものと認識するが、実際にクライアント側でサーバ側にリクエストを送ったりはしません。 Anchorでウェブページの内部での移動を向けたものだからです。要請をしないため、ページの更新はありませんが、ページがそれぞれの固有のURLを持つので、ヒストリー_historyを管理することができます。

上記の3つの方式のほか、PJAX_{(html5 pushState+ajax)}もあります。

4.Javascript Frameworkからの主な活用点

• ルーティング
  :公式的なルーティングライブラリが提供されています。

• テンプレート
  :レンダリングされたDOMの上に基本インスタンスのデータを宣言的にバインディングがすることができるHTML基盤テンプレート言語を使えます。
  _{(この部分はdJangoとも似ていたと思います）}

• コンポーネントの再利用
  WebコンポーネントはWebページとWebアプリケーションの間でカプセル化された再使用ができるHTMLタグを生成することができます。
  
  

5.VUE

仮想DOMを活用できるし、DOMを使って全ての要素をリアルタイムでの反応型コンポーネントで製作することができるJavascriptフレームワークです。 通常、プロジェクトの規模が大きくなるほど、様々な形のコンポーネントが生成されるために、これを管理するのに役立つルーティング管理およびグローバル状態を管理するライブラリなどを提供します。

• 他のフレームワークとの比較(公式ドキュメント)
  
  

6.主要ライブラリ

①VUE Router

Vueを利用してSPAウェブを構築する際には、ルーティング制御を向けた公式プラグインです。

• VueRouterを利用してURL・ヒストリーを管理することができます。
• ブラウザで뒤로 가기及び앞으로 가기動作をできるようにしており、これは使用性を向上させることができます。

[ルーティングを定義する形式]

//views/Home.vue(テンプレートの構成要素)<template>
  <div class="home">
    <h1>Home</h1>
  </div>
</template>

//src/router.js(ルーティング定義)import  Vue  from  ' vue ' 
import  Router  from  ' vue-router ' 
import  Home  from  ' ./views/ '

Vue . use ( Router )

export  default  new  Router ({ 
  mode :  ' history ' , 
  routes :  [ 
    { 
      path :  ' / ' , 
      name :  ' home ' , 
      component :  Home} 
  ] 
})

以後、リンクと定義する際には、テンプレートの下記のような構文を挿入して使用することができます。

<router-link to="/">Home</router-link>

②VUE CLI_{Command Line Interface}

Vue-cliにコマンドを実行すると、cliが自動的に最適化された、プロジェクトの基本骨格を生成します。 だけでなく、下記の設定が可能です。

• Vueプロジェクト生成
• Vueライブラリ管理
• Vueの配布ファイルの設定:最適化されたWebpack^*1形の結果物を生成します。
• Vue GUI提供

^*1_{Webpack:JS、CSS、イメージを一つのJSファイルで縛りつけられるモジュールです。 開発者が作成したJSとプロジェクト内の必要なライブラリをロードするJS、作成したCSSファイルとイメージファイルまで整理することができます。 イメージファイルの場合、DataURI(Base64形式)に変換してJSファイルに整理します。}

^{*dJangoでプロジェクトを生成して、ライブラリを管理して、配布時に静的ファイル管理を提供したものと類似した感じ}

③Vuex

Vueコンポーネントで活用することがデータを管理することを目的とする、ステート_State管理ライブラリです。

1)Stateとは

_{*公式文書でstateデータ管理を状態のパターンに翻訳をしておいて、多くの部分がこんがらがったところ(デザインパターン中にステートパターンを融合させたと)で、mutationも各翻訳によって言葉が異なりました。開発をある程度進行した後、もっと確実に定義することができました。}

すべてのクライアント側のコンポーネントで共通的に使えるように選び出したクライアント用データです。 一般的にクライアント側にデータを渡すためには、サーバーからデータを受け取ってこなければならないという煩わしさがあります。 Stateを使う場合、サーバから最初持ってきたデータをStateに保管します。 以降、必要な部分に対するデータだけ取り出して使うことになります。

2)State管理の必要性

MVCパターンの複雑なデータフロー問題は、大規模なアプリケーション開発の際MVCパターンで発生する構造的間違いを引き起こします。 複雑な画面とデータの構成が必要したときControllerに多数のModelとViewが縺れてからです。 したがって、既存のMVC間の依存性を除去することが難しくなって、これは機能追加やアップデート時に起きる問題点を解決する複雑にします。

Vuexは、コンポーネント間のデータ伝達をView、Action、Stateに明示的に表現して、よりデータの流れを単純に維持します。

3)構成要素

Vuex構成要素は View, Actions, Stateになります。

[例示]

_{出典:https://vuex.vuejs.org/(vuex公式文書)}

(1)ユーザが View(Template)でボタンをクリック
(2)Actions(Method)でメソッド呼び出して動作
(3)Actions実行してからState(data)を変更

Viewは、クライアントの方に表示されるTemplateを意味します。 クライアント側でViewを通じてデータ保存などの動作を要請すると、要請によってActionsではバックエンド側と要請や応答を交換するようになります。

Stateの場合、クライアントの操作に必要なデータを共有します。Actionsを通じてバックエンドAPIを呼び出して要請に即したデータをもらって来たら、コンポーネント間で当該データをすべて共有できるようにStateに保存します。

各コンポーネントではStateにプロジェクトで共通に共有するデータを保存しておくことができ、最初の保存だけでどのコンポーネントでも当該データを照会することも、修正することもできます。

(4)State、Getters、Actions、Mutations

• State
  すべてのコンポーネントで同一のデータを使用できるように共通的な変数を宣言します。

• Getters
  コンポーネント内でStateに特定処理を進めた後、コンポーネントにバインディングする場合、Gettersに該当ロジックを定義した後、各コンポーネントで呼び出すことができます。
  （例）Stateに含まれるすべてのデータのうち、特定のデータだけを持ってくる場合

• Actions
  回答を受け取ってくる部分のタームが一定しない場合などの大気が必要でない非同期ロジックが入っている処理を作成します。

• Mutations
  Stateに存在する変更するロジックを作成し、Stateの値を変更させることはMutations中でのみ変更されなければなりません。
  
  しかし、開発者がMutation乙直接呼び出す場合はなく、Stateを変更するcommit背中のメソッドを使用するなどの方法で間接的に使用することになります。
  
  Mutationの場合、各コンポーネントでStateを変更した履歴を確認することができます。 各変更件について一つ一つ同期的に処理し、全ての履歴を残すので、お互いに違うコンポーネントでStateを変更しても衝突がありません。
  
  
  

(5)レンダリングパフォーマンスについて

Vueのgettersの場合、使用するたびに、毎回演算処理が入っている方式であるため、多くの量のデータを処理する場合には性能が急激に低下する現象がありました。 コンポーネントから呼び出すデータの数(row基準)が3000件ほどになる時、普段、秒当たり60フレームの性能を見せてくれましたが、たくさんの量のデータを毎回gettersから読んでくると、毎秒2フレームになって最後にはブラウザーが止まってしまいました。

_{フレームの低下現象が持続される区間}

このような現象を改善するため、一番目にはstateに読んでくることをなくして、サーバー側のapiを利用して必要な部分だけを直接読んでくる形で作成しました。stateを通じず、サーバーから直接持ってくるのでサーバー側と連動に間する時間だけかかり、コンポーネントをレンダリングするのは、多くの時間がかかりませんでした。

二番目には、該当コンポーネントにページネーションを追加をしました。 最初のデータはすべて読んできた後、クライアント側でページングを処理する形だったためにフレームの低下には大きな役に満たなかったが、ブラウザーが実行中断になってしまう現象が消えました。

_{同じページを二回呼んだときの現象。確かに以前よりフレームの低下区間が短くなったし、落ちる幅も減少した}

7.まとめ

VUEはSPA開発向けのJavascriptフレームワークの一つであります。

• SPA
  SPAウェブは、最初のロード時、全体ページをロードした後からは、既存のページと比較して更新が必要な部分だけをjsonの形でデータを持ってきてバインディング_bindingします。
  
  
  
• Vue.jsでウェブを開発する際には、プロジェクトの構築及びその他の作業に役に立つVue-Cli、ルーティングを担当するVue Router、コンポーネント間のState管理を担当するVuexを使います。
  
  
  
• Routing
  SPAウェブの使用性限界を補完するためには、ルーティングに関するライブラリを利用してヒストリーを管理する必要があります。
  
  
  
• State管理
  各コンポーネントではStateにプロジェクトで共通に共有するデータを保存しておくことができ、最初の保存だけでどのコンポーネントでも当該データを照会することも、修正することもできます。

はじめに

アプリ開発において、ancestryというgemを用いてカテゴリー機能を加えたのでまとめました。

目次

1. カテゴリー選択・保存
2. カテゴリー検索表示
3. カテゴリー検索結果表示

1. カテゴリー選択・保存

categoriesテーブルの作成

ancestryをインストールします。

gemfile

gem 'ancestry'

次にcategoryモデルを作成します。

ターミナル

rails g model category

has_ancestryを記述します。

app/models/category.rb

class Category < ApplicationRecord
  has_many :posts
  has_ancestry
end

以下のようにマイグレーションファイルに記述します。
indexについてはこちら

db/migrate/20XXXXXXXXXXXX_create_categories.rb

class CreateCategories < ActiveRecord::Migration[6.0]
  def change
    create_table :categories do |t|
      t.string :name,     index: true, null: false
      t.string :ancestry, index: true
      t.timestamps
    end
  end
end

googleスプレッドシートにカテゴリーを記述していきます。
Aの列がid、Bの列がname（カテゴリー名）、Cの列がancestry（親子孫を見分ける数値）となります。
データの保存方法は、ファイル → ダウンロード → カンマ区切りの値（.csv 現在のシート） の手順で保存できます。

ダウンロードしたcsvファイルはdbフォルダに配置します。

seeds.rbファイル内へ以下の通り記述します。

db/seeds.rb 

require "csv"

CSV.foreach('db/category.csv') do |row|
  Category.create(:id => row[0], :name => row[1], :ancestry => row[2])
end 

ターミナルでrails db:seedコマンドを実行するとcsvファイルを読み込み自動でDBのレコードが生成されます。
foreachの後に読み込みたいファイルの指定を行います。
その下の記述については、モデル名.create(カラム名 => 読み込みたい列)となります。
row[0] → Aの列がid
row[1] → Bの列がname（カテゴリー名）
row[2] → Cの列がancestry（親子孫を見分ける数値）

ルーティング

子、孫カテゴリーをjson形式でルーティングを設定します。

config/routes.rb

Rails.application.routes.draw do
  ~略~
  resources :posts do
    collection do
      get 'top'
      get 'get_category_children', defaults: { format: 'json' }
      get 'get_category_grandchildren', defaults: { format: 'json' }
      get 'name_search'
    end
  ~略~
end

コントローラー

postsコントローラーに親カテゴリーを定義します。
複数箇所で使用するためbefore_actionを使って定義します。

app/controllers/posts_controller.rb

def set_parents
  @parents = Category.where(ancestry: nil)
end

postsコントローラーに子、孫カテゴリーのメソッドを定義します。

app/controllers/posts_controller.rb

def get_category_children
  @category_children = Category.find("#{params[:parent_id]}").children
end

def get_category_grandchildren
  @category_grandchildren = Category.find("#{params[:child_id]}").children
end

json.jbuilderファイルを作成し、jsonデータへ変換します。

app/views/posts/get_category_children.json.jbuilder 

json.array! @category_children do |child|
  json.id child.id
  json.name child.name
end

app/views/posts/get_category_grandchildren.json.jbuilder 

json.array! @category_grandchildren do |grandchild|
  json.id grandchild.id
  json.name grandchild.name
end

ビュー

javascriptでカテゴリー選択時の動作を設定します。

:app/javascript/category_post.js
$(function(){
  function appendOption(category){
    var html = `<option value="${category.id}">${category.name}</option>`;
    return html;
  }
  function appendChildrenBox(insertHTML){
    var childSelectHtml = "";
    childSelectHtml = `<div class="category__child" id="children_wrapper">
                        <select id="child__category" name="post[category_id]" class="serect_field">
                          <option value="">---</option>
                          ${insertHTML}
                        </select>
                      </div>`;
    $('.append__category').append(childSelectHtml);
  }
  function appendGrandchildrenBox(insertHTML){
    var grandchildSelectHtml = "";
    grandchildSelectHtml = `<div class="category__child" id="grandchildren_wrapper">
                              <select id="grandchild__category" name="post[category_id]" class="serect_field">
                                <option value="">---</option>
                                ${insertHTML}
                                </select>
                            </div>`;
    $('.append__category').append(grandchildSelectHtml);
  }

  $('#item_category_id').on('change',function(){
    var parentId = document.getElementById('item_category_id').value;
    if (parentId != ""){
      $.ajax({
        url: '/posts/get_category_children/',
        type: 'GET',
        data: { parent_id: parentId },
        dataType: 'json'
      })
      .done(function(children){
        $('#children_wrapper').remove();
        $('#grandchildren_wrapper').remove();
        var insertHTML = '';
        children.forEach(function(child){
          insertHTML += appendOption(child);
        });
        appendChildrenBox(insertHTML);
        if (insertHTML == "") {
          $('#children_wrapper').remove();
        }
      })
      .fail(function(){
        alert('カテゴリー取得に失敗しました');
      })
    }else{
      $('#children_wrapper').remove();
      $('#grandchildren_wrapper').remove();
    }
  });
  $('.append__category').on('change','#child__category',function(){
    var childId = document.getElementById('child__category').value;
    if(childId != ""){
      $.ajax({
        url: '/posts/get_category_grandchildren',
        type: 'GET',
        data: { child_id: childId },
        dataType: 'json'
      })
      .done(function(grandchildren){
        $('#grandchildren_wrapper').remove();
        var insertHTML = '';
        grandchildren.forEach(function(grandchild){
          insertHTML += appendOption(grandchild);
        });
        appendGrandchildrenBox(insertHTML);
        if (insertHTML == "") {
          $('#grandchildren_wrapper').remove();
        }
      })
      .fail(function(){
        alert('カテゴリー取得に失敗しました');
      })
    }else{
      $('#grandchildren_wrapper').remove();
    }
  })
});

新規投稿ページにカテゴリーセレクトボックスを表示させます。

app/views/posts/new.html.erb

<div class="append__category">
  <div class="category">
    <div class="form__label">
      <div class="weight-bold-text lavel__name ">
        カテゴリー
      </div>
      <div class="lavel__Required">
        <%= f.collection_select :category_id, @parents, :id, :name,{ include_blank: "選択してください"},class:"serect_field", id:"item_category_id" %>
      </div>
    </div>
  </div>
</div>

2. カテゴリー検索表示

コントローラー

app/controllers/posts_controller.rb

def top
  respond_to do |format|
    format.html
    format.json do
      if params[:parent_id]
        @childrens = Category.find(params[:parent_id]).children
      elsif params[:children_id]
        @grandChilds = Category.find(params[:children_id]).children
      elsif params[:gcchildren_id]
        @parents = Category.where(id: params[:gcchildren_id])
      end
    end
  end
end

ビュー

javascriptでどの親カテゴリーにの上にマウスがいるのか、それに属する子カテゴリーや孫カテゴリーを取得しています。

:app/javascript/category.js
$(document).ready(function () {
  // 親カテゴリーを表示
  $('#categoBtn').hover(function (e) {
    e.preventDefault();
    e.stopPropagation();
    $('#tree_menu').show();
    $('.categoryTree').show();
  }, function () {
    // あえて何も記述しない
  });

  // 非同期にてヘッダーのカテゴリーを表示
  function childBuild(children) {
    let child_category = `
                        <li class="category_child">
                          <a href="/posts/${children.id}/search"><input class="child_btn" type="button" value="${children.name}" name= "${children.id}">
                          </a>
                        </li>
                        `
    return child_category;
  }

  function gcBuild(children) {
    let gc_category = `
                        <li class="category_grandchild">
                          <a href="/posts/${children.id}/search"><input class="gc_btn" type="button" value="${children.name}" name= "${children.id}">
                          </a>
                        </li>
                        `
    return gc_category;
  }

  // 親カテゴリーを表示
  $('#categoBtn').hover(function (e) {
    e.preventDefault();
    e.stopPropagation();
    timeOut = setTimeout(function () {
      $('#tree_menu').show();
      $('.categoryTree').show();
    }, 500)
  }, function () {
    clearTimeout(timeOut)
  });

  // 子カテゴリーを表示
  $('.parent_btn').hover(function () {
    $('.parent_btn').css('color', '');
    $('.parent_btn').css('background-color', '');
    let categoryParent = $(this).attr('name');
    timeParent = setTimeout(function () {
      $.ajax({
          url: '/posts/top',
          type: 'GET',
          data: {
            parent_id: categoryParent
          },
          dataType: 'json'
        })
        .done(function (data) {
          $(".categoryTree-grandchild").hide();
          $(".category_child").remove();
          $(".category_grandchild").remove();
          $('.categoryTree-child').show();
          data.forEach(function (child) {
            let child_html = childBuild(child)
            $(".categoryTree-child").append(child_html);
          });
          $('#tree_menu').css('max-height', '490px');
        })
        .fail(function () {
          alert("カテゴリーを選択してください");
        });
    }, 400)
  }, function () {
    clearTimeout(timeParent);
  });

  // 孫カテゴリーを表示
  $(document).on({
    mouseenter: function () {
      $('.child_btn').css('color', '');
      $('.child_btn').css('background-color', '');
      let categoryChild = $(this).attr('name');
      timeChild = setTimeout(function () {
        $.ajax({
            url: '/posts/top',
            type: 'GET',
            data: {
              children_id: categoryChild
            },
            dataType: 'json'
          })
          .done(function (gc_data) {
            $(".category_grandchild").remove();
            $('.categoryTree-grandchild').show();
            gc_data.forEach(function (gc) {
              let gc_html = gcBuild(gc)
              $(".categoryTree-grandchild").append(gc_html);
              let parcol = $('.categoryTree').find(`input[name="${gc.root}"]`);
              $(parcol).css('color', 'white');
              $(parcol).css('background-color', '#b1e9eb');
            });
            $('#tree_menu').css('max-height', '490px');
          })
          .fail(function () {
            alert("カテゴリーを選択してください");
          });
      }, 400)
    },
    mouseleave: function () {
      clearTimeout(timeChild);
    }
  }, '.child_btn');

  // 孫カテゴリーを選択時
  $(document).on({
    mouseenter: function () {
      let categoryGc = $(this).attr('name');
      timeGc = setTimeout(function () {
        $.ajax({
            url: '/posts/top',
            type: 'GET',
            data: {
              gcchildren_id: categoryGc
            },
            dataType: 'json'
          })
          .done(function (gc_result) {
            let childcol = $('.categoryTree-child').find(`input[name="${gc_result[0].parent}"]`);
            $(childcol).css('color', 'white');
            $(childcol).css('background-color', '#b1e9eb');
            $('#tree_menu').css('max-height', '490px');
          })
          .fail(function () {
            alert("カテゴリーを選択してください");
          });
      }, 400)
    },
    mouseleave: function () {
      clearTimeout(timeGc);
    }
  }, '.gc_btn');


  // カテゴリー一覧ページのボタン
  $('#all_btn').hover(function (e) {
    e.preventDefault();
    e.stopPropagation();
    $(".categoryTree-grandchild").hide();
    $(".categoryTree-child").hide();
    $(".category_grandchild").remove();
    $(".category_child").remove();
  }, function () {
    // あえて何も記述しないことで親要素に外れた際のアクションだけを伝搬する
  });

  // カテゴリーを非表示(カテゴリーメニュから0.8秒以上カーソルを外したら消える)
  $(document).on({
    mouseleave: function (e) {
      e.stopPropagation();
      e.preventDefault();
      timeChosed = setTimeout(function () {
        $(".categoryTree-grandchild").hide();
        $(".categoryTree-child").hide();
        $(".categoryTree").hide();
        $(this).hide();
        $('.parent_btn').css('color', '');
        $('.parent_btn').css('background-color', '');
        $(".category_child").remove();
        $(".category_grandchild").remove();
      }, 800);
    },
    mouseenter: function () {
      timeChosed = setTimeout(function () {
        $(".categoryTree-grandchild").hide();
        $(".categoryTree-child").hide();
        $(".categoryTree").hide();
        $(this).hide();
        $('.parent_btn').css('color', '');
        $('.parent_btn').css('background-color', '');
        $(".category_child").remove();
        $(".category_grandchild").remove();
      }, 800);
      clearTimeout(timeChosed);
    }
  }, '#tree_menu');

  // カテゴリーボタンの処理
  $(document).on({
    mouseenter: function (e) {
      e.stopPropagation();
      e.preventDefault();
      timeOpened = setTimeout(function () {
        $('#tree_menu').show();
        $('.categoryTree').show();
      }, 500);
    },
    mouseleave: function (e) {
      e.stopPropagation();
      e.preventDefault();
      clearTimeout(timeOpened);
      $(".categoryTree-grandchild").hide();
      $(".categoryTree-child").hide();
      $(".categoryTree").hide();
      $("#tree_menu").hide();
      $(".category_child").remove();
      $(".category_grandchild").remove();
    }
  }, '.header__headerInner__nav__listsLeft__item');
});

トップ画面にカテゴリー選択ウィンドウをセットします。

app/views/posts/top.html.erb

  <div class="item-categories">
    <h2>
      カテゴリー一覧
    </h2>
    <%= link_to  posts_path, class: "category-button", id: 'categoBtn' do %>
      カテゴリーから探す
    <% end %>
    <div id="tree_menu">
      <ul class="categoryTree">
        <% @parents.each do |parent| %>
          <li class="category_parent">
            <%= link_to search_post_path(parent) do %>
              <input type="button" value="<%= parent.name %>" name="<%= parent.id %>" class="parent_btn">
            <% end %>
          </li>
        <% end %>
      </ul>
      <ul class="categoryTree-child">
      </ul>
      <ul class="categoryTree-grandchild">
      </ul>
    </div>
  </div>

3. カテゴリー検索結果表示

ルーティング

カテゴリーをidで区別するため、memberを用いてsearchアクションを定義しています。

config/routes.rb

resources :posts do
    ~略~
    member do
      get 'search'
    end
   ~略~
end

コントローラー

クリックしたカテゴリーが、親カテゴリー、子カテゴリー、孫カテゴリーのどれなのかで条件分岐しています。

app/controllers/posts_controller.rb

  def search
    @category = Category.find_by(id: params[:id])

    if @category.ancestry == nil
      category = Category.find_by(id: params[:id]).indirect_ids
      if category.empty?
        @posts = Post.where(category_id: @category.id).order(created_at: :desc)
      else
        @posts = []
        find_item(category)
      end

    elsif @category.ancestry.include?("/")
      @posts = Post.where(category_id: params[:id]).order(created_at: :desc)

    else
      category = Category.find_by(id: params[:id]).child_ids
      @posts = []
      find_item(category)
    end
  end

  def find_item(category)
    category.each do |id|
      post_array = Post.where(category_id: id).order(created_at: :desc)
      if post_array.present?
        post_array.each do |post|
          if post.present?
            @posts.push(post)
          end
        end
      end
    end
  end

ビュー

app/views/posts/search.html.erb

  <div class="item-categories">
    <h2>
      カテゴリー一覧
    </h2>
    <%= link_to  posts_path, class: "category-button", id: 'categoBtn' do %>
      カテゴリーから探す
    <% end %>
    <div id="tree_menu">
      <ul class="categoryTree">
        <% @parents.each do |parent| %>
          <li class="category_parent">
            <%= link_to search_post_path(parent) do %>
              <input type="button" value="<%= parent.name %>" name="<%= parent.id %>" class="parent_btn">
            <% end %>
          </li>
        <% end %>
      </ul>
      <ul class="categoryTree-child">
      </ul>
      <ul class="categoryTree-grandchild">
      </ul>
    </div>
  </div>

参考リンク

https://qiita.com/k_suke_ja/items/aee192b5174402b6e8ca
https://qiita.com/Sobue-Yuki/items/9c1b05a66ce6020ff8c1
https://qiita.com/dr_tensyo/items/88e8ddf0f5ce37040dc8
https://qiita.com/ATORA1992/items/bd824f5097caeee09678
https://qiita.com/misioro_missie/items/175af1f1678e76e59dea
https://qiita.com/Rubyist_SOTA/items/49383aa7f60c42141871