見てはいけない黒歴史 in -The Rong's Caravan-
日記ログ コメント
About
黒歴史をリアルタイムで見られる貴重なサイト。
人間観察の悦びをあなたに・・・・・・

というのは冗談で、ただの趣味のサイトです。


管理人:ろんぐ
Since:2005/2/14
update:2019/07/20 「横浜に帰らないためには」
update:2019/07/20 「横浜に帰らないためには」
§Infomation§


「やりたいことをやるための継続可能な副業」としての

宅飲みカクテルデータベース

開発中。

ただいまデータ入力中!

あ、語感良くなりそうなので正式名称に「宅飲み」とつけてみました。でも宅飲み要素はあんまない笑


<予定>
未定:しばらくはデータを揃えることを考えます。

§Comment§
名前の非掲載


§Diary§
2019.7.20
横浜に帰らないためには

横浜の家を解約する、って言ったはいいし、実際7月に入って1日ぐらいしか泊まってないです(笑)
が、津田沼に家を借りるというのは移動距離が増え、実際時間的には+30分ぐらいではあるんですが、場所によってはストレスになるような時間だったりします。
具体的には横浜と世田谷での仕事に行く際、明らかなストレスを感じる時間がかかります。目安としては、片道1時間を超えるとストレスです(笑)


ネックになってるのは水曜と木曜のかてきょですね。ぶっちゃけ水曜のかてきょは辞めたいです。
水曜のかてきょはその前になにか案件を入れられれば不満は解決するんですけどね・・・・・・。

とりあえず何が問題になっているのかというと、まず水曜はご家庭に行くのに一時間はかかるというのが問題になっています。
これだけだとただの負担なんですけど、時間がそこそこ遅いこともあり、粘ればなにか他に案件が入れられるかも・・・・・・と粘って半年、未だにいい感じにシフトが組めていません。せつない。
たかが6000円のために片道1時間往復するのは正直アホくさいです。辞めたい・・・・・・。
ただ、これ以上収入を減らすときついのは事実なのでしばらくはこの生活を続けざるを得ません。っていうかなんで家庭教師の案件が簡単に手に入れられないんですかね、僕のPRの何がよくないんでしょう。学歴かな?笑


木曜の案件は、かてきょからの夜勤の流れが無駄なく最高すぎてお気に入りなんですが、横浜にあるという今までのメリットが逆にデメリットになってしまいました(笑)
ただ、この木曜の夜勤の現場は考えうる限り最高の環境でして、個人的にも切りたくないのでとりあえずかてきょの方も継続することにしています。
夜勤の仕事、ハズレの現場とかあるみたいですしね・・・・・・実際、僕がいま日曜に行ってる現場は他と比べるとハズレですし、火曜と金曜に行ってる現場も社員がなかなか帰らない日があったり、客がよく絡んできたりで結構鬱陶しい現場でもあります。まぁその代わり給料がいいので切れないんですけど、ちょっと切りたさもあります・・・・・・。

一方で、この木曜の現場と、まだ研修で1回行っただけですが土曜の現場はかなり自由が利いて、仕事も少なくいい職場だと思います。ここを切るのは夜勤をやめる時になるかなと思います。

で、この移動に対するストレスへのアプローチが3つほど案がありましてね。


1.火曜の夜勤後家に帰らず、水曜の夜家に帰るプラン。
しばらくはこれを実践してみようかな、っていう安牌です。負担が少なそうです。
もちろんデメリットは木曜に津田沼→横浜の移動が発生することですね。蒲田まで45分で行けるので、横浜までは70分、ご家庭には75分、つまり1時間15分はみなくてはいけませんね。
ただ、水曜じっくり寝れることで木曜の夜勤後、一日中都内をうろつくことで金曜の夜勤に備えることもできるので悪くないムーブです。体力が持てばね。


2.水曜の深夜をどこかで頑張るプラン。
逆に、水曜に家に帰らない、っていうムーブも考えられます。マックなんかで夜をがんばって明かすわけですね。
んで、木曜、金曜と頑張っていけばそんなに移動に無駄はないかも・・・・・・?って思ったりして。火曜の夜勤後にゆっくり寝れるのがメリットなんですかね。


3.火曜〜金曜まで一切家に帰らないプラン。
理想論ですが最初に切った選択肢です。絶対無理(笑)
夜勤中に寝れるって言っても正直限度がありましてね・・・・・・そもそも夜勤中に寝ない方が実際いいです。どっちにしろ熟睡できないので帰ってからまた寝るハメになります笑



と、このようなムーブが想定されるわけです。
津田沼→横浜、っていう移動はまだ試したことないのですが、なかなかにしんどそうですね。木曜のかてきょ前にまた別のかてきょをぶちこめればいいんですけどね・・・・・・。さすがにちょっと厳しいかな・・・・・・。



という悩みを抱えているっていうお話でした。はやいとここの生活を脱却するために、家庭教師システムを作って所得にしたいところですね(笑)(笑)(笑)

2019.7.19
0から始めるVue+passport#1-Reactからの選択-

この前ルーティングまで終わったので、認証を導入します。
認証はORGSM(仮)と同じく、基本的にはメールアドレス認証にしようと思ってるんですが、とりあえずID/PASS方式も併用してもいいかなって思ってるし、SPAならそのへんのGUIもラクそうなので、まずはLaravel標準の認証を導入してみようかと思います。


で、jwtとか導入しようかと思ったんですけどこれがめちゃめちゃに難航しまして。
一旦SPAの開発はやめてステートフルな従来の開発をしてからSPAで作り直したほうがいいんじゃないか!?とすら思ったわけです。


ただ、Reactとjwtっていう組み合わせを敢えて使うからよくないのであって公式でサポートされているVueとPassportを使えばいくらかはうまく行くのでは!?!?と思い、まずはそちらを試してみることにしました。
Reactのほうが厳格なコードを要求してくるそうで、Vueはそのへんゆるいらしいって聞いたので怖くてあんまり手を出さなかったんですけど、個人開発レベルだとReactはファイルの数が増えすぎて見づらい、っていう意見もあったので、両方使えるようになって選択したらいいかな、って思うようになってきました。実際そういう意見も多かったですし。Angularは別格なので手を出しません。学習コストの高い言語は厳しいです(笑)



2019.7.18
0から始めるReact.js#1-基礎の基礎からルーティング-

ずっと導入したい、って言ってたReact.jsを導入しようと思います。リアルタイムな処理が必要とされるSNSでは絶対に必要となる知識で、例えばチャットなんかはReactみたいなSPAフレームワークは必須ですしね。あと、こいつが使えるとほぼ構造そのまんまでスマホアプリに転用できそう。
もちろん工数が増えるっていうデメリットもあるわけですけど、使えないのは困るので使えるようになりたい、っていうのは昔から言ってました。


こいつの開発にはnode.jsが必須なんですが、仕組みを調べていくうちに、本番環境がApacheでも問題ない(ビルドしてアップロードする?)みたいなので、とりあえず作ってみましょう〜〜ということで作ります。



ろんぐさんReact.jsは初めてなので、まずはそのお勉強から始めなくてはいけません。
とりあえずnpmでインストールして、動くサンプルコードをコピペする感じです。

必要そうなファイルはインストールされるので、とりあえず現状動いているコードを下に載せますね。



Route::get('/{any}', function(){
    return view('welcome');
})->where('any','.*');

ルートに関しては、React側で処理するので全部welcome.blade.phpに吸収してもらっていいみたいです。
認証とかそのへんはどーすんの?って思ったんですけど調べてもよくわかんなかったので()後回しにします。
下にルートを個別定義しても吸ってくれなかったので、Laravelのルーティングを使うにはもうちょっと調査が必要そうです。



require('./bootstrap');
require('./components/TutorApp');


import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Route, Link, HashRouter as Router } from 'react-router-dom';

const TutorApp = () => (
    <Router>
        <h1>react-routerに入門する。</h1>
        <nav>
            <ul>
                <li><Link to='/'>Index</Link></li>
                <li><Link to='/second'>Second</Link></li>
                <li><Link to='/third'>Third</Link></li>
            </ul>
        </nav>
        <article>
            <Route exact path='/' component={Index} />
            <Route path='/second' component={Second} />
            <Route path='/third' component={Third} />
        </article>
    </Router>
)

const Index = () => (
    <div>
        <h2>Index</h2>
        <p>インデックスページ</p>
    </div>
)
const Second = () => (
    <div>
        <h2>Second</h2>
        <p>二番目のページです</p>
    </div>
)
const Third = () => (
    <div>
        <h2>Third</h2>
        <p>三番目のページです</p>
    </div>
)

export default TutorApp

ReactDOM.render(<TutorApp />, document.getElementById('TutorApp'));


<!doctype html>
<html lang="ja">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- CSS -->
    <link rel="stylesheet" href="{{ asset('css/app.css') }}">

    <title>react test</title>
</head>

<body>
<div id="app">
    <div class="container">
        <h3 class="mt-5">Todo 管理システム</h3>

        <!-- ここを置き換えていく -->
        <div id="TutorApp"></div>

    </div>
</div>

<!-- avaScript -->
<script src="{{ asset('js/app.js')}}"></script>
</body>
</html>

こんな感じですね。React.jsの基礎知識に関してはめんどいのでググって下さいって感じなんですけど(笑)、いまのとこ僕の理解では、TutorAppクラスのrender()を、htmlのTutorAppクラスに埋め込むイメージです。
これを実際に表示するにはターミナルでnpm run watchすればいいです。




Router部分にリンクとか書けばいいのかなーって感じなんですが、これでなんで下の部分だけ差し替わるのかがよくわかりません笑


何が起こってるかを確認するために、このファイルに手を加えます。



import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Route, Link, HashRouter as Router } from 'react-router-dom';

const TutorApp = () => (
    <Router>
        <h1>react-routerに入門する。</h1>
        <nav>
            <ul>
                <li><Link to='/'>Index</Link></li>
                <li><Link to='/second'>Second</Link></li>
                <li><Link to='/third'>Third</Link></li>
            </ul>
        </nav>
        <article>
            <Route exact path='/' component={Index} />
            <Route path='/second' component={Second} />
            <Route path='/third' component={Third} />
        </article>
        <div>
            <Route path='/third' component={Second} />
        </div>
    </Router>
)

const Index = () => (
    <div>
        <h2>Index</h2>
        <p>インデックスページ</p>
    </div>
)
const Second = () => (
    <div>
        <h2>Second</h2>
        <p>二番目のページです</p>
    </div>
)
const Third = () => (
    <div>
        <h2>Third</h2>
        <p>三番目のページです</p>
    </div>
)

export default TutorApp




つまり、link toの部分がスイッチとなるリンクの部分で、Route部分に、pathとURLが一致した場合componentを埋め込む、って感じですね。
なので、thirdのリンクを踏むと、下に追加したthirdとパスが一致することで、Secondコンポーネントが読み込まれて表示される、って感じですね。理解理解。



っていうことでスッキリしたので今回はこの辺で切ります。 ちなみにHashRouterを使わないとURLがすっごい短縮されちゃうので注意です。リロードするとURLが変わって404になりますが、HashRouterだとURLが保持されるのでリロードしても同じページを表示してくれるはずです。



>>もっと読みたい


Contents
日記
過去ログです。
旅行レポートなどもこちらに置いています。

音楽素材
RPGツクール向けの音楽素材です。
現在の素材数は187曲です。

Ptutor
プログラミング対面指導サービス

Fashion研究学Note
地雷を踏まないファッション研究学。低予算でディスられないファッションを目指します。

Instagram
カクテルの「ちょっとふざけたレビュー」。
写真素材
旅行中、無駄に撮った写真を素材として並べています。
現在2600枚ほど。
そのうち更新します。

Products
カクテルデータベース
古今東西のカクテルと、その評価をデータベースにしちゃいました(笑)
現在の登録数 ⇒

Commnication
旧BBS
一応残しておきます。

Other

Author
twitterも気軽にフォローミー!おすすめはしない!笑
↓創作用アカウント(笑)