フロントエンド・タスクランナー（１: 入門編）

フロントエンドエンジニア ふみえです。 今回はフロントエンド・タスクランナーについて書いていきたいと思います。

そもそもタスクランナーって何？

フロントエンド開発において必要になってくる処理といえば、下記のようなものが挙げられると思います。 コードの圧縮 Sass などのコンパイル ファイル変更して、見た目をブラウザがをリフレッシュして確認 フロントエンド開発におけるタスクランナーとは、上記のような処理を自動で行ってくれるツールです。 その代表的なものに、Grunt (http://gruntjs.com/) や Gulp (http://gulpjs.com/) があり今回は今業務で使用している　Gulp について書いていきます。

Gulp を選んだ理由

調べたところによると下記のようだそうで、Gulp に決定しました！

• Node.js の StreamAPI を使用しているため処理が速い
• 設定ファイルが書きやすく、読みやすい
• Grunt の問題点が解決されている

Gulp の導入方法

こちらですが、次回まとめてあげようと思います。 内容浅くてすみません。。。
次回は内容も夢もモリモリでお届けいたします！ 以上、ふみえでしたー！

参考記事

http://liginc.co.jp/web/tutorial/117900
http://qiita.com/Kshi-Kshi/items/634799bb57872ce0a169 https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md

Read More

初めまして、ふみえです！

この1月より、フロントエンドエンジニアとして入社しました、ふみえと申します！

経歴

新潟県新潟市生まれ。東京理科大学卒業後、オープンソース・ソフトウェア開発会社で勤務中に Web 業界で自身のやりたいことを見つけた後、Web 制作会社でコーダとして勤務、その後スタートアップ企業でフロントエンドエンジニアとして働き、現職に至ります。 趣味は音楽鑑賞です♪ 使用している言語は HTML、CSS、Javascript が主です。

よく参加しているイベント

UX JAM

昨年は私にとって「UX とは何か」を考える年でした。「UX MILK」というキュレーション・メディアに出会い、もっと学びたい！と思うきっかけになりました。プロダクトの作り方・思考の過程などを、様々な方の実例も交えたライトニング・トークは、すぐに実務・実生活に活かせる情報の多い有意義なイベントです。今年も通い続けようと思います。

最近読んでいる本

• Inspired: 顧客の心を捉える製品の創り方 ― マーティ ケイガン (著), 佐藤真治 (翻訳), 松田和之 (翻訳)
  昨年2月に翻訳された本だそうで、こちらを空いている時間に読んでいます。一緒に働く仲間を理解し、より良いワークフローでもって仕事ができたらなと思います。また、サービスを利用するユーザさんやクライアントさんの心をさらに掴めるようなサービス作りをしていきたいです(^^)
• くも漫。― 中川学 (著)
  あまり漫画を読む方ではないのですが、面白いのでぜひ(^^)

最近通勤時間にやっていること

• 目が疲れていたら、目を閉じる
• 目が元気だったら、携帯で情報収集

最近あった飲み会での出来事

約20年ぶりに、年末の忘年会（2件）でプレゼント交換をしました(^^) 誰に渡るかわからないプレゼントを選ぶのはとても新鮮で楽しかったです！ みんなで歌を歌いながらプレゼントをぐるぐる回します。久々のプレゼント交換にテンションがあがりました↑ageage↑

最近使用しているサービス

Slack はよく利用しています。

今年動向が気になるもの

DesignSprint!! 世の中の流れがまた変わるのかなって思います。
Snapchat!! ホワイトハウスでも運用を開始したということなので、動向が気になります。


以上で自己紹介を終わります。今後もブログを書かせていただきますので、ちょくちょく覗いてみてくださいね！ そんなこんなで頑張ります☆
それでは、ふみえでしたー！！

Read More

自己紹介 山田です。

こんにちは山田です。

自己紹介を書いて行こうと思います。
人となりが伝わればと思います。

■職業 ： システムエンジニア
細かくいうと、Webアプリケーションのシステム開発をしています。
ブラウザ上で、動的に動くサイトになります。

入社は2014年で、社会人2年目になります。
開発環境：ASP.NET　.NET Framework 2.0
開発言語：C#
DB：MS SQL Server

■出身

千葉県でも南部の割と田舎の出身です。（小学生の時の同級生はなんと11人）
家は、鉄工所メインの兼業農家でした。

その頃にコンピュータに興味を持ち始めたのを今でも覚えています。
当時小学２年生、流行もの好きの親がWindwos98を突然買ってきたのが始まりです。
とあるソフトウェアをインストールするために、フロッピーディスクを何枚も消費したり、
はやり始めたインターネットのダイアルアップ接続がよく切れたり、すごくかわいがった記憶があります。

■学生時代

学生時代は電気工学を専攻していました。
コンピュータの原理が知りたいなぁと思っていたのがきっかけでした。
具体的には電気回路や電磁波を勉強していました。

フリップフロップ回路（記憶回路）

電波の原理

フリップフロップ回路（記憶回路）が出来たことにより、
機械演算が可能になって文明は成長したのだと熱いロマンを感じています。

が、不思議と、この図を良く使って勉強したり、計算していたのに
 原理も含めてすべて忘れてしまいました…。

記憶とは儚いものです。

さて研究テーマですが、
電気のことは勉強せず、「遠隔で工学実験をする方法」をというのを扱っておりました。
なので、テレビ電話を実現させるマイクロソフトのパッケージアプリケーション（Skype For Business）を組み立てる勉強をしたり、VPNを安く実現させたくネットワーク機器（CiscoとかYamaha）とかで遊んでいました。


■なぜSEになりたかったか
プログラミングを覚えたいというのが根っこにあります。

 既存の完成されたパッケージ商品の物足りない部分を作ったり、不具合が起きる原因が知りたかったのがきっかけでした。

■社会人一年目は何をやったか
書籍や雑誌の営業を半年ほどやっていました。
Webとはまったく関係なかったのですが、Web発信の媒体が増えている昨今とても勉強にありました。
著者や出版社、本屋さんがどうやって儲かっているのか知れてとても勉強になりました。
1年目の12月から方向転換をしてプログラミングを勉強し始めて、
今日で1年たったくらいになります。

■最近はまっていること
都市がどう発展したかを調べるために、日本の街道や鉄道にはまっています。
ブラタモリ面白いですね。
あと、カメラは長年大好きで、写真や動画を撮りまくっています。


■好きなもの
甘いもの、適度な湿度

■苦手なもの
花粉、大きい音、酸っぱいもの

■おすすめアプリ
流れとして、、、
電子書籍に興味がありいろいろ試していたのですが
最近は電子書籍アプリのキンドルが使いやすいと思いました。

 

https://play.google.com/store/apps/details?id=com.amazon.kindle&hl=ja

どうしてこれを選んだかというと。

・読書スピードを計測していて、読破するまでのタイマーがでるところ
が 気に入っています。

個人的には、本を読むときはあとどれくらい時間がかかるか？
というところを割と意識していたりします。

紙の本だと、残りの紙の厚さから判断ができるのですが、
電子だとそういうのがわかりません。
その解決方法として役にたっているなぁ～と感じています。
このささいなところが気に入っています！

Read More

はじめまして。Sです

こんにちは！
昨年の5月からC#で開発をしているSと申します。
気づけばもう社会人２年目です。

経歴

大学時代は工学部に所属しており微生物の体内で薬の原料をつくる研究をしていましたが、
あまり刺激的ではない毎日に飽き飽きして仕事ではもっと面白いことがやりたい！と思い今の会社に入社しました。

社会人1年目は営業職で主にレストランに営業に行っておりました。
おいしいものが沢山食べられて幸せでした...♡

プログラミングは昨年のゴールデンウィーク明けにゼロから始めたので
毎日新しい発見があり面白いです♪

趣味

これといった趣味は特にないのですが、おいしいものを食べに行くのが好きです。
わりと胃が広がるタイプなので、ブッフェにもよく行きます。
お寿司だと60貫くらいは食べられます！
あと死ぬほど辛いものが好きです！！

おすすめのアプリ

最近毎日使っているアプリはこの「おこづかい帳」です。

すごくシンプルな作りになっていて、すぐに登録できるので続けられています！
レシートを読み込んで記録するタイプなども試したことがあるのですが、
なかなか上手く読み込むことができず、逆にストレスでした。。。


新年だし、しっかりお金の管理をしていこう！という方はぜひ一度ダウンロードしてみてください。
https://itunes.apple.com/jp/app/otonanookodzukai-zhang-deng/id933475348?mt=8

このブログについて。。。

約７ヶ月前。プログラミングを勉強し始めた頃のことを思い返すと、本当に分からないことだらけでした。
分からないことがあってもそれをどうやってググれば良いのか、自分が何が分からないのかが分かりませんでした。。。

なのでこのブログでは主に開発を始めたころ自分が分からなかったこと、詰まったところなどを書いていこうと思っております。

この春から開発を始める方々に少しでもお役に立てると嬉しいです♪

Read More

ねこもちです。 前回の続きで、処理を短くする系です。 ※処理そのものは短くなりませんね、良く考えると。パッと見の記述が短くなっているだけです。 　　ですが、これが本当に大事なことだと思います。 ■「ifのネストが多く、ifとelse節の対比が難しい」 下記のような関数があったとします。

void foo()
{
    var 結果A = 処理A();
    if( 結果A == 成功 )
    {
        var 結果B = 処理B();
        if( 結果B != 成功 )
        {
            var 結果C = 処理C();
            if( 結果C == 成功 )
            {
               処理D();
            }
            else
            {
                失敗Cのリカバリ処理;
                return 失敗C;
            }
        }
    }
    else
    {
        return 失敗A;
    }
    処理F();
    return 成功;
}

ifが3段もネストしていて、途中で抜けたり、抜けなかったり、 else節があったりなかったり、 このメソッドでは、何が起きるのかを知るのは非常に難しいのです。 まず、結果Aのifのネストを解消します。

void foo()
{
    var 結果A = 処理A();
    if( 結果A != 成功 )
    {
        return 失敗A;
    }
    var 結果B = 処理B();
    if( 結果B != 成功 )
    {
        var 結果C = 処理C();
        if( 結果C == 成功 )
        {
           処理D();
        }
        else
        {
            失敗Cのリカバリ処理;
            return 失敗C;
        }
     }
    処理F();
    return 成功;
}

次に、結果Bのifのネストを解消します。 結果Bが成功だったら、処理F()のあと成功返しているので、そのようにします。

void foo()
{
    var 結果A = 処理A();
    if( 結果A != 成功 )
    {
        return 失敗A;
    }
    var 結果B = 処理B();
    if( 結果B == 成功 )
    {
        処理F();
        return 成功;
    }
    var 結果C = 処理C();
    if( 結果C == 成功 )
    {
       処理D();
    }
    else
    {
        失敗Cのリカバリ処理;
        return 失敗C;
    }
    処理F();
    return 成功;
}

同様に結果Cのifもthen節でreturnするようにします。

void foo()
{
    var 結果A = 処理A();
    if( 結果A != 成功 )
    {
        return 失敗A;
    }
    var 結果B = 処理B();
    if( 結果B == 成功 )
    {
        処理F();
        return 成功;
    }
    var 結果C = 処理C();
    if( 結果C != 成功 )
    {
        失敗Cのリカバリ処理;
        return 失敗C;
    }
    処理D();
    処理F();
    return 成功;
}

こうすることで、処理と失敗時の処理が近づき、非常に読みやすくなりました。 こういう書き方のとき、このif群を「ガード節」というようです。

Read More