tです。 今回は、JavaScriptのユーティリティライブラリである、Lodashについて書きます。 最近では、Lodashの機能も、JavaScriptに標準で用意されるようになりました。 例えば、Lodashの_.keys関数や_.some関数は、JavaScriptに標準で用意されています。 _.some関数Array.prototype.some() Lodash JavaScript標準
![Lodashの_.chunk関数と_.partition関数の紹介 | KEYPOINT – キー・ポイント株式会社 開発日誌](https://cdn-ak-scissors.b.st-hatena.com/image/square/fb818d42a76d518b538acbf40646a549446c5b76/height=288;version=1;width=512/https%3A%2F%2Fwww.key-p.com%2Fblog%2Fstaff%2Fwp-content%2Fuploads%2F2017%2F04%2F20170427blog.png)
tです。 今回は、JavaScriptのユーティリティライブラリである、Lodashについて書きます。 最近では、Lodashの機能も、JavaScriptに標準で用意されるようになりました。 例えば、Lodashの_.keys関数や_.some関数は、JavaScriptに標準で用意されています。 _.some関数Array.prototype.some() Lodash JavaScript標準
公式サイト JavaScript製のゲームエンジン! 2Dゲームの開発に適している! HTML5が動作するブラウザでゲームが動く!軽い! こんなのが作れちゃう!! 筆者の作品 github => mqtsuo02/melonjs-town-sample 公式には色んなサンプルが公開されてるよ => made-with-melonJS いますぐ始めたい!! その情熱、メロンにぶつけろ!! 必要なものは2つだけ! nodeの開発環境 Tiled Map Editor(無料) まずは土台を作るよ〜 だまってコマンドを打て!! # grunt入ってない人はインストール npm install -g grunt-cli # 公式のBoilerplateをclone git clone https://github.com/melonjs/boilerplate.git cd boillerplate
JavaScript チュートリアル 初級編 JavaScript の基礎 JavaScript の第一歩 JavaScript の構成要素 JavaScript オブジェクト入門 JavaScript ガイド 入門編 文法とデータ型 制御フローとエラー処理 ループとイテレーター 関数 式と演算子 数と日付 テキスト処理 正規表現 インデックス付きコレクション キー付きコレクション オブジェクトを利用する Using classes プロミスの使用 JavaScript 型付き配列 イテレーターとジェネレーター メタプログラミング JavaScript モジュール 中級編 クライアントサイド JavaScript フレームワーク クライアントサイド Web API Language overview JavaScript のデータ構造 等値比較と同一性 プロパティの列挙可能性と所有権 クロ
日常的にVueを使用している開発者が、Reactはどうなのだろうと思い、ReactとVueで全く同じアプリを作成した時のそれぞれの工程を比較して分かった相違点を紹介します。 I created the exact same app in React and Vue. Here are the differences. 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 隣の家の芝生は青く見える VueとReactで作成したアプリの見た目を比較 VueとReactはデータをどのように変更させるか アイテムの新規作成 アイテムの削除 イベントリスナーを渡す 子コンポーネントにデータを渡す 親コンポーネントにデータを戻す 終わりに 隣の家の芝生は青く見える 私は現在の職場でVueを使用しており、Vueがどのように機能するかかなり理解してい
この記事は Goodpatch Advent Calendar 2017 — Qiita 22日目の記事です。 Web業界にいる方なら、ここ数年の間で一度は「サーバーサイドレンダリング」という言葉を聞いたことがあるかもしれません。これは一体どのような技術を指しているのでしょうか? この記事ではその簡単な概要と、実際にプロジェクトに導入して実感した利点と注意点を紹介します。 サーバーサイドレンダリングとは?「サーバーサイドレンダリング」とは一体なんでしょうか?混乱を避けるため厳密な説明は避けますが、少なくとも私たちWebデベロッパーのここ数年の文脈においては、 「(元々ブラウザ上でしか動かなかった)JavaScriptをサーバー内部で実行して、HTMLを生成すること」を指します。 これによって初期表示の際にユーザーが待たされることがなくなるなどのメリットがあります。 また、以下は「サーバーサ
福岡でVR・アプリ開発をやっている株式会社OneSmallStepの@_takeshi_24です。 公開から2年が経ち、この記事の内容も少し古くなってきました。 Nuxt.jsやFirebaseを使って、サーバーレスでWebアプリケーションを開発する手順について、アドベントカレンダー「diffeasyCTO西の24(にし)日連続投稿チャレンジ Advent Calendar 2019」の中で、「Nuxt.jsとFirebaseとCloudFunctionsでWebアプリ開発」シリーズとして、連載していきます。 Nuxt.jsとFirebaseなどを使ってWebアプリケーション開発にチャレンジしたい方、是非Qiitaアカウントかtwitterをフォローしていただき、ツッコミやいいね!お願いします! Nuxt.jsとは 公式ドキュメントに詳しく書いていますが、Vue.js アプリケーションを構
概要 JavaScript の配列は動的なもので、他の言語で言えば ArrayList に近いものです。そして、作成(構築)と初期化の方法も様々なので、ここでまとめてみました。 Array コンストラクタを使って長さ 0 の配列を作成する。 [] を使って長さ 0 の配列を作成する。 初期値を持つ配列を Array コンストラクタを使って作成する。 初期値を持つ配列を [] を使って作成する。 初期値を持たない指定した長さの配列を作成する。 from メソッドを使って配列から新しい配列を作成する。 from メソッドを使って文字列から文字の配列を作成する。 of メソッドを使って値の並びから配列を作成する。 サンプル Array コンストラクタを使って長さ 0 の配列を作成する。 昔の JavaScript ではこういう書き方しかできなかった気がします。
久しぶりにnode.jsです。 普通に動くAPIを用意したいので、ストレージを選定する必要があります。 候補としては MySQL Redis MongoDB の3つがあったのですが、MySQLは結構つかったことがあるので あまり使ったことのないRedisにしました。 機会があればMongoDBも扱いたいです。 Redisのインストール 作業中のマシンはMacOSX10.7.5です。 Redisのインストールにはhomebrewを利用します。 ちなみにhomebrewのバージョンは0.9.4でした。 $ brew install redisこれだけでインストールできます。 私はredis-2.6.13がインストールされました。 マシンの起動時にredisを立ちあげたい場合は インストール時のメッセージにしたがって $ ln -sfv /usr/local/Cellar/redis/2.6.1
気になったら即調べるが吉、ということで。 数値→文字列 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;
Javaでの「String.valueOf()」メソッドと「toString()」違いについてまとめておきます。 ある程度Javaで開発経験のある方であれば数字型⇔文字列型のキャスト作業というのは頻繁に発生する作業の一つです。 「String.valueOf()」と「toString()」はどちらも数値型を文字列型へ変換してくれるメソッドですが、両者はどのような違いがあるのでしょうか? 結論から言ってしまうと「toString()」の方は変換する値がnullの場合にNullPointerExceptionで落ちます。 以下のソースを実行して見るとその違いが分かります。 サンプルJavaソース /** * <p>[概 要] サンプル文字列変換</p> * <p>[詳 細] </p> * <p>[備 考] </p> */ public static void sampleStr1(){ Int
この他に macOS の Chrome では、ShiftキーとMetaキーを併用することで、新しいタブで開きつつそのタブをアクティブにすることができました。 CSS によるスムーズスクロール ページ内リンクをクリックしたときのスクロールを、アニメーションによってスムーズにしたいということはよくあります。これは CSS のscroll-behaviorプロパティを使えば非常に簡単に実装できます。 body { scroll-behavior: smooth; } たったこれだけの宣言で、JavaScript を一切用いることなく、ページ内リンクをクリックしたときのスクロールにアニメーションが伴うようになります。また、ページ内リンクのクリックだけでなく、可視領域外にある要素がフォーカスされたときや、ページ内検索に一致したテキストがハイライトされたときなど、スクロールが伴う場面すべてに適用されま
昨今、よく「jQueryはもう必要ない」という声を聞きます。 しかし、一時期JavaScriptのデファクトスタンダードのライブラリといわれたjQueryに対しての扱いの変化を疑問に思う方もいるでしょう。 そこで、この記事ではそもそもjQueryとは何のために作られたどんなライブラリか、そしてそれがなぜレガシーと呼ばれるようになったのかを学んでいきたいと思います。 間違った事を書いているなどのご指摘は大歓迎です。 なぜ jQuery ができたのか 昔のWeb開発 jQuery ができたのは2006年。 そのころはJavaScriptはWebページに文章を読むのを妨げる動きをつける言語で、HTML5やCSS3、ES2015なんてものはもちろんなく、今ではコード数行でできることが時にはトリッキーな方法も混ぜながら何十行も書く必要がありました。その上、ECMAによって標準化されているとはいえ、ブ
マイクロアドでアプリケーションエンジニアをしているNです。 日々、バッチを作ったりWEBアプリケーションを作ったりしています。 今回はライトにJavaScriptフレームワークを導入したお話を書いていきたいと思います。 導入のきっかけ その1~きっかけのきっかけ~ マイクロアドではいろいろな用途でWEBアプリケーションを利用しています。 当然ではありますが一部特殊な用途ではない限りJavaScriptでの実装が含まれています。 これらのいくつかにはjQueryが使われており、現在も運用されています。 そんな中、 あるWEBアプリケーションを刷新する機会があり改めてjQueryを多用したコードを見返すことに、、、 その2 ~jQueryって非常に強力~ jQueryを多用した実装を見返して、改めて思ったのが jQueryって非常に強力。 一方で、この強力なライブラリになんでもお世話になってい
addEventListener() は EventTarget インターフェイスのメソッドで、ターゲットに特定のイベントが配信されるたびに呼び出される関数を設定します。 対象としてよくあるものは Element、Document、Window ですが、イベントに対応したあらゆるオブジェクトが対象になることができます (XMLHttpRequest など)。 メモ: addEventListener() メソッドは、イベントリスナーを登録するための推奨される方法です。以下のような長所があります。 1 つのイベントに対して複数のハンドラーを追加することができます。これは、ライブラリーや JavaScript モジュール、あるいは他のライブラリーや拡張機能とうまく動作させる必要があるその他の種類のコードで特に有効です。 onXYZ プロパティを使用するのとは対照的に、リスナーが起動されるときの
セレクトボックスを選択したらサブミットしてほしい時がありませんか? (例えば、名古屋事業所と福岡事業所とで表示させる内容を変えたい時とか) 忘れるといけないので、書き留めておこうと思います。 ①submit()関数をonchangeイベントで呼び、this.formのアクションを実行させる方法 <form method="post" action="#"> <select name="office" onchange="submit(this.form)"> <option value="名古屋">名古屋</option> <option value="福岡">福岡</option> </select> </form>
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く