JavaScriptのデバッグは、ウェブ開発の必須スキルのひとつです。プログラムの実行をデバッグすることで、現在の変数の値や、処理がどのように進んでいるのかを確認できます。デバッグによってプログラムが意図した動作になっているかの分析に役立てられます。 本記事ではGoogle Chromeブラウザーの「Chrome Developer Tools」（以下「デベロッパーツール」、「DevToolsデブ・ツールズ」という略称もあります）を使用してJavaScriptをデバッグする際の基本的な使い方を解説します。「今までデベロッパーツールを使ったことのない」という方でもこの記事を読めば理解できるよう、チュートリアル形式になっています。20分ほどで理解できるようまとめているので、順番に試しながら読み進めてください。 この記事で学べること デベロッパーツールの使い方 JavaScriptのブレークポイ

「かっこいいウェブサイト」とはどのようなものでしょう？　ICS MEDIAを見てくださるみなさんであれば、ダイナミックなアニメーションや3次元的な動きがあるウェブサイトに「おっ」と惹きつけられた経験は一度や二度ではないかと思います。たとえば、スクロールに連動したインタラクティブな動きは冒険するようなワクワクした気持ち、没入感を与えてくれます。 『ポーラ2029年ビジョン』 本記事の前半では、話題になったウェブサイトからかっこいいスクロール演出の事例を取り上げ、それらを分析します。 さらに記事の後半では、「自分でも作ってみたいなぁ、でもどうやって実装しているんだろう？」と悩むみなさんに向け、オリジナルのデモを用いて実装を紹介します。 本記事を読んだ後には、「どうやって実装しているんだろう？」と未知の技術に感じていたスクロールアニメーションも、「こうやっていたのか！」と身近に感じられるようにな

近いうちに大型の台風が来ると聞いてソワソワしている kimoto です。ここ数年で最強とか言われると身構えちゃいますよね…。 さて、今回は tips です。 別ドメインのページを iFrame 内に表示した際に、想定よりページの縦幅が大きくて、iFrame にスクロールバーが出てしまう…。 最初の表示時に大きさ合わせたけど、iFrame 内でページ遷移すると中のページの大きさが変わっちゃうので下に空間ができたり逆にスクロールバーが出たり… みたいな事を回避するための tips をご紹介します。 postMessage を利用するので、古めのブラウザでは動かない可能性があるのでご注意をば。 postMessage による値の受け渡し 他のページへのメッセージの受け渡しは window.postMessage() を使います。書き方は以下。 window.postMessage("value"

単体のアニメーションだとそれほど気にならない場合でも、表示範囲の中で複数のアニメーションが同時に走ったりする場合、負荷が増大して処理落ちなどを起こすことがあります。 最近レンダリング負荷を軽減するため試行錯誤をしたので、備忘録もかねて実施した内容をまとめました。

JavaScriptをやっているとnpm/yarn/gulp/grunt/webpackなど、たくさんのツールがあって混乱したので、それぞれの役割と違いをざっくりとまとめたJavaScriptnpmgulpwebpackYARN はじめに JavaScriptをやっているとたくさんのツールに出くわしますね。各ツールをググると詳細な使い方などが出てくるのですが、それぞれのツールのざっくりとした役割と違いが分からないので、どのツールとどのツールを組み合わせて使うことが正しいのか がいまいち分かりませんでした。 本記事では、各ツールのざっくりとした役割と違いについてまとめてみました。 3つの役割で分類 各ツールについて調べてみると、以下のような役割を1つ以上持っているのではないかと考えました。 パッケージ管理 タスクランナー ビルドヘルパー 実際に分類してみると以下のようになるでしょうか。 パッ

佐藤あゆみ（旧姓:古庄）屋号Pentaprogram／Web制作者／著書「Webページ高速化超入門」／計算メモ帳アプリ「Kanau」制作／Mastodon:@ayumisato@hachyderm.io

新感覚！メソッドチェーンでアニメーションがスラスラ書ける「Tween24.js」を作りました アニメーションを作る時に、「思いついた演出をすぐに実装したい」「頭の中ではできているのに、コーディングするのが面倒」と思ったことはありませんか？アニメーション作成にはライブラリを使用することが多いと思いますが、使い方を調べて覚えて、ドキュメントからコピペしたり、ひたすらタイピングをして… 私はこれらの問題を解決するために、「Tween24」というライブラリを作りました。Tween24はメソッドチェーンで記述するのが特徴で、たった1行でアニメーションが実装できます。依存ライブラリもなく、単体で動作します。アニメーションライブラリの多くはオブジェクト型でプロパティを指定するためタイピングが多くなりがちですが、メソッドチェーンであればエディターのコード補完機能でスラスラと記述できます。 その他にも、メソ

リアルタイムで共同編集ができる新しいデザインツールとして注目を浴びる「Figma」について学べるカリキュラムです。チームでアプリやWebサービスを作っている現場におすすめ。

こんにちは、フロントエンドエンジニアのライダーです。 2018年 秋に Nuxt v2 がリリースされたこともあり Nuxt.js（以降、Nuxt） が人気を博しています。これまで興味がなかったあなたも、その人気ぶりから少し Nuxt への興味が湧いてきたころではないでしょうか？ LIGにも着実にその流れはきており、シングルページアプリケーション（以降、SPA）やそのサーバサイドレンダリング（以降、SSR）以外のWebサイトでも、Nuxt を導入して快適コーディングする事例が増えてまいりました。 そこで今回から「ポートフォリオサイトの作成」を題材に、Nuxt を使ったWebサイト制作をチュートリアル式に進めていきたいと思います。 本連載「Nuxt de Portfolio」の目的 冒頭でも話しましたが、いま日本で、Nuxt はどんどん広まってきており、ドキュメントも充実し、Tips系の記事

※こちらの記事が400はてブ以上ついて、総合とテクノロジーの人気エントリーに入りました！ こんにちは。Kazutaka Shimizuです。 フリーランスとしてPM、エンジニアをやっています。 元々はWebマーケティングのコンサルタントをやっていましたが、独学でWeb開発を勉強してプロダクトを作って起業しました。 最近は創業した会社を離れ、フリーランスとして活動したり、プログラミングを独学した経験をこちらのツイッターで発信しています。 みなさんはGoogle Chromeのデベロッパーツールをご存知ですか？ ドットインストールなど一部のプログラミング学習サービスでは、デベロッパーツールのレッスンがあるなど、おそらく全く知らない人はかなり少ないと思います。 しかし、とにかく多機能なため、意外と便利な機能を使ったことがないというプログラミング初心者の方も多いようです。 僕自身、何度か自分のTw

コンテンツが横からスライドしたり、カードが追従するように表示されたり、スクロールに連動するCSSアニメーションを簡単に実装できるスクリプトを紹介します。 汎用性に非常に優れており、デスクトップ・タブレット・スマホを完全にサポートしています。また、他のスクリプトやスタイルシートに依存はなく、React、VueJS、Angular、jQueryなどと一緒に利用することもできます。 Delighters Delighters -GitHub Delightersの特徴 Delightersのデモ Delightersの使い方 Delightersの特徴 DelightersはCSSアニメーションを加えて、ユーザーがスクロールするのを楽しませるスクリプトです。 超軽量 1.43kBの超軽量スクリプトで、他のスクリプトやスタイルシートに依存はありません。 フレームワークにとらわれない React、V

はじめに 最近耳にする Vue.js（ビュージェイエス） ってどんなもの？ jQuery とどう書き方違うの？とか、jQuery でやってたこういう事って Vue.js だとどうやるの？jQuery しか使ってないけど Vue.js も使ってみたいなぁ～と思っている人向けの小難しいことは省いた記事です。私もそちら側から来たものです。 Vue.js 日本公式ページ（日本語翻訳率が半端ないと評判） もともと「jQuery から Vue.js への移行」というタイトルでしたが、それだと jQuery を完全にやめる、的なニュアンスになってしまうので、少し変更しました🐹 jQuery と Vue.js の違い jQuery は、セレクタ操作に特化したライブラリで HTML の一部をちょっとだけ弄るには手軽に扱えます。更新のたびにセレクタから要素を探して操作をするため、複数の UI を連携させるよ

Frontend Conference Fukuoka 2018で発表した資料です。 https://frontend-conf.fukuoka.jp/ 各リンク先を確認する場合は、以下のpdfを参照ください http://tonkotsuboy.github.io/slides/181204_frontend_fukuoka/181208_frontendconffukuoka.pdf はてなブックマーク http://b.hatena.ne.jp/entry/s/speakerdeck.com/tonkotsuboy_com/2019nian-madenijian-zhi-siteokitai-cssjavascriptfalseshou-fa ご意見やご感想はTwitter ( https://twitter.com/tonkotsuboy_com ) までお寄せください。 #fec

りみたる @coo_kun @erukiti いいですね！わかりやすそう、早速注文しました。 これですよね！ スラスラ読める Pythonふりがなプログラミング amzn.to/2t5FC4Y スラスラ読める JavaScript ふりがなプログラミング amzn.to/2LRJFKc pic.twitter.com/X4MDF9AXGZ 2018-06-15 10:51:59

入社して僕が最初にアサインされたのがこのプロジェクト。 サービスをスタートさせたのは今年の２月。最初は外注でとりあえずサービスを作ることに集中していたらしい... その結果、どのスタイルがどこに作用するか全く分からないCSSの魔境でした。 これでは簡単なページを追加するにも一苦労。 そこで、20,000行あるCSSファイルのリファクタリングに踏み切りました。 当時の問題 スタートアップのサービスなのでもっと機能を追加したり、変更したりしたいと言う要望は日に日に大きくなっていました。 一方で、実際に機能を作ったとしてもそれを view に反映させるのも日に日に苦しくなっていました。 僕たちを苦しめていた理由は以下の通りです。 どこにスタイルが作用しているか分からないので、CSSを安易に変更ができない。 新しい部品を付け足す時にCSSの影響範囲を考慮しなくてはならず、プロダクトのUI変更が困難

In the JavaScript community, engineers share hundreds of thousands of pieces of code so we can avoid rewriting basic components, libraries, or frameworks of our own. Each piece of code may in turn depend on other pieces of code, and these dependencies are managed by package managers. The most popular JavaScript package manager is the npm client, which provides access to more than 300,000 packages

The best IDE for building React Native apps is now free and open source.

JavaScriptで必要なデータ構造の覚書です。 目次 配列 配列を生成する。 配列にデータを追加する。 配列にデータを格納する。 配列からデータを取得する。 配列中のすべてのデータに同じ処理をする。 オブジェクト オブジェクトを生成する。 オブジェクトにデータを格納する。 オブジェクトからデータを取得する。 オブジェクト中のすべてのデータに同じ処理をする。 関連記事 配列 配列は複数件のデータを扱うためのデータ構造です。 ■配列を生成する。 配列の生成は以下のように行います。 var 配列の名前 = []; var 配列の名前 = [ データ, データ, … ]; 配列の生成では、配列の名前を指定します。 もし、生成時にデータを格納する場合に、[]内にデータを指定します。 なお、JavaScriptでは配列の生成時にサイズを指定しません。 例えば、空の配列array1を生成するには、以