「フロントエンド開発者」の終焉 | POSTD
元記事の著者より：この記事は主に北米文化で私が見たことを反映しています。 誰かに職業をきかれたら、私は「フロントエンド開発者です」と答えます（答えは相手によって変わることもあります）。10年か20年前は、自分の仕事に必然的に伴うものが何なのかは、かなり明瞭でした。インタラクション用にHTMLやCSSを書き、JavaScriptも多少は書いていました。駆け出しの頃、PHPやMySQLの作業に職務の大半を費やしていたとはいえ、フロントエンド開発者として見られる方が好きです（これに関しては、後に詳しく説明します）。この状況は、2010年の初頭に変わり始めました。JavaScriptが、重要で、非常に大きな存在になってきたのです。昨年の初め頃から、たくさんのフロントエンド開発者に会うようになり、あることに気付きました。フロントエンド開発者は、もはや、私が以前から知っているフロントエンド開発者ではな
Webサイト開発にCSS in JavaScriptを使うのはやめよう | POSTD
9つのおとぎ話 CSSは迷走しています。JavaScriptでドキュメントをスタイリングしているプロジェクトでは、多くの場合誤った理由からその方式を選択しています。本稿では、よくある誤解（神話）を列挙し、そうした問題に対するCSSソリューションを紹介します。 本稿は、特定のプロジェクトや人物への攻撃を意図するものではありません。ここでは、“CSS in JavaScript”(CSS in JS)を styled-components を使用することと定義します。これは、Reactのコンポーネントをスタイリングする最近のトレンドとなっています。 styled-components の作者である Max Stoiber と Glen Maddern 、また彼らに協力した人々は皆、卓越したアイデアと善意にあふれる優秀な人々です。 完全な透明性のために断っておくと、私は react-css-mo
UIデザインにおけるボタン:スタイルの進化とベストプラクティス | POSTD
ボタンはごく普通の、インタラクションデザインの日常的な要素です。ボタンはとてもシンプルなUI要素に見えますが、過去数十年間でそのデザインはかなり変わってきました。しかし今でもボタンのUXデザインは認識しやすさと明確さについて言及されています。 この記事ではボタンデザインの発展を辿りながら、有効なボタンを作るために何が最も重要で最適なのかを見つけて行きたいと思います。 スタイルの発展 3Dボタン 初期からオペレーティング用のボタンは、周りのコンテキストと区別するために、浮き彫りと影に依存していました。この設計の解決策は枠、グラデーション、ドロップシャドウを使用して、要素を背景やコンテンツから目立たせ、クリック可能な要素だと簡単に認識できるようにするといった単純な原則に基づいていました。 ボタンが浮かび上がっているように見えます。 このWindows95のダイアログボックスは、濃い影とハイライ
私たちはなぜReactではなくVue.jsを選んだのか | POSTD
Qwintryチームは最近、既存のすべてのプロジェクトのフロントエンドをVue.jsに移行しはじめました。新しいプロジェクトでもVue.jsを使います。 レガシーなDrupalのシステム（qwintry.com） ゼロから新しく書きなおすqwintry.comのブランチ Yii2で動くb2bシステム（logistics.qwintry.com） その他、比較的小さめのプロジェクト（ほとんどは、PHPとNode.jsでバックエンドを構築しているもの） プロジェクトの規模についていうと、 Qwintry は世界中で約50万人の顧客が使っています。アメリカとドイツに倉庫を持っていて、アメリカ国内 最大の郵送先 のひとつで、東欧や中東への出荷に注力しています。Qwintryは、アメリカのオンラインストアでグッズを購入する人たちのためのツールです。私たちの倉庫に届いた荷物をコントロールパネルで管理で
フロントエンドにおいてModel-View-Controllerは死んだのか？ | POSTD
多くのフロントエンド開発者が 一方向のアーキテクチャ を採用し始めている中で、Model-View-Controller（MVC）に未来はあるのでしょうか。 状況を把握するために、まずはフロントエンドのアーキテクチャの進化を振り返ってみたいと思います。 過去4年にわたり、私は多数のWebプロジェクトに取り組み、フロントエンドの構築、そしてフロントエンドとフレームワークの統合に多くの時間を費やしてきました。 2010年以前は、従来のウェブサイトにDOM操作を追加する場合は大抵JavaScript（ jQuery が書かれたプログラミング言語）が使用されていました。当時の開発者はアーキテクチャ自体についてはそれほど気に掛けていなかったと思います。コードベースを構造化する場合、 Revealing module pattern のようなものがあれば十分でした。 現在、多くの議論が交わされているフ
珍しいワークフロー：Atomic Designの原則とSketchでデザインからプログラミングまで | POSTD
概要： Sketchを使ったAtomic Designの方法がプロダクトデザインの未来形です。 初めに この記事は、上のビデオの素晴らしい人物、Brad Frostの開発したシステムについて書いています。Atomic Designは今のレスポンシブなデジタルの世界に対応するために開発されたものです。 ここ何年も、私たちのデザインを少しでも理解してもらえるよう、スタイルガイド、基本的ガイドラインやムードボードなどのツールを作成してきました。同じように、開発者もBootstrapやFoundation、Bourbonなどのツールでプログラミング作業を楽にしようとしてきました。互いに妥協点を見いだし協力することで互いの作業を楽にできます。Atomic Designはまさにそれを実現しようとしています。 Atomic designはあるインスタンスやページをデザインすることではありません。大局的に
jQueryは有害なのか | POSTD
ずっと「～は有害なのか」という記事を書いてみたかったんです ^(1) 。 まず本題に入る前に、1つ言わせてください。 jQueryはWeb業界の発展に大いに役立った と私は考えています。jQueryがあることで、開発者はこれまで想像もできなかったことをできるようになりましたし、そういった機能をブラウザの製作者がネイティブに実装するきっかけにもなりました（もしjQueryが開発されていなければ、今でもdocument.querySelectorAllは存在していなかったでしょう）。jQueryは、今ある便利なツールを使うことができなかったり、IE8やそれ以下の過去の遺産をサポートしなければならない際に今でも必要になってきます。 しかし、そのようなケースはもはや稀なものとなりました。Web開発者の大半は、マーケットシェアの縮小した古いブラウザをサポートする必要はありません。更に、忘れてはならな
JavaScriptの読み込みにおける非同期スクリプト注入の悪影響 | POSTD
Synchronous（同期）スクリプトは効率が悪い。というのも、ブラウザにDOM構築をさせ、スクリプトを読み込ませ、残りのページをリロードする前に実行してしまいます。今さらな話ですが、これがわれわれプログラマがasynchronous（非同期）スクリプトをよく使うようになった理由です。ここに分かりやすい例があります。 <!-- BAD: blocking external script --> <script src="http://somehost.com/awesome-widget.js"></script> <!-- GOOD: remote script is loaded asynchronously --> <script> var script = document.createElement('script'); script.src = "http://somehos
ユーザ・インターフェースのためのイージングカーブをつくる | POSTD
フラットデザインの導入以来、アニメーションの質が、今までにないほど、優れたインターフェース作成のために必要不可欠なものとなっています。モーションデザインを通して、製品の総体的なブランドエクスペリエンスを左右するようになり、製品を、市場の他のものと差別化する要素となりました。アニメーションは複雑なインタラクションを簡素化し、優れたデザインを記憶に残るユーザエクスペリエンスにしました。では、質の高いアニメーションはどのように作られるのでしょうか？ イージングカーブは多くの要となるコンポーネントの1つで、適切なアニメーションをとり、素晴らしいものに作り上げます。 問題なのは、イージングカーブがどのように機能するかについての理解が、少々難しいということです。 前回の記事 After Effects to CSS で触れたタイミング関数への興味の派生としてこの記事を書きましたが、この記事を読むことで
生のReactを知ろう – JSX、Flux、ES6、Webpackを使わず… | POSTD
(編注：2016/07/29、いただいたフィードバックをもとに記事を修正いたしました。) 免責事項： 私はJSX、Flux、 ES6 、そして webpack を非常に気に入っています。これらのツールについては他のシリーズで話します。 React.jsが騒ぎを起こしているのはご存知の通りです。確かに、 XMLHttpRequest 以来の良いツールです。しかし、調査に数時間を費やした挙句、あまりに多くの用語に 圧倒された だけで終わっていないでしょうか。JSX、flux、ES6、webpack、react-routerが使える今、 *他に必要なのは React の使い方を説明してくれる人だけです。* 喜んでください、それがまさに当シリーズでやろうとしていることです。信じられませんか？大丈夫、 2分後、 初めてのReactアプリを作った後には納得いただけるでしょう。何もダウンロードせずに、で
ES6 チートシート | POSTD
日々の仕事の中で役に立つES2015（ES6）のティップス、コツ、ベストプラクティス、プログラムの見本をご紹介します。コントリビューション歓迎です！ 目次 var vs. let / const IIFEからブロックベースへ アロー関数 文字列 デストラクチャリング モジュール パラメータ クラス シンボル マップ WeakMaps Promises ジェネレータ Async/Await var vs. let / const var の他に、値を格納する let と const という識別子が新たに追加されました。 var とは異なって、 let と const はクロージャのスコープ内で最初に記述されることはありません。 var の使用例です。 var snack = 'Meow Mix'; function getFood(food) { if (food) { var snack
Web開発の未来 – React、FalcorおよびES6 | POSTD
この記事でWeb開発の未来を垣間見ることができるでしょう。UIの構築やサーバ、データ・エンドポイントの新しい見解を得ることができると思います。ここで、ブラウザとサーバコードの両側を含めたフルスタックな話をしていきます。これを読めば、 完全に機能するGitHubリポジトリ で紹介されたすべてのコードの検証や実行ができるようになります。皆さまが開発者として次の資質を持っていることを前提に話を進めていきます。 JavaScript中級者 HTML中級者 クライアント/サーバ間通信の基礎知識 JSONの基礎知識 Node.jsの基礎知識 上の知識がなくても、 おそらく この記事の進行についていけるでしょう。しかし、知識がないと私の紹介するコードを現実的なシナリオあるいは重要なシナリオに応用するのは難しいでしょう。インターネットは情報の宝庫なので、理解に必要な概念などをたくさん提供してくれます。必要
CSSモジュール ― 明るい未来へようこそ | POSTD
ここ最近、CSSに対する考え方が広がりを見せています。皆さんの中には、その転換点を見つけようと、Christopher Chedeauの”CSS in JS”という講演を聞いた方もいるでしょう。2014年11月にNationJSで行われたこの講演は、CSSにおける重大な分岐点となりました。まるで高エネルギー粒子が衝突した後のように、それを機に、数ある多様な考え方が、各々の方向へ渦を描くように広がったのです。その例として、 React Style と jsxstyle 、 Radium を挙げましょう。これら3つは、Reactのスタイリングにおける最新かつ最良、そして最も実行しやすいアプローチに含まれており、 各々のプロジェクトのReadmeファイルでも、 そのように言及しています。もし”発明”が、 adjacent possible（一歩先にある可能性） を探ることの一例であるのなら、Ch
JavaScriptのデバッグのコツと技 | POSTD
以前の記事で、 Webアプリケーションのデバッグの仕組み について触れました。今回は実践的なJavaScriptのデバッグについて掘り下げていきたいと思います。 ブラウザデベロッパツール 私の個人的なお気に入りはChromeデベロッパツールです。SafariやFirefoxはChromeほどの高水準に達していません。しかし、徐々に改善されてきています。FirefoxにはFirebugと改良されたFirefoxデベロッパツールが組み合わされた機能が備わっています。もし、Firefoxチームがビルトインされているデベロッパツールの改良の中で素晴らしい仕事をし続けたとしたら、Firebugはいつか、すたれるかもしれません。 個人的な好みにかかわらず、ターゲットとするあらゆるブラウザで、全てのコードのテストやデバッグができるようにすべきです。”あらゆるブラウザ”には、かの有名なInternet E
JavaScriptにおける継承のパターン4種類の概要と対比 | POSTD
JavaScriptはとても強力な言語です。強力がゆえ、実はプロトタイプをデザインしたり、オブジェクトのインスタンスを生成したりするのに何種類もやり方があります。それぞれの方法には長所も短所もあります。そこでJavaScript初心者の皆さんのために私がそのあたりを整理して説明したいと思います。今回の投稿は、以前私が書いた 「JavaScriptを分類するな」 の続編です。前回の投稿でたくさんのコメントをいただき、コードの例を出してほしいをいう反応をいただいたので、今回はそれらにお応えします。 JavaScriptはプロトタイプを使って継承 つまり、JavaScriptでは、オブジェクトは別のオブジェクトを継承することができます。 { } 波括弧を使って生成されるJavaScriptの基本的なオブジェクトは、唯一のプロトタイプとして Object.prototype をプロトタイプに持ちま
優秀なJavaScriptの開発者になるための5か条 | POSTD
(注記：7/15、いただいた翻訳フィードバックを元に記事を修正いたしました。) 子供の頃、私の興味は互いに関係性のない様々な分野に及んでいました。数学も歴史も大好きでした。 ルネッサンスマン 、つまり 博学者 と言う、複数の分野に秀でた人になりたいと思っていました。これはとても難しい課題で、私は突如として、器用貧乏な人になってしまう危機に直面したのです。 私は特定の分野に特化しなくては、と考え始めました。そうすればたとえルネッサンスマンにはなれなくても、少なくとも、器用貧乏にならなくても済むと思ったのです。どうしたらソフトウェア開発をするのに必要な広い知識を保ちながら、1つの分野で専門性を高めることができるのでしょうか。 この記事では、過去5年間、私が良いJavaScript開発者になるために使ったテクニックとリソースの概要をお伝えしようと思います。 最近の多くのWeb開発者は、ある共通の
Vimの生産性を高める12の方法 | POSTD
1. LeaderをSpaceキーにする Leader は素晴らしい概念です。キーの 組み合わせ ではなく 並び によって、操作を行えるようにするものです。私はこれを使っているので、操作のために” Ctrl -何らかのキー”の組み合わせを押す必要はめったにありません。 私は長い間、 , を Leader キーとして使っていました。ですがある時、キーボードの中で一番目立つキーにマップすることを思い付いたのです。Space（スペース）キーです。 これで私のVim生活は激変しました。今や、私は Leader をどちらの親指でも押すことができ、他の指は常にホームポジションにあります。 Leader がとても使いやすくなったので、私が様々なキーバインドで用いるようになったことは周知の話です。 2. 自分が特によく行う操作をLeaderにマップする 私は、自分がVimで作業を行っている中で、その時間の
コードレビューのベストプラクティス | POSTD
Wiredrive では、私たちはかなりの数のコードレビューを行います。しかし、ここで働き始める前には私はコードレビューなどしたことがありませんでした。今回は、私がコードレビューをする時に何に注目するようにしているかや、私の考え出したベストなコードレビューのやり方をお話したいと思います。 コードレビューとは、簡単に言うと2人以上の開発者で問題を引き起こしそうなコードの修正について話し合うことです。コードレビューをすることのメリットについては多くの記事で語られており、知識を共有できること、コードのクオリティが上がること、開発者が成長できることなどが挙げられています。しかし、レビューを行う上で、どのように進めていくかという具体的なことについてはあまり多く語られてないように私は思いました。 レビューで何に注目するか アーキテクチャ/デザイン 単一責任原則 : 1つのクラスは変更する理由が2つ以上
【翻訳】AngularJSからReactへ: Isomorphicな方法 | POSTD
先週、私たちはWebサイトを検索エンジン向けにインデックス付けできるようにしようとしていました。この記事では、私たちがWebサイトを書き直していて学んだことの要約を紹介したいと思います。 背景 2ヵ月前に RisingStack.com を作成した時、私たちはそのWebサイトでどんなテクノロジを使うか決めなくてはなりませんでした。イベントを追跡する静的なページが数ページあるだけだったので、とても簡単でしたが、私たちはWebサイトをスケーラブルでできるだけ高速なままにしておきたいと考えていました。 私たちのチームは AngularJS の経験が豊富なので、フロントエンドにAngularを選ぶのは妥当だと思われました。 この記事はReactやAngularJSがどちらか一方より優れている理由について述べているわけではないので注意してください。どちらがいいかは常にユースケース次第です。 “Ang
フロントエンドとバックエンド | POSTD
バックエンドエンジニアとフロントエンドエンジニアの違いは、前者は1つの環境で仕事をするのに対し、後者は予期せぬことが起こる可能性のある数多くの環境で仕事をするということにあります。 「複雑なJavaScriptで動くWebサイトやWebアプリが動作する環境は、単一的で一枚岩のものである」――この無意識な思い込みこそが、バックエンド中心に開発されたWebベースプロジェクトにおいてフロントエンドエンジニアが目にする問題の根本的な要因であると私は考えています。 さらに悪いことに、バックエンドエンジニアは、フロントエンドエンジニアよりも複雑なアプリケーションを構築するのに長けていると考えています。実際そうなのかもしれないのですが、好ましくないのは、彼らの中にはフロントエンドについて学ぼうという意識に欠けている人がいることです。 アプリケーションの構築において、数多くの困難な環境に対応するフロントエ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
