JavaScriptの変数の使い方と、ECMAScript 2015（ES6）で変わった点をコンパクトにおさらい。 JavaScriptを学ぶ基本の1つに、変数の使い方があります。変数は、number（数値）、string（文字列）、array（配列）など、あらゆる型（データ型を参照）を含む入れ物です。変数は、あとでアプリケーション内で使用する（たとえば、値の参照）ために名前が付けられます。 本記事では、変数の使い方と、宣言による違いを紹介します。 変数の宣言と初期化、代入の違い 変数の宣言の違いに入る前に、変数のライフサイクルを見ていきます。 宣言（Declaration）：変数は付けられた名前で適切なスコープ（関数の中など）に登録される段階 初期化（Initialization）：変数は宣言されたとき、自動的に初期化され、JavaScriptのエンジンによってメモリが確保される段階 代

デザインツールやプロトタイピングツールが増える中、デザイン可能なコーディングツール「Hadron」のプレビュー版がリリースされました。さっそくどんなツールなのか、チェックしてみましょう。 コーディングを行いながらデザイン制作まで行うことができるツール「Hadron」がプレビュー版をリリースしました。多くの注目を集めるツールですが、実際の機能はどのようなものなのでしょうか。 実際の画面を見ながら説明していきたいと思います！ Hadronとは Hadronとは、HTMLやCSSのコーディングを行いながら、同時にデザインを制作できてしまうというツールです。ブラウザ上で動作するツールなので、MacでもWindowsでも利用することが可能です。 デザインツールで作成したデザインファイルを元にコーディングを行うことが一般的ですが、それらを同時に行うことができるため、Webサイトの制作フローを大幅に短縮

テクノロジー、ムーブメントの最前線。大企業もベンチャー企業も注目の2019年IT業界重要イベントの大規模展示会、カンファレンス、技術勉強会などをまとめて紹介。 2019年1月 8日～11日　CES 2019（アメリカ・ラスベガス） 「世界最大の家電見本市」 16日～18日　第5回 ウェアラブル EXPO（東京ビッグサイト） 「ウェアラブルガジェットの技術展示会」 26日、27日　闘会議2019（幕張メッセ） 「ニコニコがおくるゲーム大会、実況に特化したイベント」 2019年2月 6日～8日　第27回 3D＆バーチャル リアリティ展（東京ビッグサイト） 「最先端の3D技術や超高精細の映像技術が一堂に出展し、その場で体験ができる専門技術展」 7日　MOBILITY PIONEERS（ミュンヘン、ドイツ） 7日～8日　イーコマースフェア 2019 東京（東京ビッグサイト） 「イーコマース・通販業

アドビシステムズは4月5日、米国の1500人の会社員を対象に実施した調査「Performance Reviews Get a Failing Grade（パフォーマンスレビューに不合格判定）」の結果をブログ内で公表した。 人事評価の多くは時代遅れで、多くの時間を費やさなくてはならないストレスフルなものと認識され、調査によると、従来型の人事評価が従業員やマネージャーからいかに非生産的で無意味だと思われているかを明らかにしているという。 調査対象となった従業員の88%は、ランク付けや数値の評価をともなう文書によるレビューなど、体系的な従来型の人事評価を定期的に受けなければならないと答えている。 しかし、こうしたレビューが同僚間の競争を激化させ、人間関係上のストレスを増やしており、感情的なやりとりや退職にも繋がるとも回答している。 主な調査結果は以下のようになっている。 従業員とマネージャーの多

「働き方改革を阻害しているのは、業務時間の約3割を占める文書管理です」。こう指摘するのはアドビ システムズ 株式会社 マーケティング本部 常務執行役員の秋田夏実氏だ。非効率な文書管理をアドビが提供する「Acrobat DC」はどのように変えるのか？ 文書管理に週の1日半を消費する？ 少子高齢化、労働力不足、長時間労働、介護離職など喫緊の課題を目の前に、官民挙げて取り組んでいる日本の「働き方改革」。しかし、長時間労働を撲滅することのみに主眼を置き、業務時間を減らすだけでは、真の働き方改革とは呼べない。 秋田氏は、「OECDの先進7ヵ国中、日本の生産性は最下位です。少子高齢化で労働力が不足する中、生産性の向上なしに働き方改革を実現するのは不可能です」と指摘する。 こうした中、生産性向上を阻むのが、紙をベースとした日本企業の文書管理の構造だ。類似する文書の繰り返し作成、印鑑をベースにした時間のか

グーグルが自社のデザインにマテリアルデザイン（Material Design）を導入したのは2014年のことです。以来、Gmail、Docs（Googleドキュメント）、Drive（Googleドライブ）など、マテリアルデザインは多くのグーグル製品に実装されました。マテリアルデザインはAndroidネイティブアプリケーションにも、モダンWebアプリケーションにも見受けられ、人気はますます高まっています。 最新のデザイントレンドを追いかけるWeb開発者なら、マテリアルデザインも選択肢に入るでしょう。そこで、マテリアルデザインのCSSフレームワークと機能を紹介します。プロジェクトに合うフレームワークを見つける助けになれば幸いです。すばらしいWebエクスペリエンスの実現のため、助けてくれるパートナーを見つけてください。 フレームワークの人気度や利用できる機能の詳細は変わる場合があります。フレーム

インタビューの仕方を知っていますか？ 準備不足でインタビューに臨んでしまうと、うまく会話が進まなかったり、内容の薄い記事になってしまったりすることがあります。事前に準備するポイントと、質問のコツを紹介します。 近年、企業は顧客の課題の解決方法として商品紹介のみならず、さまざまな情報をコンテンツとして発信しています。数多くあるコンテンツのひとつに、インタビュー記事があります。 今回は、インタビューを実施する前に行うべき事前準備について解説します。 インタビューの心構え 自社のメディア（サイト）を運用していれば、一度は検討したことがあるかもしれないインタビューコンテンツ。いざ実施してみると「一問一答になってしまう」「当日に盛り上がったのはいいものの、後日になって記事を読むと内容が薄い」といった悩みや不満を持ったという方もいるかもしれません。 こうした悩みや不満は、インタビューする側だけでなく、

Webアプリを作るときに便利なグラフ描画ライブラリ「Chart.js」。最近人気のVue.jsでChart.jsを使うための3つのラッパーをデモを交えて紹介します。 現代のWebサイトとWebアプリにおいてチャートは重要な位置を占めています。チャートは、文字だけでは表せない情報を表現して、理解しづらいデータの意味を分かりやすく表現します。 Chart.jsとVue.jsを用いて、さまざまな型のチャートでデータを表現する方法を解説します。 Chart.jsはシンプルで柔軟性に富んだ開発者、デザイナー向けのJavaScriptのチャート作成ライブラリーです。HTML5のcanvas要素でいろいろな種類のチャートが描けます。Chart.jsを復習するならこちらがオススメです。 Vue.jsはプログレッシブなJavaScriptフレームワークです。ここではChart.jsと一緒にチャートを作成しま

デザイナー、エンジニア、マーケターの「掛け算」のスキルアップを応援するパスファインディング・メディア「WPJ」が2017年に公開した記事は、500本あまり。HTMLやJavaScriptのチュートリアルから、UXデザイン、ネット広告のトレンド解説記事まで、読者によく読まれた記事ベスト10を紹介します。 【1位】もう実機は不要!? Chromeのモバイルエミュレーターがとんでもなく進化していた Chromeデベロッパーツール、使いこなしていますか？ モバイルブラウザーエミュレーターの機能が拡張され、通信帯域やセンサーのシミュレーション、PWAの検証など、どんどん進化しています。これは便利です！ 【2位】2017年のPHPフレームワーク——2強時代に何を学ぶべきか？ 動きの早いフロントエンド界隈や他の言語の躍進の話題に押されて、いつまでも古い知識のままPHPで開発していませんか？ 知識のアップ

初めてReactに挑戦するとまずつまずくのは開発環境の設定です。Facrbookが提供しているCLIツール「Create React App」で簡単に始める方法を解説します。 Reactの新規プロジェクトを始めるには、コードを書いてアプリケーションを形にするだけではなく、ビルドツールでローカル開発環境を整え、ユニットテストをしたあと、最終的にビルドします。思っているほど簡単ではないと感じる方に、簡単なセットアップと最低限の努力で始められる方法を紹介します。 Facebookが提供しているCLIツールCreate React Appを使えば、新規のReactプロジェクトを設定済みの開発者向けwebpackを使って始められます。webpackの設定画面を二度と見なくて済むのです。 Create React Appの使い方 Create React Appはnpmを通してグローバル環境でインスト

データの記録はボタンを押すだけ 前回ご紹介したSUUNTOのアウトドアウォッチ「Traverse ALPHA」（以下「ALPHA」）。ミリタリーテイストな腕時計欲しい熱が高まってゲットしたんですが、G-SHOCKもいいなーと思ったり、同じSUUNTOの「VECTOR」や「Core」というモデルも気になったり。「ALPHA」にするにしても色で迷ったりしていたので、現物を見て決めようと思い、珍しくネットでポチらずにショップに見に行きました。 いざとなったらアレコレ迷っちゃうかとも思ったんですが、お目当てのG-SHOCKは店頭になし。気になっていたのは米軍御用達の「DW-5600E-1V」というモデルだったんですが、海外モデルのためそもそも扱っていないようです。またVECTORも2014年に生産が終了していて、在庫はありませんでした。 というわけで選択肢はCoreかALPHAの二者択一です。どち

リアルタイムの通知は優れたユーザーエクスペリエンスの必要条件です。Ajaxリクエストを一定間隔でバックエンドに送信して最新の通知を受け取る実現方法もありますが、より優れたアプローチはWebSocketsを利用して通知が送信されると同時に受信する方法です。詳しく紹介します。 PusherとはWebサービスの1つで、WebSocketを使ってリアルタイムかつ両方向の通信機能をWebサイトやモバイルアプリに組み込むサービスです。 PusherのAPIはもともとシンプルですが、Laravel BroadcastingとLaravel Echoを組み合わせると極限までシンプルにできます。 この記事では、リアルタイム通知を既存のブログに追加する方法を紹介します。 基本的な機能はStreamで実現するリアルタイムLaravel通知に似ています。 まずはChristopher Vundiが作ったリポジトリ

Googleが提唱する「プログレッシブWebアプリ（PWA）」。そのコンセプトを理解し、実装に反映するには「アプリ感覚」の体験を実現することが必要です。ポイントを紹介します（PWAの入門記事も併せてどうぞ）。 グーグルのZach Cochが「Webとアプリの境界線はこれまでになくあいまいになっています」と述べたように、Webはかつてなく改良され、「高速なリッチアプリ感覚」の驚くべき体験を創出できるフェーズになりました。 しかし、Webには特有の課題があります。モバイルでWebサイトを見るとき、ブラウザーではなくネイティブアプリを利用してしまうように、モバイルでのWeb体験は完璧とは言えません。 よく直面する問題を挙げます。 低パフォーマンス：平均的なユーザーは、ロードに3秒以上かかるWebサイトからは離脱する。モバイルサイトの平均ロード時間は19秒程度と、大きなギャップがある レスポンシブ

10月17日に配信が始まった「Windows 10 Fall Creators Update」に導入された、マイクロソフトの新しいデザイン言語「Fluent Design System（フルーエントデザインシステム）」。コンセプトと実装へ反映する方法を解説します。 独自のデザイン言語やGoogleのMaterial Design（マテリアルデザイン）など既存の言語を実装して、統一のとれた堅牢なユーザーエクスペリエンスを提供しているリーディングカンパニーが増えてきました。デザイン言語を、直感的・魅力的で見栄えの一貫したアプリやWebサイトを作成できる「確立されたガイドライン」と考えてください。 最近マイクロソフト社は、Windows 10ベースのデバイスにおける広範な使用（つまりユニバーサルWindowsプラットホーム（UWP）アプリ対応）を目的としたFluent Design System

Webデザインの仕事を長く続けていくと、どんなに新トレンドを取り入れてるつもりでもマンネリ化してしまうもの。新しいアイデアを得られるサイトを10個紹介します。 デザインの種類を問わず、発想のヒントをくれるサイトがあります。最適なフォントの組み合わせならTypewolf、サイトリニューアルのアイデアなら最新のWebby Award受賞作品をチェックしてはいかがでしょう。 しかし、頼りすぎるのは危険です。多くのデザイナーが同じアイデアに影響を受けたら、既存作品の焼き直しがあふれます。いままでにない独創的なアイデアは生まれません。 デザインの発想をもたらす新しい情報源を増やしましょう。ここで紹介する10個のWebサイトは想像もしなかった形のアイデアをくれるはずです。 1．99% Invisible 99% Invisible（目に見えない）は、Roman Marsがホストを務めるラジオ番組とブロ

UIデザインに特化したデザインツールとして人気のある「Sketch」。その強力なライバルとなる「Adobe XD」と主要な機能と使い勝手を比べてみると……。 【2】 SketchとAdobe XDを使っていたデザイナーの私がFigmaに心底惚れたワケ（WPJ） SitePointのデザイナーであり、デザイン＆UX分野の編集者でもあるAlexが振り返る、2016年のデザインツール事情。たくさんのツールが登場した中でもFigmaは特にお気に入りのようです。 【3】 Google DocsみたいなUIデザインツール「Figma」Sketchから乗り換えるべき？（WPJ）

フロントエンドとバックエンドを分離する「ヘッドレスCMS」が話題となっています。Elemenoを例に、ヘッドレスCMSを使ったWebサイトの開発方法を説明します。 「ヘッドレスCMS」は比較的新しいタイプのツールです。特徴や、利用方法を解説します。 従来のCMSは、コンテンツを作って管理するバックエンドと、コンテンツを表示するフロントエンド、２つのコンポーネントがあります。フロントエンドは、昔からのテクニック、ツールやライブラリーで作られた「Webサイト」です。 ヘッドレスCMSは、コンテンツを制作して管理するバックエンドしかありません。ロバストなAPIでコンテンツを配信し、開発者はAPIを用いて簡単にコンテンツを管理できます。この役割分担は、CMSがコンテンツの管理しかやらないことを意味します。ヘッドレスCMSはコンテンツの表示は関知しません。任意のプログラム言語、フレームワーク、ライブ

webpackを使ってアセットをバンドルすることで、HTTPリクエストの回数を削減し、ファイルサイズを縮小できます。Webサイトをもっと快適にするためのチュートリアルです。 webpackが大人気です。GitHubのスター数は30,000を超え、ReactやAngularといったJavaScript界の有名プレイヤーもwebpackを歓迎しています。 webpackの本質はバンドラーであり、webpackを使えばどんなリソースやアセットでもバンドルできます。大規模なプロジェクト以外でも活用できます。 webpackをインストールして設定する方法を説明します。いくつかのアセットを持つシンプルな静的サイトのための圧縮バンドルをwebpackで作成します。 webpackを使う理由 主な理由は、サーバーへのHTTPリクエストの回数を減らすためです。Webページが大きくなると、jQuery、フォン

UXはUIの上位概念だから、UXデザイナーを目指すべき——本当でしょうか？ UIはUXの一部だからこそ、比較したり優劣をつける議論は意味がありません。 フルスタック／ゼネラリストのプロダクトデザイナーとして、私は業界が長らく肩書きばかりに気にかけているのを見てきました。批判的な立場で、批判的なツイートばかり続けることが、誰かのためになったことがあるのでしょうか？ 「デザイナーはコードを書くべきか？」と同じく、「UXかUIか」は業界の議論の的になっています。 I label increasingly nonsensical images with ‘UI’ and ‘UX’ and hope they get used in serious presentations pic.twitter.com/tDJgRp6CO5 — Sebastiaan de With (@sdw) March 1

CSSの調整、フォントの調査、画像の作成など、Webデザイナーの作業効率をアップさせるChromeの拡張機能を紹介します。 Webデザイナーなら自分なりの仕事のやり方があると思います。コードを書きながらブラウザー上で直接デザインしている人、ブラウザーは実装テストの時にだけ使う人、どんな人でもWebデザイナー向けのChrome拡張機能を使えば普段の作業が見違えるほど簡単になります。私は一番煩わしいと思っている「ちょっとした作業のために大掛かりなソフトを起動すること」をはじめ、Webデザインでありがちな問題を解決するために、Chrome拡張機能を探しています。 これなしではやっていけないほど便利なChrome拡張機能を7つ紹介します。普段Firefoxで作業をしているなら（Web開発者ならすべてのブラウザーでクロステストするはずですが）、Webデザイナー向けのFirefoxの6つの拡張機能が参