この記事のオリジナルは voxxed に投稿されたものです。 JavaScript関連の問題を抱えるチームをサポートする仕事を通じて、いくつか共通の問題点があることに気づきました。もしあなたもJavaScriptに対するイライラを感じているのであれば、この記事は何らかの助けになるかもしれません。おことわり：私がお教えするヒントはすでにご存知のものもあるとは思いますが、うまくいけば、多少なりとも有用な情報があるかもしれません。特にエンタープライズアプリケーションやCMSソリューションを構築する際に有効なヒントです。チームの誰もが話したがらないCMSのコードについてお話しします。いずれも必要に応じて採用できるものです。 debuggerステートメント 大半のブラウザでサポートされているにもかかわらず、JavaScriptを書く際に最も活用しきれていない機能の1つです。debuggerステートメ

こんにちは、メルカリでフロントエンドエンジニアをしている @karszawa です。 本日はメルカリアドベントカレンダー2019の21日目の記事として「メルカリアプリのWebView向けWebアプリケーションの開発を支えるモック技術」というニッチ（？）な題目の話をさせていただきます。 メルカリアプリでは「取引画面」を代表として、意外と多くの場所で WebView が使われています。 WebView 向けの Web アプリケーション開発は動作環境が特殊で外部依存の多いという点で普通の Web アプリケーション開発よりややこしいです。たとえば、普通の Web アプリケーションはあるアプリが独自に定義した API（ネイティブ API）を呼ぶことはありません。この記事ではそういった難しさを持ったアプリケーションを開発する上で重要な モックの話 をします。 本番環境と開発環境のアプリケーションが参照

2019年10月9日、『神姫PROJECT』などソーシャルゲームの企画・開発を手がける株式会社テクロスが主催するイベント「TECH x GAME COLLEGE」が開催されました。第27回となる今回のテーマは「HTML5で『重い』問題をクリアしてリッチなゲームを作る」。株式会社ノックノート執行役員の岡山知弘氏が、話題のHTML5ゲームを作るにあたって、いかにJavaScriptでリッチなゲームを作りながら重い問題を解決していくかを語りました。前半パートとなる今回は、負荷改善における前提とCPUの問題についてレクチャーしました。 HTML5で「重い」問題 岡山知弘氏：それでは、30分ほどお時間をみなさんにいただいて、HTML5で重たい問題は、みなさんがHTML5を触られている方であれば、まさに直面しているかなとは思うんですけど、そこで弊社でどういうふうにアプローチしたのかをお伝えさせていただ

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

2019年09月22日（日）に開催される技術書典7で、「Node.js中級者を目指す」という技術系同人誌を頒布します。 本書は技術書典5の「PHP中級者を目指す（商業誌版はレベルアップPHP）」に続く、中級者を目指すシリーズの第二弾です。 techbookfest.org 本の概要 入門書の次に読むことを想定にした、中級者へのステップアップを目指すNode.js本です。 主にNode.jsに対する技術的な内容を扱います。 新しいJavaScriptでは何が変わったのか？ コールバック地獄の解消 非同期プログラミングにおける例外の捕捉 クラスター化によるWEBサーバー運用 ・・・をはじめ、Node.jsには学びのポイントがたくさんあります。 そういったポイントを私自身も勉強しながら、集大成としてまとめています。 私が主にNode.jsを使って開発していたのは数年前の話なのですが、最近になって

出典: https://www.npmtrends.com/typescript TypeScriptはJavaScriptを拡張して作られたプログラミング言語です。トレンドが示すとおり、TypeScriptはJavaScriptに代わって第一に選択される言語になりました。TypeScriptが提供する静的型システムは、コードの保守性と可読性を大幅に向上させます。またブラウザ等の互換性を心配することなく、モダンで便利なJavaScriptの機能を利用できます。 TypeScript DeepDiveは初心者からベテランまで役立つオープンソースのドキュメントです。JavaScriptのモダンな機能からTypeScriptの様々な魔法に至るまで丁寧に説明されています。多くのコードサンプルがあり、具体的なTypeScriptの使い方を簡単に理解できます。TypeScript DeepDive日本

ラボアドベントカレンダー 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

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 本記事は、10 Node.js Frameworks Worth Checking Out: Express, Loopback, Hapi, and Beyond の日本語訳です。 要チェックな10個のNode.js フレームワーク テクノロジーは急速に変化しているので、開発者たちは新しいテクノロジーを使用し、Web開発のニーズに合わせて、より便利なフレームワークを採用しています。Node.js は、アプリ開発にJavaScriptを使うのが好きな開発者達から、大いに注目されています。 開発者であるあなたは、クライアントサイドとサーバ

概要 Babelやらwebpack。 なんとなく理解はしているものの、 環境構築の際には、毎度他の記事を参考にして乗り切っていました。 しかし、公式を見ればさらっと構築できるレベルには知識が欲しくなり、 基礎を記事にまとめました。 公式の英文が辛い方はぜひ、最初の一歩にしてみてください。 Babel とは 公式より Babel is a JavaScript compiler. JavaScriptのコンパイラ。 次世代のJSの記載を古いものに変換して、最新のコードを書きつつも、 様々なブラウザで動くようにできる。 babel-core Babelのコアなんでしょう。 これだけだと特に何もしてくれない。 babel-polyfill コンパイラが頑張っても、補いきれない機能(Promiseとか)をポリフィルで足す。 babel-cli 名前からわかりそうですが、babelコマンドを使えるよ

フロントエンド技術は、ある時期を境に爆発的進化を遂げて、面白く・DX（開発者体験）の良い世界に発展しています。 DXはDeveloper eXperienceの略で、2017年くらいから話題になっているようです。（正しい起源はわかりませんが、雑に検索した限りは、2017年のMediumやdev.toでの英語記事がヒットします） DXに関して日本語での記事は「DX: Developer Experience （開発体験）は重要だ」を読むとわかりやすいと思います。 ウェブ技術をやっている人の中で、バックエンド側しかまだ触ってない、JavaやRuby、PHPのような言語でしかウェブに触れてない人は多く、そういった人に、今のフロントエンド情勢ってこんな感じだよ！って知ってもらいたいという思いがあり、都内の某所にある「ラボ」でモダンフロントエンドエンジニア勉強会というのをお試しで開催してみました。

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 静的型付けをすることで補完などを使いな