2023-06-05

Laravel環境構築(Mamp)

Homebrewのインストール

macOS等で動作するパッケージ管理システムのHomebrewをインストールします。

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

composer インストール

PHPのパッケージ管理システムであるcomposerをインストールします。

HomebrewでComposerが提供されていることを確認します。

brew search composer
brew install composer

MAMPのインストール

MAMPは、Apache（アパッチ）、MySQL、PHPをまとめてインストールできる便利なツールです。

https://www.mamp.info/en/downloads/

ご利用になるLaravelに合ったPHPのバージョンを設定しておきます。 Laravel9の場合には、PHP8以上が必要です。

Node.jsのインストール

Node.jsはサーバーサイドで動くJavaScriptです。

今回はNode.jsのバージョン管理ツールであるnodebrewを使ってNode.jsをいれていきます。

公式のGitHubページにある下記コマンドを実行します。

curl -L git.io/nodebrew | perl - setup

インストール後、パスを通します。

export PATH=$HOME/.nodebrew/current/bin:$PATH

コード追加後、ターミナルを開きなおすか、ターミナル上で下記を実行して設定を反映させます。

source ~/.bash_profile

Laravelプロジェクトのインストール

 composer create-project --prefer-dist laravel/laravel プロジェクト名

Laravelのホーム画面の表示

インストールが完了したら画面を表示して動作確認をしましょう。

php artisan serve

http://localhost:8000/ を開くと、Laravelのトップページが表示されます。

2023-06-01

【フリーランス体験記】初案件を終えてみての感想

エンジニアフリーランス

はじめまして私は2022年9月よりフリーランスエンジニアになりました。元々正社員としてエンジニアを約４年経験しそこから知り合いのエージェントを使用してフリーランスに転向しました。

率直な感想

正社員時代と仕事内容自体は変わらない！

どうして？

参画している案件先からしたら「フリーランスの人がきた」ではなく「SESの人がきた」だからです。エンジニアの人だとわかる方が多いかもしれませんが、規模の大きな仕事などは自社の人間だけでなく外注の方を含めてプロジェクトを回すことをほとんどだと思います。なので、案件先からしたら新しい外注さんがきたなくらいでその人が正社員かどうかなど気にしていないからです。

実際の仕事内容

SES時代と変わりませんでした。案件先のリーダー層の方からタスクが振られるのでそれを対応していくという感じでした。

１案件を終えての感想

案件に参画してすぐはフリーランスだからきちんとやらないとだめだみたいな感じですごく気を張っていました。ですが、仕事をこなしていく中で以前のSESの働き方と似ていることに気づいてからは少し気持ちに余裕を持って仕事を行っていました。技術的に不足している部分は多々あり自分の実力不足を感じましたが、恥しがらずに質問をすることで不足分を補うことができていたと思います。最終日も案件先の方から「コミュニケーションが取りやすく仕事がやりやすかった」と誉めていただくこともできました。

次案件に向けて

6/1からまた別の案件に参画することになったので、技術不足はまだあると思うのでそこは恥しがらずに質問をして技術力を身につけていきたいです！

2023-05-19

【Laravel】Larastanの導入

プログラミング PHP Laravel

php で有名な PHPStan という静的解析ツールがあります。

その Laravel 版として Larastan というものがあります。

こちらを利用することで、Laravel のソースコードの静的解析が可能となります。

Larastanのインストール

Larastan は composer を使ってインストールします。

composer --dev require nunomaduro/larastan

vender ディレクトリの中にインストールされましたので、インストールされたかを確認します。

./vendor/bin/phpstan analyse -V
PHPStan - PHP Static Analysis Tool 1.10.15

設定ファイルの作成

Larastan を実行する際の設定ファイルを作成します。

ファイル名は、「phpstan.neon」で作成します。

includes:
    - ./vendor/nunomaduro/larastan/extension.neon

parameters:

    paths:
        - app

    # The level 9 is the highest level
    level: 5

    ignoreErrors:
        - '#Unsafe usage of new static#'

    excludePaths:
        - ./*/*/FileToBeExcluded.php

    checkMissingIterableValueType: false

解析実行

./vendor/bin/phpstan analyse

※実行時のエラー対応

メモリ不足でのエラー

Child process error (exit code 255): [2022-05-02 00:50:29] local.ERROR: Allowed memory size of 134217728 bytes exhausted (tried to allocate 20480 bytes) {"exception":"[object] (Symfony\\Component\\ErrorHandler\\Error\\FatalError(code: 0): Allowed memory size of 134217728
     bytes exhausted (tried to allocate 20480 bytes) at phar:

↓対応内容

メモリ上限を上昇させる

./vendor/bin/phpstan analyse --memory-limit=2G

解析を無視

その時は、baseline ファイルを作成すると良いです。

./vendor/bin/phpstan analyse --generate-baseline

実行後、phpstan-baseline.neon ファイルが作成され、実際に無視されるエラー内容が記載されます。

parameters:
    ignoreErrors:
        -
            message: "#^Call to an undefined static method Foo\\:\\:sub\\(\\)\\.$#"
            count: 1
            path: index.php

解析の自動化

実際に Larastan を導入しても各自がチェックしないと意味がないため、強制的に Github へ commit したらチェックするように自動化します。

まずは、.github/workflows/phpstan.yaml として下記ファイルを作成します。

name: larastan

on:
  pull_request:
    paths:
      - "**.php"

jobs:
  laravel:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
    - name: Setup PHP
      uses: shivammathur/setup-php@v2
      with:
        php-version: '8.0'
        tools: composer:v2
    - name: Resolve dependencies
      run: composer install --no-progress --prefer-dist --optimize-autoloader
    - name: Run larastan
      run: ./vendor/bin/phpstan analyse --memory-limit=2G --configuration=phpstan.neon

ランキング参加中

プログラミング

2023-05-17

学生時代に影響されたアニメ

アニメ感動したアニメ

影響を受けたアニメ

『さくら荘のペットな彼女』

概要

『さくら荘のペットな彼女』は、作家・鴨志田一が手掛けたライトノベルを原作としたアニメ作品です。苦境に立たされた主人公が出会うさまざまな個性豊かなキャラクターたちとの交流を通じて、成長し絆を築いていく物語です。本記事では、『さくら荘のペットな彼女』の概要についてまとめていきます。

『さくら荘のペットな彼女』は、夢や目標を持っていない主人公・神田空太と学生寮「さくら荘」での仲間との青春学園物語です。物語としては夢や目標もなく日々を過ごす主人公が学生寮に新たに入居することになった椎名ましろとの出会いから、夢を見つけ夢の実現に向けて学生寮の仲間と日々奮闘するしていきます。

主要な登場人物

神田空田 (かんだ　そらた) 本作の主人公ペット禁止の一般寮で猫を飼っていたことを理由に追い出され[注 1]、1年の夏からさくら荘に入居している。 2年の春、さくら荘に入居したましろの世話をする当番（ましろ当番）を押しつけられる。ましろの才能を目の当たりにして自分のやりたいことを見つけ、ゲームデザイナーを目指す。
椎名ましろ（しいなましろ）本作のヒロイン世界的な天才画家として名を馳せているが、一人ではまともに身の回りのことすらできない常識と生活力のなさから空太に「介護」されている。何故か空太に懐き、やがて意識するが、本人にとって初めての感情でそれが何かを理解していない様子。
青山七海（あおやまななみ）声優を目指していて養成所に通っている。生活費と養成所のレッスン料を稼ぐために、コンビニでバイトをしている。声優志望だが両親に反対され、迷惑をかけないという条件でスイコーに進学すると共に声優養成所に通う。声優になるため普段からイントネーションに気をつけながら標準語を話すが、パニックになると大阪弁が出てしまう。
上井草美咲（かみいぐさみさき）入学して1週間でさくら荘に島流しされた。趣味はアニメやゲームで、自作アニメも多数制作している。行動力が高く、しばしば周囲の人も巻き込んで飛び回る。その数知れない奇態ゆえ空太から「宇宙人」と呼ばれる。
三鷹仁（みたかじん）脚本家を目指している。美咲とは幼馴染。美咲の制作するアニメでは脚本を担当している。普段は落ち着いた性格だが、一度怒ると喧嘩早くなる。女性関係にだらしなく日替わりで女性宅に寝泊まりしている。また、空太のことを「自慢の後輩」だと思っている。
赤坂龍之介（あかさかりゅうのすけ）プログラマーとして企業から業務を引き受けている。自他ともに認める凄腕で、企業関係者からは「業界のプログラマーで3本の指に入る」と言われるほど。中学時代にも当時の同級生4人とゲーム作りに励んでいたが、龍之介と他のメンバーとの間でゲーム作りに対する価値観の相違から仲違いをしており、一度は誰かと組んでのゲーム作りを諦めていたが、空太の熱意に押されて、伊織やリタを加えたメンバーでゲーム作りを行っている。
千石千尋（せんごくちひろ）さくら荘の監視要員（管理人）として暮らしている美術の教員で、自称「29歳と○○ヶ月」。ましろとは従姉妹の関係にある。スイコーと水明芸術大学の卒業生。監視要員にも関わらずいい加減でずぼら。その身体はビールと合コンで出来ていると公言する。本人には内緒だが空太は「アマゾネス」と呼んでいる。

影響された理由

私も学生時代将来の夢がなく日々を過ごしていました。そんなところを主人公と重ねてしまったのかもしれません。この作品を見てから私も物作りをしたいと思うようになり、それからエンジニアを志すようになりました。

最後に

今回は私が学生時代に影響されたアニメを紹介させていただきました。みなさんにも影響を受けたアニメがあるかと思います。もし、よろしければコメントで教えてください。

2023-05-14

【JavaScript】slickについて

プログラミング JavaScript

jQueryのプラグインとは？

ライブラリとは様々な機能をパーツ化したものです。

よく使用されるjQueryのプラグインの種類

スライドショー系（スライダー）
スクロール系
アニメーション系
UI系

slick

王道のスライドショーライブラリです。

不具合も少なく、安定的に使えるのがslickプラグインです。

公式サイト

http://kenwheeler.github.io/slick/

代表的なオプション

スライドショーのアニメーションの時間を調整
レスポンシブに対応する
センターモードにする（真ん中のスライドを大きく見せる）
スライドの追加、削除機能
スワイプ対応

使用するための準備

以下ライブラリを読み込む

slick.css
jquery.min.js
slick.min.js

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

実装

必要最低限ではありますが実装に必要なコード記載しています。

※ライブラリの読み込み部分は省略してあります。

<div class="slide-items__wrap">
  <ul class="slide-items">
    <li class="slide-items__item">
      <img src="sample.png" alt="">
    </li>
    <li class="slide-items__item">
      <img src="sample.png" alt="">
    </li>
    <li class="slide-items__item">
      <img src="sample.png" alt="">
    </li>
  </ul>
</div>

$('.slide-items').slick();

オプションを使用してみます。

$('.slide-items').slick({
  autoplay: true, // スライド自動再生
  slidesToShow: 5, // 表示させるスライドの枚数
});

2023-05-14

【JavaScript】jQueryパッケージ管理

プログラミング JavaScript

npmにより、jQueryを制御する

前提条件

npm(node.jsのパッケージ管理)がインストールされていること

jQueryのインストール

$ npm install jquery --save

プロジェクト直下のnode_modulesフォルダに、jQueryがインストールされます。

jQueryの使用

サンプルコード

'use strict';

var $ = require('jquery');

$(function(){
    $('h1').css('color','red');
})

2023-05-11

【JavaScript】有効な日付か判断する方法

プログラミング JavaScript

Dateオブジェクトに変換して有効かどうか判断する

var date = new Date("2000-10-40"); 

// 正しい日付の場合処理を実行
if(!isNaN(date.getDate())){
  // 実行したい処理
}

解説 1. 日付をDateオブジェクトに変換する。 2. getDateメソッドで日付の情報を取得する。 3. getDateメソッドは有効でない日付だとNaNを返す。 4. それを isNaN で判断する。 ※( isNaN() 関数は引数が NaN かどうかを判定します)

※ yyyyMMdd の形式の日付は、Dateオブジェクトへの変換がうまくいかず、正しい日付でも有効でない日付と判断されることがあります。形式を変換してから行う必要があります。