読者です 読者をやめる 読者になる 読者になる

aircolor memolog

Web制作・テクノロジー、たまに旅行記

npm scriptだけでできるユルいWeb開発環境の構築

javascript frontend node.js

この記事はQitta:フロントエンドエンジニア Advent Calendar 2016 14日目の記事です。
今年9月の某案件で軽はずみにWebpackに手を出して大きく消耗してしまい、以来開発環境であんまり消耗したくないと思ったので、npm scriptのみを使った低依存でシンプルな開発用プロジェクトテンプレートwebdev-inital を作成するに至った経緯と、所感を書きました。ついでにPostCSSへの感想も書きました。

続きを読む

2016年に始めるとご利益3倍?四国お遍路始めます

まとめ

f:id:kgsi:20161202091503p:plain:w300

ファンの方々ならタイトルだけでわかると思いますが、またまた「水曜どうでしょう」リスペクト企画発動です。 2013年の「ベトナム1,800km縦断旅行」、2016年GWのリスペクト企画「ASEANサイコロの旅」と、不定期に行っている旅行企画「e-birdどうでしょう」ですが、ついに四国八十八ヶ所シリーズ」にも手を出すこととなりました。

続きを読む

【ES2015(Babel) + jQuery】シンプルなフィルター機能付きギャラリー実装

javascript 学習・習作

長らく更新を止めていましたが、久々に投稿。 仕事この数ヶ月で色々な技術に触れましたが、やっぱり基礎は大事だねという問題にぶつかりまくってました。 なんで、ここしばらくは新しい技術を追いかけ過ぎず、基礎を積み重ねています。

フィルター(絞込)機能付きギャラリーの実装

基礎学習の一環としてこういったサンプルを実装・投稿していきたいと思います。今回はタイトル通り、よくあるフィルター(絞込)機能付きギャラリーの実装サンプルを紹介します。

See the Pen Simple Filter Gallery by Shinichi Kogiso (@kgsi) on CodePen.

処理の流れ

  1. class:filtermenuのli要素をクリック
  2. liに設定されたdata-fliterの値を取得
  3. class:postと併記したclassと一致するかチェック
  4. 一致したclass:postのみを表示

メニューのdata値をclickで取得し、そのdata値とclass:postと併記されているclassとを比較して、一致したpostのみを表示するというシンプルなロジックとなります。

表示とフィルター処理ロジックを分離

メンテナンスや、機能拡張していく際にひとまとめの処理を編集していくのは効率や見通しが悪いので、それぞれのロジックを分離して作成します。今回はES2015の復習も兼ねてるので、Class構文でFilterGalleryを作り、実装しています。各メソッドの説明は以下の通り。

  • 初期値の格納、イベントの設定
    constructor()
  • class:filtermenuのli要素がクリックされた際のメソッド
    onClickFilterMenu()
  • フィルターメニューの状態を更新させるメソッド
    updateMenu(targetFilter)
  • ギャラリーの表示状態を更新させるメソッド
    updateGallery(targetFilter)

※引数 targetFilterには、data-filter値で取得した値をセット

バンコク出張中なので「地球の歩き方」にも載っていないローカルタイ料理屋を紹介してみる

まとめ 食事

f:id:kgsi:20160624172529p:plain

こんにちは、kgsiです。
この度勤め先の辞令により、2度目の長期バンコク子会社への出張中です。この記事はバンコクで書いています。今回の出張は自身の海外渡航最大期間の30日滞在を予定しています。タイのビザ無し滞在ギリギリの期間ですね。

「タイで仕事をする」という事自体は楽しいのですが、大旅行小旅行合わせるとバンコクには約10回以上は渡航しているので、既に観光旅行気分がほぼありません。休日はオフィスのあるアソーク駅近辺をぶらぶらして、暇ならオフィスで仕事をするという、東京にいる時以上に働き、東京で休暇を過ごす時以上に消極的な生活をしています、本当にありがとうございます。

そんな中で美味しいご飯というのは何よりもの娯楽。特にタイ料理は豊富なレパートリーを揃える、まさにエンターテイメント。
毎日の生活を通して、自由旅行者のバイブルである「地球の歩き方」にも載っていない(ちょっと盛ってます、載っているものもあります)、ローカルなタイ料理屋・タイ飯を紹介していきます。
※今回は写真のアップロードにTwitterを利用しています。必ずしも時系列でアップしていないので、日付が前後していること、ご容赦ください

続きを読む

アジア4カ国周遊完了!サイコロの旅 in ASEAN完結レポート

日記 雑記 まとめ

f:id:kgsi:20160529171904p:plain

おかげさまで、「水曜どうでしょう」オマージュ企画「サイコロの旅 in ASEAN」は2016年5月10日をもって無事達成・終了することができました。完了から報告まで間が空いてしまいましたが、今回は企画を実施するための準備の過程と、ルートの説明・トータルの費用などをまとめて紹介します。

続きを読む

【水曜どうでしょうリスペクト企画】「サイコロの旅 in ASEAN」中間レポート

日記 雑記 まとめ

この記事は現地日時5月6日から5月7日の間に書いています。 現在3カ国目となるフィリピン首都マニラに滞在。天気は快晴です。

ここに来るまでの我々の軌跡を写真ダイジェストで説明しましょう。なお、スマホから直接アップしているため、サイズの調整がされてないことはご容赦いただきたく。

続きを読む

【水曜どうでしょうリスペクト企画】「サイコロの旅 in ASEAN」始めました

日記 雑記 まとめ

f:id:kgsi:20160502000443p:plain

2013年に怒涛の勢いで実施した「ベトナム バイク縦断旅行」に続き、新たなる「水曜どうでしょう」リスペクト企画「サイコロの旅 in ASEANが2016年5月2日から決行されます。この初回投稿では企画の経緯を説明します。

続きを読む