Vue.js製のUIフレームワーク「Element」の使い方

株式会社SCOUTERの小平(id:ryotakodaira) です。

弊社では、フロントエンドの開発にVue.jsを導入しており、現場では主にVue.js製のUIフレームワークElement」を使用して、ページの見ためを表現しています。

先日、「Element」が2系にメジャーアップデートされ、npm trendsで他のVue.js製のUIフレームワークと比較しても注目されていることが明らかです。

www.npmtrends.com

また、1系で微妙だなと感じていた部分がだいぶ改善されていて、今後の発展が楽しみです!今回は「Element」の使い方についてまとめてみました。

f:id:ryotakodaira:20171114014815p:plain
Element

 

検証実施環境

  • Vue.js ^2.5.0

  • Element ^2.0.0

  • yarn ^1.0.0

インストール

今回は yarn を使ってインストールします。

yarn add element-ui

コンポーネントの使用方法

Elementの読み込み

import Vue from 'vue'
import App from './App'
+ import ElementUI from 'element-ui'
+ import 'element-ui/lib/theme-chalk/index.css'
import router from './router'

+ Vue.use(ElementUI)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

上記の方法で読み込みを行うと、Element全体をインポートすることになるため、一部のコンポーネントを利用できるようにしてなるべくプロジェクトを小さく抑えたい場合には babel-plugin-component を用います。

yarn add -D babel-plugin-component

続けて、babel.rcを編集します。

"plugins": [["component", [
    {
      "libraryName": "element-ui",
      "styleLibraryName": "theme-chalk"
    }
  ]]]

もし、Buttonのみを使用したい場合には、以下のようにインポートします。

Vue.use(Button)

また、Elementはi18nの設定を行うことで日本語対応することが出来ます。

import Vue from 'vue'
import App from './App'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
+ import locale from 'element-ui/lib/locale/lang/ja'
import router from './router'

- Vue.use(ElementUI)
+ Vue.use(ElementUI, { locale })

これでElementを使うための準備は完了です。

コンポーネントの呼び出し

実際のコンポーネントの呼び出しは非常に簡単で、こちらのドキュメントを参考に呼び出すことが出来ます。

Elementはドキュメントが充実しているうえに、様々なpropsが用意されているため、カスタマイズもしやすくなっています。

<el-input placeholder="Please input" v-model="input1"></el-input>

<el-time-select
  v-model="input2"
  :picker-options="{
    start: '08:30',
    step: '00:15',
    end: '18:30'
  }"
  placeholder="Select time">
</el-time-select>

<script>
export default {
  data() {
    return {
      input1: '',
      input2: ''
    }
  }
}
</script>

一部のコンポーネントだけを使用したい場合にも、以下のように使いたいコンポーネントを直接指定してあげることで実現できます。

<el-switch v-model="value1">
</el-switch>

<script>
import { ElSwitch } from 'element-ui'

export default {
  components: { ElSwitch },
  data() {
    return {
      value1: ''
    }
  }
}
</script>

まとめ

今回紹介した「Element」は学習コストも低く、公式のドキュメントも豊富なため、あまり工数の取れないプロジェクトにもサクッと導入することができるので、プロダクトの初期段階には向いているなという印象です。(実際に弊社でも立ち上げでElementを導入している場合が多いです)

個人的には特にフォーム関連のコンポーネントが充実していて、自作するのはちょっとなー。。。みたいなコンポーネントが多数用意されているのでかなり助かっています。笑

 

さいごに

弊社では、Laravel・Vue.jsをテーマに勉強会を開催しています!もし興味が御座いましたらお気軽に参加してみてください。

laravue.connpass.com

Vue.jsで作られたフレームワーク「Nuxt.js」でできること

こんにちは、SCOUTERの id:kotamat です。

前回の記事では、PHPフレームワークのLaravelとNuxt.jsの連携に関して紹介させていただきましたが、それぞれの詳細、出来ることは述べておりませんでした。 そこで今回は、Nuxt.jsではなにができるのかをまとめてみたいと思います。

Nuxt.jsとは

f:id:kotamat:20171110210034g:plain

nuxtjs.org

トップの画像を見ていただけると分かる通り、Vue.jsをベースとしたフレームワークで、 React.jsベースのサーバーサイドレンダリング(以下SSR)フレームワークであるNext.jsの影響を受けております。 SSRに於けるサーバーサイドとクライアントサイドのUIレンダリングを主軸とし、プロジェクトの基軸となりうる柔軟な設計となっています。

  • Vue.js
  • VueRouter
  • Vuex
  • VueServerRenderer
  • VueMeta

を統合的に使いやすく一つのパッケージとして提供したというのが簡単なイメージです。

依存関係に関して

Nuxt.js自体は執筆時点では最新バージョンがv1.0.0-rc11、依存関係としては下記の状態となっております。

パッケージ バージョン
node >=6.11
npm >=3.10.0
vue ~2.4.2
vue-router ^2.7.0
vuex ^2.4.0
vue-server-renderer ~2.4.2
vue-meta ^1.1.0

ただし、Githubでも述べられている通り、近いうちに1.0が出る予定のため、devブランチでは対応可能バージョンは上げられており、devブランチで言うと

パッケージ バージョン
node >=6.11
npm >=3.10.0
vue ^2.5.3
vue-router ^2.7.0
vuex ^3.0.1
vue-server-renderer ^2.5.3
vue-meta ^1.3.1

と、Vue.jsのバージョンないし他に依存するパッケージも上がっています。 各種パッケージのバージョンに依存するパッケージの使用や実装を行っている場合は注意が必要です。

Nuxt.jsでできること

Nuxt.jsの公式サイトには下記のように書かれています

  • Vue ファイルで記述できること
  • コードを自動的に分割すること
  • サーバーサイドレンダリング
  • 非同期データをハンドリングするパワフルなルーティング
  • 静的ファイルの配信
  • ES6/ES7 のトランスパイレーション
  • JS と CSS のバンドル及びミニファイ
  • Head 要素の管理
  • 開発モードにおけるホットリローディング
  • SASS, LESS, Stylus などのプリプロセッサのサポート
  • HTTP/2 push headers ready
  • モジュール構造で拡張できること

今まで上記をVue.jsのみで実装しようとすると、各プロジェクトでwebpack.config.js等を用い細かく設定が必要だったり、プラグインのバージョン管理・結合管理等、アプリケーションロジックとは関係の無いところで実装工数が発生していました。

Nuxt.jsにより提供される上記機能を使用することで、コーディングスタイルを統一した開発、よりアプリケーション実装に注力した開発ができるようになります。

Nuxt.jsの大きな強み

上記のできることによってどのような恩恵を受けられるのか紹介したいと思います。

SSRを手軽にVue.jsベースで実装できる

まずNuxt.jsそもそもの原点としてこれは重要な強みになります。 上記引用でいうと

  • サーバーサイドレンダリング
  • 非同期データをハンドリングするパワフルなルーティング
  • Head 要素の管理

あたりがそれに当たります。

インストール後 nuxt start というコマンドを実行するだけでSSRができるという手軽さだけではなく、 htmlでいうタグの管理がJS Objectベースで記述できる為、SEOクローラーに優しい実装が出来ます。

また、非同期データに関しては、初回アクセス時はSSRによりサーバーサイドから取得するため、Vue.jsの標準的なライフサイクルよりも前にHeader等を評価する必要がありますが、それをNuxt.jsはasyncDataというページ単位での前処理を行うことでこの問題を解決しています。

また、Node.jsを使用せず、静的サイトとして出力したい場合でも、 nuxt generateというコマンドを用いることで、ルーティングが自動解決するページはもちろん、商品の詳細ページ等、動的なパラメータを渡すページでも設定によってhtmlファイルに変換してくれます。

アプリケーション実装に集中できる環境

Nuxt.js には、SSRだけでなく、コンポネント志向のフレームワークやVue.jsの開発を行っているといずれ直面するような問題に対して、予め機能を搭載しております。

上記引用でいうと

  • 非同期データをハンドリングするパワフルなルーティング
  • ES6/ES7 のトランスパイレーション
  • 開発モードにおけるホットリローディング
  • SASS, LESS, Stylus などのプリプロセッサのサポート

あたりがそれに当たります。 ファイル名によるダイナミックなルーティング、ページ単位での非同期処理を考慮したデータ保持、ES6/7の最適な設定、実装がすぐに反映されるホットリローディング、プリプロセッサまわりの標準設定がインストールするだけで提供されている為、babelやwebpackの複雑な設定をすること無く、アプリケーションロジックに集中することが出来ます。

ルーティングにかんしては、規則どおりに実装することで、ルーティングファイルを設けることなく、ルーティングできるようになります。 またミドルウェアの概念もあるため、例えば認証によるアクセス制限やマスターデータの事前取得等他ページにまたがる処理も簡単に実装できるようになります。

また、プラグイン・モジュールという概念があり、公式コミュニティーがOSSとして提供している便利機能だったり、グローバルコンポネントの定義、UIフレームワークとの連携を、.jsファイル単位で簡素に管理できるようになっています。

通信の最適化

開発環境だけでなく、ユーザ体験を向上させるための通信の最適化もNuxt.jsは提供しています。

上記引用でいうと

  • コードを自動的に分割すること
  • JS と CSS のバンドル及びミニファイ
  • HTTP/2 push headers ready

あたりがそれに当たります。

そもそも Nuxt.js 自体がこれだけの機能がありつつ 57kB min+gzip で実装されているため、ユーザへの負荷がかかりづらいフレームワークです。

さらに単一ファイルへの出力を行うことでユーザの初回アクセス時に過度なダウンロードをさせることを防げます。 これは上記のルーティング規則と密接に結びついているからこそできることでしょう。 加えて分割されたコンテンツそれぞれも極力小さくすることで、容量を削減します

HTTP/2 push header readyはまだ検証していませんが、etag, gzipに加え、HTTP/2で提供されているサーバープッシュのHeaderを自動的に使用することができるようになり、プロトコルレイヤーでの通信最適化ができます。

まとめ

これまでNuxt.jsにてできることを紹介してきました。 現状Nuxt.jsがSSR前提での実装となっているのですが、1.0がリリースされたタイミングでSSR無しでも動作させるようになる予定なので、 Vue.jsでSSRしたい方はもちろん、管理画面等SSRが必要でない箇所でも上記メリットの享受のためNuxt.jsを導入されることを検討されてもいいのではないでしょうか。

勉強会

Laravel, Vue.jsの勉強会を開催致します! 興味ある方はご参加よろしくお願いいたします。

laravue.connpass.com

LaravelとNuxt.jsを同一レポジトリで管理するときの構成

こんにちは、SCOUTERの id:kotamat です。 最近新しいプロジェクトにて、Laravel + Nuxt.jsの構成でアプリケーションを作成し始めたので、その構成を簡単にまとめてみます。

環境のスペック

  • Laravel
    • 5.5
  • Vue.js
    • ^2.1.10
  • Nuxt.js
    • ^1.0.0-rc11

Laravelのインストール

まずは、基軸となるLaravelのインストールから。 composerが入っていれば下記コマンドを実行するだけです。

composer create-project laravel/laravel <プロジェクト名> "5.5"

環境の設定

Laravelではデフォルトで、Vue.jsをサポートしていますが、デフォルトで入っている.vueファイルは、Nuxt.js仕様にはなっていないので、不要なディレクトリを削除します。 また、デフォルトで入っているpackage.jsonも不要なので削除します。

rm -rf resources/assets/
rm package.json

Nuxt.jsのインストール

つぎに同じディレクトリにNuxt.jsを導入します。 インストール自体は下記で完了します。

yarn add nuxt

環境の設定

Nuxt.jsはデフォルトだと、同一ディレクトリにファイルを展開してしまい、Laravelのディレクトリ構成と被ると可視性が下がるため、ディレクトリを切ってその中にファイルを展開します。 今回はディレクトリ名をclientとし、作成してみます。

まず、Nuxt.jsでの設定ファイルであるnuxt.config.js を作成し、その中に下記の設定を書きます。

module.exports = {
  srcDir: 'client/',
}

次に、Nuxt.jsが提供しているディレクトリを作成していきます。

install -d client/pages/.gitkeep
install -d client/assets/.gitkeep
install -d client/components/.gitkeep
install -d client/layouts/.gitkeep
install -d client/middleware/.gitkeep
install -d client/plugins/.gitkeep
install -d client/static/.gitkeep
install -d client/store/.gitkeep

まず挙動確認のため、pagesにファイルを作成します

/client/pages/index.vue

<template>
  <div>HelloWorld</div>
</template>

起動の確認

Laravel側とNuxt.js側で下記のコマンドを実行することで、アプリケーションを立ち上げる事ができます。

# Laravel
php artisan serve

# Nuxt.js
./node_modules/.bin/nuxt

http://localhost:3000 にアクセスすると、HelloWorldが出ていることを確認できるかと思います。

Laravelとの通信

今回はLarvelとaxiosを使って通信してみます。

Laravel 側

Laravel側ではまず、簡単なエンドポイントを作成してみます。

route/api.php

Route::get('/', function(){ return 'helloworld';});

Nuxt.js側

Nuxt.jsにはモジュールというものがあり、nuxt-communityには便利なモジュールが提供されています。 その中にaxios-moduleがあるので、そちらを使ってみましょう。

yarn add @nuxtjs/axios

モジュールの追加にはnuxt.config.jsへの追加が必要です。

module.exports = {
  srcDir: 'client/',
  modules: [
    '@nuxtjs/axios',
  ],

  axios: {
  }
}

次に先程作成したindex.vueを下記のように変更します

client/pages/index.vue

<template>
  <div> {{data}} </div>
</template>
<script>
export default{
  async asyncData({app}){
    const data = await app.$axios.$get('http://localhost:8000/api/')
    return {data};
  }
}
</script>

これで、APIと連携できるようになりました。

まとめ

Laravel,Nuxt.jsを使うことで、簡単にクラサバの構成を実装できるようになりました。 次回以降はそれぞれの機能を使った、より深い実装について書いてみようかと思います。

勉強会

Laravel, Vue.jsの勉強会を開催致します! 興味ある方はご参加よろしくお願いいたします。

laravue.connpass.com

Laravelデバッグメソッド・ツールまとめ&小ネタ集

こんにちは。SCOUTERでエンジニアインターンをしている池谷と言います。
バックもフロントも書いてます。

SCOUTERでは、サーバーサイドはPHPを使って開発していますが、特にLaravelをフレームワークとして採用することが多いです。 Laravel、いいですよね。コレクションは便利だし、ORMもシンプルで使いやすいです。
今回はLaravelのデバッグ方法まとめと、ちょっとした小ネタを紹介しようと思います。

ロギング

ログ出力しないとデバッグは始まりませんね。 Laravelでは便利なlogger(), info()といったヘルパーメソッドが用意されてます。 デフォルトでは、storage/logs/laravel.logに出力されます。

logger("サーバーサイドエンジニア募集中");
info(['フロントエンドも募集中', '募集中']);
[2017-06-30 13:40:35] local.DEBUG: サーバーサイドエンジニア募集中
[2017-06-30 13:41:30] local.INFO: array (
  'フロントエンドも募集中',
  '募集中'
)  

募集中ということがよく伝わるロギングができました。
これ、Logファサードをグローバルヘルパにしただけなので、もちろんファサードを使っても実現できます。

\Log::debug("エンジニア募集中");
[2017-06-30 13:45:21] local.DEBUG: エンジニア募集中

ちなみに、そのままだとオブジェクトは出力不可能です。でも出力したいんだぜという人はprint_rを組み合わせるといい感じに出力されます。
PHP職人の方にはよく知られた方法ですね。

logger(print_r($object, true));

ロギングではないですがヘルパ関数でいうとdump and dieもよく使います。
変数だろうがオブジェクトだろうが、スクリプトを停止した上で、綺麗にブラウザ等に出力してくれます。

dd($request);

デバッグツール

Laravelには便利なデバッグツールが用意されてます。

laravel-debugbar

Laravelデバッグにおける神ツール。知らない人は是非インストールしておきましょう。
具体的なインストール・設定方法はSCOUTER社の別のエンジニアが個人ブログで紹介しているのでそちらをご覧ください笑

larapet.hinaloe.net

f:id:yoshiki-ikegaya:20170704120512p:plain こんな感じのデバッグバーがブラウザの画面下に出てきます。 使ったRouteやクエリやAuth、laravel.logの表示までやってくれます。tailとはなんだったのか。

tinker

f:id:yoshiki-ikegaya:20170704125131p:plain
tinkerとは、Laravel専用のREPLツールです。対話型実行環境というやつです。 psyshというPHPでよく使われるREPLツールをラップして作られています。 railsrails cにあたります。モデルとかの検証に便利ですね。

$ php artisan tinker

Psy Shell v0.8.1 (PHP 7.0.19 — cli) by Justin Hileman
New version is available (current: v0.8.1, latest: v0.8.8)
>>>
>>>
>>>
>>> App\Models\User::all()
=> Illuminate\Database\Eloquent\Collection {#752
     all: [
       App\Models\User {#753
         id: 1,
         name: "Test User",
         created_at: "2017-02-12 13:00:28",
         updated_at: "2017-02-12 13:00:28",
       },
       App\Models\User {#754
         id: 2,
         name: "Yoshiki Ikegaya",
         created_at: "2017-07-03 23:34:25",
         updated_at: "2017-07-03 23:38:09",
       },
     ],
   }
>>>

はい。

実は意外と知られていませんが、tinkerはブレークポイントを使ったデバッグに対応してます。
ソースコード内でブレークポイントを置いておけば、そのタイミングでスクリプトが自動で停止し、tinkerが起動してそこから対話型でデバッグできるというものです。
Railsの開発経験のある方は、binding.pryを使ったことがあると思います。あれです。

適当なcontrollerを作って、

eval(\Psy\sh());

というブレークポイントを設置し、
?message=laravelというクエリをつけてアクセスしてみると…

$ php artisan serve
Laravel development server started on http://127.0.0.1:8000/

Psy Shell v0.8.1 (PHP 7.0.19 — cli-server) by Justin Hileman
PHP 7.0.19 Development Server started at Tue Jul  4 11:36:53 2017
Listening on http://127.0.0.1:8000
Document root is /Users/ikegaya/develop/mercury/public
Press Ctrl-C to quit.
>>>
>>>
>>> whereami
    30|      *
    31|      * @return \Illuminate\Http\Response
    32|      */
    33|     public function index(Request $request)
    34|     {
  > 35|         eval(\Psy\sh());
>>>
>>>
>>> $request->message
=> "laravel"

はい。php artisan serveが途中で止まり、tinkerが起動しています。
そこまでで定義した変数とかも自由に使えることがわかります。

実はこれはtinkerのラップ元のpsyshの機能として動いています。
psyshの機能はtinkerでももちろん使うことができるのですが、それを知らずに単なる対話ツールとして使う人が多いようです。
他にもいろんな機能があるので、是非チェックしてみてください。

http://psysh.org/

ビルトインサーバ使用時にしかこのデバッグはできないようなのでご注意ください…

まとめ

Laravel上でできるデバッグツールや小ネタを紹介してみました。

もしまだ試していないTipsなどがございましたら是非試してみてください。 よきLaravelデバッグライフを!

さいごに

弊社SCOUTERではLaravel / Reactを使ってサービスを展開しております。

興味のある方、ご応募お待ちしております!

www.wantedly.com

www.wantedly.com

Laravel+docker-compose+docker-syncで開発環境の構築

はじめに

株式会社SCOUTERの小平(id:ryotakodaira) です。

普段はバックエンドをメインでたまにフロントエンドの開発も行っています。

弊社では以前まで統一された開発環境がなくメンバーに自前で環境を用意してもらっていたのですが、新しいメンバーがジョインしてくれた時に環境構築にかなりの時間を必要としてしまうことからDockerを用いて環境構築を出来るようにしました。

Laravelでは公式でHomesteadというVagrant用の開発環境が用意されていますが、今回はLaradockというDockerで開発環境を構築できるDockerImageを使用します。 github.com

検証実施環境

  • macOS Sierra (10.12.1)
  • Docker for mac (Version 17.06.0-ce-mac18)
  • docker-compose (version 1.14.0)
  • docker-sync (0.4.6)

※Docker for mac, docker-composeのインストールは出来ている前提とします。

Laradockの準備

検証用ディレクトリを作成してLaradockをクローンします。

$ mkdir sampleApp
$ cd sampleApp 

$ git clone https://github.com/laradock/laradock.git

# Laravelのインストール
$ composer create-project laravel/laravel laravelApp

完了すると sampleApp/ 以下に laradock laravelApp が作成されています。

docker-compose の設定

laradock/docker-compose.yml を開きます。 volumesに先程作成したLaravel(../sampleApp/laravelApp)を指定します。

version: '2'

 services:

 ### Applications Code Container #############################

     applications:
       image: tianon/true
       volumes:
         - ../laravelApp:/var/www

nginx の設定

今回はnginx を使用します。Laradockにはapache用のImageも用意されているため、apacheを使いたい場合には簡単に切り替えることが出来ます。 sampleApp/laradock/nginx/sites/default.conf を編集します。

server {

     listen 80 default_server;
     listen [::]:80 default_server ipv6only=on;
 
+     server_name laravel-app.dev;
-     server_name localhost;
     root /var/www/public;
     index index.php index.html index.htm;
 
     location / {
          try_files $uri $uri/ /index.php$is_args$args;
     }
 
     location ~ \.php$ {
         try_files $uri /index.php =404;
         fastcgi_pass php-upstream;
         fastcgi_index index.php;
         fastcgi_buffers 16 16k;
         fastcgi_buffer_size 32k;
         fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
         include fastcgi_params;
     }
 
     location ~ /\.ht {
         deny all;
     }
 
     location /.well-known/acme-challenge/ {
         root /var/www/letsencrypt/;
         log_not_found off;
     }
 }

macのhostsファイルに laravel-app.dev を追加します。 /etc/hosts を編集します。

127.0.0.1 laravel-app.dev

これで初期設定は完了です。次はDockerコンテナを立ち上げます。

Dockerコンテナの立ち上げ

laradockディレクトリに移動して env ファイルを作成します。

$ cd laradock
$ cp env-example .env

Dockerコンテナを立ち上げます。 laradockには様々はサービスのImageが用意されていますが、今回は nginxmysql を使用します。

$ docker-compose up -d nginx mysql

Dockerコンテナの稼働を確認するには以下のコマンドを実行することでどのコンテナが稼働しているかを一覧で確認することが出来ます。

$ docker-compose ps
         Name                       Command             State                     Ports                   
---------------------------------------------------------------------------------------------------------
laradock_applications_1   /true                         Exit 0                                            
laradock_mysql_1          docker-entrypoint.sh mysqld   Up       0.0.0.0:3306->3306/tcp 
laradock_nginx_1          nginx                         Up       0.0.0.0:443->443/tcp, 0.0.0.0:80->80/tcp 
laradock_php-fpm_1        php-fpm                       Up       9000/tcp                                 
laradock_workspace_1      /sbin/my_init                 Up       0.0.0.0:2222->22/tcp 

http://laravel-app.dev にアクセスしておなじみのこのページが表示されていれば成功です。 f:id:ryotakodaira:20170703070709p:plain

docker-syncについて

ここまででLaravelアプリケーションをDocker上で稼働させ、開発を行うための環境が整いました。

ただ、Docker for macには ホスト⇔ゲスト間 のファイルの転送速度が遅いという問題を抱えています。

laradockの公式ドキュメントでも言及されいます。

Docker on the Mac is slow, at the time of writing. Especially for larger projects, this can be a problem. The problem is older than March 2016 - as it’s a such a long-running issue, we’re including it in the docs here.

そこで上記の問題を解決するために docker-sync というファイル転送が遅い問題を解決してくるツールを使用します。 github.com

docker-sync のインストー

さっそく docker-sync をインストールします。

※インストールには gem, brew コマンドが必要になります。

$ sudo gem install docker-sync
$ brew install fswatch
$ brew install unison

以下が表示されたらインストールは完了です。

$ docker-sync -v
0.4.6

docker-sync の設定

docker-compose.yml と同じ場所に docker-sync.yml というファイルを作成します。

 version: '2'
 
 sync_default: &sync_default
     notify_terminal: true

     # IPの設定
     sync_host_ip: '127.0.0.1'

     # ポートの設定
     sync_host_port: 10871

     # 同期させないファイルまたはディレクトリ
     sync_excludes: ['.gitignore', '.git/', '.idea/']
     
     # 同期方法の選択する (`rsync`か`unison`を使えます)
     sync_strategy: 'unison'
     
     sync_userid: '1000'
     
     # fswatchで監視させないファイルまたはディレクトリ
     watch_excludes: ['.gitignore', '.git/', '.idea/', 'vendor/', 'node_modules/', 'storage/']
     
     watch_args: '-v'
     
     watch_strategy: 'fswatch'
     
     
 syncs:
     # docker-syncのvolume名
     laravel-app:
         <<: *sync_default
         # ホスト側(PC)のパス
         src: '../laravelApp/'

docker-sync を使用するために docker-compose.yml を修正します。

services:
 
 ### Applications Code Container #############################
 
     applications:
         image: tianon/true
         volumes:
+             - laravel-app:/var/www/:rw
-             - ../laravelApp:/var/www


volumes:
+     laravel-app: #docker-sync.ymlで設定したvolume名
+         external: true

docker-sync を起動します。

$ docker-sync start
 success  Unison server started
          ok  Starting unison for sync laravel-app
          ok  Synced /path/to/laravelApp/

これで docker-sync がファイル変更を検知して変更をコンテナに同期してくれます。

監視するファイル数が多いと同期に時間がかかってしまうので、最低でも /vendor /node_modules は監視の対象から除くことをオススメしますw

docker-sync のコマンド

# syncの開始
$ docker-sync start

# syncの終了
$ docker-sync stop

# ファイルを同期する
$ docker-sync sync

# syncエンドポイントを一覧表示
$ docker-sync list

# syncエンドポイントの削除
$ docker-sync clean

まとめ

以上で快適にLaravelの開発をするための環境の構築が完了しました。

今回作成したDockerプロジェクトをチームで共有することで各メンバーが同じ環境で開発を行うことが出来る様になり、環境構築や作業の効率もアップするのではないでしょうか。

さいごに

弊社SCOUTERではLaravel / Reactを使ってサービスを展開しております。

興味のある方、ご応募お待ちしております!

www.wantedly.com

www.wantedly.com

Sass(SCSS)チートシート

自己紹介

株式会社SCOUTERの石岡(id:masaakikunsan)です。

フロントエンドエンジニアをやらせていただいており、
冴えない彼女の育てかたと氷菓というアニメを主食に生きております。

プログラミングを始めてまだ一年も経っていないひよっこなので僕のブログでは初心者にフォーカスして初心者がつまづきそうとか欲しいであろうことをブログにしていこうと思っています。

はじめに

みなさんなんだかんだSass(SCSS)の構文って忘れがちじゃないですか?

ちなみに僕はいつまで経っても覚えません。

今回のブログではSCSS構文について書かせていただきます。

概要

SassとはCSSを書くためのメタ言語になります。まぁつまりCSSを効率よく書くためのものですね。

Sassには二つの構文があり、ファイルの拡張子が.sassのものと.scssのものになります。

昔はインデント構文で書かれたSassのみだったのですが今はCSSっぽく書けるSCSSができSCSSが現在よく使われています。

導入

Sassを動かすにはRubyが必要なので前提条件としてRubyはいれといてください。

# インストール
$ gem install sass
# もしpermissionsがどうのこう言われてインストールできなかったら $ sudo gem install sass

これでSassがインストールできたかと思います

最後にバージョンを確認してみましょう

$ sass -v

コマンド

$ sass [option] [input.scss]:[output.css]

optionはめんどいので記載しない

ネスト

・セレクタを入れ子構造でかけるから便利!

// CSSの場合
div {
    background: #000;
}
div p {
    color: #fff;
}

// SCSSの場合
div {
    background: #000;

    p {
        color: #fff;
    }
}

・隣接セレクタの場合

// HTMLの場合
<label><input type="radio">test</label>

// CSSの場合
input {
    display: none;
}
span {
    position:relative;
}
span::before {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 14px;
    height: 14px;
    border: 1px solid #999;
    border-radius: 50%;
    content: "";
}
input:checked + span::after {
    content: "";
    display: block;
    position: absolute;
    top: 3px;
    left: 3px;
    width: 10px;
    height: 10px;
    background: #6ac5b6;
    border-radius: 50%;
}

// SCSSの場合
input {
    display: none;
    
    span {
        position:relative;

        // &はその親要素のセレクタを表す、この場合span
        &::before {
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 14px;
            height: 14px;
            border: 1px solid #999;
            border-radius: 50%;
            content: "";
        }
    }
    &:checked + span::after {
        content: "";
        display: block;
        position: absolute;
        top: 3px;
        left: 3px;
        width: 10px;
        height: 10px;
        background: #6ac5b6;
        border-radius: 50%;
    }
}

変数

よく使う値を変数にしたりプロパティ名やセレクタ名とかにも使える。

$color-base: #ddd;
$class: container;
// SCSS
p { color: $color-base }
.#{$class} { background: $color-base; }
            
// CSS
p { color: #ddd }
.container { background: #ddd; }

ミックスイン

よく使うものをスニペットとして保存しておけるのでとても便利。

// よく使うものの頭に@mixinをつけて保存し使いたい所の頭に@includeをつけるだけ
@mixin box-shadow ($x $y $gradation $color) {
    box-shadow: $x $y $gradation $color;
}
        
div {
    @include box-shadow(1px 1px 5px #000;);
}
        
// CSS
div {
    box-shadow: 1px 1px 5px #000;
}

継承

styleが一緒だけどここではfont-sizeを変えたいというときに便利。

p {
    font-size: 16px;
    margin: 0;
    color: #ddd;
}
            
.required {
    @extend p;
    font-size: 12px;
    color: #FF0000;
}
            
// CSS
p, .required {
  font-size: 16px;
    margin: 0;
    color: #ddd;
}
            
.required {
    font-size: 12px;
    color: #FF0000;
}

まとめ

最後まで読んでいただきありがとうございました。

SCSSを使うと大分CSSの運用がしやすくなります。

ルールなどをちゃんと設けておくといろんな人と開発してもかなり綺麗にCSSをかけるのではないでしょうか?

今回は省きましたが演算ができたり制御構文など便利なのが多いです!私はよく制御構文を使います。

次回はSCSSを使ってドット絵を書いてみたかLINE APIを使って加藤恵を作ったのどちらかをブログにしようかなと思います。

最後に...

弊社SCOUTERではLaravel / Reactを使ってサービスを展開しております。 興味のある方、ご応募お待ちしております!

Laravel
https://www.wantedly.com/projects/101401

React
https://www.wantedly.com/projects/101403

Laravel/Vue.js勉強会を開催しました!

6/21(水)に Laravel/Vue.jsの勉強会を開催いたしました!

f:id:kotamat:20170622101837j:plain

会場は株式会社オルトプラス様

勉強会用にオフィスを無料で開放していただけるとのことで、今回使わせていただきました!

Laravel/Vue.jsともに人気が上昇中していたり、Laravelの公式がVue.jsをサポートし始めたりと、人口は増加しているにもかかわらず、他のフレームワークに比べて勉強会等がほとんど開催されていないということで、勉強会を開催することとなりました。

勉強会を公募した際、思った以上に反響が大きく、2日で80名を超える応募がありました。

[増席しました!]Laravel/Vue勉強会#1 - connpass

当日も強風、雨の足元の悪い中、30人以上の方にご参加頂きました。

今回はLaravel / Vue.jsを実際に導入されている4社の技術者の方々から実例やお話をしていただき、その後LT参加枠の方から3名LTをお話していただきました。

Laravelでプチマイクロサービスやってみた/ @kotamat

弊社からは現在取り入れている社内用パッケージモジュール化についてお話しました。

複数リポジトリにまたがる共通処理をcomposerを使ってDRYに書く方法をお話しました。

speakerdeck.com

Vue.jsを使ったら幸せになった話/ 中筋さん

LaFabricのシステムにVue.jsを選定した背景と、導入してみてどうなったかをお話していただきました。

speakerdeck.com

Laravelによる SSPの開発と運用 / 安藤さん

オルトプラスさんで開発されていた、SSPアプリケーションをLaravelで構築した際の構成や、運用方法をお話していただきました。

speakerdeck.com
Laravel Mix とは何なのか? / @okashoi

Laravelに導入されているgulpプラグインであるLaravel Mixに関して、概要と実際の導入方法に関してライブコーディングをしていただきました。

speakerdeck.com

 

発表後は懇親会を行いました。

f:id:kotamat:20170622102301j:plain

f:id:kotamat:20170622102254j:plain

自社で導入されている方や、これから勉強されるという方等多種多様な方がいらっしゃいました。

今後も勉強会を開いていければと思いますので、興味のある方はご連絡いただければと思います!

 

## 最後に‥

弊社SCOUTERではLaravel / Reactを使ってサービスを展開しております。
興味のある方、ご応募お待ちしております!

Laravel

https://www.wantedly.com/projects/101401

React

https://www.wantedly.com/projects/101403