Webサービス界隈の優秀な人たちが、フロントエンドの新しいツールを「最高！」と日々謳っている中、 底辺コーダーの我々はクライアントからの修正横目に 「ほーん。どうせ僕らの業務じゃ使えないんでしょ？」という冷淡な姿勢を貫き通していた。 しかし、興味がないわけではなかった。ReactやVueといったコンポーネント思考のフレームワークを駆使すればクライアントからの無理難題をスマートに解決し、家で有意義にダラダラする時間を手に入れる事が出来るかもしれない。そのような考えはいつも心の片隅にあったが目を背け続けてきた。 でもついにその時がきたかもしれない。VuePressがその夢を叶えてくれるかもしれない。 (タイトルはかっこつけただけで特に意味はないです。) 夢と苦悩 夢その1 Nuxt 夢その2 Gatsbyjs 夢その3 VuePressを使えるレベルにする。 開発のディレクトリ構成をいい感じに

前置き この記事、本来は Flux には Model がないのではないかと思った覚書 - ナカザンドットネット と Flux の Store が ViewModel かって話からの MVW とかどうでもいいって話 - 猫型の蓄音機は 1 分間に 45 回にゃあと鳴く のアンサーとして書き始めた記事だが、前置きだけで別テーマとなったので、前後編に分割する。 僕は元々がゲームクライアント屋だったときの発想を引きずってるのと、既存の Web の開発の文脈に対して距離を置いていることを明言しておく。あとこういうテーマでとある原稿書いていたので、頭の整理も兼ねて。 ActiveRecord の功罪を振り返る このテーマを語るにあたって、まず Rails の MVC について述べなければならない。なぜなら、フロントエンドのアーキテクチャとは、サーバーサイドの MVC の模倣に始まり、破綻し、結果として

普段コンビニでお昼を取らないのですが、最近何度か足を運びまして。 いざ昼食を選ぼうとするとその商品の量に圧倒されます。 さらに驚くべきことに毎週のように新商品がでるんです！ 店頭では見分けがつかないので、ネットで追うにしても毎週は大変だぁ…(公式アプリがあるそうですが) というわけで、毎週更新なら週一回スクリプトを走らせて普段見ているSlackに投げちゃいましょう。 GASは手軽に定期実行が出来ていいですね！ 今週の新商品｜セブン‐イレブン～近くて便利～ スクリーンショット 対象は http://www.sej.co.jp/i/products/thisweek/kinki/ です。 変更履歴 2018/11/09 9月ごろから構成が代わり失敗していたので修正。 画像の持ち方がsrcからdata-originalに変更。 コード var REGION = '近畿' var REGIONS

HAIRのサーバーサイドエンジニアの黒田です。 「tig」使ってますでしょうか？「tig」はカラフル・軽量・インタラクティブにGitを扱うことが出来る Git のCUIクライアントです。git add, diff, commit, status, log, checkout, etc… をコマンドラインで頑張って打ち込んでいる方に是非「tig」を使って頂きたいです。一度使いこなすともう手放せない存在になりますよ！ インストール brew install tig（Mac : homebres） yum install tig（CentOS） 使い方 1.現在のブランチのコミットログ一覧（git log, git diffと対応） $ tig ・コミットを選ぶ <Up> , <Ctrl + p> ： ↑ <Down>,  <Ctrl + n >： ↓ <Enter> : 選択 ・コミット差分詳

ちょっと意識高そうなタイトルを付けてしまいましたが、皆さんどのような開発でお過ごしでしょうか。 Nagisa では現在フロントエンドエンジニアは1人です。長きに渡って1人で開発してきましたが、最近は iOS エンジニアやデザイナーも開発に参加することでスピードとクオリティを担保しています。 そこで今回はスキルや役割の違うメンバーで効率よく開発を進める。そしてコードをカオスに落とさず秩序を保つために行ったワークフローの改善や、取り入れたデザインパターンなどを紹介したいと思います。 複数人でチームを組んで開発をするのは、1人のときよりも難しいです。雰囲気で開発を進めていけばコードはカオスに陥り、スピードも品質も担保できなくなります。 他人のソースコードを引き継いだ時や3ヶ月前の自分 (殆ど他人) のコードを改修している時も似たようなことが起こります。 逆に、1人で開発して1人で継続的にメンテし

前回は、PWAの基礎知識について説明しました。今回は実際に制作してみたPWAに触れてもらいつつ、その内側・技術的側面について解説していきたいと思います。 今回の題材：光る電卓「Llumino（ルミノ）」2013年にiOSネイティブ版をお披露目したLluminoは、「計算をもっと楽しく」がコンセプトの電卓アプリ。当時は世界中で話題になりました。（もう5年前…！） 当時の制作過程については連載としてまとめていますので、興味がありましたらどうぞ。（👉 連載：Lluminoができるまで） 今回のチャレンジは、そんなLluminoを最新のWeb技術で再現・PWA化してみようというものです。 まずは実物を触ってみてください制作したWebアプリは https://pwa.llumino.app/ に配置しました。まずは実物を触って体感してみてください！ （昨日解禁になったばかりの「.app」ドメインだ

Fluxを使い始めると「おっ、MV＊に比べて頭が悪くても状態が壊れないぞ？」という感想になる人が多いと思うんだけど、その理由がふたつあるような気がしてきた。 ModelやViewModelについてはコンテキストが違う人から「それ違くない？」と言われそうな書き方になるかもだけど、思いつきを書きなぐってるだけなので勘弁してください。 1. 単方向データフローが分かりやすく、コードの複雑さの低下に寄与している これは全くポジティブな要因。 2. FluxはMV＊のModel相当の要素が図に含まれていないので考えることが減った MV＊は「Modelって書いてあるからには何かをModelと呼んでデータを突っ込まなきゃいけない」という意識が生まれやすかった（その責務分割が適切だったかは別として）と思う。 でも、FluxにはStoreとかいうViewModel*1みたいなものしかない*2と私は思っていて

Webにかぎらず、アプリケーションというのは作って終わりではなく、その後も継続して改修・改善されていくケースが多い。受託で開発して納品して終わりというケースでも、納品した先にメンテナンスする人がいる。 この記事では、Angularアプリケーションの開発において、いかにメンテナンス性を維持して、持続可能なプロジェクトを構成するかについての個人的な見解をまとめる。 フレームワークを邪魔しない Angularアプリケーションのメンテナンスにおいて、いちばん重要なことはいかにAngularのアップデートを阻害しないかという点に尽きる。 これはAngularに限った話ではなくフレームワークと呼ばれるものを使うなら常に必要なことであるし、 アップデートが定期的に降ってくることが決まっているAngularであればなおさらである。 アプリケーションの一番根幹となる部分の鮮度が落ちれば、その他の部分はそれに

StoreがViewModel相当かどうかってことそれ自体はたぶんあんま本質じゃないんだけど。 blog.nkzn.info これについてです。 わかる。StoreがViewModelってのはちょっとだけ違和感あって、ぼくは ViewModelが読むためのクエリ用モデルくらいに思ってるけど、どちらにせよクリーンアーキテクチャ的な考えで言う「外側」のものだよねという点ではたぶん認識一致してると思う https://t.co/IMQADHGwUb— 猫型🐱蓄音機 (@shinpei0213) 2018年5月15日 べつにStoreが ViewModel相当なのかクエリモデル相当なのかってのはじつはどうでもよくて、あのクリーンアーキテクチャの同心円の外側に位置するものだってことがたぶんこの記事の本質。で、クリーンアーキテクチャは同心円の層の数を定義してなくて、— 猫型🐱蓄音機 (@shinp

子育てを支える技術 ─ フルスタックお父さんとエンジニアとしての成長を両立させるには お父さんは出産を除くすべての子育てタスクを担当できるとして、エンジニア的なアプローチで育児に取り組む白山文彦（@fushiroyama）氏が、キャリア構築や技術的成長との両立について語ります。 こんにちは、白山（@fushiroyama）と申します。主にモバイルアプリ開発を生業としています。 4年前に第一子をリリースして地道な改善施策を重ねつつ、半年前にめでたく第二子もカットオーバーしました。以来、外ではソフトウェアエンジニアとして外貨を稼ぎつつ、家庭ではフルスタックお父さんとして、食事に風呂に寝かしつけに夜泣き対応にと奮闘しております。 その過程で「エンジニアでよかったなぁ！」と感じた点や「こういう考え方やアプローチはエンジニアならではかもしれない」と感じたことが少なからずあったので、ぜひ紹介したいと思

gapプロパティ（旧名grid-gap）を用いると、CSS Gridにおける列と行の間隔を設定できます。 ▼ MDNの「grid-gap」のデモより。 便利なプロパティですが、IE 11には対応しておらず、CSS Gridにおける苦労点の一つでした。 しかし、6/2にリリースされたAutoprefixer v8.6を用いると、IE 11向けにもgapを用いたレイアウトを実現できます。 どのように変換されるか？ gapを使ったCSSコードがどのように変換されるかを確認してみましょう。次のようなコードを例に紹介します。 grid-templateプロパティの書き方は見慣れないかもしれませんが、グリッドのエリア名、列幅、行幅をまとめて指定する手法です。grid-template-areasで定義したエリア名に加えて、行幅がそれぞれ50px、1fr、50px、列幅が200px、1frであることを示

コードには1行ごとに隠しドキュメントがあります。 次のコードスニペットの4行目を書いた人は、何か理由があってDOMノードの clientLeft プロパティにアクセスしたのでしょうが、結果的に何もしていません。これはかなり不可解です。なぜこうしたのか、あなたは説明できますか？　今後、この呼び出しを変更したり削除したりしても安全でしょうか？ // ... if (duration > 0) this.bind(endEvent, wrappedCallback) this.get(0).clientLeft this.css(cssValues) 私ではなく他の人があなたにこのコードを見せたとして、誰がこの行を記述したのか、どんな理由があったのか、このままの状態にしなければいけないのか、あなたはおそらく説明できないでしょう。ただし、プロジェクトを進めているときは大抵の場合、バージョン管理シス

前回のおさらい 「慣れを生むデザイン」は難易度が高いですが、慣れによる体験を無視することは出来ません。 ユーザーが触るものを作るデザイナーであれば、慣れるUIを作ることやそのためのデザイン方針について考えを巡らせる必要があります。 前回は、このUIに慣れてもらうためのデザイン方針の1つとして、「寛容さ」を提案しました。 目次 4. 世界で最も使われているカラシニコフの話5. カラシニコフの教訓 世界で最も使われているカラシニコフの話ここでひとつ、ユーザーの間違いやコンテクストに寛容だったことで大成功しているプロダクトの例を挙げましょう。 世界で最も利用者の多い銃のひとつに、「カラシニコフ」という銃があります。正式名称「AK-47」という、とても有名な銃です。 この銃が世界中に拡散したのには、明確な理由がありました。 それは、保守・管理性がよく、トラブルが起きづらい、多少手荒に扱っても大丈夫

Vue.jsとFirebaseといういまやりたい技術ど真ん中の本を読んで実践した履歴です。 booth.pm TOC 01: まえがき 02: サーバーレスシングルページアプリケーションの基本 03: 開発環境のセットアップとデプロイまでの流れ 04: Googleアカウントでのユーザー登録と、ログイン状態の判別 05: エディターの作成：データベース作成とデータ保存 06: Webサービスとして公開するまでの必要な準備 07: 最後に 01: まえがき 「Vue.jsとfirebaseを使って簡単なWebサービスを作ってみる」ことが目的、個々の詳細な説明は省略する ちょい足しポイントを実施することでアドバンスドな学習が出来るようにしている 02: サーバーレスシングルページアプリケーションの基本 SPAってなに？ → 簡単な歴史 サーバーレスってなに？ → サーバインフラのリソースを気に

文系、SIer出身エンジニアです。 仕事を始めて5年目になりますが、HTML/CSSに今ひとつ自信が持てません そんな方、結構いるのではないでしょうか？ StorybookとReactという２つの技術を使う事で、HTML/CSSの学習がイイ感じにできましたという話をします。 React→VueとかAngularとかに置き換えてもイケると思います 目次 StorybookとReactとはなんぞや 環境構築 コンポーネントの再発明 まとめ StorybookとReactとはなんぞや Storybook The UI Development Environment https://storybook.js.org/ UIの開発環境だそうです。 StorybookでUIコンポーネントのカタログを作ることができる カタログのおかげでデザイナーと認識の齟齬が生まれなくなる アドオンを追加するとStor

そもそも、Rubyとは？ Rubyは、まつもとさんが1995年に公開したプログラミング言語です。 便利さ・容易さと高い生産性を持ち合わせた、オープンソースのオブジェクト指向スクリプト言語であることが特徴です。 C言語をはじめとするコンパイラ言語は、プログラムの実行にコンパイルという作業が必要です。 スクリプト言語にはコンパイルが不要なため、より手軽でスピーディーな開発が可能です。 Rubyはエレガントな文法を持ち合わせており、プログラミングの楽しさと便利さ・実用性を体感するのに最も適した言語の一つといえます。 2012年には日本発のプログラミング言語として初めて国際規格「ISO/IEC 30170」に承認され、グローバルな言語として積極的に利用されています。 全ての人に共通する“生存戦略”は存在しない まつもとさん：「下手すると、皆さんのご両親・親御さん世代のプログラマーの“大先輩”に当た

とちぎテストの会議05 https://toruby.doorkeeper.jp/events/70679

シェルスクリプトのテストフレームワーク Bats を試してみた． github.com たまにコントリビュートをしている Amazon ECS (Elastic Container Service) のデプロイツール ecs-deploy のテストコードで Bats が使われているので，少し書いたことがあり，もっと詳しく調べてみようと思った． github.com Bats は現在もメンテナンスされている もともとの Bats は sstephenson/bats にあり，現在は bats-core/bats-core に移っている．以下の Issue などを読むと，コミュニティの動きがわかる． github.com github.com インストール Bats は様々なインストール方法がある．まず，用意されている install.sh を試してみた． $ git clone git@gi

はじめに 2018年5月12日、岡山で開催されたオープンセミナー2018@岡山で、「したたか？天然？なんかうまくやってるITエンジニアの生存戦略」という発表をしてきました。 このエントリでは登壇内容やイベントの感想を書いていきます。 使用したスライド 発表で使用したスライドはこちらです。 僕はスライドにあまり情報を詰め込まず、口頭でたくさんしゃべっていくスタイルなので、当日話した内容のすべてが載っているわけではありませんが、スライドを見ればだいたいの雰囲気は伝わるかなーと思います。 著書の宣伝、ではなく登壇の様子ですw （写真提供: @aguuu） 2018.12.05追記：動画も公開しました 当日の動画はないのですが、自宅で発表の練習をしていたときの動画が残っていたので、これを貼っておきます。 喋っている内容は9割方本番と同じです。 www.youtube.com Q＆Aコーナーが意外と

さかのぼること3ヶ月ほど前、グループ全体で総会があり、光栄にもその発表に向けての資料づくりを依頼されました。組織コンサルの方も交えて中身の議論をしていく中で、改めてグループのVision - Mission - Valueを整理していきました。その議論や整理の中で、以前つくったフレームワークが使えるのか、試してみたくなり、議論の中で出してみました。 これがなんと、うまく議論がスムースに進んだので、そのまま整理したりスライドに落とし込んだりしました。 時を経てnoteで図解系をよく見るので、やってみようかなと思い早速作ってみました。 自社の情報で入れてみるとこんな感じ。 Visionから2系統に分かれていますが、ここの整合性が保たれているか？何か足りないことはないか？と見ていくと良さそうです。 今後ちょこちょこといろんな企業の情報を可視化してみたいと思ってます。 ・・・ Googleスライド

TL;DL モバイル環境からmをドメインの先頭に追加してアクセスすると良い感じにスライドが閲覧できます。 例) https://speakerdeck.com/qrush/the-graphql-way-a-new-path-for-json-apis ↓ https://mspeakerdeck.com/qrush/the-graphql-way-a-new-path-for-json-apis 概要 Speaker Deckはスライドを共有するサービスです。 特に大きなカンファレンスが開催された後はたくさんの発表資料がこのサービスにアップロードされるのでよく閲覧します。 Speaker Deckは、PCで閲覧する分には特に問題はないです。 しかしモバイル環境で閲覧すると少し残念です。 なぜならSpeaker DeckにはPC用のレイアウトしか存在しないからです。 通勤中にTwitter