VueConf USでのさまざまな発表 今年の3月に VueConf US が開催されました。最近になってビデオが公開されて初めて知ったこともあるので本記事ではその紹介をします。 いろいろ面白いトピックがあるのですが、特にVueコアチームのGuillaume Chauさんによるパフォーマンス改善テクニックはまじかーという感じだったのでここにまとめたいと思います。 "9 Performance Secrets Revealed with Guillaume Chau" プレゼン動画: http://www.youtube.com/watch?v=5B66qer8cZo スライド: https://slides.com/akryum/vueconfus-2019#/ デモサイト: https://vue-9-perf-secrets.netlify.com ソース: https://githu

TypeScript再入門 ― 「がんばらないTypeScript」で、JavaScriptを“柔らかい”静的型付き言語に JavaScriptプロジェクトでTypeScriptを導入する際には、“柔らかい”静的型付き言語とするのがおすすめです。藤吾郎（gfx）さんがまとめた「がんばらないTypeScript」のガイドラインです。 TypeScriptは、すべてのJavaScriptプロジェクトで採用する価値のある技術です。TypeScriptとこれに対応したエディタを導入することで、補完や型ベースの整合性のチェックにより、すべてのプロジェクトで生産性が上がります。またリファクタリングも容易になるので、長期あるいは大規模なプロジェクトでも品質を保ちやすくなります。 この記事では、TypeScriptについて最低限の知識とともに、サクッと（どちらかというと既存のプロジェクトに）導入するための

本記事では、 チームによる持続的に変更可能なWebアプリケーションの開発を目標に、フレームワーク導入時に考慮すべき22の観点を紹介する。 フレームワークによって特徴は異なるが、本番導入にあたって、考慮すべきポイントはあまり変わらないので、極力フレームワーク1に依存しすぎないよう配慮する。また、話をシンプルにするため、REST APIを提供するアプリケーションを題材とする。 前提 ソフトウェアのエントロピー ソフトウェアがエントロピー増大の法則を避けられないことを、体感している開発者は多いだろう2。普通にアプリケーション開発を続けると、開発スピードは鈍化し、品質は低下してバグが増え、開発者からは技術的負債への怨嗟の声が聞かれるようになる。エントロピー増大というフォースは極めて強力で、意思を持って立ち向かわなければ、容易にダークサイドに堕ちてしまう。 関心事の分離 大規模Webアプリケーション

いま学ぶべき第二のプログラミング言語はコレだ！ 未来のために挑戦したい9つの言語とその理由 業務に必要なだけではなく、コンピュータによって問題解決できていない分野を切り開き、エンジニアとして戦っていくため、刺激的な第二プログラミング言語に挑戦しましょう。Rust、Go、Erlang、Elixir、Clojure、Scheme、OCaml、Haskell、Scalaを紹介します。 みなさんが使えるプログラミング言語はいくつあるでしょうか？ ひとくちに「使える」といっても、ひととおりのチュートリアルは終えたという段階もあれば、言語仕様（あれば）やライブラリを知り尽くしていて、思いついた処理を即座にコード化できるという段階もあります。リファレンスとか参考書を見ながらであれば使える、ということも多いでしょう。 ベテランエンジニアなら、いろいろな仕事に携わっているうちに、さまざまな環境でそれぞれ必要

設定不要のビルドツール parcelというビルドツールが空前の勢いでGitHubスターを集めており、リリース数日で5000スターを超えています。今日だけでも1000スター以上増えており、Googleなどの有名企業リポジトリ以外でこのスピードで人気がでるのは異例です。 https://github.com/parcel-bundler/parcel https://parceljs.org/ 実際に試してみたところ、これはwebpack一強時代を終わらせるレベルの使いやすさだと確信しました。 作者はAdobeのエンジニアで、その他著名エンジニアも続々と参加している様子です。 webpack疲れ webpackが出た当初、webエンジニアはgulp/grunt疲れの状態だったことを覚えている方もいるかと思います。 webpackの統合された設定ファイルは、タスクランナーで逐次処理していたものを

How to watch Polaris Dawn astronauts attempt the first commercial spacewalk

人付き合いや人間関係が苦手、怖い、面倒……。その気持わかります！他人と一緒にいてもただただ疲れるだけで、うまくやっていくコツとか永遠にわからないんじゃないかと不安だけが募るわけですが、今回はそんな人々の気持ちや行動を、“あるある”という形で書いてみました！ こんにちは、ライターのギャラクシーです。 僕は人間関係や他人とのコミュニケーションが本当に苦手で、過去に働いたバイト先などでは「コミュ障」と揶揄されたことも一度や二度ではありません。今回はそんな僕が、人付き合いが苦手な人だけにわかる“あるある”を50個挙げてみました。 「別に人付き合いが苦手なわけじゃないけど、これはわかる」というのも、きっとあるはず！ では、どうぞ！ 人付き合い苦手なやつあるある 01：遠くに知り合いの姿が見えたら、光の速さで別ルートに移行する 気づいたのが遠距離であれば、気付いてないフリして別ルートに急ぐ。遠回りでも

HTML・CSSコーディングを取り巻く状況は、数年前と大きく変わっています。最近では、2016年11月にHTML 5.1が勧告されたり、2015年8月頃にChromeのブラウザーシェアがInternet Explorerを抜いたりといったニュースがありました。また、2017年4月にはWindows Vistaのサポートも終了するため、今後対応すべきはWindows 7のIE 11以降となります（※）。当たり前だと思っていたコーディング技術を今一度見直す時期にきているのではないでしょうか。本記事では2016年に見直した、今の時代に即したコーディング技術を紹介します。 ※ 参考記事「Internet Explorerサポートポリシー変更の重要なお知らせ - Microsoft」 1. meta keywords設定は検索順位に関係がない ウェブコンテンツのキーワードを指定するmeta keyw

便利すぎて、正直びっくりした。 Local by Flywheel のウェブサイト WordCamp US へ参加した際にブースを出していたのを見かけていたのが “Local by Flywheel” というローカル環境を構築するためのツール（https://local.getflywheel.com/）。 MAMP (Pro) の UI が綺麗で速くて各サイトが分離されていて、機能がとても多い版というと分かりやすいでしょうか。また、WordPress の環境に特化しており、ワンクリックインストールやマルチサイト、SSL、Apache/Nginx の選択や切り替え、メールのデバッグツールや開発中のサイトの一時的な公開など、WordPressを使ってウェブサイトを作りましょう、となった場合に必要になりそうな機能を備えています。 で、無料です。 トップページに書かれているその機能は以下のように

追記 2016年12月31日 22時40分 2016年12月31日 22時(JST)頃まで、プログラムのバグにより生成される芝が7段ではなく6段になってしまっている不具合がありました。 今後新規に作成されたTシャツなどでは問題なく7段の芝になります。 既にTシャツ等をご購入頂いている場合は、お手数ですが こちら を参考に購入をキャンセルしていただき、再度グッズを作成し購入の手続きを行っていただけると幸いです。 ご迷惑をおかけいたしまして本当に申し訳ございません。 追記ここまで こんにちは！ id:Pocke です。 本日、芝を着るサービス Shibart をリリースしたので報告させていただきます。 Shibart | GitHub で育てた芝を、あなただけのTシャツに。 芝を着る、って何？？ 芝を着る、とはどういうことでしょうか。 そもそも芝とは、GitHubのContributionグラ

こんにちは、編集長の白石です。 今回は、HTML5 Experts.jpでWebパフォーマンスに関する特集を行うにあたって、エキスパートの皆様による誌上座談会を開催してみました。 通常であれば数時間語っても尽きないような話を、1時間強でみっちり聞いてきました。 Webパフォーマンスの改善について、初心者から上級者まで楽しめる、有用な記事になっているかと思いますのでどうぞお楽しみください。 エキスパート紹介 白石 皆様、本日はお集まりいただいてありがとうございました！まずは簡単に自己紹介をお願いできますでしょうか？ 竹洞 株式会社SpellDataのCEOを務めている、竹洞です。Webパフォーマンスには10年間くらい関わっており、年間200サイトくらいの計測に携わっています。 今度から、Instart Logicのエヴァンジェリストも務めることになりました。Instart Logicは、Ap

作成：2016/12/26 更新：2016/12/26 Webデザイン > ページを消した時やリンク切れなんかで、味気ない404ページが表示されると悲しくなりませんか。というよりもユーザーは確実に離脱してしまうでしょう。あまり目立たないページだからこそ、手が込んだレイアウトになっていると感動します。 デザインが普通でも、検索窓や内部リンクがあると好印象。今回は404ページを作る時に参考になりそうなギャラリーやエフェクトをまとめました。 エンジニア速報は Twitter の@commteで配信しています。 404ページとは 404ページとは、ページが存在しない旨を伝えるエラーページのことです。ステータスコード200 OKは「リソースが正常」という意味で、ページが正常に表示されていることを示し、300番台はリダイレクト、400~500番台はエラーであり、404は「リソースが存在しない、探したけ

Robert Chang氏によるYou don't (may not) need Lodash/Underscoreを和訳しました。 意訳が含まれるため、誤りやより良い表現などがあればご指摘頂けると助かります。 原文：https://github.com/cht8687/You-Dont-Need-Lodash-Underscore LodashとUnderscoreは必要ない（かも） LodashとUnderscoreは素晴らしいモダンなJavaScriptユーティリティライブラリであり、フロントエンド開発者に広く使われています。しかしながら、モダンブラウザがターゲットとなる場合、ES5やES6のおかげでネイティブにサポートされたメソッドが多くあることに気づくでしょう。プロジェクトの依存関係を減らし、ターゲットブラウザが明確になっているのであれば、LodashとUnderscoreは必要

フロントエンド開発において，かつてのようにスタイルとロジックがきれいに分離されていた時代は終焉を迎えました．React 時代においては，それらを独立して扱うことは難しくなってきており，デザイナーとエンジニアはお互いに寄り添って歩んでいかなければなりません． そこで今回は，エンジニアの視点から，デザイナーに寄り添うために具体的にできることを，5 つのポイントに分けて書いてみたいと思います． 1. 頻度の高い JS, JSX の記法を習得してもらう デザイナーが React で View を実装するにあたり，相性のよい JS 記法や JSX 記法をいくつか習得してもらうだけで，生産性は大きく向上します．頻度の高い記法は限られており，かつそれぞれのハードルも高くないので，習得コスト以上のリターンが得られると思います．以下のものあたりを習得してもらうと十分でしょう． map, 三項間演算子, Te

Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything

アメブロのフロントエンド刷新についてFrontrend Vol.8で発表した内容です。Read less

ReactとAngularの比較への評価について ReactはAngularよりも評価が高いという記事を見かけることが多い。実際、それはプログラマ個人の評価もあるだろうし、使い方などにもよると思う。 また、ReactとAngularについての比較に対して以下のような指摘がなされる。 ReactとAngularは実はSPAフレームワークとして名前が挙げられるが、ReactはAngularのようにフルスタックのSPAフレームワークではなく、ビュー（もしくはビューモデル）の機能を提供することに特化している。 つまり、ReactとAngularは持っている機能や役割が異なるので一概に比較することは難しいと言われることがある。両者を触れば確かにそうだと実感すると思う。 そして、このReactの限定的な役割こそ、Reactを習得したり、使ったりする時に大事な点だと思う。 学習コストが低いのか？ 少なか