コードレビューをする際と、してもらう際に気をつけるべきだと思っているをまとめておきます。 レビュイーとして大切なこと コードレビューをお願いする前に レビュアーが高いパフォーマンスを発揮するためには、レビューを受ける人の心構えと事前の打ち合わせが実は最も大切です。 特に大きめの変更のコードレビューをお願いする前にすると良いこととしては、 まず、レビュアーを確保する そのレビュアーと大まかな設計の合意をとる という方針でやっていくのが良いです。 レビューしていても、根本をひっくり返すような指摘はしにくいですし、したとしても、それなら1から書いたほうがはやくて良い物が出来るといったことが簡単に起きます。 「レビュー後に直せるもの < レビュー前に直せるもの」 ということを意識して、Issueなどを用いて、出来る限り事前に設計、打ち合わせをしましょう。そうすればレビュアーもすんなりレビューできる

前提 Gitがインストールされていること GitHub等のGitホスティングサービスのアカウントを持っていること 手順 既にSublimeTextを使用中の場合は、C:\Users\UserName\AppData\Roaming\Sublime Text 3\Packages\Userの中身を別のディレクトリへ退避し、SublimeTextをアンインストールする SublimeTextをインストールする C:\Users\UserName\AppData\Roaming\Sublime Text 3\Packages\Userで以下のコマンドを実行し、ローカルリポジトリを作成。

アジャイル開発におけるプロジェクトの進め方 アジャイル開発において、色々悪い意味で誤解をしている方々が沢山いるので、 アジャイル開発をした事が無い方々の指針になればと思い書いております。 はじめに ここに記載している内容を読む前に、必ず以下の点を考慮してください。 全てのチームに同じように適用できるとは限らない。 そもそもプロジェクトの段階で、アジャイル開発の適用が出来るものとできないものがある。 やり方は一つじゃない。 スケジュールの立て方 アジャイルにせよウォーターフォールにせよ、まずはスケジュールがあります。 アジャイルにスケジュールなんて( ´,_ゝ｀)ﾌﾟｯ っと思うかもしれませんが、そもそも1年後か10年後か100年後か成果を何時出せばいいか わからないようなプロジェクトは極僅かしかありません。 アジャイルとウォーターフォールの上のスケジュールの違いは、 スケジュールの粒度とス

その結果、自分はすっかり言及の減ってしまったリーンソフトウェア開発や、それらの源流であるトヨタの生産方式、トヨタが現在取り組んでいる自工程完結を評価するのがよいのではないかと思い至った。本稿は、そういうポエムである。 本稿でいうリーン（ソフトウェア）開発とは何か？ 2003年にメアリー・ポッペンディークとトム・ポッペンディークにより提唱されたトヨタ生産方式を源流とするリーン生産方式をソフトウェア開発に適用した原則集。以下を指す。 リーンソフトウエア開発～アジャイル開発を実践する22の方法～ リーン開発の本質 エリック・リース氏のリーンスタートアップやオライリーのリーンシリーズとは異なるので注意いただきたい。 きっかけとしてのアジャイル方法論の違和感：結局、アジャイルでも多くの課題が残る。 「今回のプロジェクトがやりにくいのはウォーターフォールでやっているからだ」、「今回のプロジェクトが適当

レスポンシブなページを作っていると、JavaScriptもPC向けとスマホ・タブレット向けで動作を分けたいという事はよくあります。 JavaScriptでレスポンシブ対応させるとしたら以下のような方法があるかと思います。 jQuery(window).width() の値から判定 window.innerWidth の値から判定 window.matchMedia で判定 あと、ここでは Internet Explorer 8 以下に関してはないものとして扱います。 それぞれの動作を見てみる それぞれにメリット/デメリットがあるのは世の常です。 jQuery(window).width() の値から判定 はっきり言うとこの方法はダメです。何がダメかというと、jQuery(window).width() はスクロールバーを含めないウィンドウの横幅になるからです。 CSSのメディアクエリの m

本記事では、Swagger Codegenによる スタブサーバ の生成と実行までの流れを説明します。なお、本記事ではあるエンドポイントへのリクエストに対して、意図したダミーデータを返すことができるAPIサーバのことをスタブサーバと呼びます。 OpenAPIでは、APIのレスポンス仕様定義でレスポンスとして返すデータの例を書くことができます。レスポンス定義における examples 配下へレスポンスデータの例を書いたものを次に示します。 '200': description: a pet to be returned schema: $ref: '#/definitions/Pet' examples: application/json: name: 'Fluffy' tag: 'cat' id: 1 examples 配下に書くExamples Objectの仕様は次のリンク先のとおりです

ここ１年ほど実務でVue.jsを利用してWebアプリケーションを開発しています。 今回はVue.jsを使ってチームあるいは個人で開発を始める上で予め考慮しておくと良さそうな事をいくつか書きたいと思います。 コンポーネントルール Vue.jsは単一ファイルコンポーネントによって、とてもシンプルな記述でコンポーネントを作る事ができます。しかし、開発者同士でコンポーネントの認識を揃えておかないと同じようなコンポーネントが作られてしまい、保守性を低下させる要因になってしまいます。 そのため、昨今ではAtomic Designなどの考え方をベースにコンポーネントを管理する方法が用いられています。Atomic Designを用いたコンポーネント設計方法については、以下の記事が参考になるかと思います。 Vue.js × Atomic Design - it's an endless world. いずれ

自分のポートフォリオサイトをサンプルに、どのくらいの容量削減ができるのかを確認してみました。 jsおよびCSSは、サイトの表示に必要な要素を1ファイルにバンドルした状態です。 画像ファイルはjpegの圧縮率などによって最終的なサイズが大幅に変化するので、jsとCSSのサイズ変化のみを取り上げました。 Bootstrap + Font Awesomeのような重量級フレームワークを使用しても、十分に実用的な容量まで削減できました。これならスマホ+3G回線での表示も心配ありません。 手法 適用しやすさを順に手法を並べると、以下のようになります。 遅延する 圧縮する キャッシュする まとめて削る 遅延する サイト上にあるほとんどのリソースは、実際には後から読み込んでも問題なく動作します。 まず最小限の構成でサイトを表示させ、重いファイルは後から読み込みます。 javascriptの遅延読み込み h

この記事は Laravel Advent Calender 2017 8日目の記事です🎁 Webアプリケーションをデザイナーさん/コーダーさんと共同開発することってあると思うんですけどその時にわりとエンジニアは、こういうものだからテンプレートの書き方これなんで覚えてください、開発環境作ったのでこれの上でやってください、という事を言いがち。それでもデザイナーさん達はキャッチアップして開発に参加してくれるので本当に頭が上がらない存在。だけどその悩みを少しでも解決出来たらいいなと思っててLaravelで前回の案件をやっていて共同でやっていた方と閃いた構成が良かったので共有してみます。 デザイナーさんと共同で作業する時の共通な悩み フレームワークごとの書き方に振り回される問題 Railsだったらslimやhamlのシンタックス、そしてRailsのヘルパー群の使い方を学ぶ必要がある。Laravel

TL;DR 要点だけ知りたい方は、最後の方だけ読めば大丈夫です。 背景:Reduxが全然わからないのでちゃんと勉強した 開発現場にReduxを導入しておきながら、チーム全員が「全然分からない。俺達は雰囲気でReduxをやっている」状態だったので、本腰入れてドキュメント読みました。基本を押さえたら一気に見通しが良くなったので、説明します。色々なサイトやドキュメントは明らかに冗長な説明多いので、極限までエッセンシャルを絞って説明することで、ゼロ知識からでもある程度、理解できるレベルの説明に落とし込むことに挑戦しました。うちの開発チームで知見として残すために作成したものですが、需要がありそうかなと思ったので、公開します。需要がなければすみませんでした。おかしな点があれば、まさかりお待ちしております。 今回は、公式ドキュメントのBasics辺りの話まで。 Reduxの主な登場人物 Reducer

はじめに 本記事はグロービス Advent Calendar 2017 24日目の記事です。 グロービスではエンジニアを募集しております。 本記事のきっかけ そもそもの話 【初級者】React/GraphQLで作るサーバレスWebアプリ開発ハンズオン★手軽なアプリ開発体験の勉強会に参加して、GraphQLと出会ったのが、そもそものきっかけです。 上記勉強会で、GraphQLを使うためのサーバーレスなクラウド上のバックエンドサービス（BaaS）であるGraphCMSを用いて、リッチなGUIの管理画面上で、GraphQLのModel定義からコンテンツの登録等を行いました。 そこで、今回 同じくBaaSであるGraphcoolをはじめて触ってみて、Graphcoolに関する日本語の記事がまだ少なかったこと（GraphCMSも少ないですが…）と、Graphcoolやその周辺技術（GraphQL、A

Web ページ表示速度の重要性は昔から言われ続けていて、さまざまな最適化がされてきていると思います。今回は手を付けやすく効果が大きいと思われる画像配信の最適化手法をメモしておきます。 今回の取り組みによって Google PageSpeed Insightsでのスコア向上や、ネットワーク転送量の大幅な削減ができます。 また、この取組は @FumiyaShibusawa に検証、実装をやってもらっています。感謝 👯 要件 レスポンシブな構成 閲覧するデバイスによって表示される画像の大きさが異なる 画像の表示サイズは事前には判断できない ユーザが画像アップロード、レイアウトの修正をすることができるシステム（CMS） 雑な要件ですが、要は事前に決め打ちで画像をリサイズをすることができないようなシステムです。 HTML レンダリング時に <img> の表示領域を計算し、それを画像 URL にクエ

こんにちは。いかがコーディングお過ごしでしょうか。 私は今更ながら最近GraphQLで遊び出し、そしてApollo Clientに出会いました。 ワクワクしました。「これは想像以上に既存のフロントエンドの設計・実装を変えるものだぞ！」と感じました。 「Apollo ClientってGraphQLクライアントでしょ？GraphQLエンドポイントない俺には関係ないな。」と思ったそこのあなた、それだけじゃないんですApollo Clientは！！！！！ 本記事では「Apollo Clientとはなんぞや」という話と「なぜ私がApollo Clientを布教したいのか」という点について語ります。実は最初は実装含めたチュートリアルを書いていたのですが長くなり過ぎたため記事を二つに分けました。この記事はどちらかと言うと概念系の話が多めで、片方にApollo Client + Reactのチュートリアル

ReactやVueなどコンポーネントベースで作っていくViewのライブラリが普及したことで、コンポーネント指向での開発が一般化してきた昨今のフロントエンドですが、このコンポーネントの設計に悩まれる方も多いのではないでしょうか。 コンポーネントをどの粒度、どんな状態で分割するのが良いのか、などなど、特にチームで開発する時に認識が揃っていないとカオスになりがちな部分であると思うので、自分なりの設計をする際の指針を言語化しようというのが本記事の目的です。同じように悩まれている方にも何らか示唆を提供することができたら嬉しいです。 想定読者 「コンポーネント設計？なにそれ？おいしいの？」という方 初めてコンポーネント設計でアプリ作ってみたけど、本当にこれでいいのか自信の無い方 はじめに: "コンポーネント"とは まず最初に"コンポーネント"という言葉についてですが、ここでは「GUIのパーツをモジュー

K.S.ロジャース株式会社の民輪です。超久しぶりにQiita復帰してみました。以前の投稿が2年前。しかも超適当に記事を書いたせいでツッコミ入ったなーという記憶。ちなみに最近はJS方面にリソースさきつつ、WebGLやらないといけないのでThree.jsに手を出そうとしています。 一応これでも曲がりなりにもCTOもどきをやっているわけで真面目に記事書こうと一念発起しました（すぐに折れるかもしれない）。CTOとしてAPIの開発のマネジメントとかよくあるわけで、他の人とかに聞いてると案外グダッてる現場とかあるんだなぁと思いこの記事を書こうと思いました。 tl;dr APIの開発は必ずドキュメントを作成して、ドキュメントのモックを真とする。 APIのドキュメントはエクセルなどではなく、弊社はApiaryを使っている（swaggerでもいいとは思う） APIの仕様を変更する場合にはドキュメントの変更ま

<追伸>７００いいね　および　1万５０００PV　ありがとうございます。様々な方がみてくれてとても嬉しいです。　コメント、拡散してくれた方、本当にありがとうございます ~~ 2018/7/3 16:30 更新 ~~ はじめに 僕は去年の１０月からzens株式会社にてエンジニアインターンしています。しかし、６月末でインターンをやめる決断をしたので今までその経験から学んだことをまとめたいと思います。(久々にエモいの書こうかと思います。) なんでこんな題名になっているかというと、ジョインした段階で完全リモートで参画していたベトナム人、フランス人のエンジニアがいたり、１月からは元インフラエンジニアでRubyの開発経験が6年ほどあるポルトガル人のエンジニアの方が参画するなど日本人のエンジニアがいない、外国人のエンジニアしかいない環境でエンジニアインターンをしていたからです。 特に僕の師匠でもある、ポル

チケットを使わない開発現場はありません (と信じている) が、正しく活用できていない現場をよく見かけます。依頼内容が不明だったり、どこまで作業しているのか分からなかったり、山積みのゴミチケットのせいでどれを作業するべきか発見するのに時間がかかったり。 チケットをどのように使えば、チームの生産性が上がり、ナレッジ喪失のリスクも減らせるのでしょうか？ これまでの経験談を元に、アイディアをまとめておきます。 前提となるマインドセット どれくらいの詳細度にするかはチームのふりかえりで決める どんな書き方がベストかは、チームによって異なります。定期的なふりかえりで調整しましょう。 例えば、メンバーがすぐ隣にいるチームなら、チケットに不備があってもすぐ聞けます。逆にオフショア開発などでメンバーが離れており、オンデマンドでコミュニケーションが取れない場合は、最初からチケットを詳細に書くほうが早く仕事を進

Nuxt.jsで自己紹介サイトを作りました。 https://nitta.studio/ 見ていただくと分かる通りアニメーションをしまくったのですが、、 https://t.co/CXj31medDj Nuxt.jsで自己紹介サイト作りました。NetlifyホスティングでPWA対応してます。 いろいろ自分のイカれた略歴など晒しました。宜しくお願いします。 — 新田聡一郎 (@soichiro_nitta) 2018年4月26日 VuexとVue.jsのウォッチャをつかって、 イベントハンドリング ステート変更 ウォッチャで検知 複数のコンポーネントでアニメーション発火🔥 のような書き方をしたら最高だったので、ご紹介です。 アニメーションって、どこにどの処理書けばいいのか困りませんか？ 凝ったものを実装するとめちゃめちゃなコードになりがちですよね... しかーし！Vue.jsのデータ駆動と

0は性別に関する情報が得られない場合に使います。性別に関する情報はあるのだけど1とも2とも言えない場合は9を使います。要は「0でもなくて1でも2でもなければ9」です。 これを知っていればMだとかFだとかを議論をせずに済みますね。 国際規格に従うべき理由 国際規格に従うことは色々と利点があります。まず、どうしてそういうコード体系にしたのかを説明しやすいです。また多言語対応する際も規格通りに書けば伝わるはずなので迷わずに済みます。別システムへのデータの移行や、異なるシステム間でのデータの統合もコード体系が同じならラクラクです。もしかしたら別のプロジェクトで書いたコードをそのまま使いまわせるかもしれません。技術者に対するトレーニングも不要です。 対して、わざわざ国際規格に反する実装をする場合は上記のメリットがそのままひっくり返ってデメリットになりはしますが、もちろん、それなりの理由があれば規格と

はじめに 最近は年を取ってきたのか、様々な人にマネジメントの考え方やソフトウェアアーキテクチャの設計についてのメンターリングをすることが多いのですが、その時に必要なのはやはり説得力です。僕は基本的には欲望に弱い人間なので、すぐに欲望のままに行動します。それは主に知識欲と食欲です。そのため、２０歳からどんどんと太っていき、才能がないと突破できないとされる１００kgの壁も悠々と突破するような人間ができあがりました。 すると不思議なもので、声が聞こえてくるのです。 「こいつ、マネジメントとかいってるけど、セルフマネジメントできておらんやんけ」 これは全くの幻聴なのですが、そういった幻聴を聴くくらいには心に内臓脂肪が溜まってきていました。 そんなタイミングと「胃痛を空腹と勘違いし回鍋肉を食べた結果、胃痛が加速する」という経験を経て、ちょっくらダイエットでもして見るかと考えるようになりました。 さて