スタイル・エッジLABO技術ブログ

士業集客支援/コンサルティングのスタイル・エッジグループ スタイル・エッジLABOのエンジニアによるブログです。

PhpStromに乗り換えてみる

f:id:styleedge_tech:20200110121228j:plain
Photo by Zany Jadraque on Unsplash

はじめに

こんにちは。スタイル・エッジLABOのNです。

さて早速ですが、弊社では希望者にはPhpStormのライセンスを会社負担で支給していただけます。

私はスタイル・エッジLABOへはつい最近転職してきたばかりなのですが、以前いた会社ではそういった制度はなかったものですから、PhpStormを利用しようと思うとで個人利用で初年度は1万円少々かかります。2年後以降も安くはなっていくもののランニングでコストがかかるとなると庶民にはなかなか手が出づらいものでした。

ですが会社のお金で使えるならこれ幸いと私も遅ればせながらPhpStormデビューを果たしてみましたので使ってみたプラグインを5つ紹介させていただこうと思います。

1. IdeaVim

PhpStormのエディタ操作をVimキーバインドにしてくれます。 もともとVimで開発を行っておりましたのでこれがないと始まらぬ、ということで入れました。 Vimの機能を完全再現、とまではさすがにいきませんのである程度割り切りは必要なのですが、十分に使えるのではないでしょうか。

2. Scratch

プロジェクトに依存しないファイルにメモ書きができます。 Vimを使ってるときはちょっとしたメモを新規タブで開いてさっと書いたりしてたのですが、PhpStormではどうするか、、、と思っていたところ見つけました。 便利です。

3. Auto-Align

イコールの位置を調整してくれます。

f:id:styleedge_tech:20200110111821g:plain

4. Emmet

HTMLコードの補完をしてくれます。 >で子ノード、+で兄弟ノード等を表現することで記述の簡略化もすることができます。 いろんなのエディタのプラグインとして提供されてたりしますがPhpStormではデフォルトで利用することができるようです。

f:id:styleedge_tech:20200110111909g:plain

5. Tab Shifter

分割したウィンドウ間の移動や、ウィンドウサイズの変更ができます。 マウスを使わずにこれらの操作をしたかったので導入しました。

f:id:styleedge_tech:20200110120623g:plain

最後に

PhpStormはプラグインの導入もボタンひとつで簡単にできます。 他にもデバッグ機能等、便利な機能を搭載しているようなので、ぜひ活用して自分好みの開発環境に育てていきたいですね。

スタイル・エッジLABOでは、一緒に働く仲間を募集しています。 もし興味を持っていただけましたら、ぜひ採用サイトものぞいてみてください!

株式会社スタイル・エッジLABO採用サイト

Visual Studio Codeをかわいく変身させたい!

f:id:styleedge_tech:20191204163229j:plain
Photo by Bruno Nascimento on Unsplash
はじめまして!スタイル・エッジLABOでインターンをしてます、MJです。

LABOでインターンを始めてはや2か月、ずっと思ってることがありました。
それはVisual Studio Codeをもっとかわいくさせたい、、!」ということ。
みなさまの中にもこんな考えを持った人いらっしゃるのではないでしょうか。

  • 見た目がかわいくないとテンションが上がらない

  • 見た目から入るタイプだ

  • 「カワイイはつくれる」

今回はそんなかわいい信者のエンジニアのために、Visual Studio Codeかわいくカスタマイズさせる方法についてご紹介します!
Visual Studio Codeにはたくさんの配色テーマがあり、その中にもかわいいものはたくさんありますが、わたしは配色テーマをさらにカスタマイズして自分好みのものに変えていきます。

カスタマイズ前

f:id:styleedge_tech:20191212141756p:plain かっこいいけど、もっとかわいさもほしい・・!ということで、まずはかわいい配色テーマを探していきます。

配色テーマのインストール

まず左下の歯車マークから配色テーマを選択します。 f:id:styleedge_tech:20191204123007p:plain

f:id:styleedge_tech:20191204123502p:plain
その他の色のテーマをインストールを選択すると、Marketplaceが表示されるので、その中から自分好みの配色テーマをインストールします。(かなりたくさんあるので、選ぶのも楽しいです!)

わたしは今回"Electron Color Theme"にしました! f:id:styleedge_tech:20191212141642p:plain
カラフルでかわいくなりましたが、タブや文字、カーソルの色などをもう少し変えたいので、ユーザー設定(settings.jsonファイル)から配色テーマを直接編集していきます。

settings.jsonの編集

ファイル > 基本設定 >設定 と進みます。 f:id:styleedge_tech:20191204125056p:plain
ワークベンチの中に、settings.jsonで編集があります。 f:id:styleedge_tech:20191204125541p:plain
それを選択すると、編集画面が表示されるので、直接編集します!

{
      "workbench.colorCustomizations"{
            "設定項目":"値"
   }
}

このように、カラーの設定を変更したい場合は、"workbench.colorCustomizations"の中に書き込みます。(配色以外にも様々な設定を編集することができます)

カラーを設定できる要素の一覧は、リンク先から見ることができます。

Theme Color | Visual Studio Code Extension API

カスタマイズ後

{
  "workbench.colorCustomizations": {
   "editorCursor.foreground": "#eaf4fc" //エディタカーソルの前景色
        "tab.activeBackground": "#88b5d3" //アクティブなタブの背景色
        "tab.activeBorder": "#88b5d3" //アクティブなタブの下罫線
        "activityBar.background": "#8384f5" //アクティビティバーの背景色
        "statusBar.noFolderBackground": "#ffadff" //フォルダーが開かれていないときのステータスバーの背景色
        "statusBar.background": "#ffadff" //標準ステータスバーの背景色
        "statusBar.noFolderForeground": "#ffffff" //フォルダーが開かれていないときのステータスバーの前景色
        "statusBar.foreground": "#ffffff" //標準ステータスバーの前景色
     }
 "editor.tokenColorCustomizations": { //配色テーマの文字カラー設定
        "[Electron]": {
            "comments": "#626063" //コメント
            "strings": "#fdeff2" //文字列
            "functions": "#99ccff" //関数
            "variables": "#ffadd6" //変数
     }
}

設定を変更した後は以下のような見た目になりました。パステルカラーがかわいいです!! f:id:styleedge_tech:20191212141924p:plain
エディタがかわいいとコーディングも捗りそうです!ぜひお試しください。

最後に

スタイル・エッジLABOでは、一緒に働く仲間を募集しています。 もし興味を持っていただけましたら、ぜひ採用サイトものぞいてみてください!

株式会社スタイル・エッジLABO採用サイト

VSCodeを育てよう

こんにちは!スタイル・エッジLABOのぱるです。

私はスタイル・エッジLABOでインターンをしております大学4年生です!

初めての記事作成で緊張していますが、どうか最後までお付き合いくださいorz

私はスタイル・エッジLABOでのインターンが開始して一カ月、
Udemyというオンライン講座を受講しながらHTML5CSS3の勉強をしていました!

全くのプログラミング初心者の私は、
「プログラミングってなんか黒い画面にカラフルな英語が表示されるカッコいいやつ」
というイメージしかもっていなかったため、黒くてカッコいいやつを操作できるのを楽しみにしていました!

f:id:styleedge_tech:20191121174629p:plain
Photo by Florian Olivo on Unsplash
↑黒くてカッコいいやつ


しかし...

動画で講師の方がプログラミングのツールとして紹介されたのは「メモ帳」ではないですか!

動揺を隠しきれない私...

ただ、続いて講師の方がおっしゃったのは、「メモ帳でもコードをかけますが、無料のエディタも豊富ですからどうせならエディタを使って書いてみるといいでしょう」とのこと....

エディタとは何!?というレベルだったのですが、先輩社員におススメのエディタを聞いて取り敢えず「エディタ」なるものをダウンロードしました。

エディタのダウンロードが完了し、さっそくエディタを開いた私が思ったことは、「あの黒くてカッコいいやつだ!」です。

勉強に取り掛かるのにはモチベーションが大事ですが、なんかカッコいいやつで勉強できるというだけで開始早々私のテンションは急上昇!

f:id:styleedge_tech:20191121174245p:plain
Photo by Peter Conlan on Unsplash

そんな感じで私のプログラミングの勉強が始まりました!

※私がダウンロードしたエディタは” Visual Studio Code ”です。
※私はMicrosoftの回し者ではございません。

拡張機能万歳!

ブログを書くのが初めてなもので、前置きが長くなりすみません....

それでは本題に入っていこうと思います!

私が勉強する中で感じたことは、エディタに拡張機能を追加していくとコードを書くのが非常に楽になるということです。 実際に勉強する際に使用したのは3種類の拡張機能ですが、せっかく拡張機能の尊さに味を占めたので、ブログを書くにあたっていくつか拡張機能を試してみました!

ということで今回は [VSCode拡張機能をまとめちゃおう!] というテーマで書いていこうと思います!


拡張機能紹介

まずは、私が勉強中に使用していたエディタのご紹介です!

1、Japanese Language Pack for Visual Studio Code f:id:styleedge_tech:20191119120940p:plain

  →VSCodeを日本語で使用するのにマストの拡張機能です!

   よほど英語に自信があるぜ!という方以外は入れたほうが無難でしょう。

   今回ご紹介する拡張機能の中でも、最もダウンロード数が多かったです。

2、htmltagwrap f:id:styleedge_tech:20191119121152p:plain

  →該当のコードをドラッグして" Alt+W "を入力するだけで自動でPタグで囲まれる拡張機能です!

   Pタグが表示されたのちにそのまま任意のタグを入力すると即書き換え可能ですのでタグを入力する

   手間を省くのにはぜひとも入れておきたいですね!

3、テキスト校正くん f:id:styleedge_tech:20191119121237p:plain

  →なんともかわいらしいネーミングの拡張機能ですね。

   読んで字のごとく、入力した文章を構成してくれる拡張機能です!

   htmlでは文章をたくさん書くと思いますが、長文を入力していると文章の見直しも大変ですよね....

   テキスト校正くんを入れておけば、波線の個所を治すだけでよいので非常に見直しが楽になります!!


他の拡張機能も試してみた!

HTMLとCSSの勉強をする中で拡張機能のすばらしさを知った私は、勉強が一通り落ち着いてから追加でいくつかの拡張機能を試してみました!

1、indent-rainbow

f:id:styleedge_tech:20191119161338p:plain

  →この拡張機能を入れるとエディタを見ていて楽しくなりますね!

   タグが多くなってくると、どのタグとどのタグがセットなのかわかりづらい...なんてこともあるかと

   思います。ただ、indent-rainbowがあれば視覚的に色でセットの括りがわかるのでそんなストレスとも

   おさらばできますね!

2、Bracket Pair Colorizer 2

f:id:styleedge_tech:20191119165212p:plain

  →{ } , ( ) , [ ] ,< > などあらゆる種類の括弧のペアを色ごとに分けて表示してくれます!

   初心者のミスとしてペアが組めていないということが多かったので非常に重宝します!

最後に

前置きと本題のバランスが悪くなってしまいましたが、最後までお付き合いくださり有難うございました!

超駆け出しシステムエンジニアの呟きとして読んでいただけたなら嬉しいです!

次にブログを書く際には成長を感じられるように、駆け出しシステムエンジニアとして頑張っていこうと思います!

f:id:styleedge_tech:20191121175224p:plain
Photo by Stage 7 Photography on Unsplash


スタイル・エッジLABOでは、一緒に働く仲間を募集しています

  もし興味を持っていただけましたら、ぜひ採用サイト↓も覗いてみてください!

recruit.styleedge-labo.co.jp

Laravelのカスタムバリデーションでもパラメータを渡したい!

f:id:styleedge_tech:20191007101412j:plain
フリー写真素材ぱくたそ

こんにちは!スタイル・エッジLABOのやっすんです。

Laravelでバリデーションを実装するとき、 「max:256」のように、呼び出したバリデーションの後ろにコロンでパラメータを渡すことがありますよね。
今日はLaravelのカスタムバリデーションでもこのようなパラメータを渡せるようにする方法をご紹介します。
なお、Laravelのバージョンは5.5、PHPのバージョンは7.1で実装しています。

続きを読む

【ISUCON9】に参加してみた!

こんにちは!
スタイル・エッジLABOのしんちゃんです。

今回、我々スタイル・エッジLABOメンバーは、2019/09/08に開催された
「いい感じにスピードアップコンテスト」、通称ISUCONに参加しました!

ISUCONって何??っていう人のために、、、

「ISUCON」...お題となるWebサービスを、決められたルールの中で
限界まで高速化を図る、LINE株式会社主催のチューニングバトル

そうです!
ISUCONとは、過去の実績など一切関係ない己の知識と経験だけ
勝負を行うガチンコバトルです。

スタイル・エッジLABOメンバーも自身の意地プライドにかけ、
休日にも関わらず参加してきました。

今回の記事では、大会参加の様子を伝えたいと思います。


* いきなり足切り!?序盤で半分以上脱落...?

10時開始ともに全チーム一斉にスタートしました。

が....

webサービスが渡されてこない...?

事前に運営より準備するよう言われていたインスタンスwebサービスが降りてきません。

なんとか我がチームインフラ担当のK氏による機転で、
別のインスタンスを作ることで、運営から、webサービスを受け取り、
スタートラインに立つことができました。

他のチームの反応を見ると、まだほとんどのチームがスタートできておらず、
おそらくこの「魔の足切りで多くのチームが脱落したのでは、、と感じています。

その時に本日の最高順位17位」を叩き出しました(^ ^)

f:id:styleedge_tech:20190909160736j:plain


* そう簡単には行きません... 

なんとかスタートラインに立てたので、皆それぞれの役割に分かれ、取り掛かりました。

序盤の役割としては大きく分けて、「環境構築隊」「コード隊」の二つです。

想定外だったのは、ローカル環境が上手く作れず、
ローカルでwebサービスを動かせなかったことです。

これにより、変更点を加えた場合、いきなりベンチマークを行わければいけません。
これのおかげで結構な手間と時間を食われました...


↓ レンジに行く時間を惜しみ、冷たい弁当を食べるメンバー

f:id:styleedge_tech:20190910085857j:plain


* 当日意識したところ

当日、意識したところは大きく分けて以下の三つです。

SQL文で削れるところはないか
② DBにindexを貼る
③ 画像に圧縮をかけて下ろせないか

③は業務で同じようなところがあったので、奮闘の結果なんとかできました。
①②に関しては、目に付くところは大方出来たのではないかと思います。


* 最終結果は...

何度か落ちてしまい、今年も失格かな、、という場面もありましたが、
なんとか最後まで奮闘でき、失格にはならず終えることができました。

また、台風が来ていたこともあり、16時解散だったため
早めの退散にはなりましたが、できることはやったと思います。

お待ちかねの結果はというと、、、

f:id:styleedge_tech:20190910093257p:plain

277組中132位です✨

後日、スコアが0ではない人の中で順位を見てみると、
下から数えた方が早かった です。。

しかし何にせよ、前回は「失格」だったので、大きな進歩です!w


* まとめ

今回我々は、PHPを選んでやりましたが、
結果を見ると、ほとんどの組みがGoを使っていました。

本戦出場チームにはPHPを使っていたチームも2組いましたので、
我々も努力次第では予選突破できるかもしれない、という夢はあったので、
来年は本戦出場を目指して頑張りたいです🔥


最後に

スタイル・エッジLABOでは、一緒に働く仲間を募集しています。 もし興味を持っていただけましたら、ぜひ採用サイトものぞいてみてください!

株式会社スタイル・エッジLABO採用サイト

Laravel使ってみた!

f:id:styleedge_tech:20191129153549j:plain
Photo by Vincent Yee on Unsplash

初めに

こんにちはスタイルエッジLABOのSです。
初めて元Sler(Laravel初心者)がLaravelを使ってみた感想などまとめます。
この記事はこれまでPHPでのシステム開発に触れる機会が少ないエンジニアでも
理解が深まったということでこれからPHPに触れていく方に少しでも役に立てば幸いです。

Laravelのディレクトリ構成
app・・・アプリケーション本体
config・・・諸々の設定(設定というより系統別の定数群など諸々)
database・・・migration,seederなどデータベースに関連するファイルを格納
public・・・ユーザーに公開するディレクトリ(css, javascriptなどを格納)
resources・・・主にビュー(画面のテンプレート)など格納する
routes・・・大雑把に言うと入力や選択されたURLを設定に基づいて該当のコントロールファイルなどに
      導くファイルが格納される

※その他、ディレクトリは多数は存在しますが割愛します。

サクッと認証フォームが作成できる!

Laravelでは

php artisan make:auth
php artisan migrate

を実行するだけでサクッと認証フォームが作成できます。
作成したフォームを表示した結果がこちら。
※実際にはphp artisan migrateを実行しなくてもフォームの表示だけならできます。 f:id:styleedge_tech:20190801090112p:plain

テンプレートエンジンがBlade

ちょっと調べてみるとtwig, volt, smarty, mustacheなど テンプレートエンジンは多々あって
比較したり使ったりしてみると面白いかと思います!
特筆すべきではないかもしれませんがディレクティブに対して@を付けるため
他のテンプレートエンジンと異なりディレクティブがわかりやすくお気に入りです!
例)

@if ($cnt > 0) ※ディレクティブ部分
    {{ $cnt }}件のデータがあります。
@else
    データがありません。
@endif

※ディレクティブ・・・コンパイラーに与える指示文。

クエリビルダーで大体のSQLが作成できる

クエリビルダーとはデータ取得のために発行するSQLを作成する必要がありますが、
それを簡単に組み立てる仕組みです。
慣れさえすれば比較的容易にSQLを作成できると思います。
例えば

$a = DB::table('A')
             ->whereIn('id', [1, 2, 3])
             ->get();


のように「A」テーブルよりカラム「id」が「1,2,3」と一致するデータの結果を取得することができます。
※getメソッドは、PHPのstdClassオブジェクトのインスタンスを結果として含む、
Illuminate\Support\Collectionで返却されます。

但しクエリビルダーで作成されるSQLについては 必ず実際に発行されるSQLを確認しましょう。
例えば

SELECT * FROM A WHERE id IN (1, 2, ・・・)

のようなデータが増えると実行エラーが発生するようなSQL
意図せず出来てしまう恐れもあります。
動いたからといって結果を確認せずに使用するのは控えましょう。
SQLの良し悪しはレスポンスに直結します。
つまりSQLが遅い⇒時間がかかる⇒使用者のストレスが溜まる⇒矛先が管理者へ
という悪い循環が出来てしまい誰も幸せになりません。
なので設計・製造時から必ず考慮しましょう!
※遅いSQLを組む必要があるというのはDBの構造がそもそも・・・
という可能性もあるので設計の時点で意識しておくことが大事です。

まとめ

今回はLaravelについて触れてみました。
覚えることは色々ありますが逆に覚えてしまえば非常にわかりやすい印象を持ちました。

世の中には色々とフレームワークが存在します。
それぞれ一長一短があり常にベストなフレームワークは存在しないと思います。
開発が始まった時の状況やニーズで選択できるものも変わってくると思います。
その時に取捨選択するための情報を持っていることが大切です。
なので情報に対する感度を高めておくことが改めて大切かなと思いました。
今後更にコア部分にも触れられることを期待・・・したいと思います!
※初心者でも先輩方に教わりながら今回学ぶことができよかったです。

最後に

スタイル・エッジ LABOでは、一緒に働く仲間を募集しています。 もし興味を持っていただけましたら、ぜひ採用サイトものぞいてみてください!

株式会社スタイル・エッジLABO採用サイト

Seleniumでフォームのテスト

f:id:styleedge_tech:20191129154106j:plain
Photo by Aaron Burden on Unsplash

こんにちは、スタイル・エッジLABOのTMです。
普段はPHPでのシステムの開発・保守やサイトの運用保守をしています。

ところで、お問い合わせフォームなどのフォームのテストって大変ですよね。
気が付いたらメールが届かなくなってるとか怖いですよね。 フォームのテストを今回は Selenium でやってみたいと思います。

続きを読む