JavaScriptのデバッグ方法 – JSを嫌いにならないためのTips | POSTD
この記事のオリジナルは voxxed に投稿されたものです。 JavaScript関連の問題を抱えるチームをサポートする仕事を通じて、いくつか共通の問題点があることに気づきました。もしあなたもJavaScriptに対するイライラを感じているのであれば、この記事は何らかの助けになるかもしれません。おことわり：私がお教えするヒントはすでにご存知のものもあるとは思いますが、うまくいけば、多少なりとも有用な情報があるかもしれません。特にエンタープライズアプリケーションやCMSソリューションを構築する際に有効なヒントです。チームの誰もが話したがらないCMSのコードについてお話しします。いずれも必要に応じて採用できるものです。 debuggerステートメント 大半のブラウザでサポートされているにもかかわらず、JavaScriptを書く際に最も活用しきれていない機能の1つです。debuggerステートメ
メルカリアプリのWebView向けWebアプリケーションの開発を支えるモック技術
こんにちは、メルカリでフロントエンドエンジニアをしている @karszawa です。 本日はメルカリアドベントカレンダー2019の21日目の記事として「メルカリアプリのWebView向けWebアプリケーションの開発を支えるモック技術」というニッチ（？）な題目の話をさせていただきます。 メルカリアプリでは「取引画面」を代表として、意外と多くの場所で WebView が使われています。 WebView 向けの Web アプリケーション開発は動作環境が特殊で外部依存の多いという点で普通の Web アプリケーション開発よりややこしいです。たとえば、普通の Web アプリケーションはあるアプリが独自に定義した API（ネイティブ API）を呼ぶことはありません。この記事ではそういった難しさを持ったアプリケーションを開発する上で重要な モックの話 をします。 本番環境と開発環境のアプリケーションが参照
"HTML5ゲーム重い問題"をいかに解決するか？ CPU負荷を改善する方法
2019年10月9日、『神姫PROJECT』などソーシャルゲームの企画・開発を手がける株式会社テクロスが主催するイベント「TECH x GAME COLLEGE」が開催されました。第27回となる今回のテーマは「HTML5で『重い』問題をクリアしてリッチなゲームを作る」。株式会社ノックノート執行役員の岡山知弘氏が、話題のHTML5ゲームを作るにあたって、いかにJavaScriptでリッチなゲームを作りながら重い問題を解決していくかを語りました。前半パートとなる今回は、負荷改善における前提とCPUの問題についてレクチャーしました。 HTML5で「重い」問題 岡山知弘氏：それでは、30分ほどお時間をみなさんにいただいて、HTML5で重たい問題は、みなさんがHTML5を触られている方であれば、まさに直面しているかなとは思うんですけど、そこで弊社でどういうふうにアプローチしたのかをお伝えさせていただ
ESLintと「eslint --init」による「.eslintrc.json」の生成
ESLintはJavaScriptのソースコードを静的解析するツールです。 Lintツールはソースコードの書き方を統一したり、静的解析の段階で問題になりそうなコードや、明らかなバグを見つけるのに役立ちます。 .eslintrc.json ESLintの実行には設定ファイルが必要です。 これは「--init」で作成できます。 $ npm install --save-dev eslint $ npx eslint --init ? How would you like to use ESLint? To check syntax and find problems ? What type of modules does your project use? CommonJS (require/exports) ? Which framework does your project use? N
技術書典7向け新刊「Node.js中級者を目指す」のご紹介 - このすみノート
2019年09月22日（日）に開催される技術書典7で、「Node.js中級者を目指す」という技術系同人誌を頒布します。 本書は技術書典5の「PHP中級者を目指す（商業誌版はレベルアップPHP）」に続く、中級者を目指すシリーズの第二弾です。 techbookfest.org 本の概要 入門書の次に読むことを想定にした、中級者へのステップアップを目指すNode.js本です。 主にNode.jsに対する技術的な内容を扱います。 新しいJavaScriptでは何が変わったのか？ コールバック地獄の解消 非同期プログラミングにおける例外の捕捉 クラスター化によるWEBサーバー運用 ・・・をはじめ、Node.jsには学びのポイントがたくさんあります。 そういったポイントを私自身も勉強しながら、集大成としてまとめています。 私が主にNode.jsを使って開発していたのは数年前の話なのですが、最近になって
TypeScript Deep Dive 日本語版 - TypeScript Deep Dive 日本語版
TypeScriptはJavaScriptを拡張して作られたプログラミング言語です。トレンドが示すとおり、TypeScriptはJavaScriptに代わって第一に選択される言語になりました。TypeScriptが提供する静的型システムは、コードの保守性と可読性を大幅に向上させます。またブラウザ等の互換性を心配することなく、モダンで便利なJavaScriptの機能を利用できます。 TypeScript DeepDiveは初心者からベテランまで役立つオープンソースのドキュメントです。JavaScriptのモダンな機能からTypeScriptの様々な魔法に至るまで丁寧に説明されています。多くのコードサンプルがあり、具体的なTypeScriptの使い方を簡単に理解できます。TypeScript DeepDive日本語版は2018年に誕生しました。
モブプロしてみた2｜erukiti
ラボアドベントカレンダー 5日目（5/1）です。5/1の31時にポストしてますが、5/1です。いいね？ 4/30に行ったモブプロの様子をお伝えします。 ※ モブプロ慣れていません ※ Clean Architecture は、原点のブログ（翻訳版）は読んだけど、本は読んでなく、割とオレオレです。 ※ 僕は、悩むくらいならクソなものでもいいから書き始めよう派です（マクドナルドメソッド大好き） 作っているもの都内某所にあるラボのためのアプリです。 Clean Arthicecture的な話・ src/domains は、Use Case と Entity をひとまとめにしたものです ・ src/adapters は、interface adapter 層です 脱脂綿さんのターンまずは脱脂綿さんがドライバーを開始しました。 ・ addTipsユースケースを追加 モブプロ1の時に、作成したdoma
JavaScriptでアスペクト指向プログラミング | DevelopersIO
JavascriptでAOP JavaではDIと同時に当たり前になったAOP(アスペクト指向プログラミング)ですが、Javascriptでも行うことができます。 今回紹介するAopJSは、JavascriptでAOPを行うためのライブラリです。 ドキュメントを参考にいろいろとためしてみましょう。 ※ちなみに、AopJSは通常のライブラリとしてだけでなく、JQueryのプラグインとしても提供されています。 環境構築方法 今回使用した動作環境は以下のとおりです。 OS : MacOS X 10.7.5 Node.js : v0.10.8 npm : 1.2.23 gitリポジトリからAopJSを取得します。 % mkdir aopjs % cd aopjs % git clone https://github.com/victorcastroamigo/aopjs.git 次のようにindex
JavaScript:iframe:外部のページを埋め込むのではなく、HTMLをそのまま埋め込みたい
イントロダクション HTML の iframe タグを使用すると、ある HTML 文書の中に、別の HTML 文書を埋め込むことができます。 通常、iframe タグを使って別の HTML 文書を埋め込む場合には、src 属性に外部の HTML 文書の URL を記載し、外部の HTML 文書を埋め込みます。 そのような目的であれば特にこれ以降のこの文章を読む必要は無いのですが、場合によっては外部の HTML 文書を埋め込むのではなく、HTML 文書をそのまま埋め込みたい場合があります。 想定する用途としては、次のケースが挙げられます。 グローバルな変数・オブジェクト・関数などを多用するような JavaScript コードを埋め込みたいが、それらのグローバルな変数・オブジェクト・関数などによって、埋め込み元のページに影響を与えたくないケース（グローバル領域の汚染を防ぐ） 埋め込み元のスタイ
要チェックな10個の Node.js フレームワーク - Qiita
本記事は、10 Node.js Frameworks Worth Checking Out: Express, Loopback, Hapi, and Beyond の日本語訳です。 要チェックな10個のNode.js フレームワーク テクノロジーは急速に変化しているので、開発者たちは新しいテクノロジーを使用し、Web開発のニーズに合わせて、より便利なフレームワークを採用しています。Node.js は、アプリ開発にJavaScriptを使うのが好きな開発者達から、大いに注目されています。 開発者であるあなたは、クライアントサイドとサーバーサイドのスクリプト両方を同じ言語で管理できます。そしてこれは、Nodeの膨大な利用や採用をもたらしました。 Node.js フレームワークは、Web開発の市場で膨大な需要を獲得し続けており、2019年でも、より多くの機能や利点をもたらし続けています。現在の
Babelとwebpack入門
概要 Babelやらwebpack。 なんとなく理解はしているものの、 環境構築の際には、毎度他の記事を参考にして乗り切っていました。 しかし、公式を見ればさらっと構築できるレベルには知識が欲しくなり、 基礎を記事にまとめました。 公式の英文が辛い方はぜひ、最初の一歩にしてみてください。 とは 公式より Babel is a JavaScript compiler. JavaScriptのコンパイラ。 次世代のJSの記載を古いものに変換して、最新のコードを書きつつも、 様々なブラウザで動くようにできる。 babel-core Babelのコアなんでしょう。 これだけだと特に何もしてくれない。 babel-polyfill コンパイラが頑張っても、補いきれない機能(Promiseとか)をポリフィルで足す。 babel-cli 名前からわかりそうですが、babelコマンドを使えるようにしてくれ
モダンフロントエンドエンジニア勉強会を、お試し開催してみた｜erukiti
フロントエンド技術は、ある時期を境に爆発的進化を遂げて、面白く・DX（開発者体験）の良い世界に発展しています。 DXはDeveloper eXperienceの略で、2017年くらいから話題になっているようです。（正しい起源はわかりませんが、雑に検索した限りは、2017年のMediumやdev.toでの英語記事がヒットします） DXに関して日本語での記事は「DX: Developer Experience （開発体験）は重要だ」を読むとわかりやすいと思います。 ウェブ技術をやっている人の中で、バックエンド側しかまだ触ってない、JavaやRuby、PHPのような言語でしかウェブに触れてない人は多く、そういった人に、今のフロントエンド情勢ってこんな感じだよ！って知ってもらいたいという思いがあり、都内の某所にある「ラボ」でモダンフロントエンドエンジニア勉強会というのをお試しで開催してみました。
レスポンシブなWebページを簡単に作成できるWebページビルダーを作るためのスクリプト・「GrapesJS」 | かちびと.net
GrapesJSはWebページを簡単な操作で作成できるWebページビルダーを構築する為のスクリプトです。CMS等に内蔵させて管理画面内で動作させるのが主な目的のようです。以前からありましたが、非依存型になる等かなり改善されたようなので備忘録も兼ねて再掲。レスポンシブなWebページにも対応できるように設計されています。プレビューペインで直接的に内容を調整できる系のUIなので直感的に操作しやすいんじゃないかなぁと思います。動作サンプルも用意されているのでご興味のある方は触ってみては如何でしょう。GrapesJSは3条項BSDライセンスのもと、OSSとして公開されています。 GrapesJS
Google Apps ScriptをTypeScriptで実装する(clasp/TSLint/Prettier) #gas #typescript - My External Storage
claspというGoogle Apps Script(GAS)をローカルで開発するためのツールがある。claspを使うと、TypeScriptを使ったGASのコーディングも標準で行える。 今回はclaspを使って以下の要求を満たしながらGASの開発を行う際の設定をまとめる。 TypeScriptによる実装 Gitによる構成管理 Prettierによる自動フォーマット TSLintによる静的解析 TL;DR claspを使えばGoogle Apps Script(GAS)をローカルで開発できる https://github.com/google/clasp claspはwebpackなどを使わずにTypeScriptで実装できる https://github.com/google/clasp/blob/master/docs/typescript.md 静的型付けをすることで補完などを使いな
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Gatsby Docs Starter
GitHub - lbeder/es6-promise-rails: A polyfill for ES6-style Promises with integration for Rails.