laravel-mixがやっていることを理解する(理解するというか、railsのフロント環境をlaravel-mixで構築してみて、 よくわからないところを整理する)

以下のサボの記事を参考に構築する。(気になったところをメモしていく)

RailsでLaravel Mix(webpack)を使って15分でES6を書きはじめるhttps://qiita.com/saboyutaka/items/8efbb7778993599e52de

webpack.mix.js は何者?

→resources/assets/js/app.jsをコンパイルして、public/js配下に出力してくれるようにしてくれてるやつっぽい。アセットをどのようにコンパイルするか定義してる。

let mix = require('laravel-mix');
mix.setPublicPath('public')
    .js('resources/assets/js/app.js', 'public/js')
    .sass('resources/assets/sass/app.scss', 'public/css');

if (mix.inProduction()) {
    mix.version();
}

参考情報

webpack.mix.js って何?追記:2017/11/17日https://qiita.com/masash49/items/fb64805fcebd68f3b19f

Laravel mixは、jsやsassなどのアセットを簡単にいい感じにコンパイルしてくれるビルドツールで、コンパイル対象のファイルを増やしたい時とかは、webpack.mix.jsに書く。

Laravel mix事始め

https://qiita.com/ryosukes/items/24a556b9e634c183f93b

public/mix-manifest.json何者?

→yarn run devコマンドを実行して(package.jsonに定義されてるコマンド npm run dev が実行されて)、アセットファイルがコンパイルされると、public下に作成されてるやつ。このファイルの中身をみると、resource配下のjs/app/jsをコンパイルして、public配下のjs/app.jsを作成したよって意味っぽい(cssも同じ)

$ cat public/mix-manifest.json
{
    "/js/app.js": "/js/app.js?id=2357e5caf066e7a52ea8",
    "/css/app.css": "/css/app.css?id=52caa47f003ce624f239"
}
  • yarn run dev バージョニングされない
  • yarn run prod バージョニングされる とかある。

app/helpers/laravel_mix_helper.rbは、何やってるんだろ?

$ cat app/helpers/laravel_mix_helper.rb
module LaravelMixHelper
  class LaravelMixError < StandardError; end
  MANIFEST_FILE = 'public/mix-manifest.json'

  def mix(path)
    unless File.exists?(MANIFEST_FILE)
      raise LaravelMixError.new('The Mix manifest does not exist. Run `yarn run dev`.')
    end

    manifest = JSON.parse(File.read(MANIFEST_FILE))
    asset_path(manifest[path])
  end
end

このmixメソッドが呼び出される場所は、例えば、以下の$ cat app/views/layouts/application.html.erbとか。laravel_mix_helperは、MANIFEST_FILEがあるかどうかチェックして、なかったらアセットファイルをコンパイルするよう(yarn run dev)、例外が発生するようになってて、MANIFEST_FILEが存在したら、そのファイルを元にコンパイルした後のアセットファイルのパスを返してるっぽい。

$ cat app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
  <head>
    <title>RailsLaravelMix</title>
    <%= csrf_meta_tags %>
    <link rel="stylesheet" href="<%= mix('/css/app.css') %>">
    <script src="<%= mix('/js/app.js') %>"></script>
  </head>

  <body>
    <%= yield %>
  </body>
</html>
    $ cat resources/assets/js/app.js
    require('./bootstrap');
    
    window.Vue = require('vue');
    Vue.component('example-component', require('./components/ExampleComponent.vue'));
    
    const app = new Vue({
        el: '#app'
    });
    

以下の感じに書き換えたら、表示された

$ cat resources/assets/js/app.js
require('./bootstrap');
window.Vue = require('vue');
Vue.component('example-component', require('./components/ExampleComponent.vue'));

document.addEventListener("DOMContentLoaded", function() {
    const app = new Vue({
        el: '#app'
    });
});

次は、この環境を使って、vuejsを書いてみる。

AFTER CODEBSE School 16week(7/2-7/8)

AFTER CODEBSE School 16week

今週のハイライト

  • railsチュートリアル2週目やっと終わった
  • churakariプロジェクト
  • Golangの基礎構文を勉強し始めた
  • hugoサイト作り少し進めた

railsチュートリアル2週目やっと終わった

次やること

2周目終わったあとは、自作アプリ作りに取り組む。railsにwebapckを構築するとかやってみる。アセットパイプラインがやっていることをwebpackでできるようにして、jsとかcssの管理をrailsから切り出す。railsにアセットを触らせない。

そうすることで何が良いかというと、、、、(ちょっとまだちゃんとよく理解できていない部分があると思うけど)例えばデザイナーさんと作業するときに、サーバーサイドと画面を作るのと完全に分けて作業することができたりする(なんか他にも色々ありそうだけどちゃんと言語化できるレベルで理解できていないので調べる)

cheezenaan.hatenablog.jp

qiita.com

techracho.bpsinc.jp

qiita.com

qiita.com

まとめ

日々キャッチアップしないといけないことが多いなーとめっちゃ感じる。一つの技術要素を理解するために、またさらに別の技術要素を理解する必要があって、、、、、みたいなのを乗り越えていきたい

いったん、チュートリアルベースの学習(やるべきことが決まっている学習)を予定していた2周完了したので、このあとは自作アプリ作りなどやっていこうと思う。ここからはやるべきことが明確じゃなくて、自分で明確にしてやっていかなきゃいけないので、迷走しないように注意してやっていこうと思う

blog.chaspy.me

AFTER CODEBSE School 15week(6/25-7/1)

railsチュートリアル2週目継続中。

f:id:shimabukuromeg:20180703205357p:plain

AFTER CODEBSE School 15week

つぶやきまとめ。簡単に振り返ると、railsチュートリアル2週目は13章までは終わりで残すは14章のみ。ハッカーズチャンプルーでいい刺激をもらったのでモチベーション上がった。go、合体ロボ気になる。webは途方も無いけど頑張る。

ハッカーズチャンプルー2018 感想

f:id:shimabukuromeg:20180701221714j:plain

ハッカーズチャンプルーに行ってきた。昨年初めて参加して、今年は2回目。個人的には昨年よりもすごく楽しかった。

hackers-champloo.org

感想

今年はCODE BASEのプログラミング講座に参加してたこともあり、そこで一緒に勉強したメンバーだったり、周辺の皆さんとワイワイしながら参加できたので、すごく楽しかった。やっぱりみんなでワイワイするのはすごく楽しい。

登壇されていた皆さんの話もすごく面白かった。「情報を育てる」「できることとやりたいことは両輪」「小さなチームで大きなものを作る技術」「合体ロボ」ってワードが個人的にはすごく印象に残ってる。

楽しかったなーって思う反面、もっと技術の話ができるようになりたいなーって思った。面白かったなーとかで終わっちゃうとインプットとしてはなんか弱くて、面白いと思ったところをそこにいる人たちと話をして、あーでもないこーでもない、なるほど。みたいにやるとめっちゃ学びありそう、とか思った。技術力は積み上げで、そんな簡単に同じ土俵に立てるとは思っていないけど、ちょっと知ってそうな人に声かけてみるだったり、日頃から興味あることは手を動かしてキャッチアップできたりすると、こういう機会でさらに学び深められるんだろうなって思った。1年後を楽しみに頑張る、モチベーション上がった。

登壇された皆さんのスライド

まとめ

すごく楽しかったので来年も参加したい!

AFTER CODEBSE School 14week(6/18-6/24)

今週はrails tutorial2週目を引き続き進めながら、Hugo(静的ジェネレーター)を使ってホームページ制作などをやった。久しぶりにhtmlとかcssとか見てみたけど、このあたり苦手意識ある。レイアウト組んだりなど、カスタマイズできるようにしていきたい。Hugo、いい感じのテーマがたくさんあってよい。

f:id:shimabukuromeg:20180627132310p:plain

AFTER CODEBSE School 14week

チュートリアルは1週目よりサクサク進められてる感じがしてよい。忘れてるとこもたくさんあるけど、地道に進める

Hugo、以下のリンクめっちゃ勉強になった。

maku77.github.io

Hello,World的なやつ

qiita.com

公式サイト。いい感じのテーマがたくさんあって良さそう。

Complete List | Hugo Themes

Hugo、そのほか

42-design.work

そのほか気になった記事

docs.komagata.org

github.com

まとめ

来週にはrails tutorial2週目終わらすぞー

AFTER CODEBSE School 13week(6/11-6/17)

今週は週末に時間が取れなさすぎて、今年一番学習時間確保できない週だったので、来週は挽回する。久しぶりに1期生メンバーにあって近況報告などできたので刺激になった&楽しかった。今度会うときにはもっといい感じのアウトプット出せるようにする。

f:id:shimabukuromeg:20180618000322p:plain

AFTER CODEBSE School 13week

CODEBASE SCHOOL 1期生メンバーで「今頑張っていること」をテーマにLT会(近況報告会)を実施した。みんな頑張っててめちゃめちゃ刺激になったので、もっと頑張れねばという気持ちになった。個人的にアウトプットがいまいちだったので、もっと頑張って行きたい。このあとみんなで飲みにいって、「できないけどできるようにするマインドが大事(積極性が大事)」っていう話が、印象深かった。自分に足りないマインドな感じがするのでもっと頑張るー

paper.dropbox.com

今週のよかったやつ(モチベーション上がるつぶやきメモ)

employment.en-japan.com

来週にむけて

  • なる早でRailsチュートリアル2週目(8章〜)
  • Railsチュートリアル2週目やりながら、もっとわかってないことがたくさんあるはずなのに、スルーしてるところがたくさんある気がする。気になるところは、しっかりわかった風にならないようにまとめる。

  • Dockerを実践的なところで触れそうなので、もっと勉強する。

Docker ドキュメント日本語化プロジェクト — Docker-docs-ja 17.06.Beta ドキュメント

AFTER CODEBSE School 12week(6/4-6/10)

今週は、cherry本読んでrubyのお勉強だったり、チュートリアル1周終わって次どんな感じで学習していこうかなど考えた週だった。

サーバレスとかフロントエンドとか、ついつい色んなとこに興味出てきちゃうとこある(twitterでいい感じのチュートリアル情報が流れてきたら気になりだすとこある)けどいったんrubyrailsをもうちょっとちゃんと理解して次行かないとせっかく勉強してきたことが中途半端になりそうなので、引き続き。

rails2週目は時間を意識して、短い間隔でたくさん回すっていうのを心がけようかなと思う

f:id:shimabukuromeg:20180611215617p:plain

AFTER CODEBSE School 12week

twitterで振り返る。cherry本周りの呟きメモ。

まとめ

rails2週目と自作アプリなるはやで。

気になるツイート