エンジニアのひよこ_level10

【毎日更新!】新卒2年目エンジニアブログです! プログラムだけじゃなく、マネジメントとかも書いていきたい!

【このブログは?】毎日更新してる、エンジニアブログです!!!

このブログは?

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

あなたは?

新卒2年目のエンジニアです。
Web系でLaravelを中心に、フロントもバックエンドもいろいろ手を出してます。

最近は、スクラムマスターになるのに向けて、マネジメント系の勉強もしています。

どの記事読めばいいの?

1.最近読まれている【注目記事】を読む

2.カテゴリで気になる記事を読む

3.以下の記事を読む

willow710kut.hatenablog.com

willow710kut.hatenablog.com

willow710kut.hatenablog.com

最後に

ここまで読んでくださり、ありがとうございます!

面白かったら、以下のボタンから是非twitterfacebookなどでシェアしていただけるとモチベーションに繋がります!!!

【リクエスト】LaravelのRequestクラスで使う基礎メソッドまとめ【311日目】

こんなときに使うRequest

フォームがあって、入力して、ボタンを押してpostリクエストを送る。

このリクエストの中身を使ってどうこうするときの関数。

サンプルページを作って、流れも合わせて説明。

リクエスト元ページ

http://localhost:8000/request というURLから、 teatってテキストを入れてsubmit。
このとき、リクエスト先のページは、 http://localhost:8000/request_receiveというURLにしています。

f:id:willow710kut:20180820194544p:plain

リクエスト先ページ

f:id:willow710kut:20180820194734p:plain

主なメソッドは上の画像の通り。
pathやurlなどで『どのURLに向かってリクエストしたか』が取得出来ます。

fullUrlは、クエリ文字を含めたものを取得します。
試しにGETでクエリ文字をれると以下の感じに。

f:id:willow710kut:20180820194831p:plain

これからわかること。

Requestには、大雑把に『届け先のURL』『inputの中身』『どんな方法で送ったか』が
保存されています。

http://localhost:8000/request_receive』に『teat』を『POSTで送る』

みたいな情報が入っています。
そして送ってもらった情報で、今回のようなページを返すわけですね。

どこから送られたとかは?

では、どこのページから送られたとかの情報は?
これはリクエストの中には入っていません。

その場合、 url()->previous()などで取得できます。ただ、URLを直接入力した場合とかは、
直前のページが存在しないので、取得出来ないです。

リクエストは、『情報ください!そのために必要な情報はこれ!』って渡している感じですね。

【一週間振り返り】悪い感情を他者にぶつける一週間でした。【310日目】

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

失敗して落ち込んだのを、他人にぶつけてしまった一週間でした。

2.良かったこと

プログラミングで自分の知ってないところを学べた。  →Auth周りや、JSでのGETやPOSTとか。

社会人2年目とはいえ、今失敗できたのは良かったこと  →次はやっちゃダメ。この振り返りがまた起こったら要仕組み化

ちゃんと朝起きれてる。

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

他人に不機嫌な顔、感情をぶつけてしまった。  →何も産まない・・・なんとかしたい

4.新しく気づいたこと

思った以上にプログラミング知識少ない。  →Laravelのドキュメントもっと読み直す

思った以上に、私の行動で開発に影響をしてしまうの思い知った。  →だけど、そこで中途半端に怯えるのは良くないので、今気づけたのはマル。

5.来週したいこと

Laravelでチュートリアル3つ進める。  →かなり遅れ出てます。やる。

6.その他

今持ち直してるのは、完全にチームの皆さんのおかげです。助けられています。
頑張って、チームのみんなにいい感じの影響を与えるように頑張りたい。

【Laravel】各ページ同じヘッダーを使い回すbladeの構成【309日目】

こんな時

ページのヘッダーはどのページでも同じものを使うことよくありますよね。
こんな時、毎回コピペするのは面倒。

そんな時はこんな構成にしましょう。

使い回すテンプレート

web/study-laravel/resources/views/_layouts/default.blade.php

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>{{ $__env->yieldContent('title') }}</title>
     <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
    @yield('content')
     <script src="{{ asset('js/app.js') }}"></script>
</body>
</html> 

注目するところ

<body>
    @yield('content')
</body>

こんなふうに、contentだけを、ページ毎に変えていく感じ。

content部分

web/study-laravel/resources/views/top.blade.php

@extends('user._layouts.default')
@section('title', 'TOPページ')
@section('content')
<div>
    <h1>TOPページ</h1>
</div>
<div>
    <p>Hello!</p>
</div>
@endsection 

注目するところ

@extends('user._layouts.default')
@section('content')
@endsection 

1.@extendsで、テンプレを指定する。
2.@section('content')と@endsectionの間にページを用意する感じ。

コピペは極力しないプログラミングをしよう!

コピペをするのは、二重管理をしてしまって、無駄なコードが増えたり、
管理が面倒になるので、極力コピペを避けるように、
綺麗なコードを書くようにしましょう!

例の構成

初回のページ作成 by klack710 · Pull Request #3 · klack710/study-laravel · GitHub

【思考メモ】組織のメンバーとして、今後やりたいこと【308日目】

注意

内容まとまってません!!!メモです

上に立つ人って本当に大変なんだなって……
私は先輩方のようになれるのかなって……
いっぱいいろいろ考えさせられた。

私は話し手・聞き手としては最悪の人材だけど、
それでも生きてるのは上司・先輩方のおかげだと思う。

(結論)今後の私の行動

聞き手として、話すこと聞くことを諦めないこと。

話の受け手として、この人になら話してもいいやと思ってもらえる行動をし続けること。

思考ベース

組織において、相手と自分がお互いに意見を交換しようと思う状態こそが大切なんじゃないかなって思った。

重要

組織で何か良くない関係がある時に、どちらが悪いとは言えないのかなって思う。

逆パターン

上の人が説明が下手でも、下の人が聞くのが上手なら、うまくいくかもしれない。

悪いパターン

どちらか片方が会話を拒否すれば、その時点で亀裂が生まれるのは時間の問題なのかなって。

状況への対策?

『相手に話そう』と思わせる環境づくりって、上の人がやりやすい立場なのかなって。

関係性に対して業務的な責任を持っている人が上の立場の人に多い気がする。だから、マネジメントとかいう言葉があるのかな。

今後の私の行動

どちらが悪いとかは一概には言えないけど、歩み寄る努力を自分自身は、諦めるべきではないのかなって思った。

聞き手として、話すこと聞くことを諦めないこと。
話の受け手として、この人になら話してもいいやと思ってもらえる行動をし続けること。

私にとってはどっちも高難易度だけど頑張らねば……!

【JavaScript】JSからApiや他ページを見る方法2つ【307日目】

こんな時使う

<a href="/"></a>

こんなふうにリンクを作るんじゃなく、

<button onClick="requestApi()"></button>

のように、JSでどこかのページを呼び出したい。

入力がある時だけページを呼び出すとか、if文を使いたい時とか。

1.ページ遷移

  location.href = '/home';

だけ。簡単だね!

2.jQueryapi呼び出し

  var ipass = [
    'id' => $('#id').val(),
    'password' => $('#password').val()
  ];
 
  $.post('/api/login', ipass)
  .done(function( data ) {
      alart('ログインできたよ!');
  });

こんな感じにすれば、ログイン処理とかかけますね。

jQuery.post() | jQuery API Documentation

注意

JavaScriptは、ユーザーにも見えてしまうコードなので、うっかり大事なパスワードとかを
書いたりしないように!

【nginx+phpfpm】Laravelでpublic配下のファイルが取得出来ない【306日目】

こんなことがありました。

docker-composeで管理、nginx+php-fpmで環境構築しました!

Laravelのチュートリアルページ表示されました!

・・・favicon.icoが反映されない?
public/app.cssや、public/app.jsが読み込めない・・・

起こってること

phpは、nginxの設定で通信をしてからリクエストを返してるので問題ない。
だから、phpファイルだけはうまくいく。

問題は、try_filesでファイルを取得しているところっぽい。

解決

nginxのコンテナに、public配下のファイルを置いていなかった(マウントしてなかった)せいでした。

今回は、docker-compose.ymlの方の設定ミス。

  nginx:
    container_name: study-laravel_nginx
    build:
      context: ./nginx
    volumes:
      - ./web:/var/www
    ports:
      - "8000:80"
    links:
      - php-fpm

volumesのパスを書き間違えてました・・・つっら・・・

おまけ:そんなこんなで作ったプルリク

ってことで、詰まって出来上がった、Laravelでbootstrapまで呼び出す実装のプルリク。参考に。

github.com

画面の遷移を図で書く時の方法メモ【305日目】

頂いたアドバイスのメモ

画面遷移図を描くということになりました。

目的は、要件の確認でした。

ユーザーのパターンに合わせて描く

例えば、プラチナ会員の画面のフローを順に描く。

通常会員の人の画面のフローを順に描く。

未会員の人の画面のフローを順に描く。

このように、ユーザーの状態に合わせて、ストーリーをたどるようにフローを描くと、イメージしやすい。

あまりイメージしにくいのが以下

フローチャートっぽく描く

画面を用意する、○○の時は右のやじるし・・・というように、雲の巣を描くように描く。

これは、画面の数を明らかにしやすいが、すぐに理解するのは難しい。

目的に合わせて図を描く

どちらが劣っているというわけではないが、人に説明するなら、
読む人がどんなふうに読んで理解するかを考えるほうがいい。

その場合、ストーリーを描くようにすると、読みやすいのかもしれない。