開発者はReactとAngularのどちらを選ぶべきか？
新しくプロジェクトを始めるときに開発者を悩ませる、フレームワーク選び。ReactとAngularをあらゆる点で比較しながら、どう選ぶべきか？ の基準を考えます。 AngularとReactのどちらを選びますか？ JavaScriptのフレームワーク選びで多くの開発者が悩んでいます。始めたばかりの初心者も、次のプロジェクトで使うフレームワークを検討中のフリーランサーも、企業戦略を立てるITアーキテクトも。そこで、フレームワーク選びの知識を授けましょう。 最初にお伝えします。この記事では、どちらが優れているか明確な結論は出しません。しかし、何百とある似たようなタイトルの記事も同じです。自分の環境と使い方によって多くの要素が絡むため、一概に決まらないのです。 この記事は、Angular（バージョン2以上のこと。古いAngularJSのことではない）とReactを体系的に比較し、違いを理解した上で
JavaScriptをもう一度学びたい人へ 演算子、条件文、関数の基礎をおさらい
この春、JavaScriptを始めた新人さんも。いつもコピペで済ませているデザイナーさんも。JavaScriptの演算子、条件文、関数の基礎をおさらい。 JavaScriptでクリエイティブなプログラミングに取り掛かる前に、しっかりと基礎を固めることはとても重要です。この記事では自分でプログラムを書けるようになるためにもっとも重要なJavaScriptの基礎を説明します。説明するのは、演算子、条件文、関数です。 始める前に、前提として基本的なJavaScriptの構文、コメント、データ型、変数への値の代入を理解してください。おぼつかないという人は『これなら絶対わかる！JavaScriptの変数と型の基礎をいまこそ理解する』を参照してください。 注：このガイドはJavaScriptおよびプログラミングのまったくの初心者を対象としています。そのため多くの概念はシンプルな方法で示し、strict
もうjQueryには頼らない！素のJavaScriptでDOMを操作するための基礎知識
DOM操作が必要なとき、真っ先にjQueryを使うことを考えます。しかし、素のJavaScriptのDOM APIだけでも、実はかなりのことができるのです。また、IE10以下のサポートが終了したため、今後は素のJavaScriptによるDOM操作を心配なく使えます。 記事では、素のJavaScriptで一般的なDOM操作をする方法について説明します。具体的には以下のとおりです。 DOMの取得と変更 クラスと属性の変更 イベントのリッスン アニメーション 記事の最後に、どのようなプロジェクトにも使える独自の超軽量DOMライブラリーの作り方を説明します。記事の最後までに、素のJavaScriptによるDOM操作は決して高度な技術ではないこと、多くのjQueryメソッドとまったく同じ機能が実はネイティブAPIにもあることが理解できるはずです。 それでは始めます。 DOM操作：DOMの取得 この記
なぜJavaScriptだけではダメなのか？ 開発者が第2言語を学ぶべき理由
フロントエンドもサーバーサイドも、JavaScriptで何でも書ける時代。それでも他のプログラミング言語を学ぶメリットとは？ プログラミング言語をいくつ知っていますか。最近の調査によると、SitePoint読者の約80％は少なくとも2つの言語を知っています。ゆうに半数以上の読者は日々PHPを使っています。私と同じように非常に多くの人がPHPを使ってWeb開発を始めたと思います。 最近「学習予定」リストがまだ不十分だと思い、この機会に履歴書に別の言語を追加しようと考えました。そして、オンラインでScalaを学ぶことにしたのです。Scalaになじみのない人のために簡単に説明すると、Scalaは静的に型付けされた汎用コンパイル言語（たとえば、移植可能なバイトコードにコンパイルするJavaのようなもの）です。ScalaはJavaScriptのように複数のパラダイムがありますが、Haskellのよう
体感速度をぐぐっと改善！Medium風プログレッシブ画像ローダーの実装テク
このサイト、表示が遅いな…とユーザーに思われないためによく使われる、画像の遅延読み込み。見栄えがよく、シンプルで使いやすい実装方法を紹介。 ページをスクロールして要素がビュー内に入ると、ぼやけた低解像度の画像がフル解像度の画像に置換される「プログレッシブ画像」をFacebookやMediumで見たことがあることでしょう。 プレビュー画像は幅20pxほどと小さく、高圧縮のJPEG画像です。ファイルサイズは300バイト未満なのであっという間に表示され、読み込みが速い印象を与えます。実際の画像（フル解像度）は必要に応じて読み込まれます。 プログレッシブ画像はすばらしいテクニックですが、いまのところ出回っているソリューションは複雑なものです。幸いなことに、ちょっとしたHTML5、CSS3、JavaScriptで以下のようなコードを作成できます。 わずか463バイトのCSSと1007バイト（圧縮後）
誰も教えてくれない、JavaScript初学者がプログラムを書けるようになる方法
JavaScriptに限らず、プログラミングの基本を学んだら何か動くモノ（プライベートプロジェクト）を作ってみたくなります。でも実際にどうやって進めたらいいのでしょうか？ 読者からときどき聞こえてくるのは、自分自身でJavaScriptのプロジェクトを進める方法が分からないということです。 理由の1つは、記事では具体的な手順が示されるので、手順そのものを自分で考えることがないからです。またプロジェクトに手こずるもう1つの理由は、まだ作りかけの状態なのに他人の完成作品と比べて落胆することです。 実際のプロジェクトの進め方は記事（私のも含めて）で説明しているほど単純ではありません。現実には、プロジェクトは完璧なコードをガンガン書くことではなく、たくさんの試行錯誤とリファレンスを幾度も参照して少しずつできあがるものなのです。 本記事では、自分でJavaScriptプロジェクトを進めていく方法を説
なんじゃこりゃ！かっこよすぎる3Dマップが作れるeegeo.jsにしびれた！
まるでゲームのような豪華で楽しい3Dマップをブラウザー上に手軽に表示できるWebサービスAPIの登場です。現時点では日本地図は対応していませんが、とてもわくわくするサービスですね。 eegeo.jsは、人気の地図ライブラリーLeafletをベースにしたオープンソースの3DマップAPIです。 シンプルな2Dマップを埋め込んだり、作成したりできる地図ライブラリーはたくさんあります。特に有名なのはGoogle Maps、Bing Maps、HERE、Mapbox、OpenStreetMapです。また、地図抽象化ライブラリーとして人気の高いOpenLayersやLeafletなどでは、アプリケーションの仕組みはそのままで、地図の「ベースレイヤー」を変更できます。 Google Earth APIの使用がNPAPIのセキュリティを理由に非推奨になったことで、3DマップAPIの選択肢は限られてしまいま
5000人調査でわかった！世界のフロントエンド開発者が使うツールはこれだ
次々とリリースされるJavaScriptライブラリーにフレームワーク、進化を続けるCSSモジュール……と、変化の激しいフロントエンド開発界隈。いま開発者たちに実際に使われているのはどんなツール？ 開発経験は2年以上ありますか？ 高度なCSSスキルとしてSassやAutoprefixerの使用も含まれていますか？ JavaScriptの知識は十分にあり、Gulp、nmp、jQueryを使いこなせていますか？ そうであれば一般的な開発者だそうです。Ashley Nolan氏によるフロントエンド開発ツールのアンケート調査によれば。 気になる結果を見る前に…… この種のアンケート調査は新たなツールを見つけたり、知識不足の分野の把握に役立ちます。執筆時点で5254件の回答が寄せられていて、アンケート調査としてはかなりのサンプル数です。ただ、結果を疑いようのない真実だと受け取るには慎重になるべきです。
これなら絶対わかる！JavaScriptの変数と型の基礎をいまこそ理解する
なんとなくjQueryを使っているけど、実はJavaScriptの基礎がよくわかっていない……。そんなJavaScript初心者のために、変数とデータ型をていねいに解説します。 Webプログラミング言語「JavaScript」を学ぼうと決めたものの、どこから始めていいか分からないなら、この記事がちょっとしたヒントになるかもしれません。プログラミングを習得するのに特別なスキルは必要なく、誰だってゼロからスタートしています。一歩ずつ進めていけば大丈夫です。 この記事がおすすめの人は？ 以下のどれかに当てはまる人なら、この記事を読むメリットがあります。 プログラミング言語を使った経験がない JavaScriptを使った経験がない 以前JavaScriptの習得に挑戦したが、資料が不十分、または難しくてついていけなかった JavaScriptについての知識は少しあるが、基礎レベルからさらにステップ
かっこよくて気持ちいい！ページ内の要素を整列・抽出する「MixItUp3」がいい感じ
カード・タイル状の要素をアニメーション付きで見栄えよく表示する「MixItUp3」。ストックしておくと便利なライブラリーの紹介です。 自分のWebサイトを見やすくするために、コンテンツにフィルターをかけて抽出したり整列したりするのは優れた手段です。たとえば、自分の作品集、アルバム、ブログなどはカテゴリごとに分けたいものです。それを実現してくれるJavaScriptライブラリーが数多くあります。中でも人気があるのはMixItUpとIsotopeです。 この記事ではMixItUp3（執筆時点での最新版）の基本機能を紹介するとともに、プロジェクトで活用できるように手順も説明します。ライブラリーの動作を示すために、記事では作成したデモを参照しています。 MixItUp3とは？ MixItUpは、ほかのライブラリーに依存することなく、CSSのアニメーション効果を使いながら、サイトの要素の抽出や整列が
iOSとAndroidアプリをWeb開発者が超高速で作れる「Fuse」って知ってる？
iOSとAndroidアプリをJavaScriptのコードで開発できる「Fuse」を知っていますか？動くモックアップをWeb開発者やデザイナーがすばやく開発できる便利なツールの使い方を解説します。 この記事では、Fuseを使用してHacker Newsリーダーアプリを作成します。Fuseとは、AndroidデバイスとiOSデバイスの両方で動作するクロスプラットホームアプリを開発するためのツールです。プロジェクトのソースコードはGithubにあります。最終的なアウトプットは次のようになります。 Fuseとは？ 一言で説明すると、FuseはJavaScriptを使ったクロスプラットホームアプリを作成するツールです。Fuseを支える基本的なアイデアは、React NativeやNativeScriptとよく似ています。FuseはJavaScriptを実行するためにJavaScript VMを使用
2017年はNode.jsの達人になる！いま知っておきたいベストプラクティス10
前回の記事『10 Tips to Become a Better Node Developer in 2017（達人に学ぶ、優れたNode使いにレベルアップするための10のヒント）』では、いますぐ使える10個のNode.jsのヒントやテクニックを紹介しました。この記事もそれに続いて10個のベストプラクティスを紹介し、Nodeのスキルを次のレベルに上げられるようにしたいと思います。 以下が今回紹介する内容です。 npmスクリプトを使う：bashスクリプトを使わず、npmとNodeのスクリプトを使ったほうが管理しやすい（例：npm run build、start、test）。Nodeの開発者が新プロジェクトに取り組むには、npmスクリプトこそが唯一の真実 環境変数（process.env）を使う：process.env.NODE_ENVを、development（開発）あるいはproducti
2017年はどのプログラミング言語を学ぶといい？ 初学者へ贈る4つのアドバイス
今年こそは新しいプログラミング言語や技術を学ぼうと決意した人も多いのでは？ 新しいことを始めたい人へ、ベテランWeb開発者からのアドバイス。 新年が開け（訳注：本記事のオリジナルは2017年1月に掲載された）、自分のスキルやキャリア選択を見直す人も多いでしょう。「学ぶのに最良の言語」に関する統計のソースがたくさんありますので、それから紹介しましょう。 スタック・オーバーフローの開発者調査 2016年、スタック・オーバーフローは開発者調査を173カ国の5万6000人を超える開発者を対象に実施しました。 もっとも使われている技術 JavaScript：55.4% SQL：49.1% Java：36.3% C#：30.9% PHP：25.9% Python：24.9% C++：19.4% AngularJS：17.9%（JavaScriptフレームワーク） Node.js：17.2%（サーバーサ
達人に学ぶ、優れたNode使いにレベルアップするための10のヒント
私は2012年にStorifyの開発にフルタイムで加わったときからNodeを使っています。それからというもの、それまでの10年間にWeb開発に使っていた言語、Python、Ruby、Java、PHPが恋しくなることは一度もありませんでした。 Storifyの開発はやりがいのある仕事でした。Storifyはほかの会社のプロジェクトとは違って、すべてがJavaScriptで動いていたからです（おそらく現在もそうだと思います）。だってそうでしょう、ほとんどの会社、特に大企業であるPayPal、Walmart、Capital OneなどではNodeは特定のレイヤーにしか使われていません。よくあるのは、APIのゲートウェイやオーケストレーション（複雑なシステムの統合管理）のレイヤーとしてNodeが使用されています。すばらしいことですが、ソフトウェアエンジニアから見れば、完全なNode漬けの環境にはか
Web開発者の私が「jQueryダイエット」に取り組む理由
2017年に入って1カ月が過ぎ、新たな目標にチャンレジしている人も多いでしょう。SitePointのJavaScript担当エディターのJamesは、「jQueryダイエット」に取り組むことを決めたようです。 2016年はJavaScript界にとってクレイジーな1年でした。ES6対応やプログレッシブウェブアプリの増加が見られました。また、Yarnがnpmの競合として登場し「JavaScript疲れ」が問題になりました。見逃した人や、思い出にふけりたい人のために、おさらいをします。Craig Bucklerは2016年の出来事を『JavaScriptの2016年：フロントエンド開発者が押さえるべき重大トピック』で紹介しています。とてもよく書かれています。 2017年について考えるとき、次の2つの問いが頭に浮かびます。昨年のようにまたクレイジーな1年になるのか、そして、365日、毎日キャッチ
脱「JavaScript疲れ」のために注目すべき、3つの最新ライブラリー
ツールやライブラリーが乱立し、年々複雑化するJavaScriptの世界。それでも2017年に注目したい3つのライブラリーを紹介します。 JavaScript界にとってはクレイジーな年だった、2016年が終わりました（編注：本記事の原文は2017年1月2日に公開された）。この1年で数え切れないほどの印象的なライブラリーやフレームワークが登場しました。「You Might Not Need JavaScript」はJavaScriptを使わなくても実現できるコードを紹介してJavaScriptの使い方について疑問を投げかけ、Nolan LawsonがFronteersで発表したスライドに関するツイートが議論を呼び、Jeremy KeithやChristian Heilmannといった著名人からもレスポンスがありました。この様子はNolanの投稿にまとめられています。最初にクレイジーと書きました
あなたが知らないスゴいフロントエンド開発ツール7選
2016年も進化し続けたフロントエンド開発ツール。Web Tools Weeklyのキュレーター・Louisが1年を振り返り、お気に入りのツールを紹介します。 1年が過ぎ、Webプラットホームでは予想どおり革新、いらだち、疲れとともに、開発者を支援する新しいツールやテクノロジーの大量リリースが爆発的に勢いを増しています。 ReactやAngularといったおなじみのツールがアップデートされた一方、Vue.jsなどの新しいツールも登場し、あっという間に大きな関心を集めました。 私はツールに焦点を当てたウィークリーニュースレターのキュレーションをしているので、調査中に途方もない量のツールに出会います。もちろん人気のツールにはある程度注意を向けますが、あまり注目されていないツールで興味深くかつ実用的なものも評価しています。 そこで昨年と同様、この記事でフロントエンド技術者向けツール分野の2016
JavaScriptの2016年：フロントエンド開発者が押さえるべき重大トピック
相次ぐモダンなフレームワークの登場、脱jQueryの動き、ECMAScriptの進化など、SitePointの常連ライターが2016年のJavaScript事情を振り返ります。 2016年は、見方によっては歴史的であり、奇妙でもあり、楽しくもあり、恐怖でもあった年でした。JavaScriptだけに絞ると、ほかの大きな出来事に比べれば取るに足りない変化に見えますが、開発者にとっては重大な出来事でしょう。 JavaScriptの人気はとどまるところを知りません。すべての人に好かれる言語仕様ではありませんが、10年前のように馬鹿にされることはほとんど無くなりました。個人的にはJavaScriptが大好きです。そう、あのもどかしかった初期の頃からです。C++やJava、あるいはPHPから移ってきた人は最初は戸惑うでしょう。JavaScriptは取っ付きやすく見えますが、実はそうではありません。でも
全部知ってる？ npmを使いこなすために絶対知っておきたい10のこと
知っておくと便利なnpm（Node Packaged Modules）のコマンドとTipsを全部で10本まとめました。 Facebookの新しいYarn projectには興奮を覚える一方で、Node.jsの躍進にはオリジナルパッケージであるnpmの存在が大きく貢献しています。 少ないnpmのコマンドで、初期化したり（npm init）、パッケージをダウンロードしたり（npm install）、テスト（npm test）したり、プロジェクト内でカスタムスクリプト（npm run）を作ったりできます。少し詳しく調べていけば、日々の開発を劇的に変えてくれるさまざまなコマンドがnpmには用意されています。 注意：もしnpmの手引きが必要なら『A Beginner’s Guide to npm — the Node Package Manager』をチェックしてください。npmとYarnの違いにつ
フロントエンドエンジニアなら知っておきたい、JavaScriptのログ収集方法まとめ
サーバーサイドに比べて見落とされがちな、フロントエンドのエラーログ収集。JavaScriptのログ収集、確認に役立つ手法、ツール、ライブラリーを総まとめ。 開発進行中も本番モードでの運用時も、ソフトウェアアプリケーションにおいてロギングは大切です。 サーバーを運用しているなら、サーバーサイドの言語選択にかかわりなく無数のライブラリーを利用でき、広範に及ぶストレージメカニズムやログ出力を扱う際の各種ツールも使えます。 しかし、クライアント側アプリケーションとなるとロギングは見過ごされがちで、利用できる手法もかなり限られています。 この記事ではクライアント側アプリケーション、特にJavaScriptを中心としたシングルページアプリケーション（SPA）におけるロギングの実装方法を紹介します。 コンソール エラーとメッセージのロギング方法でもっとも一般的かつ分かりやすいのは、おそらくコンソールの使
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
