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

はじめに どうしてもJavascriptでサーバーサイドの実装したかったのでExpress+TypeScriptのセットアップ。 特に嵌りポイントもなかったのですが備忘に。 前提条件 Node.jsとnpmのインストールは一通り終わってる前提です。 目指す姿 TypeScriptでserver.tsを書いてserver.jsにトランスパイルできるようにする ちゃんとデバッグできるようにする 必要なモジュールをインストールする

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 ファイルのダウン

lerna とは？ lerna/lerna: A tool for managing JavaScript projects with multiple packages. が何ものかというと、単一のリポジトリで複数の npm module 開発を可能にするツールです。 たとえば、 babel/babel: ?? Babel is a compiler for writing next generation JavaScript. facebook/create-react-app: Set up a modern web app by running one command. nuxt/nuxt.js: The Vue.js Developers Framework このあたりの有名なリポジトリが lerna を採用していて、もう面影がないですが、 facebook/react: A d

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 使い方 インストール

Learn JavaScriptThe easiest way to  learn  &  practice  modern JavaScriptLearn in an interactive environment. Read short lessons, take notes, and complete challenges directly in your browser. Try it out →Anonymous cookies are used to improve the quality of the course. Learn modern JavaScript (ES2015+) from scratch, and practice in an intuitive environment. The challenges are inspired by real-world

背景 node.jsでaws-sdkを利用してファイルのアップロードしようと思ったけど古い記事が多かったのでまとめさせていただきます。 正規なやつは下記を参照… http://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/S3.html 最初に 下記の項目は飛ばさせていただきます… 1. node.jsやらnpmやらのインストール 2. awsのアカウント作成 3. awsのs3のバケット作成 やり方 aws-sdkのインストール

dynamoDB.getItem({/*省略*/}, (err, data) => { if (err) { console.error(err); // エラーもネストの数だけハンドリングが必要 } else { s3.getObject({/*省略*/}, (err, data) => { if (err) { console.error(err); } else { console.log(data); } }); } });

この記事は、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ではセレクタで