プログラムの中身を直感的なGUIで操作できるJavaScriptライブラリ「dat.gui」を使ってみた！ : うえぶはっく
みなさんは、上の画像みたいにパラメータをいじれるGUIを見たことがあるでしょうか？ いろいろネットを検索していると、たまに見かけたりするのですが、だいたい3D系のサンプルデモや物理演算のシミュレーションなどによく使われているようです。 実際に触ってみると意外に便利なライブラリで、プログラムの好きな箇所をGUIで表示させて、誰でも気軽にいじれるようにできるのは面白いと思います。 そこで今回は、この「dat.gui」の簡単な使い方などをまとめておきたいと思います。 使い方！ まず、簡単なサンプルデモを作りながら、基本的な使い方を見ていくことにします。 今回は、「div要素」で四角のボックスを作り、これにCSSをGUIからコントロールしてみようと思います。 サンプルデモはこんな感じ！(スマホ対応してないので、できればPCブラウザ推奨です…) See the Pen http://codepen.
こないだ社内の勉強会でwebpackのこととか話したのでまとめた - getalog
webpackとは いろんなファイルをtranspileしてES5のJavaScriptに変換してくれるやつ AMDかCommonJSの形式でファイルをロード(CommonJSならrequire)すると、transpileしたファイルをロードしてくれる クライアント側のjsコードでもrequireを使用することができる assetとしてビルドして配布するイメージ コードが共用の場合、設定を変えることで素のrequireを利用するサーバー用コードと、webpackがpolyfillしたrequireを利用するクライアントコードとを別々に生成できる 全てがJavaScriptになる、画像やCSSも 画像は「Base64かFilePath」に CSSは「headにstyleを挿入するjsコード」に 特定のファイルをどのようにtranspileするかはpathマッチングでプラグイン形式で設定する
旧石器時代のJavaScriptを書いてる各位に告ぐ、現代的なJavaScript超入門 Section1 ～すぐにでも現代っぽく出来るワンポイントまとめ～ - Qiita
はじめに ネットには様々な情報が溢れており、JavaScriptに関する情報も多数存在しております。 その中には、「今時こんな書き方しねえよ…」と思わずツッコミを入れたくなるような、本当に、本当に古い内容について書かれている古文書も存在します。 そんな罠記事の情報に囚われてしまって、いつまで経っても現代的なJavaScriptが書けない皆さんのために、このシリーズの記事では、各セクション毎に分けて、旧石器時代の記述と、現代の記述を紹介する形で、文明開化をしていきたいという思いで記述する。 最初は、現在比較的メジャーなブラウザで一通り動作する「ECMAScript 5」までの内容に関してポエムを書き連ねていき、最終的には一連の内容を読むだけで「ES6(ES2015)」による新機能や、絶賛提案中の「ES7」の一部提案内容についても把握し、おおよそ現代人を育成することを目標とする。 …なんてめっ
JavaScriptフレームワークのコストを考える | POSTD
先日、私はBrightonで開かれたJavaScriptのカンファレンスFFConfで「(ここにライブラリやフレームワークの名前を入れる)を使おう。これこそ最強中の最強中の最強だ！」と題して話をしました。 ここに、そのプレゼンテーションの内容を書き起こします。もっと注目されるべき、最近のモバイルデバイスのフレームワークにかかるコストに関して、議論を広げる一助となればと思います。 2015年11月16日更新 – テーブルに1行、プロダクション環境下のReactについての行を追加しました。良いニュースをお伝えしますと、これはvanillaよりも3倍遅いですが、TodoMVCに関して言えば速いと言えます！PolymerのTodoMVCサンプルも最新バージョン1.2.2にアップデートされ、同様により速くなりました。 読むよりも見たい方へ、講演のビデオはこちらです。（必要なら、 スライドも入手できま
2015年総まとめ、jQueryのプラグインとスクリプト100選
毎年恒例のjQueryのプラグインとスクリプトの総まとめを紹介します。「100選」の名称は恒例なので、実際は100以上あります。 今年目立ったのは、ランディングページなどの縦長ページ系、スクロールエフェクト系・CSSやSVGのアニメーションでしょうか。あとレスポンシブ周りも単にサイズ変化に対応させるだけでなく、ユーザビリティを向上させるものが充実していました。 背景関連 SVG関連 縦長ページ関連 スクロール連動・パララックス関連 その他スクロール操作・補助関連 レスポンシブ関連 ナビゲーション関連 レイアウト関連 コンテンツ生成関連 コンテンツ紹介・ツアー関連 ソーシャル関連 スライダー・カルーセル関連 画像拡大・配置・キャプション関連 アニメーション関連 エフェクト関連 テキスト関連 タブ・アコーディオン関連 テーブル・リスト・チャート関連 フォーム関連 パネル・ボックス関連 モーダル
フロントエンドがサーバー負荷を抑えるためにできること - アニメイトラボ開発者ブログ
はじめまして、アニメイトラボのフロントエンドエンジニア id:koharusugiura です。 フロントエンドエンジニアとして働いていると、いかにサーバーサイドに負担を掛けずに処理を行うかについて考えることも多いと思います。 そこで今回は、サーバーに画像の転送を行う前にクライアント側で画像加工をする話について書きます。 この記事は animateLAB Advent Calendar 2015 15 日目の記事です。 qiita.com JavaScript で画像処理を行う ウェブアプリケーションで画像ファイルの加工が要件にある場合、サーバー側で画像加工を処理するケースが大半だと思います。 しかし、データ通信のことを考えると、最適な考え方とは言えない気がしています。 近年、日本のインターネット回線の速度は大きく向上しているとはいえ、モバイルデータ回線はまだまだ速度的に完璧とは言えません
JavaScriptフレームワークに対する、あるGoogle社員の争い | ReadWrite Japan
JavaScriptフレームワークに対する、あるGoogle社員の争い 開発者は楽になる、しかしそれはユーザーの負担と引き換えだ ソフトウェアの専門家マット・アサイは、JavaScriptフレームワークに対し次のように語った。 GoogleはモバイルWebを重視している。 だが、彼らはこれまでHTML5にあまりにも資金を投じてきておらず、今になってこれをカバーしようとしているところだ。 また、GoogleはインドのFlipkartの様な立ち位置が微妙なアプリをWebに引っ張り戻そうと、宗教的とも言える熱意を上げている。このことから、モバイルWebのパフォーマンス向上を劇的に向上しようとする意識についてはいうまでもない。 GoogleのモバイルWebへの関心は隠しようも無い中、これまでのモバイルWebアプリを形作ってきたJavaScriptフレームワークに対する彼らの姿勢を、我々は信じて
今どきのJavaScriptで使われているインデント規約まとめ - ICS MEDIA
みなさんは普段JavaScriptを使って開発する場合、インデントはどのようにしていますか？ タブ、スペース2個、スペース4個・・・などいくつかの選択肢があります。 個人で開発している方は問題ありませんが、チームで開発している場合は意見が分かれ議論になることもあるでしょう。プロジェクト開始早々インデント論争でチーム内の雰囲気を悪くしたくはありません。 本記事はそんなインデント論争の1つの解決策となるべく、ブラウザベンダーやプロダクトで定めているJavaScriptコーディングのインデントルールを調べてみました。 この記事のポイント* 海外のJS界隈ではスペース2個のインデントが多数派 ESLINTなどの設定ファイルからコーディングルールを調べられる なぜインデント論争が起こるのか？ そもそもなぜインデント論争が起こってしまうのでしょうか？ それはそれぞれ一長一短のため好みが分かれてしまうか
Googleも推奨！アニメーションライブラリTweenMaxの使い方 入門編 — un-Tech
ごきげんよう。フーミンです。 「JavaScriptでアニメーション作るならTweenMaxが最強だよ」と先輩から教わり早2年。いまだ現役最強（僕の中で）JavaScriptアニメーションライブラリTweenMaxの良さを広めるために、入門編・応用編の全2回に分けてご紹介しようと思います。 TweenMaxとは TweenMaxとは、GreenSock社が開発した超高性能アニメーションプラットフォーム「GSAP」のひとつで、DOMアニメーションに特化したJavaScriptライブラリです。 requestAnimationFrameを使用しているため、jQueryのanimateメソッドを使うより、動作が高速かつ安定しています。 同じようなライブラリにmokichiくんが紹介してくれたVelocity.jsというのもあります。 TweenMaxと同様に動作が高速かつ安定しており、jQuer
Visual Studio Code は JavaScript 開発が超絶便利になる可能性を秘めている！
Visual Studio Code は JavaScript 開発が超絶便利になる可能性を秘めている！ クロスプラットフォームでオープンソースな IDE 環境、Visual Studio Code が公開されたので試してみた。 拡張を入れなくても、デフォルトで JavaScript の「自動 Lint」「Grunt、Gulp 連携」「デバッグ」が動いた。なんだかすごく便利そうな予感。 Windows 環境で起動してみたらこんな画面だった。 なんか黒いが、色は好みにカスタマイズできるし、プリセットからも選べる。 フォルダーを開くことから始まる Visual Studio Code にはプロジェクトの概念はない。 [File] > [Open Folder] からフォルダーを開けばよい。 ためしに、過去に作った Node.js 製の livereloadx のフォルダーを開いてみた。 左側に
初心者におすすめのプログラミング言語ランキングTOP5【2024年最新】 | 侍エンジニアブログ
国内におけるIT人材の不足が深刻化していることもあり、プログラマーといったプログラミングスキルがある人材の需要は増し、他の職種に比べ高い報酬を設けるケースが増えてきました。 そんななか、転職や副業での収入獲得に向けたリスキリングを目的に、プログラミングを学び始めようと考えている人も多いのではないでしょうか。 目的を見据えたスキル習得はもちろん、学習途中での挫折を防ぐ意味でも、自身にあう言語選びは不可欠です。ただ、どれを選べばいいのかわからない人は多いですよね。 おすすめの言語を知るなら、プログラミングの経験者に聞くのが一番です。 そこで、今回は2021年・2023年に100名の現役エンジニアへ実施したアンケート調査をもとに、次のトピック別で初心者におすすめのプログラミング言語を紹介します。
Electronを使ってJavaScriptでデスクトップアプリを作る
はじめに こんにちは。デスクトップアプリケーションを手軽に作りたいと思ったことはないでしょうか？ 普段Webアプリケーションを開発している場合、 デスクトップアプリケーションを作ろうとすると、開発言語やライブラリがWebアプリケーションとは違うので、別な知識が必要になるのと複数のプラットフォームで動くものを作ろうとすると大変ですね。 そこで、今回はWebアプリケーションのKPTBoardのJavaScriptとCSSのコードを一部流用と修正して、Electronで動かしてみました。 Webアプリケーション版のKPTBoardと違う点 今回はWebアプリのデスクトップクライアントアプリではなくて、単体で動くデスクトップアプリとして作ってます。 複数人には対応してないです。 投稿した内容は、データーベースではなくてアプリのlocalStorageに保存されます。 Electronとは http
この1年で反響が大きかったフロントエンド技術記事まとめ 2015年版 - Qiita
2016年版はこちら 2016年反響が大きかったフロントエンド技術記事まとめ こんにちは、ICSの鹿野です。 普段、モバイルアプリ・Webサイト制作、勉強会登壇等をやっているのですが、2014年からICS MEDIAやQiita等でのフロントエンド技術の記事執筆を始めました。内容はHTML、JavaScript、Swift、タスクランナー、Photoshop等で、初学者にもわかりやすいようにできるだけ丁寧な記事を心がけています。 今回はこの1年で執筆した記事の中で、PV数、SNSのシェア数の点で反響が大きかったものをご紹介します。 Photoshopについて Web用保存は古い!? JPEG画質が改善したPhotoshop CC 2015の新方式の画像保存機能まとめ – ICS MEDIA Photoshop CC 2015から新しく実装された新しい画像書き出し形式の比較記事です。GIGA
NodeSchoolでJS力をアップしよう！ - Qiita
記事内容に間違いや改善等ありましたらコメント欄にてご指摘をお願いしますm(__)m NodeSchoolとは 詳細は公式サイトに書かれていますが要は無料でNodeやそれに関連する技術を学べるオープンソースのツールです。 NodeSchoolという名前なので、なにかしら Node関連のものしかない ように思われがちですが、JavaScriptのみに着目した科目（他にもNoSQL関係だったり、etc）などもあるので、「JavaScriptの勉強をしたい！」という人にもおすすめです！ 必要なもの 項目 説明 Node.jsインストールの推奨方法 Node.jsは活発に開発が進んでいるのでバージョンが結構頻繁に変わります。なのでNode.jsのバージョン管理をしてくれるツールのインストールを推奨します。（Rubyで言うrvmのような存在） 現時点（2015/10/27時点）で推奨するNode.js
やはり、お前らのJavaScriptでのリダイレクト実装は間違っている
一見簡単に見えるJavaScriptでのリダイレクト(URL転送)ですが、よく知られた方法にはある落とし穴があり、Googleアナリティクスで正常な解析が行えなくなります。どんな落とし穴があるかと、その回避策について解説します。 なお、こちらの記事は、 SEM Technology - Googleアナリティクスに悪影響を与えずにJavaScriptでリダイレクトする方法 と同じ内容となっています。 はじめに モバイルサイトとPCサイト間のリダイレクトであったり、URL変更に伴うリダイレクトにおいて, .htaccessなどを用いたサーバー側でのリダイレクトが技術上できず、JavaScriptを利用してリダイレクトしているケースをたまに見かけます。 こうしたサイトでは、見た目上は問題なく動作しているものの、実はGoogleアナリティクスなどを用いてアクセス解析を行うと致命的な問題点がみつか
夏のインターン講義「1営業日で書くJavaScriptコンパイラ」の設計と実装 - クックパッド開発者ブログ
今年、クックパッドでは夏のインターンと題して20名弱のインターンを受け入れました。 このインターンは前半と後半に大きく分かれており、 後半が社員に混じって業務をするいわゆる普通のインターンで、 前半は7日間にわたってプログラミング関連の講義を受けるという仕組みです。 わたし（青木）はその前半の過程において、「プログラミングパラダイム」という 1 日の講義を担当し、 JavaScriptの処理系を書くという、ツッコミどころの多い課題を実施しました。 本稿では、その講義を開発する際に考慮したこと、特に難易度調整についてお話しします。 また講義のために開発したJavaScript処理系「JetSpider」についても軽くふれます。 ▼講義資料 Cookpad Summer Intern 2015 - Programming Paradigm from Minero Aoki JetSpiderコ
t_wadaさんが提案するJavaScript速習コースを実際に履修してみた - WEB SALAD
はじめに もう2ヶ月前の話なのですが、日本のTDD第一人者で、最近はpower-assert-jsの開発などJS界隈でも活躍されている@t_wadaさんが、Twitterでこんな提案をされていました。 『JavaScript: The Good Parts』と『WEB+DB PRESS Vol.87 第1特集』のあわせて250ページ未満でES6までの全体像をつかむ速習コースのご提案 http://t.co/doPQ7V4enw http://t.co/NKTGz3syk7— Takuto Wada (@t_wada) 2015, 8月 10 ちょうどこの頃、初めてのgemを作り終え、Ruby以外の言語に対する学習欲が高まっていたので、この提案に乗っかってみることにしました。 本エントリでは、この速習コースを実際に履修した感想と、結果どうなったのかを書きたいと思います。 履修前の状態 ずっと
JavaScriptでのDOM操作は重いのかという話とForced Synchronous Layoutについて - id:anatooのブログ
2015年にもなるのにJavaScriptでのDOM操作のパフォーマンスについて書く。ウェブページにインタラクションを持たせたい時に、JavaScriptでDOM操作を行うことがよくある。このDOM操作のパフォーマンスについて、よく聞く意見を大別すると次の2つがある。 JavaScriptによるDOM操作は重たい レンダリングが重いだけで、DOM操作そのものはそれほど重たくない JavaScriptでオブジェクトのプロパティを操作したりする単体の処理は通常1ミリ秒もかからないが、DOM操作をするとレンダリングが完了するまでに数十ミリ秒程度かかったりする場合がある。1番目のDOM操作が重たいと言っている人は経験則的にそう言っていることが多い。 レンダリングの仕組みを知っている人は2番目の意見を言うが、重箱の隅をつつくような話をするとこれも必ずしも正しいわけではない。DOM操作するコードによっ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
長文日記
