気になったら即調べるが吉、ということで。 数値→文字列 var num = 123; // わかりやすい String(num); // "123" num.toString(10); // "123" // この用途では使ったこと無い num.toFixed() // "123" // なるほど num + ''; // "123" 文字列→数値 var str = '123'; // わかりやすい Number(str); // 123 parseInt(str, 10); // 123 parseFloat(str); // 123 // なるほど str - 0; // 123 str * 1; // 123 str / 1; // 123 // すっきりやけど知らん人は読めない +str; // 123 -(-str); // 123 ~~str; // 123 str&-1;

やわらかVue.jsについて / 迷わないVueの学び方 / イベント情報 / フロントエンドを気楽に歩こう / 猫本以前 / 書籍 / 【漫画で解説】Vue.jsで楽をしよう！ / レイアウトどうすればいい？ / 参考になるページ / webpackの動作を見てみよう / vue-routerとかvuexって使ったほうがいいの？ / Vueのコミュニティに入りたい！ / flaskやrailsと

javascriptの開発では、sassやtypescriptなどのコンパイル、minifyやautoprefixerでの最適化、依存関係を解決しbundleするなど多様な工程があるので、属人化・職人依存を避けるためにタスクランナーでの自動化が昔から当たり前に行われています。 webpackはこの手のツールのデファクトです。webpackはタスクの自動化支援ではなく、なんでもjsにまとめるという仕事をうまくやる事に特化しています。gulpやbrowserifyで行なっていたようなタスクの自動化はnpm scriptで十分やん、という割り切りを感じます。 なんでもjsで扱えるようにするので、cssや画像やhtmlもjs内にロードでき、設定が煩雑になりにくくなります。 webpackのloaderという仕組みがjsへの組み込みや最適化をうまくやってくれるのですが、どういうものか検証していきまし

document.getElementById(id).classList.add(class); document.getElementById(id).classList.add(class1, class2); //複数クラスを追加したい時 $(selector).addClass(class); //jQuery

PySpa統合思念体です。これからJavaScriptを覚えるなら、「この書き方はもう覚えなくていい」（よりよい代替がある）というものを集めてみました。 ES6以降の難しさは、旧来の書き方にプラスが増えただけではなく、大量の「旧来の書き方は間違いを誘発しやすいから非推奨」というものを作り出した点にあります。5年前、10年前の本やウェブがあまり役に立たちません。なお、書き方が複数あるものは、好き嫌いは当然あると思いますが、あえて過激に1つに絞っているところもあります。なお、これはこれから新規に学ぶ人が、過去のドキュメントやコードを見た時に古い情報を選別するためのまとめです。残念ながら、今時の書き方のみで構成された書籍などが存在しないからです。 たぶん明示的に書いていても読み飛ばす人はいると思いますが、すでに書いている人向けではありません。これから書くコードをこのスタイルにしていくのは別にいい

はじめに JavaScript勉強会の資料です。 内容は、簡単なコマンドラインツールを作りながら、JavaScript(ES2015を含む)の書き方を学ぶものとなってます。 内容的には初心者向けなので、JavaScriptを勉強したい、JavaScriptは触ったことあるけどES2015を知らないので勉強したい、といった方が対象です。 JavaScriptとは Webブラウザで実行可能なインタプリタ言語 最近ではサーバサイドのものもある(Node.jsなど) 各ブラウザで独自の実装があるが、標準化されたECMAScriptに準拠している ES5, ES2015(ES6), ES2016, … ES2015からは毎年新しい規格が策定される これによりナンバリングは策定した年に変更 ES2015 ES5(2011年策定)から4年ぶりに策定されたECMAScript 非常に多くの機能が追加された

GitHubで公開されているフロントエンドチェックリストというドキュメントが、網羅されている内容が幅広く便利そうだったので、日本語に翻訳しました。 日本語版は、以下のGitHubリポジトリにあります。GitHub側と自動的に連携するようにしておりますので、誤訳や誤りなどがあれば GitHub のプルリクエストまたは Issue で報告していただけると幸いです。 https://github.com/miya0001/Front-End-Checklist 日本語版への貢献方法 最終更新日時: 2017-11-19 03:50:47+09:00 (未翻訳) Front-End Checklist The Front-End Checklist is an exhaustive list of all elements you need to have / to test before lau

とあるお仕事で、jQueryなどのライブラリー利用不可というものがありました。その際利用した、jQuery的に使える便利なメソッドをメモしておきます。（※ 昔使っていたものを引っ張りだして改善したものなので、どこかで公開されている可能性があります） 更新 addClass,removeClassを修正致しました。 元記事 下記エントリの転載になります。 jQueryがNGな時に備えて、用意しておきたい便利なメソッド イベントリスナ jQueryでいうところの、.on() に該当するものです。 "addEventListener" か "attachEvent" かを判定し、addEventメソッドを定義しています。 var addEvent; if (window.addEventListener) { addEvent = function (target, name, fn) { if

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

レスポンシブサイトではウィンドウの幅（画面解像度）によって、レイアウトの調整や動作処理の制御を行います。 ウィンドウサイズ（画面幅／高さ）の取得方法に関しては、スクリプト制御ではjQueryの「.width()」メソッドのほか、JavaScriptの「.innerWidth」メソッドや「.matchMedia」メソッドを使用する方法などがあり、CSSメディアクエリでは「@media only screen and (max-width:○○px)」などといった手法でウィンドウサイズを取得することが可能になります。 それぞれの取得する方法によってすこし厄介なのは、ページ内にスクロールバーがある時とない時で取得する値が変わってくるというもの。 さまざまな場面でウィンドウサイズを取得する機会が増えてきているので、上記のそれぞれ取得方法について比較してみました。 まずは各スクリプト処理とCSSメデ

javascriptで正規表現を複数回実行する際の注意点 以下のコードは"hoge"という文字列が含まれているか正規表現で検索し、結果を表示するコードです。 var example = "hoge"; var regexp = /hoge/g; regexp.test(example); // true regexp.test(example); // false regexp.test(example); // true regexp.test(example); // false ... 一度目の実行ではtrueが返ってきますが、二度目の実行ではfalseが返ってきます。 以降は交互に結果が変わります。不思議ですね。 私はループ内で正規表現を実行する際に、この挙動につまづきました。 一体何が起きているのでしょうか？ var examples = ["hoge", "hoge", "ho

レスポンシブデザインのために CSS メディアクエリを使うことが多いと思います。 CSS 側だけで完結したらいいのですが、JavaScript 側でも画面サイズの変更を検知したかったり、画面サイズ以外のメディアクエリ相当のことをしたくなったりすることはありますよね。 画面サイズの変更自体は window に発生する resize イベント (window.onresize イベントハンドラ) で検知できますが、CSS メディアクエリとこれを組み合わせてレスポンシブ対応しようとすると以下の問題がでてきます。 ウィンドウサイズ変更時に resize イベントが高頻度で発生するので、resize イベントのリスナでコストのかかる処理を行うのはよくないとされる。 (Throttling することが推奨される。) 参考 : resize | MDN CSS メディアクエリと完全に対応するものではない

2019年2月22日 CSS, JavaScript, jQuery 人間の目は動きを感知すると反射的に目が動き、意識をそちらに向けるそうです。そのため、アニメーションは要素をほんの少し動かすだけで注目を集められるという強い力を持っています。今回はそんなアニメーションを手軽に実装できるCSSやJavaScriptのライブラリーをいくつか紹介します。 ↑私が10年以上利用している会計ソフト！ アニメーションを使う時に気をつけたい事 アニメーションを使えば、前後の画面に繋がりを持たせたり、ユーザーに次の動きを予測させ、安心感を与えることができます。よく使われるものが、ふんわりと画面や要素を移り変えるフェードという効果です。目の前の物が一瞬で消え、パッと新しい物が現れる…なんて、現実世界ではありえませんよね。もちろん、単純に見ていて楽しい、かっこいい、なんていう刺激を与えられます。 しかし、ユー

Anime.js (/ˈæn.ə.meɪ/) is a lightweight JavaScript animation library with a simple, yet powerful API. It works with CSS properties, SVG, DOM attributes and JavaScript Objects. Getting started

と呪文のように書いてきたが、いい加減ちゃんと整理して理解しよう。 いろいろ調査した結果、以下の考え方で理解できると思う。 まず、実際の液晶の解像度は一旦忘れろ。 <meta name="viewport" content="width=480">と指定したとする。 するとそこに幅480pxの仮想的なウインドウが作られる。幅480pxの液晶モニターがあることをイメージして欲しい。これをviewportと呼ぶ。 ブラウザはviewportにレンダリングする。viewportの中では、あたかも本当に480pxのモニターを使っているかのような環境になっている。なので、JSのdocument.documentElement.clientWidthなんかも480を返すし、media queryの条件判定でも480pxの画面幅が使われる。 次にviewportを実際の液晶画面に表示する。この時、view

最近のWebサイトで見かける便利な機能や面白い仕掛けのコンテンツ、気持ちいいアニメーションを伴ったインタラクションやエフェクトを実装できるCSS、スクリプトやjQueryのプラグインを紹介します。

こんにちは！ unitopi新米ライターの、ケインでございます。 前回に引き続き、JavaScriptにおいて基本的だけど忘れがちな、JavaScript（jQuery）における「親要素・子要素の取得」について、今回は「親要素の取得」のお話をさせていただきます！ ※サンプルコードは、「JS」タブや「HTML」タブなどを交互に見ていってくださいね！ ※前回の記事はこちらになります。まだご覧になっていない方で、合わせて勉強したい方はぜひご覧くださいね！ 【JavaScriptの場合】※下記サンプルコードを使用し説明 下記のサンプルを使い、h1（id=”hTitle”）の親要素を取得したい場合を例にしてお話していきます！ See the Pen GgMgvM by Tatsuya Kosuge (@castero) on CodePen. 11535 ①parentNode（※記載方法：elem