はじめに
お初にお目にかかります。スタイル・エッジLABOの┣（読み: てぃー or てー）と申します。
今年からこちらにお世話になり、やっとのことDockerやLaravel等に慣れてきて、ただいまこうなっております↓
ですが今回はそれらではなく、つい最近知ったブラウザテストツール「Playwright」について書き留めます。
PhpStromに乗り換えてみる
はじめに
こんにちは。スタイル・エッジLABOのNです。
さて早速ですが、弊社では希望者にはPhpStormのライセンスを会社負担で支給していただけます。
私はスタイル・エッジLABOへはつい最近転職してきたばかりなのですが、以前いた会社ではそういった制度はなかったものですから、PhpStormを利用しようと思うとで個人利用で初年度は1万円少々かかります。２年後以降も安くはなっていくもののランニングでコストがかかるとなると庶民にはなかなか手が出づらいものでした。
ですが会社のお金で使えるならこれ幸いと私も遅ればせながらPhpStormデビューを果たしてみましたので使ってみたプラグインを5つ紹介させていただこうと思います。
続きを読むVisual Studio Codeをかわいく変身させたい！
LABOでインターンを始めてはや2か月、ずっと思ってることがありました。
それは「Visual Studio Codeをもっとかわいくさせたい、、！」ということ。
みなさまの中にもこんな考えを持った人いらっしゃるのではないでしょうか。
見た目がかわいくないとテンションが上がらない
見た目から入るタイプだ
「カワイイはつくれる」
今回はそんなかわいい信者のエンジニアのために、Visual Studio Codeをかわいくカスタマイズさせる方法についてご紹介します！
Visual Studio Codeにはたくさんの配色テーマがあり、その中にもかわいいものはたくさんありますが、わたしは配色テーマをさらにカスタマイズして自分好みのものに変えていきます。
カスタマイズ前
かっこいいけど、もっとかわいさもほしい・・！ということで、まずはかわいい配色テーマを探していきます。
配色テーマのインストール
まず左下の歯車マークから配色テーマを選択します。
その他の色のテーマをインストールを選択すると、Marketplaceが表示されるので、その中から自分好みの配色テーマをインストールします。（かなりたくさんあるので、選ぶのも楽しいです！）
わたしは今回"Electron Color Theme"にしました！
カラフルでかわいくなりましたが、タブや文字、カーソルの色などをもう少し変えたいので、ユーザー設定（settings.jsonファイル）から配色テーマを直接編集していきます。
settings.jsonの編集
ファイル > 基本設定 >設定 と進みます。
ワークベンチの中に、settings.jsonで編集があります。
それを選択すると、編集画面が表示されるので、直接編集します！
{ "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" //変数 } }
設定を変更した後は以下のような見た目になりました。パステルカラーがかわいいです！！
エディタがかわいいとコーディングも捗りそうです！ぜひお試しください。
最後に
スタイル・エッジLABOでは、一緒に働く仲間を募集しています。 もし興味を持っていただけましたら、ぜひ採用サイトものぞいてみてください！
VSCodeを育てよう
こんにちは！スタイル・エッジLABOのぱるです。
私はスタイル・エッジLABOでインターンをしております大学4年生です！
初めての記事作成で緊張していますが、どうか最後までお付き合いくださいorz
私はスタイル・エッジLABOでのインターンが開始して一カ月、
Udemyというオンライン講座を受講しながらHTML５とCSS3の勉強をしていました！
全くのプログラミング初心者の私は、
「プログラミングってなんか黒い画面にカラフルな英語が表示されるカッコいいやつ」
というイメージしかもっていなかったため、黒くてカッコいいやつを操作できるのを楽しみにしていました！
しかし...
動画で講師の方がプログラミングのツールとして紹介されたのは「メモ帳」ではないですか！
動揺を隠しきれない私...
ただ、続いて講師の方がおっしゃったのは、「メモ帳でもコードをかけますが、無料のエディタも豊富ですからどうせならエディタを使って書いてみるといいでしょう」とのこと....
エディタとは何！？というレベルだったのですが、先輩社員におススメのエディタを聞いて取り敢えず「エディタ」なるものをダウンロードしました。
エディタのダウンロードが完了し、さっそくエディタを開いた私が思ったことは、「あの黒くてカッコいいやつだ！」です。
勉強に取り掛かるのにはモチベーションが大事ですが、なんかカッコいいやつで勉強できるというだけで開始早々私のテンションは急上昇！
そんな感じで私のプログラミングの勉強が始まりました!
※私がダウンロードしたエディタは” Visual Studio Code ”です。
※私はMicrosoftの回し者ではございません。
拡張機能万歳！
ブログを書くのが初めてなもので、前置きが長くなりすみません....
それでは本題に入っていこうと思います！
私が勉強する中で感じたことは、エディタに拡張機能を追加していくとコードを書くのが非常に楽になるということです。 実際に勉強する際に使用したのは3種類の拡張機能ですが、せっかく拡張機能の尊さに味を占めたので、ブログを書くにあたっていくつか拡張機能を試してみました！
ということで今回は [VSCodeの拡張機能をまとめちゃおう！] というテーマで書いていこうと思います！
拡張機能紹介
まずは、私が勉強中に使用していたエディタのご紹介です！
１、Japanese Language Pack for Visual Studio Code
よほど英語に自信があるぜ！という方以外は入れたほうが無難でしょう。
今回ご紹介する拡張機能の中でも、最もダウンロード数が多かったです。
２、htmltagwrap
→該当のコードをドラッグして" Alt＋W "を入力するだけで自動でPタグで囲まれる拡張機能です！
Pタグが表示されたのちにそのまま任意のタグを入力すると即書き換え可能ですのでタグを入力する
手間を省くのにはぜひとも入れておきたいですね！
３、テキスト校正くん
→なんともかわいらしいネーミングの拡張機能ですね。
読んで字のごとく、入力した文章を構成してくれる拡張機能です！
htmlでは文章をたくさん書くと思いますが、長文を入力していると文章の見直しも大変ですよね....
テキスト校正くんを入れておけば、波線の個所を治すだけでよいので非常に見直しが楽になります！！
他の拡張機能も試してみた！
HTMLとCSSの勉強をする中で拡張機能のすばらしさを知った私は、勉強が一通り落ち着いてから追加でいくつかの拡張機能を試してみました！
１、indent-rainbow
→この拡張機能を入れるとエディタを見ていて楽しくなりますね！
タグが多くなってくると、どのタグとどのタグがセットなのかわかりづらい...なんてこともあるかと
思います。ただ、indent-rainbowがあれば視覚的に色でセットの括りがわかるのでそんなストレスとも
おさらばできますね！
２、Bracket Pair Colorizer 2
→{ } , ( ) , [ ] ,< > などあらゆる種類の括弧のペアを色ごとに分けて表示してくれます！
初心者のミスとしてペアが組めていないということが多かったので非常に重宝します！
最後に
前置きと本題のバランスが悪くなってしまいましたが、最後までお付き合いくださり有難うございました！
超駆け出しシステムエンジニアの呟きとして読んでいただけたなら嬉しいです！
次にブログを書く際には成長を感じられるように、駆け出しシステムエンジニアとして頑張っていこうと思います！
☆スタイル・エッジLABOでは、一緒に働く仲間を募集しています☆
もし興味を持っていただけましたら、ぜひ採用サイト↓も覗いてみてください！
Laravelのカスタムバリデーションでもパラメータを渡したい！
【ISUCON9】に参加してみた！
こんにちは！
スタイル・エッジLABOのしんちゃんです。
今回、我々スタイル・エッジLABOメンバーは、2019/09/08に開催された
「いい感じにスピードアップコンテスト」、通称「ISUCON」に参加しました！
ISUCONって何？？っていう人のために、、、
「ISUCON」...お題となるWebサービスを、決められたルールの中で
限界まで高速化を図る、LINE株式会社主催のチューニングバトル
そうです！
ISUCONとは、過去の実績など一切関係ない、己の知識と経験だけで
勝負を行うガチンコバトルです。
スタイル・エッジLABOメンバーも自身の意地とプライドにかけ、
休日にも関わらず参加してきました。
今回の記事では、大会参加の様子を伝えたいと思います。
＊ いきなり足切り！？序盤で半分以上脱落...？
10時開始ともに全チーム一斉にスタートしました。
が....
webサービスが渡されてこない...?
事前に運営より準備するよう言われていたインスタンスにwebサービスが降りてきません。
なんとか我がチームインフラ担当のK氏による機転で、
別のインスタンスを作ることで、運営から、webサービスを受け取り、
スタートラインに立つことができました。
他のチームの反応を見ると、まだほとんどのチームがスタートできておらず、
おそらくこの「魔の足切り」で多くのチームが脱落したのでは、、と感じています。
その時に本日の最高順位「17位」を叩き出しました(^ ^)
＊ そう簡単には行きません...
なんとかスタートラインに立てたので、皆それぞれの役割に分かれ、取り掛かりました。
序盤の役割としては大きく分けて、「環境構築隊」「コード隊」の二つです。
想定外だったのは、ローカル環境が上手く作れず、
ローカルでwebサービスを動かせなかったことです。
これにより、変更点を加えた場合、いきなりベンチマークを行わければいけません。
これのおかげで結構な手間と時間を食われました...
↓ レンジに行く時間を惜しみ、冷たい弁当を食べるメンバー
＊ 当日意識したところ
当日、意識したところは大きく分けて以下の三つです。
① SQL文で削れるところはないか
② DBにindexを貼る
③ 画像に圧縮をかけて下ろせないか
③は業務で同じようなところがあったので、奮闘の結果なんとかできました。
①②に関しては、目に付くところは大方出来たのではないかと思います。
＊ 最終結果は...
何度か落ちてしまい、今年も失格かな、、という場面もありましたが、
なんとか最後まで奮闘でき、失格にはならず終えることができました。
また、台風が来ていたこともあり、16時解散だったため
早めの退散にはなりましたが、できることはやったと思います。
お待ちかねの結果はというと、、、
277組中132位です✨
後日、スコアが0ではない人の中で順位を見てみると、
下から数えた方が早かった です。。
しかし何にせよ、前回は「失格」だったので、大きな進歩です！w
＊ まとめ
今回我々は、PHPを選んでやりましたが、
結果を見ると、ほとんどの組みがGoを使っていました。
本戦出場チームにはPHPを使っていたチームも２組いましたので、
我々も努力次第では予選突破できるかもしれない、という夢はあったので、
来年は本戦出場を目指して頑張りたいです🔥
最後に
スタイル・エッジLABOでは、一緒に働く仲間を募集しています。 もし興味を持っていただけましたら、ぜひ採用サイトものぞいてみてください！
