エンジニアのひよこ_level10

【毎日更新!】新卒3年目エンジニアブログです!

このブログは? 毎日更新エンジニアブログです【更新:2019/08/16】

このブログは?

毎日新卒3年目が学んだことを記事にしているブログです。
ターゲットを広めに、簡単な記事を書いていることが多いです。

あなたは?

  • 新卒3年目のエンジニア
  • 新卒2年目でLaravelにコントリビュート。
  • 新卒2年目でLaravelJPConference2019に30分トークで登壇
  • 趣味はVROculus Rift等。

使用技術

Docker,HTML,CSS,JavaScript,PHP等々...

こいつ面白いな?

そう思ったら、渋谷で良ければランチでもいかがですか!
twitterかメールで連絡していただければ、いつでも歓迎です!(メアドはgithub参照)

klack710 (Masaki Obata) · GitHub

https://twitter.com/nyamucoro

おすすめ記事

willow710kut.hatenablog.com

willow710kut.hatenablog.com

クッキーポリシーについて

このブログは、分析のためにクッキーを使用するような外部ツールを使っていますφ(・

クッキーの使用に関してブロックしていただいても、ブログは正常に閲覧することが可能です。
各ツールに関しては、以下のポリシーをご参照ください。

Google Analytics

support.google.com

■LogRocket logrocket.com

【思考メモ】時間を消費しているだけの生活に感じるときに【703日目】

なんとなく生きてる気がしちゃう

朝起きて、ご飯食べて、なんとなくTwitter見て、なんとなく動画見て、なんとなくお風呂入って寝る。

そんなふうに、なんとなく時間を消費しているように感じるときってたまにあると思います。

以前ワクワクしてたときってどうだったんだろう?とか考えてみる。

ではどうするか。

『なんとなく』をやめる

結構シンプルに考えてみましょう。

朝起きて、ご飯食べて、なんとなくTwitter見て、なんとなく動画見て、なんとなくお風呂入って寝る。
朝起きて、ご飯食べて、『全力で』Twitter見て、『全力で』動画見て、『全力で』お風呂入って寝る。

どういうこと?

Twitterを楽しみましょう。

何となく見るんじゃなくて、楽しむためにTwitter開きましょう。
あるいは、目的を設定させるのもいいかもしれないです。

この休みに、このアニメ全部見るとか。
お風呂入ったときに、いつもより丁寧に洗ってみるとか。
ゲームやるときに、この難しいステージを今日クリアするとか。

過去に、アニメ見るの楽しかったときもあったでしょう。
過去に、お風呂入ったらいつもよりスッキリしたときがあったでしょう。
過去にゲームを全力でやって、楽しかったことがあったでしょう。

なんとなく消費している感じなら、全力で消費しましょう。
消費するのが良くないのではなく、有効活用できてないのが良くないので。

ってことで

最近なんか生活消費してる感じするので、一緒に遊びましょ(‘ω‘ )遊び誘う回数増えるかもしれないですん。

【一週間振り返り】調子に乗って人のこと考えなかった一週間【702日目】

1.今週一週間の感想(ざっくり)

かなり失言が多かった、もとい、それを指摘していただいてました。

2.良かったこと(新規・特徴的なこと)

  1. とある新しい試みやりました。おしゃべり系
  2. 仕事のサイト公開無事に完了っぽい

3.良かったこと(平時・生活的なところ)

  1. フィットボクシングやりました。あっせだく。
  2. 自炊回数増えてきました

4.もっとこうしたかったこと

良くない発言が多いのに気づかせてもらったまではいいですが・・・

一回どころじゃないし、過去何度もしているのをどう対策すべきかわからずにいます・・・
先週時点でも良くない状態にあったので・・・

5.新しく気づいたこと

自分に自信がないときにも同じことやってるので、調子に乗るだけが条件じゃないというか、
私の根っこにある良くない性質な気がします。

6.来週したいこと

ぺちこん北海道がんばります!

7.その他

フィットボクシングやってるのですが、めっちゃ肩いたい。

あと、フィットボクシングやるとBeatSaberできない。

8.体重

98.0kg

一方で、体調優れないのでどうしたものか・・・ってなってます。

【GoogleAnalytics】外部から自サイトの流入元を特定する【701日目】

イベントとかでサイト来た人を特定したい

普段、サイトに来た人はどこから来たかを特定することができません。

強いて言うなら、Twitterなどのソーシャルからの流入
Googleからの検索からの流入はわかります。

ただ、細かくどのリンクから来たかはわかりません。

加えて、リアルイベントでのQRコード配布などでのアクセスなど、リアルからの流入は特定できません。

ではどうしよう。

URLに目印をつける

ではどうするか、URLに目印を付けます。

リアルイベントには特定の目印、この広告にはこの目印、このメールマガジンには、この目印。

みたいに目印をつけてみよう。

特定までの手順

1. URLに目印をつける
2. 配布。
3. GoogleAnalyticsで確認

目印の付け方。UTMパラメータ

https://www.temperance-st.com/?utm_source=blog&utm_medium=blog&utm_campaign=nyamucoro_blog

こんな風に、本来のURLのあとに、 ?あとに utm_○○というようなステータスをつけます。

?utm_source=blog&utm_medium=blog&utm_campaign=nyamucoro_blog

つけるべきパラメータは決められています、間違えたりするのは良くないので、Googleが提供してる、下のサイトとか使うと、URLとパラメータを入れたら、目印付きURLができます。

ga-dev-tools.appspot.com

あとはこの目印付きURLで配布するだけ

GoogleAnalyticsで確認

Google Analytics側での確認は非常に簡単。特に設定はいりません。

集客 > キャンペーン > すべてのキャンペーン

これで流入がわかります。

f:id:willow710kut:20190914213119p:plain

目印つけて、効果を測ろう

サイト改善とか、広告改善などは、来た人の特性を元に分析すべきなので、
必要なところに必要な目印を付けて、分析に役立てましょうφ(・

【Hugo】素早くサイト作成なら静的サイトジェネレータ【700日目】

サイト作成しました

ってことで、サイト作成しました。

www.temperance-st.com

現在所属している会社です(‘ω‘ )
Hugoを使って作りました。

なんでHugo?

作業時間が短かったので、サクッと作りたかった。

サクッと作るにあたって、セキュリティ面のところを考慮まですると、さらに時間がかかるので、静的サイトにしたかった。

ってことで、あまり時間をかけずに、雰囲気を変えるために静的サイトジェネレータであるHugoを使いました。

静的サイトジェネレータ?

マークダウンとかで記事を書いたり、リンクの設定をしていきます。
そして最終的に静的ファイル(HTML・CSS・JS等)で構成されたサイトが出来上がります!

ようするに、簡単にサイトが作れるよ!

静的ファイル?

サイト作成とかはWordpressとかいろいろありますが、これらは見る時によってページが変わったりします。
データベースのデータが変わると、見れるページが変わりますね。動的ページ。

静的ファイルは、基本的に見る度に同じものが渡されるので、動かない。静的ページ。

Wordpressで良くない?

セキュリティの面を考えるってところです。

動的ページってことは、外部がいろいろした結果、ページが乗っ取られるとかいう可能性もあります。
管理画面とかにログインされたりしたら、大変ですしね。

ただのファイルを流すだけなら、考慮すべき点を減らせるってところでこちらを選びましたφ(・

ちなみに。

株式会社テンペランスシステムテクノロジーズは、仲間を募集してますよ!

Recruitページもあるのと、詳しいお話を聞いてみたいとかあれば、是非お気軽にお声がけください!

公式のメールでも、私のTwitterとかでもお気軽にお声がけください(‘ω‘ )

【PHP】PHPとLaravelのバージョンアップで苦しんだのメモ【699日目】

これはメモです

ってことで、改めて後日まとめるかもしれないです。

PHP 7.0->7.1 countの引数

count関数の引数がnullを受け付けなくなりました。

nullが来た場合、配列を入れてくださいってエラーが出ます。

Laravel 5.2->5.3 Paginator.phpのpresenterが消えた

5.2にあった、presenterメソッドが消えてる。

https://github.com/laravel/framework/blob/5.2/src/Illuminate/Pagination/AbstractPaginator.php#L352

viewFactoryResolverに変わっている・・・きがする?

https://github.com/laravel/framework/blob/6.x/src/Illuminate/Pagination/AbstractPaginator.php#L482

ちなみに、paginatorについて変更したと5.3のアップグレードガイドにはありますが、presenterメソッドについては触れられてません。

このメソッドを拡張していた場合は死ぬ(´;ω;`)

【CSS】inline要素とblock要素とinline-block要素の使い分けについて考える【698日目】

display: xxxいろいろある

display:inline;
display:block;
display:inline-block;

って書いたり、divやspanを使い分けることは結構あると思います。

では、それぞれどんな利点・意味があるんだろうって考えたことはありますか?
ってことで、少し試してみましょう。

実験してみる

divで灰色の箱を作り、その中に4つ要素を並べました。

上から、inline、inline-block、blockの順です。

<div class="box">
  <span class="inline-item">
    test1
  </span>
  <span class="inline-item">
    test2
  </span>
  <span class="inline-item">
    test3
  </span>
  <span class="inline-item">
    test4
  </span>
</div>
<div class="box">
  <span class="inline-block-item">
    test1
  </span>
  <span class="inline-block-item">
    test2
  </span>
  <span class="inline-block-item">
    test3
  </span>
  <span class="inline-block-item">
    test4
  </span>
</div>
<div class="box">
  <span class="block-item">
    test1
  </span>
  <span class="block-item">
    test2
  </span>
  <span class="block-item">
    test3
  </span>
  <span class="block-item">
    test4
  </span>
</div>

f:id:willow710kut:20190911202824p:plain

これが、各要素の結果です。

そして、これにwidthをつけてみました。その結果はこれ。

f:id:willow710kut:20190911203905p:plain

ここからざっくりわかること。

inline

中に含まれた文字などの大きさがギリギリ入る範囲がinline要素の大きさ。
widthやheightは使えない。
paddingなどを使うと、要素が大きくなる。

■使い所

  1. 要素を横に並べるとき
  2. 中に入った文字に応じてサイズを変えたりしたいとき

inline-block

中に含まれた文字などの大きさがギリギリ入る範囲がinline-block要素の基本の大きさ。
widthやheightが使えるので、幅の固定は可能。

■使い所

  1. 要素を横に並べるとき
  2. 中に入った文字を気にせず、サイズを変えたりしたいとき

block

中に含まれた文字などの大きさがギリギリ入る範囲がinline-block要素の『縦の』基本の大きさ。
横幅は、基本的に親要素のマックスのサイズ。
widthやheightが使えるので、幅の固定は可能。

■使い所

  1. 要素を縦に並べるとき
  2. 中に入った文字を気にせず、サイズを変えたりしたいとき

個人的な思い

CSSでfloatを使おうと言われることは多いかもしれませんが、
要素を浮かしてしまう、これは親要素を無視するようなものなので、個人的にはあまり好きではなかったりします(´・ω・`)(個人の感想)

中央寄せに関しても、意味的には、inline要素でtext-align:centerするのが本来やりたいことではないかな?って思うこともあります(´・ω・`)

なんとなく、CSSの使い方で調べて、それっぽいのをコピペするのも良いですが、
CSSの意味を理解すると、同じ書き方でもコード量が変わったりするので、意味を理解して使いましょうφ(・

今回使ったコード

https://codepen.io/klack710/pen/oNvdzGb

【PHP】interfaceは継承・多重継承が可能。読み込みの順番もあり?【697日目】

interfaceの継承

interface A
{
    public function a(string $a, int $b);
}

interface Foo extends A
{
    
}

これ、動きます。Fooはa()の実装を強制出来るinterfaceになりました。

interfaceの多重継承

interface A1
{
    public function a(string $a, int $b);
}

interface A2
{
    public function b(string $a, int $b);
}

interface Foo extends A1, A2
{
    
}

実はこれも動きます。
Fooは、a()とb()の実装を強制出来るinterfaceになりました。

多重継承で、同じメソッドを書いたら?

ではここでクイズ。

interface A1
{
    public function a(string $a, int $b);
}

interface A2
{
    public function a(string $a, int $b);
}

interface Foo extends A1, A2
{
    
}

class Hoge implements Foo {
    public function a(string $a, int $b)
    {
         return true;
    }
}

全く同じ関数名、同じ構成のものを多重継承したら?

これも動きます。ちゃんとHoge動きます。オーバーライドしてるっぽい?

多重継承で、同じメソッドを拡張するように書いたら?

interface A1
{
    public function a(string $a, int $b);
}

interface A2
{
    public function a(string $a, int $b): bool;
}

interface Foo extends A1, A2
{
    
}

class Hoge implements Foo {
    public function a(string $a, int $b): bool
    {
         return true;
    }
}

ではこれは?

なんと動きません。

PHP Fatal error:  Declaration of A1::a(string $a, int $b) must be compatible with A2::a(string $a, int $b): bool in /workspace/Main.php on line 13

A1のメソッド、A2のメソッドの条件に一致していないってなってます。

つまり・・・?

仮設: 多重継承に読み込み順がある?

interface A1
{
    public function a(string $a, int $b): bool;
}

interface A2
{
    public function a(string $a, int $b);
}

interface Foo extends A1, A2
{
    
}

class Hoge implements Foo {
    public function a(string $a, int $b): bool
    {
         return true;
    }
}

なんと、これ動きます。

これは仮設ですが、A2をまず継承したあと、A1を定義しているのかもしれません。
A2の条件をA1のメソッドが満たしているので、これは正しく動きます。

ちなみに、関数名変えたり並び替えたりは試したので、クラス名は関係なさそうですφ(・

まだまだPHPわからないことあって面白いですね(‘ω‘ )

【Laravel】クエリビルダでif文使うように条件付け足すwhen関数【696日目】

特定の条件のみクエリ付け足したい

クエリビルダで、リクエストに特定の値が含まれてるときに、
where文などのクエリを付け足したい。

逆に、特定の値がないときにはwhere文を付け足したくない

if(isset($request['start_at'])) {
    $query = $query->where('start_at', '>', ($request['start_at']));
}

こんなの書きたくなる。

なんかif文増えて見栄え良くないなって。

when

->when(isset($request['start_at']), function($query) use ($request) {
    return $query->where('start_at', '>', ($request['start_at']));
})

第一引数がtrueのときだけ、あとの無名関数が実行される。

参考

ドキュメント

https://readouble.com/laravel/5.7/ja/queries.html

Laravelの元コード

https://github.com/illuminate/support/blob/6.0/Traits/EnumeratesValues.php#L410