Elsaの技術日記(徒然なるままに)

主に自分で作ったアプリとかの報告・日記を記載

MENU

Single Page Application (SPA)とは?

reactでwebサイトを作成しようと思っていたところ、友人より、最近はSPAで作ることが多いと伺いました。


...SPAってなんだ??

週刊SPA!のことじゃないよな??


聞いてみるとどうやら
”Single Page Application”のことらしい。


どういうものかわからなかったので調べてみることにしました。

■SPAとは

Webページにおいて1ページ内を各オブジェクトで構成することにより、ぺージ全体を何度も読み込む必要なく、対象コンテンツのみ遷移させる
技術のようです。

【従来】
サーバサイドにページを要求し、受け取ったページに遷移させる。
f:id:Elsammit:20200725154504p:plain

【SPA】
サーバサイドに要求するのはデータ(オブジェクト)になる。
フロントサイドでは受け取ったデータをもとに必要なコンテンツのみ切り替えるため、ページの遷移は発生しない。
f:id:Elsammit:20200725154519p:plain

■SPAの例

・SlackのWebページ
FacebookメッセンジャーのWebページ
・GoogleMap
などがSPAで作られているようです。

■SPAのメリット

(1)ユーザのページ遷移のストレスがない
 ページ遷移が発生せず、一度読み込んだページ内でコンテンツのみ切り替わるためストレスを感じない

(2)アプリのような体験を提供
例えば、メッセンジャーのようにユーザー一覧は表示したままチャットコンテンツを切り替えたり、Spotifyでページを変えても音楽を流しっぱなしにしておいたり

(3)開発者のHTMLコーディングが減る
 必要なコンテンツ部分のみデータ要求・処理を行い、ページ全体の描写は不要になる

(4)UXが体験できる
 ページ遷移がないため、(2)で書いた通り、音楽を流しながら、チャットのコンテンツを見ながら切り替えることができる
 

■SPAのデメリット

(1)初期ページ読み込みに時間がかかる
 JavaScriptのコード量が増加するため、初期ローディングに時間がかかる

(2)実装コストがかかる
 今までブラウザに任せていた処理を実装する必要があるため、開発コストがかさむ。
 また、最新知識を探りながらの開発になるのも要因。

■最後に

友人が言っていたSPAが理解できました。
今度は、実際に作ってみたいと思います!!
上手く作れるかな?
こういうのって、理論はわかるけど実際に手を動かすと難しい印象が強いので不安です。。。

前に会社にて、
MVVMでGUIアプリ作ってね。
と先輩に言われて作ったものが、うまく構造上手く作りこめてなくて指摘いくつかもらったこともあり、、、

Reactでモグラたたきゲーム

React勉強中!!

今回はモグラたたきゲームです!!
少しずつ作りたいものを手早く作れるようになってきた。慣れてきた証!!



成果物を動かすとこんな感じです。
f:id:Elsammit:20200724185756g:plain



ソースコードはこちらに格納。
GitHub - Elsammit/Moguratataki



今回肝となる部分は定期的にもぐらの位置を変えるための定期処理かな?と個人的には思っております。
今回定期処理には、setInterval関数を用いました。

setInterval関数は下記のように用いればよいです。

this.intervalId = setInterval(()=>{
 this.rand_MoguraUp(); ← 定期的に行いたい関数を入れる
}, 1000); ←インターバル期間(ミリ秒)

また、今回は30秒後にモグラたたきを終了させたいので、ある時間後に処理を実行するsetTimeout関数を用いました。
setTimeout関数はこちらのように用いればよいです。

setTimeout(()=>{
    this.finish_mogura(); ← セットしたタイマ時間後に実行したい処理を入れる
},30000); ←タイマ(ミリ秒)

最後に、定期処理を止めるにはこちらを用いればよいです。

clearInterval(this.intervalId); ←intervalidにはsetInterval関数のIDです


30秒後にモグラたたきを終了させたいので、finish_mogura関数はこちらのようにしました。

finish_mogura = () =>{
    clearInterval(this.intervalId);
}


今回はスタートボタンを押した時に定期的にモグラの位置を動かせばよいため用いませんでしたが、
ロード時から定期処理を動かしたい場合にはこちらを実行すればよいです。

  componentDidMount() {
    this.intervalId = setInterval(()=>{
      this.rand_MoguraUp(); ← 定期的に行いたい関数を入れる
    }, 1000);
  }
  componentWillUnmount(){
    clearInterval(this.intervalId); ←intervalidにはsetInterval関数のIDです
  }

ReactでsetInterval使用で定期描画する | ikapblog


最後に、、、

簡単なゲームぐらいならすぐに作れるようになってきた。
次はWebページを作ってみようかな?

reactでWebページどうやって作っていけばよいかをまずは調査しようかな?

Reactで〇×ゲーム

今回はReactで〇×ゲームを作ってみました!!
だんだん慣れてきて、自分の思ったように作れるようになってきました!!


出来たものはこちらになります。
f:id:Elsammit:20200723164307g:plain



シンプルだけどきれいにできたかな?と自画自賛w。


今回、3×3の枠ごとにonClickイベントを用意しているのですが、当初それぞれのイベント対して関数を用意して処理を行っていたのですが、、、
1つにまとめたいよ!!なんか同じ関数が並んで醜いよ!!


と思い、別の方法を検討しました。


同じ関数にしてしまうと3×3のどの枠をクリックしたのか判定できなくなってしまうため、引数にて判断する方法にしました!!

javascriptだとこちらのように引数を与えてあげればできる。
JavaScriptとonclickのサンプル | ITSakura


下記を作成し、、、実行!!

 <tr>
     <td><input type="text" id="osero11" onClick={this.onClick("osero11" )} className="Mas" /></td>
     <td><input type="text" id="osero12" onClick={this.onClick("osero12" )}  className="Mas" /></td>
     <td><input type="text" id="osero13" onClick={this.onClick("osero13" )}  className="Mas" /></td>
 </tr>
 <tr>
     <td><input type="text" id="osero21" onClick={this.onClick("osero21" )} className="Mas" /></td>
     <td><input type="text" id="osero22" onClick={this.onClick("osero22" )} className="Mas" /></td>
     <td><input type="text" id="osero23" onClick={this.onClick("osero23" )} className="Mas" /></td>
 </tr>
 <tr>
     <td><input type="text" id="osero31" onClick={this.onClick("osero31" )} className="Mas" /></td>
     <td><input type="text" id="osero32" onClick={this.onClick("osero32" )} className="Mas" /></td>
     <td><input type="text" id="osero33" onClick={this.onClick("osero33" )} className="Mas" /></td>
 </tr>

あれ??うまくいかない。。。
どうやらReactの場合、こちらの方法ではうまくできないよう。


もう少し調べてみると、アロー演算子を用いて、こちらのようにすれば引数を与えられるとのこと。

<button onClick={ () => this.click(1) }>One</div>

【React】イベントハンドラで引数を使いたい【備忘録】 - Qiita


ということで、こちらのように作成し、実行!!

 <tr>
     <td><input type="text" id="osero11" onClick={() => this.onClick("osero11" )} className="Mas" /></td>
     <td><input type="text" id="osero12" onClick={() => this.onClick("osero12" )}  className="Mas" /></td>
     <td><input type="text" id="osero13" onClick={() => this.onClick("osero13" )}  className="Mas" /></td>
 </tr>
 <tr>
     <td><input type="text" id="osero21" onClick={() => this.onClick("osero21" )} className="Mas" /></td>
     <td><input type="text" id="osero22" onClick={() => this.onClick("osero22" )} className="Mas" /></td>
     <td><input type="text" id="osero23" onClick={() => this.onClick("osero23" )} className="Mas" /></td>
 </tr>
 <tr>
     <td><input type="text" id="osero31" onClick={() => this.onClick("osero31" )} className="Mas" /></td>
     <td><input type="text" id="osero32" onClick={() => this.onClick("osero32" )} className="Mas" /></td>
     <td><input type="text" id="osero33" onClick={() => this.onClick("osero33" )} className="Mas" /></td>
 </tr>

上手くできた!!


最後に、、、

だんだんReactでかけるようになってきたのですが、
もう少し使えるようになりたいのでどんどん新しいWebアプリを作っていきたいと思います!!


実はこちらの方を尊敬して始めたWebアプリの作成。
元教員がWebアプリを毎日1つずつ作ってみた(6〜10日目)|印南聡志|note
元教員がWebアプリを毎日1つずつ作ってみた(11〜15日目)|印南聡志|note

やってみてその偉大さがわかる。。。
毎日作成できない。。。
出来ても2日に1個です。。。


もっと精進していきたいと思います!!

Reactで計算機アプリ

前回、Reactでtodoアプリを釈経しました。
elsammit-beginnerblg.hatenablog.com

今回は前回学んだことを活かして自分で作ってみましたので、その報告!!

何を作ろうか悩んだのですが、数値計算は初級みたいなところがあるので、
計算機アプリ
を作ってみることにしました!!

と簡単なノリで初めて見ましたが、、、
React初心者の自分は約1日かかってしまいました。。。



出来たアプリはこんな感じです。
f:id:Elsammit:20200721211539g:plain


・四則演算が可能
・3項以上も対応
なように作ることができましたが、

複数の四則演算が織り交ざった計算(例えば3+2×5とか)には対応できていないです。
また、+、-、×、/を押すと0クリアされてしまい、それまでの計算が見えないです。。。

1日かけてもこのレベルとは。。。泣
なんともセンスがない。。。


今回、作るうえで一番苦労したのは何気にアルゴリズムでした。
このボタン押した時は?この後にこのボタン押したら?とか考えてたら頭こんがらがってしまいました。。。

こういうUI系のイベント発生時のアルゴリズムも経験で身に付くものなのでしょうか。。。

最後に、ソースコードの一部を載せております。

import React, { Component } from 'react';
import "./calc.css";

export default class Calc extends Component  {

    constructor (props) {
        super(props);
        this.state = {
            num: 0,
            type:0,
            BufNum:0
        };
    }

    onInput = (e) => {
        const {num} = this.state;
        var calcNum = 0;
        if(num == 0 ){
            calcNum = e.target.value;
        }else{
            calcNum = Number(num)  + e.target.value;
        }
        
        console.log("calcNum is " + calcNum);

        this.setState({
            num: calcNum
        });
        document.getElementById("CalcResult").value = calcNum;
    }
    
    OnAdd = () => {
        console.log("click Add");
        this.CalcFunc_before();
        this.setState({
            type: 1
        });

        document.getElementById("CalcResult").value = 0;
    }

    Ondel = () =>{
        this.CalcFunc_before();

        this.setState({
            type: 2
        });

        document.getElementById("CalcResult").value = 0;  
    }

    OnKakeru = () =>{
        this.CalcFunc_before();

        this.setState({
            type: 3
        });

        document.getElementById("CalcResult").value = 0;  
    }

    OnWaru = () =>{
        this.CalcFunc_before();

        this.setState({
            type: 3
        });

        document.getElementById("CalcResult").value = 0;  
    }


    CalcFunc_before = () => {
        const {type} = this.state;
        const {num} = this.state;
        const {BufNum} = this.state;

        var calc = num;
        if(type!=0){
            var calc = this.CalcFunc(type, BufNum, num);
        }

        console.log("calcNum is " + calc);
        this.setState({
            BufNum:calc
        });

        this.setState({
            num: 0
        });
    }


    CalcFunc = (buf, BufNum, num) => {
        var calc = 0;
        if(buf==1){
            calc = Number(num) + Number(BufNum);
        }else if(buf==2){
            calc = Number(BufNum) - Number(num);
        }else if(buf == 3){
            calc = Number(BufNum) * Number(num);
        }

        return calc;
    }


    OnCalc = () => {
        console.log("click equal");
        const {type} = this.state;

        if(type!=0){
            const {num} = this.state;
            const {BufNum} = this.state;
            var calc = this.CalcFunc(type, BufNum, num);

            console.log("calcNum is " + calc);
            this.setState({
                BufNum:calc
            });
    
            this.setState({
                num: 0
            });
        }
        
        
        this.setState({
            type: 0
        });

        document.getElementById("CalcResult").value = calc;

    }

    onCancel = () => {
        this.setState({
            num: 0
        });
        document.getElementById("CalcResult").value = 0;
    }

    onAllClear = () => {
        this.setState({
            BufNum:0
        });

        this.setState({
            num: 0
        });
        document.getElementById("CalcResult").value = 0;
    }

    render() {
        return(<div>
            <h1>&nbsp;
                <u>計算機</u>
            </h1>
            <table border="3">
                <tbody>
                <tr height="20">
                    <td colSpan="5"><input type="text" id="CalcResult" className="Calc_Text"></input></td>
                </tr>
                <tr>
                    <td><button value="7" onClick={this.onInput} className="button">7</button></td>
                    <td><button value="8" onClick={this.onInput} className="button">8</button></td>
                    <td><button value="9" onClick={this.onInput} className="button">9</button></td>
                    <td><button value="+" onClick={this.OnAdd} className="button">+</button></td>
                    <td rowSpan="4"><button onClick={this.OnCalc} className="equal_button">=</button></td>
                </tr>
                <tr>
                    <td><button value="4" onClick={this.onInput} className="button">4</button></td>
                    <td><button value="5" onClick={this.onInput} className="button">5</button></td>
                    <td><button value="6" onClick={this.onInput} className="button">6</button></td>
                    <td><button value="-" onClick={this.Ondel} className="button">-</button></td>
                </tr>
                <tr>
                    <td><button value="1" onClick={this.onInput} className="button">1</button></td>
                    <td><button value="2" onClick={this.onInput} className="button">2</button></td>
                    <td><button value="3" onClick={this.onInput} className="button">3</button></td>
                    <td><button onClick={this.OnKakeru} className="button">×</button></td>
                </tr>
                <tr>
                    <td><button value="0" onClick={this.onInput} className="button">0</button></td>
                    <td><button onClick={this.onCancel} className="button">C</button></td>
                    <td><button onClick={this.onAllClear} className="button">AC</button></td>
                    <td><button onClick={this.OnWaru} className="button">/</button></td>
                </tr>
                </tbody>
            </table>
        </div>
        );
    }    
}

基本情報技術者試験を受けたいと思います

G検定が無事合格し、次はどうしようかな?と考えておりました。

セキュリティ関係の勉強をしてみたいな!!と思い、
情報セキュリティマネジメント試験を受けようかな?と思っていたのですが、、、



次の試験が10月!!!!
IPA 独立行政法人 情報処理推進機構:制度の概要:情報セキュリティマネジメント試験


1から勉強となる自分としては3か月切った今から勉強を始めて間に合わせることは難しそうだな。。。
と思い、とりあえず断念!!

友達にネットワークスペシャリストを薦められたのですが、、、


そっちの方が無謀!!



そういえば、基本情報技術者試験の勉強を以前していたな。。。
確認したら同じく10月開催のようだけど。。。
今からなら間に合うかもしれない!!
IPA 独立行政法人 情報処理推進機構:受験申込み


と思いたち、、

基本情報技術者試験
を受講することにしました!!



以前勉強した時には、こちらの参考書が結構わかりやすかったので、まずは読み直して思い出すことにします!!
結構かみ砕いた説明で書かれているため、スッと理解出来ておすすめです。


最後に、、、
勉強を進めつつ、受講応募したいと思います!!


だけど、、、コロナの関係で無事受験できるのか少し心配。。。
前回は中止になったようですし。。。

まぁ、予定通り受験できると信じて勉強していきたいと思います!!

reactでtodoアプリ作成

以前構築した環境でreactの勉強中!!
elsammit-beginnerblg.hatenablog.com


今回下記サイトを大いに参考してtodoアプリを作成しました。
webkikaku.co.jp


このサイトで公開しているtodoアプリではこの通り、実施予定の項目が追加できるようになっておりました。
f:id:Elsammit:20200718200950p:plain



こちらを写経し一折動くようにした後、
"自分なりのアレンジを加えてみたいな"
と思い、、、
 ・題名をつける
 ・納期が設定できるようにする
 ・登録日を設定する
を追加してみました。

作成した結果はこちら。
f:id:Elsammit:20200718201832p:plain

ちょっとダサいけど、、、初めて作ったからまぁよし!!

躓いたのは、
 ①todoリストの各要素に"納期項目"を追加
 ②非同期処理への対応
になります。

①、②共に登録ボタンを押したときの動作でして、、登録ボタン押下時のイベントの最終的なコードはこのようになりました!!

    addTodo = async() => {
        const Do_AddToDo = () => {
            return new Promise((resolve, reject)=>{
                const {name} = this.state;
                const {day} = this.state;
                const {month} = this.state;
                
                if(name === null || name === ""){
                    resolve(-1);
                }

                this.setState({
                    list: name + " (納期 " + month + day + ") "
                })
                resolve(0);
            })
        }
        var ret = await Do_AddToDo();

        if(ret >= 0){
            const {todos, list} = this.state;
            this.setState({
                todos:[...todos, list]
            });
        }else{
            alert("入力エラー 入力してください");
        }
    } 

また、コンストラクターはこちらです。

    constructor (props) {
        super(props);
        this.state = {
            todos: [],
            name: '',
            month: '',
            day: '',
            list: ''
        };
    }

todoと月日変数とtodoリストとして表示するためのメッセージ項目としてlistを用意しました。
todosはtodoリストになります。
また、nameやmonth、day変数には各テキストボックスやコンボボックスからのイベントにて値をセットしています。

これら、name、month、day変数をメッセージ用のlist変数に代入し、
こちらをtodoリスト(todos)に追加しています。

次に、listに代入する処理とtodosに追加する処理が並列処理になってしまいました。
そこで、Promise、awaitを用いて同期処理を入れ込むことで回避しました。


最後に、、、

React、思ったより難しいです。。。
ビルドするとエラーになったり、動いてもエラーになったり、、、泣。
書き方も独特なので、、、
でもがんばろう!!


今回は写経したソースに少し手を加えてみましたが、次は自分で考えて一から作ってみたいと思います!!




皆さんは一から言語勉強するときはどうするのでしょうか?
自分は参考書とかから入らず、写経して分かったつもりになってから今回のように機能追加しながらやるのですが。
結構、分からないことが多くて苦労するのですが、出来たら達成感があり!!
ついついこの方法で勉強進めてしまうのですが、、、

もっといい方法あるのかな?

G検定 受験結果

本日、G検定の結果がメールにて通知されました!!

結果は、、、


合格!!


でした!!
f:id:Elsammit:20200716221125p:plain



こんなこと書いている通り、
あまり手ごたえなくて半ばあきらめていたので、かなりびっくりしました!!
elsammit-beginnerblg.hatenablog.com



合否しか通知されず点数とか分からないのですが、恐らくギリギリだったのだと思います。



また、別の資格にも挑戦してみたいな!と思っている今日この頃w。

セキュリティについてあまり分かっていないので、勉強がてら
「情報セキュリティマネジメント」
でも受けてみようかな?
と思っております!!

まずは受験するにあたって情報収集をしていきます。


とりあえず、ひと段落。