iOS版Google Chromeがver48.0でUIWebViewからWKWebViewに移行しました (2016/01/28)。このアップデートにより、それまでのクラッシュ率を70%削減し、JavaScript実行速度も大幅に上がりましたと書いています。2015年末にリリースされたiOS版FirefoxもWKWebViewを使用しています。 主要アプリがWKWebViewを採用していく流れのようです。ご自身のアプリにUIWebViewを使用している場合はWKWebViewへの移行も視野に入れてはいかがでしょうか。私自身WKWebViewを採用したブラウザアプリをリリースし15ヶ月以上運用していますのでその中で気付いたことも書いていきます。 理由1 クラッシュ率 UIWebViewには開発者レベルではどうにもならないクラッシュ問題が潜んでいます。特に複数のUIWebViewを使用するア

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

2018年12月12日、株式会社一休が主催するイベント「Ikyu Frontend Meetup」が開催されました。同社が運営する一休.comと一休レストランの開発に携わるエンジニアたちが、フロントエンド開発における知見を共有します。プレゼンテーション「JavaScript/Vue.js アプリケーションのパフォーマンスチューニング」に登壇したのは、株式会社一休宿泊事業本部、プロダクト開発部の宇都宮諒氏。一休.comのスマートフォンサイトにて実施した、Vue.jsを用いたパフォーマンス改善の舞台裏を語ります。講演資料はこちら JavaScript/Vue.jsアプリケーションのパフォーマンスチューニング 宇都宮諒氏：では、Vue.jsアプリケーションのパフォーマンスチューニングの話をしたいと思います。 自己紹介ですが、株式会社一休の宇都宮と申します。宿泊事業本部のUIチームに所属していて、

HTML5 においては、<script> タグに、defer や async 属性を付与することで、これらの読込が HTML パースを妨害しないようにすることができます。これにより、サイトのメインコンテンツの読込がある程度高速化されます。 async にせよ defer にせよ、それほど詳細に動作を解説した記事が見つかりませんでしたので、本記事では、これらの動作について解説します。 イベントについて まずは、async と defer の挙動を理解するために重要な、2つのイベントについて理解しましょう。 両者とも、MDN に十分な情報があるため、本記事ではそれほど詳細には解説しません。 DOMContentLoaded HTML のパースが完了した直後に発火します。 MDN load HTML のパースが完了し、CSS や画像などのダウンロードと表示、JavaScript ファイルのダウン

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

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

Build, share, and learn JavaScript, CSS, and HTML with our online code editor. Discover web applications and hire talent from the world’s largest community of front end developers and designers.

こんにちは、みやです。 空腹時にコーヒーやお茶を飲むとカフェインの作用で気分が悪くなるそうですね。 今まさにやられてます。 ところでIllustrator使ってますか？ ロゴの制作やレイアウト調整、印刷物の制作などに便利なIllustratorですが、実はスクリプトを使ってオリジナルの機能を実装することができます。 スクリプトを上手に活用すれば、何度も繰り返すような処理や、心が折れるほどの単純作業を一発で終わらせることもできるようになります。今回はスクリプトの設定方法と作り方、無料で使えるオススメのスクリプトをご紹介します！ スクリプトとは Illustratorの標準機能では手間のかかる処理を一発で解決する機能を実装する方法の一つです。JavaScriptで処理を記述したファイルを読み込んで、オリジナルの機能を使えるようにするものです。 基本的に標準機能でも実現可能な処理なのですが、手順

からまとめてみた。 どれもJavaScriptに関係する。 1. Reactの「JSX」 JavaScriptの独自拡張構文 Facebook社 Facebook社製フレームワーク、Reactで使われている構文 E4XみたいにJavaScriptの構文中にXML風のものをそのまま書く記法 // Using JSX to express UI components. var dropdown = <Dropdown> A dropdown list <Menu> <MenuItem>Do Something</MenuItem> <MenuItem>Do Something Fun!</MenuItem> <MenuItem>Do Something Else</MenuItem> </Menu> </Dropdown>; render(dropdown); 最近よく見かけるようになった 各

VSCodeの便利さを使いたいがTypeScript化するほど手間かけれない、みたいなときにtsconfig.jsonだけ作っておくとちょっと便利になりそうだったのでメモる。 追記： TypeScriptへ移植する予定が無い場合であれば、jsconfig.jsonを配置するでも十分そうです（違いはallowJSがdefaultでtrueなこととぐらい。あとはtsconfig.jsonは後述のコマンドでボイラープレートを生成できるという点ぐらいと思われます） 具体的にはこのへんとか使える 未使用のimport検出 ライブラリの型情報を利用した検出 JSDocがあればそれを利用した型検証 やり方 まずtsconfig.jsonを生成する。npx使う

Babelを使ってJavaScriptで書いていたライブラリをTypeScriptへマイグレーションする方法についてのメモ書きです。 数十回はライブラリやアプリケーションのコードベースをJavaScriptからTypeScriptへ変換しているので、 ある程度やり方がパターン化されています。 この記事では、自分がよく利用している次の構成のライブラリを元にしています Babel 6 or 7 Mocha + @babel/register この構成を、次のようなTypeScriptを使った構成へと変換していきます。 Babel -> TypeScript Mocha + ts-node + ts-node-test-register Babelで書かれたライブラリをTypeScriptへ変換 今回はtextlint-rule-helperというライブラリを例にしていきます。 このライブラリは

2019/01/12 に #kyotojs で発表したスライドです

Node.js初心者な私がいろいろはまったことメモ。 Node.jsのUnit Testでexportsしていないfunctionをテストしたかったので、調べていたら便利なライブラリを発見。 使用ライブラリ rewire(下記参照) https://github.com/jhnns/rewire 使い方 インストール

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?

この記事は、Node.js Advent Calendar 2018の 18 日目の記事です。 遅れてしまい本当に申し訳ありません。 この記事は、HTML5 カンファレンスで話した内容が中心となります。 Node.js とはかけ離れていますが、自分が書きたかった内容だったので、理解してくださると嬉しいです。 モジュール webpack は以下のモジュールをサポートします。 // ESM (ECMAScript Modules) import foo from "./foo"; export default foo; import("./foo.wasm"); // native support for WebAssembly import("./foo.json"); // native support for JSON // CJS (CommonJS Modules) const fo

エムスリー エンジニアの岩本です。 この記事は エムスリー Advent Calendar 2018 の23日目の記事です。 React.jsやVue.jsを使えれば、開発のベストプラクティスなどがあるので、メンテナンス性の高いプログラムはずいぶんと書きやすくなったと思います。本当に仮想DOMの功績は大きいですね。 しかし、世の中にはそういったライブラリを使うことができないプロジェクトもあるわけです。古すぎて、一部分だけ最新のソースコードにすることが憚られたり、サイズの問題でライブラリを入れることができなかったり。。。 その場合どのように書けばメンテナンス性の高いプログラムを書くことができるのでしょうか。そこでIE6時代からJavaScriptをもりもりと書いている私なりのベストプラクティスを紹介します。 そもそもなぜメンテナンス性の悪いコードとなってしまうのか jQueryではセレクタで

Vue.jsでSPAを作ったものの、検索エンジンのクローラーやSNSのOGP取得といった問題で困ったことはありませんか？ サーバーサイドレンダリングを簡単に構築できるNuxt.jsの活用方法を解説します。 ユニバーサル（Isomorphic）JavaScriptはJavaScriptコミュニティで一般的な用語になりました。ユニバーサルJavaScriptとは、クライアントとサーバーの両方で実行できるJavaScriptコードのことです。 Vue.jsを含むモダンJavaScriptフレームワークの多くは、シングルページアプリケーション（Single Page Application : SPA）の構築を目的に作られています。シングルページアプリケーションはページがリアルタイムで更新されるので、アプリの動きが軽快でユーザーエクスペリエンスが向上します。さまざまな利点がありますが、欠点もありま

What does Bundlephobia do? JavaScript bloat is more real today than it ever was. Sites continuously get bigger as more (often redundant) libraries are thrown to solve new problems. Until of-course, the big rewrite happens. Bundlephobia lets you understand the performance cost ofnpm install ing a new npm package before it becomes a part of your bundle. Analyze size, compositions and exports Credits