バーテンダーエンジニア

元フレアバーテンダーからエンジニアに転職。未経験からのエンジニア転職経験談・実務で感じたこと・個人開発で学んだ内容・日常話などマイペースに発信していきます。仕事ではphp、Laravel、Vue.js、Angular辺りを触ってます。趣味は筋トレ!!ソムリエの資格も持ってます^^

独学でプログラミング学習していた自分に今の自分が伝えたい3つのこと

はじめに

未経験からエンジニアに転職してから1年半ほど経ちました。
就業中の会社では、未経験からエンジニア転職してきた方のメンターをする機会もいただけるようになりました。
そのような経験をする中で、独学でプログラミングを学習していた頃の自分が疑問に思っていたこと、今自分がその立場になったら気をつけたいと思うこと、未経験から転職した方のメンターを務めて感じた内容を簡単にまとめてみました。

①プログラミングは暗記しなくていい

プログラミング学習は試験勉強とは違います。全てを暗記していないと仕事ができないというものでもありません。
もちろん変数や、関数の意味すらわからないとなると問題ですが、各言語で用意されているメソッドを覚える必要もありません。「こんなことできるメソッドあったな〜」くらいの認識で大丈夫です。調べりゃいいんだから!!
よく使うメソッドなんかは気づいたら覚えてます。
完璧に覚えようと基礎教材を何周もやるのは時間が勿体無いので次のステップに移りましょう!

②エラーコードを読む癖をつける

スクール卒業後にエンジニア転職してきた方でも、エラーコードが画面に表示されると思考停止してしまう方がいます。エラーコードは悪ではありません。何が起こっているかを知らせてくれる重要な存在です。
英語が苦手であれば、翻訳アプリにエラーコードをコピペしてください。学習の時からエラーコードが出た際はその意味を理解するように心がけましょう。

③いい質問の仕方を身につけよう

実際の業務にはいった時、未経験の方に一番求められる能力が質問力かと思います。
質問する際に必要なことは、事実と経緯だと私は考えています。
「何をしようとして、どういう事をしたらそうなったのか。またどのような対応を試したのか」ということを整理してから質問する癖をつけましょう。
くれぐれも「Aというエラーが発生し、その解決策が分からないです!」のよな質問の仕方はしないようにしましょう。

まとめ

今回は、自分自身が振り返って特に必要性を感じたことを3つまとめさせていただきました。
このようなスタイルの記事を書くのは初めてでしたので拙い箇所もあると思いますが、たまにはこういった内容もまとめていきたいと思います。

LaravelにVuetifyを導入する

はじめに

本記事は、Vue.js × Laravelを利用したアプリケーションのUIフレームワークとしてVuetifyを使用した際の手順を備忘録として残したものです。
本記事では、App.vueコンポーネントをルートコンポーネントとして、VueRouterを利用しておりますのでそちらを念頭に置いていただけると幸いです。
尚、LaravelにVue、VueRouterを導入する方法に関してはこちらの記事を参考にしております。

www.hypertextcandy.com

Vuetifyとは...

Vuetifyは、マテリアルデザインを採用したVue用UIフレームワークです。(TailwindCSSなども有名です)
マテリアルデザインは、Googleが提唱したデザインシステムです。Vuetifyを使う事で、画面のレイアウトやUI部品の配置などを効率よく統一感のある形で進めることができます。

vuetifyjs.com

環境

・Laravel 7系
・Vue 2系 (Vuetifyは3系は、2021/5の時点でまだサポートされていないようです)

導入手順

今回はnpmを利用してVuetifyを導入していきます。また一緒に

$ npm install vuetify

同時にv-iconタグを利用できるように以下をインストールしておきます。

$ npm install @mdi/font

完了後、app.jsを以下のように変更します。

import Vue from 'vue'
import Vuetify from 'vuetify' ←追加
import 'vuetify/dist/vuetify.min.css'; ←追加
import "@mdi/font/css/materialdesignicons.css";  ←追加

import router from './router'

import App from './App.vue'

Vue.use(Vuetify) ←追加

new Vue({
    el: '#app',
    vuetify: new Vuetify(), ←追加
    router,
    components: { App },
    template: '<App />'
})

最後にVuetifyの適応を確認するために表示するコンポーネント内の記載を以下のように編集します。

<template>
  <v-card
    color="grey lighten-4"
    flat
    height="200px"
    tile
  >
    <v-toolbar dense>
      <v-app-bar-nav-icon></v-app-bar-nav-icon>

      <v-toolbar-title>Title</v-toolbar-title>

      <v-spacer></v-spacer>

      <v-btn icon>
        <v-icon>mdi-magnify</v-icon>
      </v-btn>

      <v-btn icon>
        <v-icon>mdi-heart</v-icon>
      </v-btn>

      <v-btn icon>
        <v-icon>mdi-dots-vertical</v-icon>
      </v-btn>
    </v-toolbar>
  </v-card>
</template>


添付画像のようなツールバーが表示されていれば導入完了です。 f:id:YKIchannel:20210508160255p:plain

アプリケーション内に外部サイトを表示する方法(Angular)

はじめに

フロントエンド開発で、あるページに外部サイトを表示したいとの要望があった為その対応を行った。

実現方法

htmlのiframeタグを利用する事で、要望を実現する事ができる。

iframeとは、src属性で指定したURL(リンク先ページの内容)をインラインフレーム表示できるHTMLタグの一つです。

html4の頃は非推奨だったようですが、HTML5では非推奨が解除されているようです。

YouTube埋め込みやAmazonの商品リンクなど多く利用されているのも原因ですかね?。。

実装内容

該当のhtmlファイルを以下のように編集します。

// Angularを利用してヘッダー部分を表示する為に利用しています。
<app-service-header
  [serviceName]="serviceName"
  [serviceCategory]="serviceCategory"
  (onClickedClear)="backToTop()"
>
</app-service-header>

// ※外部サイト表示箇所
<div class="iframe-container">
  <iframe
    src="https://angular.jp/"
    frameborder="0"
  ></iframe>
</div>
// ヘッダーの高さを定義しているファイル
@import "../../assets/styles/const.scss";

.iframe-container {
  height: calc(100% - #{$service-header-height});
  iframe {
    width: 100%;
    height: 100%;
  }
}

f:id:YKIchannel:20210304142640p:plain

上記のようにする事で、localhost:4200でアクセスしたページ内にAngularドキュメントページを表示させる事に成功しました。

おまけ

iframeのborderやスクロールバーを削除するには、scrolling="no"、frameborder="no"を利用します。scrilling="no"をすると画面が固定になります。

Angularで開閉メニューを実装する

この記事の目的

Angularでアプリによくある開閉式のメニュー(この名称が正しいのか微妙ですが...)を作成する方法を紹介します。 qiita.gif

Angular-materialを利用することで、簡単に実装することが可能です。本記事ではAngular11をベースに実装を行っております。

実装スタート

実装といってもモジュールをインポート、テンプレートを追加していくのみです。

まず、対象のモジュールに下記モジュールをimportしておきます。 また今回は、ヘッダーに開閉メニューボタンを置く為、ヘッダーデザイン用のモジュールも一緒にimportしておきます。

import { MatToolbarModule } from '@angular/material/toolbar'; // ヘッダー用
import { MatMenuModule } from '@angular/material/menu'; // 開閉メニュー用
import { MatIconModule } from '@angular/material/icon'; // アイコン用

テンプレート側では以下のように記載してください。

<mat-toolbar color="primary">
  <span>アプリタイトル</span>
  <span class="spacer"></span>
  <button mat-button [matMenuTriggerFor]="menu">
    <mat-icon>account_circle</mat-icon>
  </button>
  <mat-menu #menu="matMenu">
    <button mat-menu-item>プロフィール</button>
    <button mat-menu-item>ログアウト</button>
  </mat-menu>
</mat-toolbar>

mat-toolbarでヘッダーの部分を作成し、mat-menuを利用することで簡単に開閉メニューを作成することができます。 プロフィール、ログアウトなどの項目にアイコンをつけてあげるとそれっぽくなります!!

最後に...

今回の記事はAngular-materialのドキュメントを参考にさせていただいてます。 https://material.angular.io/components/menu/overview

Anuglarの要素を非表示にした場合の挙動(ngIfとスタイルバインディングの比較)

目的

Angularでは要素を非表示にする方法として、ngIfを利用する方法、スタイルバインディングを利用してdisplayスタイプロパティを設定する方法があります。 この2種類の方法をどのように使い分けるのか気になったので調査してみました。 ※Angular11にて確認を行っています。

準備

以下コードで実際の挙動を検証していきます。

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  show = true;

  onClickChange() {
    console.log("A");
    this.show = !this.show;
  }
}

<div>
  <div *ngIf="show">ngIfを利用</div>
  <div [style.display]="show ? 'block' : 'none'">スタイルプロパティを利用</div>
  <input type="button" (click)="onClickChange()" value="切り替え">
</div>

切り替えボタンを押下すると、showプロパティの値が切り替わり表示と非表示が切り替えられる簡単なコードなります。

実証

実際に切り替えを行い、ディベロッパーツールで確認すると添付画像のようになります。 スクリーンショット 2021-01-16 10.34.06.png ngIfでは要素そのものが破棄される、スタイルバインディングでは要素は残り、スタイルが適用され隠れている状態ということがわかります。 ページ上の要素は、表示/非表示に関わらずデータバインディングに関わる変更監視等を続けるので、余計なリソースを消費することに繋がる為ngIfでは、文書ツリーから破棄する動きをとっているようです。

結論

・基本はngIfでの表示切り替え。
・初期化に高いオーバーヘッドを要する処理かつ頻繁に切り替えるような箇所の場合は、スタイルバインディングを利用。

以前少しだけ触ったVueでもv-showとv-ifの表示の違いがあったような。。。 フロントエンドについてはまだまだ初心者ですの誤った認識などありましたらご教授ください。

Laravel6系でstr_rundomが利用できなかった件

事象

Laravelでトークン認証用のランダム文字列を作成する為、str_randomメソッドを利用した所 [Call to undefined function]のエラーが発生しました。

原因

Laravel6では文字列や配列のヘルパはデフォルトから削除されたことが原因のようです。
なぜ非推奨にしたんでしょうか??
何はともあれ下記コマンドでヘルパを追加して無事に動作確認とれました。

$ composer require laravel/helpers

Call to a member function メソッド名 on nullエラーの解決

はじめに

Laravelでバックエンドを開発中以下のエラーに遭遇しました。

Call to a member function getIndex() on null

最初原因が特定できずに困っていたので、備忘録として残しておきます。

開発環境

Mac OS Catalina 10.15.6
PHP 7.3
Laravel 6.20.2

エラー内容

Call to a member function getIndex() on null

こちらの意味はgetIndexが存在しないオブジェクト(というかnull)に対して実行しようとしているというものです。該当の箇所は以下のように記載していました。

<?php
namespace App\Http\Actions;

use App\Http\Controllers\Controller;
use App\Http\Responder\BookResponder;
use App\Domain\BookDomain;
use Illuminate\Http\Request;
use Illuminate\Http\JsonResponse;

final class BookIndexAction extends Controller
{
    protected $domain;
    protected $responder;

    public function __constract(BookDomain $domain, BookResponder $responder)
    {
        $this->domain = $domain;
        $this->responder = $responder;
    }

    /**
     * 書籍一覧画面データを取得
     *
     * @param Request $request
     * @return void
     */
    public function __invoke(Request $request): JsonResponse
    {
        $data = $this->domain->getIndex();
    }
}

こちら$this->domainがすでにNULLになっている模様。
確認するとpublic function __constructにタイポが。。。。単純なミスでした。
急いでVS codeにスペルチェックをいれました!!

marketplace.visualstudio.com