browserifyとgulpでフロントエンド開発

目次

  • 概要
  • パッケージ管理ツールの導入
    • npmとは
    • npmのインストール
    • npmの使い方
      • npm init
      • npm install
      • パッケージを使用する
        • scriptタグを使用する
        • requireを使用する
  • モジュールバンドラーの導入
    • browserifyのインストール
    • requireを使ったjQueryの使用方法
  • タスクランナーの導入
    • タスクランナーとは
    • gulpのインストール
    • gulpからblowserifyを動作させる
    • gulp-clean-cssでCSSを圧縮(minify)
  • より便利に使うためには
    • gulp-watchのインストール
  • 終わりに

概要

  • このチュートリアルは次のような人をターゲットとしたチュートリアルです。

    1. HTML,CSS,JSは作れるがその後のツールを利用したことがない人
    2. 最近のフロントエンド開発がわからない

  • このチュートリアルを通してできること

    • パッケージ管理ツール(npm)によるライブラリの管理
    • モジュールバンドラー(browserify)によるjavascriptの依存関係を解決
    • タスクランナー(gulp)によるファイルの監視&圧縮(minify)を行う

現在のフロント界隈は移り変わりが激しく、このチュートリアルも古くなりつつありますが、一見難しそうに聞こえるフロントエンド開発ってこんなもんなんだと理解していただけたら幸いです。 基本的に開発工程はWindowsもMacも同じはずですが、私の環境がMacであるためWindowsとは一部インストールなどが異なる場合があります。 また、私も勉強中のため間違っていることがあればご指摘お願いします。

続きを読む

Vue.jsを学習中

感想

やっとVue.jsを触れる程度までになってきたため、学習中です。
componentで分割できるのはうれしいんだけど、単一ファイルコンポーネントといったwebpackやbrowserifyを使った.vue拡張子を使わないと私が思い描く使い方ができなさそうで苦戦中。

実際に表示されるview.htmlに二つのコンテンツが入ってたとして

<div-content1></div-content1>
<div-content2></div-content2>

とかview.htmlはコンテンツが含まれていることだけを知っていて、その中身やどんな要素が含まれたDOMなのかを知らなくていい情報なんですよね
この<div-content1>は例えばContent1.htmlみたいなのにDOMが格納されていて、その要素をJavaScriptがVueを通して紐づけしてくれる...みたいな世界を想像していたのですが、
こういったことを行うには、webpackなどの知識が必要となってくるようで、ちょっと残念です。
もちろんこういったことはvue-cliを導入してやったのですが、そもそもwebpack初心者の私には困難がたくさんあってすぐには書けませんでした。
Vueやりながらwebpackも勉強しなきゃなぁ…

WEBエンジニア勉強会#11に参加しました

2/1(金)に開催されたWEBエンジニア勉強会#11に参加しました。
今回もいつも通りいくつか気になったワードや内容をピックアップしていきたいと思います。

心理的安全性の「持ちつ持たれつ」

星 永亮さんの登壇内容です

speakerdeck.com

最近、私はよく目にする心理的安全性について考えることができるような内容でした。
やはり新人だからというのもあって、「発言は控えて聞いていた方がいいだろうな」とか
「未熟だから考え付かないだけできっと言わなくても考慮されているだろう」などとよく思う時があります。
それに加え、的を射ていないような回答などもどうしてもしまいがちなのもあり、
笑われたりなどの発言に対する私の中での不安要素や緊張感があるのも確かだなぁと感じました。

知らないことが多く否定や意味がわからないなどの言葉も何度もされるこの環境は少なくとも私にとっては心理的安全性が損なわれている状況だというのを感じました。
もちろん、私が新人なので人一倍努力して知識を身につけなければならないのは確かなのですが、発言に対して緊張感を持って話したり、なんなら発言したくない、会議したくないと思えてしまうような環境はうまく排除できたらいいなぁ、なんて感じながらお話を聞かせていただきました。

僕はなぜプログラミングが苦手なのか

VTRyoさんの登壇内容です。

speakerdeck.com

プログラミングにおける初心者あるあるをお話してくださいました。
まさに大学生の頃の私は、「なんとなくここがエラーになってるんだってわかるし、エラー文は英語で何言ってるかわからんから、よくわかんないけど間違えてるっぽいとこてきとうに修正しよ」みたいなスタンスでした。
故にプログラミングではエラーは吐き続けるし結構プログラミングが嫌いでした。

仕事となってプログラミングをするようになってから、エラー文を読んでエラーとなった原因を探れるようになってきました。
「Error: java.lang.IllegalStateException」などを検索して調べてみても一体これは何が原因でエラーなのか原因がわからないのです(p21下の状況)
この読み解けていないというパターンはつまりは経験値不足であるとお話してくださいました。
確かに何度か同じエラーを踏めば、なんとなくエラーになった原因の当たりをつけることができるものも増えてきました。
多分センスがない(?)というよりも経験値が足りていないんだと。

対人でやり取りするほぼ決定事項をこねこねするような会議よりプログラミングの方が楽しくて好きだなぁと感じてきていますが
まだ得意(得意と思っている人がいるかどうかは置いといて)だと言えないようなスキルしかありません。
いつかもっとたくさんの場数を踏んで経験を積んで、周りからみたらセンスがあるなぁと言われるようなエンジニアになりたいものですね。

最後に

今回も多くの心に残るお話を聞くことができました。
まだまだエンジニア用語はわからないことも多いですが、最近になってようやく、「それ聞いたことあるぞ？」というワードも増えてきて話が理解で切るようになって来ました。
これからもいろんな勉強会を通じて多くの物事を吸収していきたいです。

なかなかblogを更新できませんでしたが、サボってたわけじゃないんです。
MacBookProが楽しくて、モダンなフロントエンドなサイトを作ってみようとnpmやgulp,browserifyなどを入れて遊んでいます。
最近覚えたてのbootstrapの練習場にしながら１つサイトを立ち上げてみようと奮闘しています。
ある程度形になってきたらここでも紹介できたらなと思います。

2018年知ったり覚えたこと

2018年に入社してからエンジニアとして覚えたことや知った単語(まだできてない)ことをまとめてみます

今年覚えたこと

  • Spring(Javaフレームワーク)
    まだ完全にマスターしたわけではないと思うので来年からも継続してやっていきます

  • HTML,CSS,JavaScript
    なんとなくではわかっていたけども、ちゃんと理解してたかというと微妙だったので、今年で少しは覚えられたかな。

  • jQueryなどのライブラリ ライブラリを大学時代使ったことがなかったので、新感覚だった記憶。これからもライブラリにはたくさんお世話になります。

  • デザインパターン
    といっても、まだ完全にいい形を使えるわけではないので、これも来年も継続してやっていきます

  • エンジニア界隈のアウトプッターの存在
    やっぱ静かでもくもくとってイメージがどうしてもあるエンジニア界隈で、楽しく発信力のある人たちとの出会いってのはかなり良い学びになったのかな

知った単語

  • Angular,Vue,React
    JavaScriptのフレームワーク、まだJSがちゃんとわかってないところある気がするので、これは来年頑張りたい

  • gulp,webpack,blowswrify
    タスクランナーとかパッケージ管理ソフトとか、まずここらへん覚えないとフロントエンドやってますとは言い難い気がするから正月休みにでも少しは触りたいな

細かく言っていけばもっともっとたくさん覚えた多分人生で一番生活や学びがガラッと変わった一年になりました！
来年からもいろんなこと覚えていろんなことしていきたい！
とりあえずサイト立ち上げてみたり、PCで自宅学習してみたい！
これは甘えなのかもしれないけど、学習する環境の整備とPCの調達を今してるから、まずは快適にできる環境を作ってから本格的に頑張りたい！
とりあえずサイト作って遊べる場所を作るべきだな！
概要とか目的とかそういう紙での作業をMACが届くまでにやってしまって、届いたら本格始動しよう！

では良いお年を！
来年もよろしくお願いします！

formDataでファイルとパラメータを同時にSpringのRestControllerで取得する方法

私が1時間半くらい悩んでなかなか見つからなかったので次のために記録します。
ファイルとinputでのパラメータを同時に送信したいときの方法です。
ajaxでfromDataを送信し、Spring RestControllerでファイルとパラメータを取得します。

HTML

<form  enctype="multipart/form-data" id="uploadForm">
     <p><input type="file" id="file"></p>
     <p><input type="text" id="text"></p>
     <input type="button" value="送信" onclick="onclickUpload()" id="submit">
</form>

javascript

unction onclickUpload(){    
    var formData = new FormData($('#uploadForm').get(0));
    
    $.ajax({
        url: '/api/upload/',
        method:'POST',
        data:   formData,
        processData:false,
        contentType:false,
        cache: false
    })
    .done(function(data, textStatus, jqXHR) {
        window.alert('結果：成功');
    })
    .fail(function(jqXHR, textStatus, errorThrown) {
        window.alert('結果：失敗');
        console.log(XMLHttpRequest.status);
        console.log(textStatus);
        console.log(errorThrown);
    });

Java

@RestController
public class UploadController{
        @RequestMapping(path="/api/upload/, method=RequestMethod.POST)
    public int upload(  HttpSession session, 
            HttpServletResponse servletResponse, 
            @RequestParam MultipartFile file,
            @RequestParam(name="text")String text) throws Exception{

     this.uploadService.execute(file, text);
}

fromDataについて

fromDataはform内に記述されているものは全て

 var formData = new FormData($('#uploadForm').get(0));

でまとめられて入っているため、
Spring内で使用するときにはajaxのdataにパラメータを入れなくても一緒に入っています。

これに気付かずに小一時間使ってしまった…。