Webデザイナーにとってもっとも身近なプログラミング言語といえばJavaScriptですよね。ところがいざ勉強を始めたものの挫折してしまった…という人のために、典型的な失敗例と学習のコツを教えます。 JavaScriptの学習をしても挫折する人の多くは、「JavaScriptは分かりにくい」「自分はWeb開発に向いていない」と言います。悲観的になってあきらないでください。アプローチの仕方を変えることが大切です。 この記事では、多くの人が学習中に経験する失敗の対処法を取り上げます。JavaScriptだけではなく、Web開発全体に当てはまる内容なのでぜひ活用してください。 失敗その1：始める前にあれこれ調べすぎる JavaScriptの学習を始める前に、たくさんのことを調べたくなるかもしれません。ちょっと調べるだけでJavaScriptがどれだけすばらしいものか、逆にいかに悪いものかといった

フルスタック開発者に求めるスキルは時代とともに変わっています。2017年のフルスタック開発者を名乗るなら最低限知っておくべき技術と知識をまとめました。 プロトタイプから完全なMVP（Minimum Viable Product：実用最小限のプロダクト）までカバーするフルスタック開発者のことを「多芸は無芸」と評価する人もいます。そんな一面もあるでしょう。まずは、フルスタック開発者を知るために、歴史を振り返ります。 以前のフルスタック開発者 2000年ごろ（インターネットでの17年前は大昔です）のフルスタック開発者の定義はこんな感じでした。 Photoshop、FireworksなどAdobe系ツールでWebページを手早く作る デザインをHTMLやCSSに変換し、画像にホットスポットを追加する（もはや忘却のかなたですか？） 簡単なPHP4.0スクリプト（当時のPHPはオブジェクト指向とは無縁）

DOM操作が必要なとき、真っ先にjQueryを使うことを考えます。しかし、素のJavaScriptのDOM APIだけでも、実はかなりのことができるのです。また、IE10以下のサポートが終了したため、今後は素のJavaScriptによるDOM操作を心配なく使えます。 記事では、素のJavaScriptで一般的なDOM操作をする方法について説明します。具体的には以下のとおりです。 DOMの取得と変更 クラスと属性の変更 イベントのリッスン アニメーション 記事の最後に、どのようなプロジェクトにも使える独自の超軽量DOMライブラリーの作り方を説明します。記事の最後までに、素のJavaScriptによるDOM操作は決して高度な技術ではないこと、多くのjQueryメソッドとまったく同じ機能が実はネイティブAPIにもあることが理解できるはずです。 それでは始めます。 DOM操作：DOMの取得 この記

次々とリリースされるJavaScriptライブラリーにフレームワーク、進化を続けるCSSモジュール……と、変化の激しいフロントエンド開発界隈。いま開発者たちに実際に使われているのはどんなツール？ 開発経験は2年以上ありますか？ 高度なCSSスキルとしてSassやAutoprefixerの使用も含まれていますか？ JavaScriptの知識は十分にあり、Gulp、nmp、jQueryを使いこなせていますか？ そうであれば一般的な開発者だそうです。Ashley Nolan氏によるフロントエンド開発ツールのアンケート調査によれば。 気になる結果を見る前に…… この種のアンケート調査は新たなツールを見つけたり、知識不足の分野の把握に役立ちます。執筆時点で5254件の回答が寄せられていて、アンケート調査としてはかなりのサンプル数です。ただ、結果を疑いようのない真実だと受け取るには慎重になるべきです。

Googleが運営するFirebaseを使えば、面倒なサーバーの処理は任せて、クライアント側の開発に集中できます。サンプルアプリを例に、基本的な使い方を体験してみましょう。 Firebaseは、アプリを素早く開発しデプロイできるようにするための「Backend as a Service（BaaS）」プラットホームです。Firebaseは多くの機能を提供しています。リアルタイムデータベース、ユーザー認証（Eメールとパスワード、Facebook、Twitter、GitHub、Googleアカウントを使用できる）、クラウドメッセージング、ストレージ、ホスティング、リモートコンフィギュレーション、Test Lab、クラッシュレポート、通知、アプリのインデックス付け、ダイナミックリンク、招待、AdWordsとAdMobなどが含まれています。 この記事ではシンプルなToDoアプリを作成しながら、Fir

Angular、Reactと並んで海外で人気が高まっている「Vue.js」。ReactとAngularの開発経験がある著者がVue.jsをチュートリアルを通じて特徴をまとめました。2017年、新しく学び始めるきっかけにどうぞ。 2016年9月、人気のJavaScriptフレームワークVue.jsがv2をリリースしました。それ以来ぜひ使ってみたい、どのようなものか知りたいと思っていました。AngularとReactを使い慣れた者の1人としては、Vueが似ているところや違うところも知りたかったのです。 Vue.js 2.0はすばらしいパフォーマンスを誇ります。データサイズが比較的小さく（バンドルされるVueのランタイム版は一度最小化してgzip圧縮したら16KBしかありません）、Vueのvuexや、vue-routerのような付属の状態管理ライブラリーもアップデートされました。1つの記事ではと

サーバーサイドに比べて見落とされがちな、フロントエンドのエラーログ収集。JavaScriptのログ収集、確認に役立つ手法、ツール、ライブラリーを総まとめ。 開発進行中も本番モードでの運用時も、ソフトウェアアプリケーションにおいてロギングは大切です。 サーバーを運用しているなら、サーバーサイドの言語選択にかかわりなく無数のライブラリーを利用でき、広範に及ぶストレージメカニズムやログ出力を扱う際の各種ツールも使えます。 しかし、クライアント側アプリケーションとなるとロギングは見過ごされがちで、利用できる手法もかなり限られています。 この記事ではクライアント側アプリケーション、特にJavaScriptを中心としたシングルページアプリケーション（SPA）におけるロギングの実装方法を紹介します。 コンソール エラーとメッセージのロギング方法でもっとも一般的かつ分かりやすいのは、おそらくコンソールの使

こんにちは。 この連載では、ちょっと変わったRuby入門を書いていきます。 想定読者は、Rubyを学びたいプログラミング初心者です。 Ruby以外の言語でプログラミングしたことがあると理解がはかどると思いますが、 Rubyを知らなくてもわかるように、なるべく丁寧に説明していくつもりです。 Rubyをある程度知っている読者には、最初の数回は退屈かもしれませんが、 回を重ねていくにつれ、より深くRubyを知ることができるはずです。 Rubyとは？ Rubyは「プログラミング言語」です。 プログラミング言語とは、コンピュータにやらせたい仕事を書くための言語です。 つまり、Rubyを覚えて、Rubyでコンピュータへの指示を書けば、 コンピュータはその指示を実行してくれます。 この指示書のことを「プログラム」と言い、特にRubyで書かれたプログラムを「Rubyプログラム」と言います。 ところで、Ru

先週開催されたマイクロソフトの「de:code 2016」の2日目。朝イチでスタートしたのが、日本マイクロソフト新米エバンジェリストの「ちょまど」こと千代田まどかさんと愉快な仲間たちによる「これから始めるXamarin」のセッションだ。超満員となったセッションの模様をお伝えする。 「モバイル開発の困った」にXamarinが効く！ マイクロソフトのモバイルデバイス向けのクロスプラットフォーム開発ツールである「Xamarin（ザマリン）」に初めて触れる人向けに行なわれた今回のセッション。Xamarinの概要を紹介しつつ、環境構築での“はまりポイント”を解説するのがセッションの趣旨だ。9時半開始にも関わらず、会場は両端に立ち見が並ぶ超満員の状態だ。 セッションはエバンジェリストの砂金信一郎さんが、会場にガチ勢がいないか確認することところからスタート。写真もSNSもOKという最近のマイクロソフトの

東京大学では、学生や教職員が利用するPCや各種サービス一式を教育用計算機システム（ECCS）と呼んでおり、これを4年一度リプレースしています。2016年度はその更新時期にあたり、今回も入札の結果、クライアントマシンにはMacが選ばれました。東大では、2004年以来3期12年に渡ってMacが導入されてきましたが、、今回（ECCS2016）もこれが継承されたことで4年後の2020年3月（2019年度）までは引き続きMacが使われることになります。このあたりは、前回の取材記事で詳しく紹介しているので、文末に張ったリンクから関連記事をチェックしてください。 東大での取材で個人的にかなり気になったのが、もう変態といっていいほど特殊なMac。電源ボタンを押してもすんなりとOS Xが起動するわけではありません。Macハードウェア上で、UEFI（Unified Extensible Firmware In

キュレーションアプリ「MERY」を運営するペロリが、新たにファッション誌「MERY」を立ち上げた。初刊テーマは「毎日かわいいを育てる22のこと」、初刊カバーガールには女優として活躍中の有村架純さんを起用。3月25日から全国の書店・コンビニエンスストアなどで発売する。 本誌は月間2000万ユニークユーザーを誇る、おしゃれ好きガール向けキュレーションアプリ「MERY」による初の女性ファッション誌。初刊は「毎日かわいいを育てる22のこと」を全体テーマに、20代の女の子が毎日可愛くなるための22個のガールズトレンド（ファッション・ビューティ・カルチャー）を、ガーリーなビジュアルで届けるという。 22個のテーマは、これまで蓄積された人気記事データとMERY編集チームの知見を元に厳選。それらのテーマに基づいたコンテンツを、雑誌にならではの大きなビジュアルを通じて提供する。 初代カバーガールの有村架純さ

オプトインキュベートとイロドリは2月5日、無料で使えるKPI自動レコメンド型サイト分析ツール「Dot metrix」にて、Googleアナリティクスと連携したアクセス解析サービスを提供開始した。併せて、日々の分析指標のサマリーをメールにて通知する「デイリーレポートメールサービス」も無償提供する。 Googleアナリティクスを分析に利用する企業は多いが、分析可能な指標が豊富な一方、見たい指標を確認するために複数の操作やツール利用の知識が必要となり、分析に時間がかかる。そこでDot metrixとGoogleアナリティクスを連携させ、必要な分析指標だけを面倒な操作なく一画面で見られるようにする。 Dot metrixは、サイト分析が実施できていないスタートアップ・ベンチャー、中小企業向けに開発されたサービス。「無料で利用可能」「簡単に導入可能」「シンプルで使いやすい」「サービスに合ったKPIを

小林幸子さんが、インターネットとともに紅白に戻ってきた。 昨年の第66回NHK紅白歌合戦、ニコニコで“ラスボス”と慕われる小林幸子さんの紅白特別企画出演。黒うさPのボカロ曲「千本桜」を歌いはじめてしばらくすると、巨大なステージ衣装にニコニコのコメントが流れはじめた。 ツイッターのタイムラインにも、「弾幕」「コメント」といった字面が躍った。歌が終わりに近づいたとき、テレビ画面全体がコメントで覆われると「おおおおおおおお」「すげえ」「まじかよ」とツイッターは一層の盛りあがりを見せた。 じつに4年ぶりの紅白出場だ。ネットにも活躍の場を広げ、若者たちとともに歩んできた小林幸子さんにとって、その結実ともいえる舞台となった。 失敗の許されない生放送、ラスボスを支えたのはドワンゴの技術部隊だ。 ニコニコ生放送のコメントをリアルタイムで紅白歌合戦に流す。一世一代のプロジェクトに挑んだマルチデバイス開発部