「専門学校では、全くの素人に、体系的にプログラミングを教えることで、それなりにプログラムが書けるようにしている」という記事が賛同を多く集めていた。 しかし、私の場合、まったく逆だった。体系的にプログラミングを教えられたらすぐに挫折したけど、体系もカリキュラムも全部無視して、自分の興味の赴くままにプログラミングを学んだら、ごく短期間に、劇的にプログラミング能力が高まった。 元記事によると、専門学校では、素人は、まず、簡単なアルゴリズムの問題集をやらされるとのことだが、こんなことをやらされたら、僕のようなタイプの人間は、まず挫折する。 実際、大学でプログラミングの授業を履修したときは、すぐに挫折した。 なぜなら、退屈だからだ。 僕は、子供の頃からそうなのだが、退屈なことを続けることができない。だから、小学生の時に公文式をやったときも、すぐに挫折した。しかし、学校の算数のテストでは、満点以外の点

blog.3qe.us これを読んだ感想文を書く。 結論、大量生産は無理やろとは思う。 少なくとも、「プロ」としてお金をもらって高品質なソフトウェアを0から書けるようになるにはセンスが必要だ。 そもそもそのレベルには私もなっていない。 ただ今あるモノになんとなく機能を追加するレベルに引き上げる術はもっとあると思う。 経験則でなんとなくその例をあげる。 ペアプロ OJTに近いとも言えるし、一番わかりやすい。 ここでペアプロはハローワールドまでの環境構築や実装までを各要素を説明しながらやることを指す。 まずはメンター側が目の前で順番にやってみる。 で次にメンティに同じことをさせる。 そうすると絶対詰まる。 Error: variable 'a' is undefined, line 24 こういうエラーが出るとまず英語を目の前で読む。 で理由を順番に説明して24行目を一緒に読む。 根気よく教え

みなさまこんにちは、のびーことfnobiです。今年ももうアドベントカレンダーの季節なんですね。はやいはやい。 さて個人的にアドベントカレンダーでは、振り返りの意味も込めて その年お世話になった技術に関する記事を書く、というルールにしてますので、今回は NetlifyとFirebaseの話 をします！！ （ちなみにFirebaseの話は去年もしたかったのですが、時間が足りなかった＆他の人も書いてたのでパスしました） この記事の目的 いまフロントエンドエンジニアに使ってほしいサービスの私的TOP2・NetlifyとFirebaseについて、様々な観点から比較して、 「なんかどちらも便利そうって聞くけれど、どちらを使えばいいのかわかんないな？？」 という人をこの世からなくします！ Netlifyってなんぞや？ https://www.netlify.com/ githubと連携可能な静的Webホ

CSSの難しさの根源はセレクタにある。CSS設計のための方法論ではどのようにしてセレクタと関わるべきかについて語られる。 その関わり方がCSSのみで実現できなければならないという制約を捨てたのがいわゆるCSS in JSの類（定義的に微妙なやつも全部ひっくるめて）だ。可能性は一気に広がり無数のライブラリが生み出された。 ある程度の期間を経ていくつかの着目すべきアプローチが見えてきた。これから僕はどのようにセレクタと関わっていくべきかという視点で記してみたい。 擬似スコープ 通常CSSのセレクタにはスコープはないが、HTMLやCSSにハッシュ値を付与して特定のコンテキストを擬似的に閉じてしまおうというアイデア。実装としては、Vue.jsの単一ファイルコンポーネント、Angularのコンポーネントスタイル、styled-jsxなど。関連するウェブ標準技術としてShadow DOMがある。 例え

Oct 31, 2018 at AWS Dev Day Tokyo 2018 #AWSDevDay #AWSTDD

おもしろライブラリを見つけて興奮しているので紹介します。 UIスレッド(メインスレッド)からユーザー操作をブロックしてしまうような重い処理を逃がす off-the-main-thread を実践しようとなると、実際に問題になるのは、ほとんどの処理は何らかの形で DOM を参照し、それに連なるものが処理時間の殆どを占めている、ということです。 off-the-main-thread の時代 - mizchi's blog DOM に触れない WebWorker でビジネスロジックを処理するのは、ある種の健全性(Universal/Isomorphic)を手に入れるための「縛りプレイ」として有用ですが、現状は実用上のメリットが殆どありません。 例えば react / redux の reducer で、ビジネスロジックを worker 側に移して処理できるぐらいアイソモーフィックに(DOMに触

フロントエンド開発時に便利で利用しているHostingサービスとその他便利なやつを備忘録的にまとめます。 Cloud hosting services 静的なサイトを表示確認する場合に便利。 AWS S3 (https://aws.amazon.com/s3/) s3-websiteインストール グローバルモジュールとしてS3用のモジュールをインストールします。 これによりS3への自動デプロイが可能になります。api keyを渡すだけで面倒な作業を一括で行ってくれる便利ツール。api keyはAWSアカウント作成後に取得します。

データベーステーブル設計の基礎の基礎～エンティティの抽出・定義から正規化まで 適切な形でデータベースのテーブルを設計し、運用するには？テーブル設計に必要な初歩を日本MySQLユーザ会副代表の坂井恵さんが丁寧に解説します。 金融系アプリ、ゲーム、人工知能などなど……。どんな種類のシステムを開発する上でも、避けて通れない領域があります。データベースです。データを適切な形式で格納し、取り出す。単純明快ながらも奥深いこの仕組みは、多くのシステムの根幹を支えています。 しかし、適切な形でデータベースのテーブルを設計し、運用するのは簡単なことではありません。「良いテーブル設計」のためには知識と経験が不可欠です。今回は日本MySQLユーザ会の副代表である坂井恵さんに、これからテーブル設計に着手する方に向け、設計に必要な技術と、良い設計を作るための考え方を教えていただきました。 坂井恵（さかい・けい） @

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

ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog 概要 Yahoo! JAPAN Tech Advent Calendar 2018の12月19日目を担当します、 Yahoo! JAPANトップページ（スマートフォン）のエンジニアをやっている神野（@miracletshirt09）です。よろしくおねがいします。 当記事においてはYahoo! JAPANトップページ（スマートフォン）に置けるPWAに関する取り組みをご紹介させて頂きます。 PWAとは はじめにPWAの説明を致します。 すでにご存知の方は「Yahoo! JAPANトップページ（スマートフォン）に置けるPWAの取り組み」まで読み飛ばして頂いて大丈夫です。 PWAの概要 PWAとはProgressive Web Appsの

Mercari Advent Calendar 2018 19 日目です。 担当はメルカリ JP フロントエンドチームの @nekobato がお送りします。 メルカリ フロントエンドチームでは主に React を利用してフロントエンド構築を行っており、 その中のWeb Rearchitecture では Storybook による UI Testing に取り組んでいます。 今回はフロントエンドの UI Testing と Unit Testing を Storybook & Storyshots を利用して行っているという話をします。 Storybook とは Storybook は個別の UI コンポーネントをブラウジングする開発環境を構築するモジュールです。 単独では目視による UI テストを可能にするのみですが、アドオンと組み合わせることで様々なテスト環境を構築することが可能にな

はじめに リクルートテクノロジーズに4月に新卒入社した 辻 健人です．GitHubではmaxmellonで活動しています． 7月より，やりとりも作成もラクになるシフト管理サービス「Airシフト」 のエンハンス開発を担当しています． 以前は，React製SPAのパフォーマンスチューニング実例という内容で記事を書きました． 今回は同じSPAにおいて，いかにwebpackが生成するJavaScriptのバンドルサイズを減らすかについて紹介していきます． webpackが，そもそも何のためのツールか，バンドルする理由などについては割愛させていただきます． そういった話は，こちらの記事 (Webpack の考え方について – mizchi’s blog) がわかりやすいと思います． Airシフトのアーキテクチャ Airシフトは，React-Reduxで開発されており，かつSSRを行っておりコードの大

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

From the legend Dan Abramov himself, we receive such gems as “There is [no data fetching solution compatible with React Suspense] that exists yet,” and “[React Cache] will be the first one,” and “Suspense is limited to code splitting.” If I have one thing to tell Daniel “Abra Cadabra” Abramov, besides how impressed I am with his work, it’s this:

Vue Fes Japan 2018 の 1年間単体テストを書き続けた現場から送る Vue Component のテスト https://vuefes.jp/

AWS Dev Day で発表した Backends For Frontends の話です。

プロのエンジニアに必要なものとはなんだ？『Clean Coder』に学ぶ信頼獲得のメソッド【今こそ読み解きたい名著】 プロのエンジニアならば、必ず有する周囲からの厚い信頼。しかし、信頼とはどのように獲得すればいいのでしょうか。名著『Clean Coder』から、エンジニアらしい信頼獲得の術を学びます。 数多くの開発者から支持を受け、読み継がれてきた名著。そこには読み継がれる理由があります。 名著には、内容・ボリュームともに充実した書籍が多く、概要に目を通しただけで本を読んだつもりになっていたり、腰を据えて読む時間がなく「積ん読」してしまいがち。「エンジニアが絶対読むべき書籍●選」といった記事をブックマークするだけで読んだつもりになっていないでしょうか。 ポイントを押さえつつ内容を深掘りし、名著の根底に流れるエッセンスを開発に活かしましょう。 アプリエンジニアの池田 惇（@jun_ikd）で

はじめに SREチームの @minamijoyo です。 今回は最近社内でやってる、OSS開発に参加してみたい人の背中を押して回る草の根的な活動について書いてみようと思います。 クラウドワークス は Linux / Ruby / Rails など、たくさんのOSS (Open Source Software) のエコシステムの上に成り立っています。 むしろ現在のWebサービス開発はOSSなしに開発するほうが難しいでしょう。 つまりWebサービスを開発してご飯が食べられるのも、OSSのおかげと言っても過言ではありません。かくいう私は普段業務で Terraform をいじってることが多いので、たとえば Terraform の細かいバグを直してみたり、サードパーティのツールを作ってOSSとして公開してみたりして遊んでおります。 そんなOSS活動について、周りを見渡したところ、「やってみたいけど、

「イミュータブル（immutable）」という言葉を聞いたことがあるでしょうか。イミュータブルは「不変」「変わらない」という意味の単語で、プログラミング界隈で盛り上がりつつある概念です。 ですが、そもそもプログラムとは基本的に値を変化させて何かを実現することがほとんどで、「イミュータブル」とは程遠いように思われます。 プログラミングにイミュータブルを導入するとはどういうことでしょう？どんなメリットが得られるのでしょう？ イミュータブルって？ プログラミングにおいてイミュータブルとは、オブジェクトの状態が変わらないことを指します。 オブジェクトの状態、と言ってもいまいちピンとこないかもしれません。わかりやすい例としては配列の状態があります。以下のコードを見てください： const array = [1, 2, 3]; for(let i = 0; i < array.length; i++)

尽く書を信ずれば即ち書無きに如かず 《孟子『尽心下』より》 イントロダクション 「最も理想的なオブジェクト指向を実現しているプログラミング言語は何か？」と問われたとき、君は何と答えるだろうか？ C++、Java、C#。君がそうだと思っているのは表面だけで、たぶん何もわかっていないのだろう。無知であることを知っているのであれば、無知のまま過ごした方が幸せなときもある。 Simula、Smalltalk、Ruby。君は本質をいくらか知っているようだから、引き返すなら今のうちだろう。深淵を覗けば、君もまた怪物にならざるを得ない。 JavaScript、Python、Go。君が真剣にそう答えるなら、私とは異なる真理に辿り着けたのだろう。君と私のどちらかが正しいのではない、どちらも常に正しく、どちらも常に間違っている。 Erlang、Elixir。君は既に答えを知っているようだから、この記事は全く以

連載目次 2000年代初期に開発手法として確立された「テスト駆動開発」（Test Driven Development、以下「TDD」）は、その後10年もの間で普及が進み、今や珍しくない開発スタイルの1つとなっています。国内でも「アジャイルアカデミー」「TDD Boot Camp」などによる推進・普及活動が各地で活発化し、認知が広がってきました。 なおTDDは誕生からこれまでの間に、さまざまな工夫や実践上のノウハウが提唱されてきました。またTDDの普及に影響を受け、他のさまざまな「テストファースト」手法も台頭してきています。 本稿では、そうしたTDDの発展や、振る舞い駆動開発（Behavior Driven Development、以下「BDD」）など他のテストファースト手法への展開についても解説します。 ※編集部注：ソフトウェアの「テスト」そのものの概要や種類について知りたい方は記事「J

off-the-main-thread は今フロントエンドで熱いテーマの一つです。日本語圏では今ひとつ話題になってないので紹介しておきます。 off-the-main-thread の概念の大まかな概要については、Chrome 開発者の nhiroki さんの日本語の記事があるので、こちらを参照してください。 nhiroki.jp speakerdeck.com ここまでのあらすじ 従来のウェブブラウザーでは、一つの画面につき一つ割り当てられる、UI スレッドと呼ばれる名前空間で様々な処理を行ってきました。DOMセマンティクスの評価, CSS による rendering / painting、JSのScripting…。もちろん裏側ではブラウザが様々なバックグラウンドサービスに処理を委譲し、スレッドで実行され、その非同期な結果を受け取っているわけですが、少なくともUIスレッドで走るJSから

2018年6月19日、第69回となる「HTML5とか勉強会」が開催されました。今回のテーマは「UIフレームワーク最前線」。Angular、Vue.js、Reactという3つのフレームワークにおける第一人者が一同に集い、それぞれの最新動向やおすすめポイントを語ります。「Suspense」に登場したのは、koba04氏。React 17より追加される新機能「Suspense」を、デモを交えつつ解説しました。 Suspenseとは何か？ koba04氏：よろしくお願いします。「Suspense」というタイトルで話していきたいと思います。Suspenseを聞いたことがある方はどれぐらいいますか？ （会場挙手） 数人ぐらいですね。ありがとうございます。 最初に自己紹介をさせていただきます。「koba04」というアカウントでやっています。 今はサイボウズで働いていて、フロントエンド周りいろいろやってい

「どういう経緯で本を書くことになったんですか？」 交流会や懇親会などでたまに質問をいただく。幸いにも「CSS設計の教科書」、通称「緑本」などと呼ばれる本書のことを知っている方がいたり、あるいは「CSSの緑の本を書いた人ですよ」と紹介いただくことをきっかけに話をしたりするので、この質問になることが多い。 なのでその話をnoteに書き留めておく。 きっかけはブログ2010年頃、当時はEC Studio（現: ChatWork）に勤めており、ナレッジ共有や採用など目的に技術ブログを公開していた。 そのときに「iPhone向けサイト構築 基礎文法最速マスター」という当時のはてブで流行っていた釣り気味のタイトルをつけた記事を書いた。 これが妙にバズり、はてブで1524ブックマークという数字を出し、Googleで「iPhone向けサイト」などと検索すれば上位に表示されるようになった。 それからほどなく

This is post # 17 of the series dedicated to exploring JavaScript and its building components. In the process of identifying and describing the core elements, we also share some rules of thumb we use when building SessionStack, a JavaScript tool for developers to identify, visualize, and reproduce web app bugs through pixel-perfect session replay. If you missed the previous chapters, you can find

もう見た？GitHub最新人気リポジトリTop25総覧【2017年9月版】 GitHubで直近1年に作成されたリポジトリの中から、スター数が多いリポジトリ上位25個を収集！読み物からソースコードまで、皆さんの開発に役立つ要素満載です！ 世界中の開発トレンドはGitHubにあり。 今回は直近1年に作成されたリポジトリの中から、スター数が多いリポジトリ上位25個を収集し、ジャンル別に整理しました。また、より内容を把握しやすくするため、各リポジトリの概要も記載しています。 上位にはソースコードだけでなく、開発に役立つ読み物系のリポジトリも多数。ぜひ参考にして、あなたの開発をブラッシュアップしてください。 読み物 Roadmap to becoming a web developer in 2017 Best websites a programmer should visit The Syste

ES2015 brought a native Promise to the JavaScript standard library. In this course, we’re going to take an in-depth look at how to use promises to model various kinds of asynchronous operations. First, we’re going to explore how to create promises using the Promise constructor or the Promise.resolve() or Promise.reject() methods. Then, we’re going to see how to chain promises together using .then(

2018年11月1日、株式会社メルカリにて「React会」が開催されました。第1回となる今回は、5人のエンジニアがReactにまつわるさまざまなトピックスについてライトニングトークを展開しました。プレゼンテーション「typescript-fsaに頼らないReact × Redux 」に登壇したのは、日本事務器株式会社の甲斐田亮一氏。講演資料はこちら typescript-fsaに頼らないReact × Redux 甲斐田亮一氏：「typescript-fsaに頼らないReact × Redux」というタイトルで始めさせていただきます。僕は日本事務器という会社でフロントエンドエンジニア兼デザイナーをしている甲斐田といいます。 ふだんの業務で、React、TypeScriptでアプリケーションを書いています。 今回話すことですが、最近のTypeScript 2.8以降の機能を使って、React

Node.js 2018 まとめ この記事は HTML5j カンファレンスで発表した、 Node.js 2018 のまとめの話をブログに起こしたものです。 speakerdeck.com ちょっとずるいですが、この記事一つで Node.js アドベントカレンダーと JavaScript アドベントカレンダーの25日目の記事です。 10月にNode.js v11 がリリース Node.js v11 は変更点はいくつかありますが、v11.0.0ではそんなに大きな機能はありません。代わりに性能向上と安定性向上を行っています。 これにはNode.jsのコア変更ポリシーが関わっています。 Node.js Core Policyである 「Less is More」 Less is More という言葉をNode.js の文脈で最初に使ったのはこの jsconf での発表が初めてですね。 www.you

Frontrend Vol.13 (https://frontrend.connpass.com/event/110449) での発表資料です． アップロード用に，口頭で説明した内容を補足で追加してあります．

大規模サービスを支えるフロントエンドの技術・設計紹介と課題解決について

こんにちは！dely でフロントエンドエンジニアをしている @all__user です。 この記事は dely Advent Calendar 2018 の8日目の記事です。 Qiita: https://qiita.com/advent-calendar/2018/dely Adventar: https://adventar.org/calendars/3535 昨日は、iOSエンジニアのほりぐち（ @takaoh717 ）が「iOS版クラシルの開発からリリースまでの流れ」というタイトルで投稿しました。 tech.dely.jp iOS 版 kurashiru の開発体制の遍歴がよく分かるような内容となっていますので、ぜひチェックしてみてください！ はじめに ここ一年間で Web 版 kurashiru のフロントエンドは Rails から Vue の SPA へと少しづつ置き換えられ

2025年、IT業界が変わる 経済産業省は2018年9月、デジタルテクノロジーによる企業価値の創出を目指す「デジタルトランスフォーメーション（DX）」に関する調査報告「DXレポート ～ITシステム「2025年の崖」克服とDXの本格的な展開～」を発表した。 「『DXレポート』では、デジタルで新事業を始める場合には情報システムの内製が重要になると指摘しています。この指摘が受け入れられるなら、SI企業も変わっていくはずです」と及川卓也氏は言う。 及川卓也氏 早稲田大学理工学部卒業後、日本DECに就職。営業サポート、ソフトウェア開発、研究開発に従事し、1997年からはMicrosoftでWindows製品の開発に携わる。2006年以降は、GoogleにてWeb検索のプロダクトマネジメントやChromeのエンジニアリングマネジメントなどを行う。2015年11月、技術情報共有サービス『Qiita』など

Takramさんをお呼びして開催した Cookpad Product Kitchen の登壇資料を全文公開してみます😀当日の様子は #productkitchen からどうぞ。 --- クックパッドの出口 (@dex1t) と申します。 今日はコードを書きながらデザインする意味と効果というタイトルでお話します。 本日のテーマはデザイン×エンジニアリングということで、両者を掛け合わせると何がおこるのかをテーマにお話します。 また、クックパッドではUXエンジニア、Takramさんではデザインエンジニアという肩書がありますが、じゃあこのUXエンジニアというのは何をする人なんだ、というのも話せればと思います。 クックパッドとTakramさんとの違いは、大きく事業会社とクライアントワークという違いです。僕からはクックパッドという事業会社でのサービス開発において、デザインとエンジニアリングを越境する

良いデザインはある日突然生まれるものではなく、しっかりした基礎に基づいて作られるものです。デザインを実践する前に、最初に身につけておきたいデザインの基本の勉強方法を紹介します。 Before you can master design, you must first master the fundamentals 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 良いデザインは、突然生まれるものではない デザインの基本 その1: 基本はタイポグラフィ デザインの基本 その2: 空白を使ってバランスをとる デザインの基本 その3: サイズを使用してビジュアルの階層を確立する デザインの基本 その4: 意味を伝えるためにカラーを使う 終わりに 良いデザインは、突然生まれるものではない 先週、私はビジターから質問をいただきました。 優れ

まえがき 本記事は進化を続けるフロントエンド界隈の思想を大まかに紹介するものです。 「自分で問題を作って自分で解決する自作自演を繰り返している」というような批判をたまにうけるフロントエンド界隈ですが、 それぞれの技術はもちろん何らかの課題を解決するために生まれてきたものであり、 それらの課題と解決策を知り、フロントエンドがどのような方向に進もうとしているのかを認識しておくことは 流行のReactやVue.jsを活用していく上でも地味ながらも確かに役に立つことだと思います。 対象読者 ReactやVue.jsなどを使って現在流行のフロントエンド開発を始める方で 各ライブラリのGetting Startedを読んでHello World程度まで済ませたぐらいの方を想定しています。 この記事では抽象的な思想を中心に扱います。 なのでこの記事を読んであとにリポジトリに即一行コードが増えるような実践

煽りタイトルですみません。 最近、Reactのプロジェクトのページを動かしていて、 もっさりしてる（レンダリングの負荷が高いな）と思ったので どうやったら無駄なレンダリングを減らせるか思考錯誤したことをまとめました。 preactとか別ライブラリの話はしません。 よかったらこちらもどうぞ ReactJSで作る今時のSPA入門（基本編） 2019年07月06日追記： ブラウザのレンダリングの仕組みに関して良記事があったので先に一読しておくことをおすすめします。 良記事１：実際のところ「ブラウザを立ち上げてページが表示されるまで」には何が起きるのか 良記事２：ブラウザレンダリング入門〜知ることで見える世界〜 １ピクセルがブラウザに表示されるまで：Life of a Pixel 2018 この記事に関してはReactのDOMツリー（レイアウト）レンダリングに関する最適化戦略です。 2020年02

ReactInDepth is moving away from Medium. This article, its updates and more recent articles are hosted on the new platform inDepth.dev React is a JavaScript library for building user interfaces. At its core lies the mechanism that tracks changes in a component state and projects the updated state to the screen. In React we know this process as reconciliation. We call the setState method and the fr

もう1年半も前の話なのですが、2017年3月からビザなし(ESTA)で滞在できる期間、大学を休学してサンフランシスコ(SF)でweb開発者としてフルタイムの仕事(インターン)探しをしていました。 はじめに SF滞在中いろんな日本の方にお世話になりました。本当に感謝しています。ありがとうございました。 結論として、SFの会社で働くという目標は達成できませんでしたが、それでも実際に赴いて活動したことで分かったことがあるのでSFで働くことを考えている人のために書いていきます。 一応書いておきますが、決して私は「日本はクソ！海外サイコー！」という意見を持っている訳ではありません。 当時のスペック 当時私は22歳で、大学3年生が終わるタイミングで休学しました。当時の開発者としての経歴を上げると以下のような感じになります。 クラウドワークスで1年くらい開発インターン 他でも4社か5社くらいで長期/短期

こちらのブログではご無沙汰しています。田中です。今週はサンフランシスコにて開催されたChrome Dev Summitに参加させていただいていました。今年はweb.devの発表や新しいPageSpeed Insightsなど、例年にも増して盛りだくさんの発表が行われましたが、特に「スピードの改善テクニック」が数多く披露されたように思います。 Chrome Dev Summitのプレゼンテーションはすべて濃厚で、しかも多くの内容は「web.dev」に詳しく説明されています。ここでは、2日間にわたって行われたセッションを振り返りながら、高速化に関する内容をざっくりと追っていきたいと思います。 以前と比べて、WebサイトのJavaScriptコード量は8倍に膨れ上がっている V8の言語機能を今後も最適化していく：Promise、Async & await、フレームワーク対応等 ReactのHoo

Chrome Dev Summit に初参加しました！色々トピックとして気になったものを紹介してます。後直接 Addy Osmani とか Paul Irish とかに聞く機会があったので、色々ついでに聞いてきました。 Chrome DevRel teams create a Chrome cake #ChromeDevSummit [pic.twitter.com/5u6VPZ0oHb](http://pic.twitter.com/5u6VPZ0oHb)— Yosuke FURUKAWA (@yosuke_furukawa) November 12, 2018 Chrome も 10 周年なんですよねー。感慨深い。 1日目は「現在のChromeでできること、やってること」という感じで、ケーススタディやツールチェインの話が多めでした。 2日目は「未来のChromeでできること、今後やるべ

プロダクトマネージャー・カンファレンス2018発表資料のウェブアップ版です

2018/10/13（土）に、AbemaTV Developer Conference 2018 が開催されました！今年で3回目の開催となりましたが、昨年を超える多くの方々にご来場いただきました。ありがとうございました！この記事では各発表の資料やFRESH LIVEでの録画映像をまとめてご紹介させていただきます。 告知 2018/10/22（月）には、AbemaTV 赤裸々 Meetup!! (Engineer) 〜アベマで働く、中途社員のホンネ〜 の開催を予定しています。こちらもぜひご参加ください。 過去のイベント AbemaTV Developer Conference 2016 まとめ AbemaTV Developer Conference 2017 まとめ

クリティカル・シンキングとは、「批判的思考」と訳される思考方法ですが、ただ物事を批判的に捉えるという意味ではありません。これは、その時点における「最適解」を導き出すために、目の前にある事象や情報を鵜呑みにせず、「それは本当に正しいのか」という疑問を持ち、じっくり考察した上で結論を出すことを言います。今回は、クリティカル・シンキングの基本姿勢やロジカルシンキングとの違い、思考の進め方やトレーニング手法、さらには、研修会社や書籍まで幅広くご紹介します。 クリティカル・シンキングとはそもそも「critical（クリティカル）」とは、「批判的な・批判眼のある」等の意味を持つ単語です。クリティカル・シンキングを直訳すると「批判的思考」となりますが、ただ物事を批判的に捉える思考という意味ではありません。 クリティカル・シンキングとは、目の前にある事象や情報を鵜呑みにせず、まず「それは本当に正しいのか」

本記事は、一休.com Advent Calendar 2018の4日目の記事です。 qiita.com 宇都宮です。宿泊事業本部でWebフロントエンドの開発をしています。 今日は、パフォーマンス改善に取り組むフロントエンドエンジニアの多くが頭を悩ませているであろう、サードパーティスクリプト(3rd Party JavaScript)について書きます。 サードパーティスクリプトとは サードパーティスクリプトとは、外部のドメインから読み込むJavaScriptのことです。典型的には、Google Analytics等のスクリプトが、サードパーティスクリプトに該当します。 一休.comでは、サードパーティスクリプトを、アクセス解析・広告のリターゲティング・A/Bテスト等、様々な用途に使用しています。これらのスクリプトは、一つ一つは小さなものであるため、画面表示のスピードに対するインパクトは意識

JJUG CCC 2018 Fall 2018-12-15T16:45+09:00 #ccc_e6 http://www.java-users.jp/ccc2018fall

.app 1 .dev 1 #11WeeksOfAndroid 13 #11WeeksOfAndroid Android TV 1 #Android11 3 #DevFest16 1 #DevFest17 1 #DevFest18 1 #DevFest19 1 #DevFest20 1 #DevFest21 1 #DevFest22 1 #DevFest23 1 #hack4jp 3 11 weeks of Android 2 A MESSAGE FROM OUR CEO 1 A/B Testing 1 A4A 4 Accelerator 6 Accessibility 1 accuracy 1 Actions on Google 16 Activation Atlas 1 address validation API 1 Addy Osmani 1 ADK 2 AdMob 32 Ads

こんにちは。久しぶりのQiita投稿です。 今回は「ex-KAYAC Advent Calendar」の13日目の記事として寄稿させていただきます。 さて、改めて私の今やっていることを紹介させていただきますと、独立してから株式会社Lucky Brothers & co.という会社を設立し、主にWebの受託制作を行っています。 かれこれ３期目に突入致しました。 アドベントカレンダーということで改めて2018年という年を振り返ってみたのですが、一言で言うと「今年はフロントエンドエンジニアにとって大きな当たり年であった」と言えるのではないかと思います。特に私達の会社では、今までのいわゆる「Webサイト制作」だけの単一事業形態から脱し、他のあらゆるアプリケーション制作にも手を拡げられた年になりました。 そんな話をしようと思います。 Nuxt.js Vue.js製のフレームワークであるNuxt.js

Sassが、括弧でSCSSと書いてあるのは、もともとSASS記法というので書かれていたんですが、Sass3.0からCSSちっくに書くことが出来るSCSS記法というのでも書けるようになったためです。 ようはどちらで書いても、同じCSSが生成されるので、自分に合った方を使えばいいと思います。 Sassの使い方 rubyのインストール Sassはrubyでコンパイルするのでとりあえずrubyが必要です。 私の環境(centOS)でインストールしたやり方をすべて残しておきます。 $ wget https://cache.ruby-lang.org/pub/ruby/2.2/ru --2015-09-23 11:10:27-- https://cache.ruby-lang.org/pub/ruby/2.2/ruby-2.2.3.tar.gz cache.ruby-lang.org をDNSに問いあ

そろそろ2018年も終わりを迎え、2019年がやって来ようとしています。この1年でWebデザインのトレンドにも様々な変化がありましたが、2019年はどのようなWebデザインの手法が流行するのでしょうか？ 最新のWebデザインのトレンドを取り入れることによって、Webサイトを魅力的に見せることができたり、使いやすいWebサイトを提供することができるなど、様々なメリットが生まれます。 今回は、2019年に流行するWebデザインの最新トレンドを一気にご紹介していきたいと思います。 2029年のWebデザイントレンドに関する記事を公開しました！最新情報を知りたい方はこちらをご覧ください。 2022年に流行するWebデザインの最新トレンド10個まとめ 2021年のミニマリズムを中心としたトレンドが注目されていましたが、2022年は鮮やかで、奇抜で、記憶に強く残るようなデザインを中心としたトレンドが注

なぜ初心者は webpackが解らないのか？- Why can’t you understand the webpack? - from 健人 井関 www.slideshare.net この記事バズってたけど、わからない人がよりわからなくなる、という点で問題だと思っていて、webpack の目的の本質的な部分から整理する必要があると思います。 (あと友人が webpack に挑戦していたので入門資料も兼ねてる) Webpack の本質的な部分は次の3つです。それ以外は全部おまけ機能だと思ってよいです。 ES Modules のエミュレート node_modules のリンカ 拡張子ごとの変形 Webpack が本当にやりたいこと こういうコードがあるとします。 // src/a.js export default () => console.log('hello'); // src/in

What's PWA ? Progressive Web Apps （プログレッシブ　ウェブ　アップス）の略 Googleが推進している、モバイルユーザーの体験（UX）向上を目的とするプロジェクト・技術のこと PWAは、わざわざApple StoreやGoogle Play Storeからインストールする必要はありません 不安定なネットワークでも迅速に起動し、関連性の高いプッシュ通知を送信することができます。 ホーム画面にアイコンを表示することができ、トップレベルの全画面表示で読み込むことができます。 ▼このように、Webサイトを直接ホームに追加することでアプリケーション化されます 導入事例 大手WEBサイトからで導入がはじまりつつあります コンバージョンアップにも効果的です Trivago https://www.trivago.com Twitter Lite https://mobi

シンプルに構成されたシングルページアプリケーションでは、サーバーはファイルを配信するだけで、画面を組み上げるための処理はブラウザ側で行われます。この方式におけるいくつかのデメリットを埋めるために考案されたのが、ある程度の画面構築をサーバー側で行う、サーバーサイドレンダリングです。今回は、サーバーサイドレンダリングの概要と、実際に使う場合のフレームワークの解説を行います。 対象読者 JavaScriptとWeb開発の基礎に理解がある方 Reactに興味／関心があり、これから学び始める方 前提環境 筆者の検証環境は以下の通りです。 macOS High Sierra 10.13.3 Node.js v10.4.1／npm 6.1.0 React 16.5.1 firebase-tools 4.2.1 create-next-app 0.5.9 Next.js 6.1.2 Babel 7.0.0

ReactJS: Keep Simple. Everything can be a component!

緊張すると声がアムロ・レイになる都元です。 ここからしばらく、キャッチコピーの迷走期が始まりますのでよろしくお付き合いください。 さて、去る 10/5 (金) 秋葉原 UDX にて開催された Developers.IO 2018、その中で 「クラスメソッドにおける Web API エンジニアリリングの基本的な考え方と標準定義」 という仰々しいタイトルで1講座持たせていただきました。 スライド 話したかったことと、話したこと 本セッションで話したかったことはだいぶ多岐にわたり、当然 40 分では話しきれないので、当初は次の 2 テーマに絞ってお話しようと考えてスライドを作っていました。 アプリケーション動作ログガイドライン RESTful / リソース指向 API 設計 しかし実際にスライドを作ってみると、それぞれで 40 分の規模となってしまい…。 ログの話は断腸の思いで見送りとさせていた

最近、同時にこなせる仕事量が減ったと感じることはありませんか？　もしくは、同時に仕事を進めていると今まででは考えられないミスを犯してしまうことはありませんか？ これはワーキングメモリ低下の可能性があります。脳の機能の一つである、このワーキングメモリは加齢に伴って低下します。しかし少しでも早いうちから、ワーキングメモリの仕組みを知っておけば、対策をとることが可能です。 ワーキングメモリは鍛えることよりも、解放してあげることのほうが重要です。なぜならワーキングメモリはトレーニングで拡張するものではないからです。効率よく解放してあげることで、空いたスペースに新たな記憶を入れることが可能になります。 では具体的にはどうすればいいのでしょうか？ 今回の記事では、認知症専門医長谷川嘉哉が、ワーキングメモリの仕組みや上手な解放の仕方について解説致します。仕事の効率をアップしたい方や、脳を若返らせたい方は

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

先日リリースした個人アプリBlogFeedbackを開発した動機と、開発の時系列、開発してみての感想（ネイティブ開発者から見たPWAとか）を書いていきます。リリースエントリにも書きましたが、このアプリはiOSネイティブアプリからWebアプリへの移植です。 TL;DR BlogFeedbackのケースではWebでもネイティブアプリとほぼ同等の体験を作ることができた ネイティブ歴が長くHTML/CSSに明るくなかったので、まずReact Native for WebでUIを組んでいって、自力でHTML/CSSが書けるようになってから脱React Native for Webした React / TypeScript / create-react-app / styled-components / storybook おすすめ ブログを書いている人はBlogFeedbackを使ってみて欲しい！

2. Who am I ? • 堀内 康弘 (ほりうち やすひろ) • 1978年生まれ 山梨県出身 • AWS テクニカルエバンジェリスト • 140回以上の講演 • 60回以上のハンズオン • 250本以上のブログ記事 Amazon Web Services ブログ http://aws.typepad.com/aws_japan/ • 10+ years web engineer in startups • Director of V-cube (perl), 2001 - 2006 • CTO of FlipClip (perl), 2006 - 2009 • CTO of gumi (python), 2009 - 2012 @horiuchi horiyasu フォロー歓迎!

お知らせ（2020/08/25 追記） Udemy で「webpack 最速入門（10,800 円 -> 2,000 円）という講座を公開しました。 本来の価格は10,800円ですが、上記リンクからアクセスすると2,400円で購入できます。 どんな内容？ webpack を利用したフロントエンド開発環境が構築できるようになる、ハンズオン形式の講座です。 詳細は上記のリンクのプレビュー動画で詳しく説明しています。 記事との内容の違い 記事の内容に、以下の内容や特徴が追加された感じです。 実務で利用できる開発環境を徐々に構築していくので、記事と比べて実践的な内容 ハンズオン形式の講座なので、手を動かしながら webpack を学習できる webpack の設定ファイルに追加する値の詳細をすべて解説 記事では解説していない細かい補足や、機能のご紹介 なぜ npm scripts を利用するのか

PWA Advent Calendar 2018 - Qiitaの16日目です。 PWAの主な技術要素として、以下がよく知られています。 Service Worker Webプッシュ CACHE API アプリ化 これらを自分で作りながら体験するのも良いですが、ハンズオンとして体験できるコンテンツを作成しました。こちらであればドキュメントを読みながら、徐々に理解度を深められるはずです。なお資料のライセンスはMIT Licenseになります。 hifivemania/pwa_handson_docs 以下、ハンズオンコンテンツの紹介です。 内容について 資料は大きく分けて3部構成になります。第1章 アプリの説明は共通です。 第1部 アプリ化を体験する マニフェストファイルを用いたアプリ化を体験します。 第2章 マニフェストファイルを作る 第3章 Service Workerのインストールと有

ウェブ業界の当たり前だと思っていることでも、同業他社の人には違う常識があるかもしれません。自分が業界多数の傾向と違うところはどこなのか・・・ この連載ではアンケートデータから国内のウェブ業界の傾向を分析します。 連載第3回目となる本記事ではウェブ業界の「HTMLコーディング」や「フロントエンド」を中心にアンケート結果を紹介します。アンケートは筆者のTwitterから実施していたものです。 CSSのレイアウトに使うのはFlexboxが多い ウェブサイトの大枠レイアウトを組むときに一番使っているCSSの種類を質問しました。 727票の回答があり「float」が32%、「Flexbox」が51%、「Grid Layout」が11%、「table」が6%でした。 Flexboxが最多となったのは、未対応ブラウザ（例：IE9）が無視できるシェアまで下がったことや、floatよりFlexboxのほうが

TypeScript不要論：型チェックは TypeScript や Flow じゃなくて JavaScript にやらせる。JavaScriptflowTypeScriptflowtype 開発効率のために型チェックを望む JavaScript が動的型言語なので、静的型言語にしてしまえば開発効率があがる、というアイデアがあって、それは確かなことかとも思います。プログラムを書いていて、ある変数の型がよくわからなければ正確な処理を行わせるのって、難しいですよね。 確かに開発効率、あがると思います。 実際に自分も開発効率をあげています。しかし、型チェックは行っていますが、TypeScript や Flow とかは使っていません。 TypeScript や Flow が人気を得てきていますが、そこで行う型チェックは、素のJavaScriptにやらせてしまうこともできるので、導入前に検討してみるの

TLS 1.3は現在策定中ですが、 前方秘匿性 の問題から RSAのみ を用いた鍵委共有が禁止になる見込みです。(詳細は後述します) HTTPSとは 次に、HTTPSです。 HTTPS - Wikipedia HTTPS（Hypertext Transfer Protocol Secure）は、HTTPによる通信を安全に（セキュアに）行うためのプロトコルおよびURIスキームである。 厳密に言えば、HTTPS自体はプロトコルではなく、SSL/TLSプロトコルによって提供される セキュアな接続の上でHTTP通信を行うこと をHTTPSと呼んでいる。 とのことです。 HTTPの説明を割愛するとすれば、「SSL/TLSでセキュアにHTTPをやる」というだけの説明で済んでしまいます。 最近では個人情報等の観点から全てのサイトをHTTPSにするような動きが見られますが、元々HTTPSが使われやすかった

この記事は、設計・アーキテクチャ Advent Calendar 2018 の第7日目の記事である。 はじめに この記事では、IT業界19年目の僕が実践している変更に強いアーキテクチャについて、出来るだけ難しい表現を避け、教科書的なありきたりな内容ではなく現場の肌感覚に近い切り口で「超ザックリ」な解説を試みてみようと思う。 普段自分がよく用いている実装パターンの紹介ともいうべきかも知れない。 この記事で説明すること いざ「変更に強いアーキテクチャとは」とズバリ訊かれても、一概に「これだ！」という答えはない。 プログラミング言語や、フレームワークによっても条件が異なるし、利用可能な技術や開発チームの特性、業務要件や運用要件の特性によっても様々であるし、インフラや開発プロセスまで含めて考えると考慮すべきことは無限にある。 ここでは主にソフトウェアの構造という観点から、"変更に強い" ということ

2019/06/21 追記 記事内容を Babel 7.4.0 に対応したものに更新しました。 主に追記した箇所は以下に関してです。 @babel/polyfill が非推奨になった（Babel 7.4.0 から） @babel/preset-envのuseBuiltInsを利用して、core-js@3から必要な polyfill のみを import できるようになった（Babel 7.4.0 から） Stage 4 未満のプロポーザルの polyfill も import する（Babel 7.4.0 から） （補足）@babel/polyfill と core-js@3 で、「どのブラウザでどの polyfill を import する必要があるかを判別するために利用するデータ」が異なる はじめに 今更ですが、Babel 7 の主な変更点をまとめた備忘録です。 ほとんどの内容は公式ド

はじめに エンジニアであればターミナル操作はとても多いと思います。(iTermを使っていますが。) いろいろな方のターミナル操作を横で見てきましたが、経験のあるエンジニアの方はターミナル操作が格段にはやいです。一方、駆け出しのエンジニアの方(学びたての人)は同じ操作をするにしても時間がとてもかかってしまっています。 にも関わらず、各プログラミング言語の習得にばかり目がいき、ターミナル操作をもっと効率よくしようとするにはなかなか至らないのが現実なのだろうと思います。 そこで、ターミナル操作の作業効率を上げる操作方法を僕なりにまとめてみようと思います。 ここで少しばかり時間を使って、ストレスのない、スピーディーな作業が出来るようになれるとハッピーですよね！ ★は独断でつけた重要度です。 もっと効率のよい操作方法と知っているという方がいらっしゃいましたら、コメントにてご教示頂けますと幸いです。

外部ファイル(モジュール)を読み込むことを目的に「import」と「require」が利用されているのを目にする機会があります。ここでは、それぞれの「違い」と「使い方」について整理します。 importとrequireの違い require構文 CommonJSの仕様でnode.jsがサポートしている書き方です。 Node.jsで実行するなら、そのまま利用できます。 ブラウザで実行するならWebpackなどを通じて依存関係を解決する必要があります。 module構文( import ) es2015 から利用できる書き方です。 対応ブラウザがまだ少ないです。 Babelを通じてrequire構文に変換後Webpackなどを通じて依存関係を解決する必要があります。 モジュールの種類 Node.jsを利用している際、以下のモジュールの違いを意識すると良いです。 コアモジュール Node.jsが

自分の2018年は振り返ると、「ひたすら現場で汗をかいた」1年だったと思います。もともと現在の会社に移ってきたのも「自分自身の知識、スキルをつねにアップデートし続けられる圧倒的に成長できる課題がある場所」を求めてのことだったので、そういう意味でこの1年は自分にとって「現場で体感できる“生きた”知見を多く吸収できた」年になりました。 個人的にデザイン界隈の軽い振り返り2018デザイン業界にも大きな動きがありました。2018年5月23日、経済産業省・特許庁が「産業競争力とデザインを考える研究会」の一環として、「デザイン経営宣言」を発表、「デザインと経営」について、明言したのは印象的でした。 また、デザイナーの情報発信も活発になった一年だったと思います。Basecampの坪田さんが主催するCXO nightや、Designshipのような大規模なデザインカンファレンス、Designscrambl

この記事はドワンゴ Advent Calendar 2018 25日目の記事です。 ドワンゴでニコニコ生放送のPC Webフロントエンジニアをやっています、 @kondei です。 いつまでも新人気分だったのに、いつの間にか入社5年目になり、この前ナチュラルに新卒に歴史的経緯を語る立場になっていて勝手にショックを受けました。いにしえの時代（最後期のとはいえ）から現在まで実際に開発して知っているフロントエンド開発者が数人になってしまって貴重なので、いい機会なのでまとめようと思います。 内容的には ニコニコ生放送の watch ページを MobX で作り直している話と重なる部分もあります。 はじめに まず、大人数のフロントエンド開発でアーキテクチャをどうするべきかの一つの解を得たので、それを述べます。 そして、どうしてそうなったのか、つまりニコニコ生放送が過去にどういう問題を抱えてきて、どうい

今年、携わった案件のほとんどがレスポンシブWebデザインでした。 今更ですが、私がレスポンシブWebデザインのコーディングでやっていることや気を付けていることを整理してみたいと思います。 User Agent Style Sheetの対応 ブラウザのデフォルトで設定されているスタイルシートの差異を埋めるCSSは「Normalize.css」をよく使います。 デザインによっては、Eric Meyer’s的なRest CSSの方がやりやすい場合もあるので、そこは見た目に臨機応変に対応してます。 CSS Flexible Box 私が受け持つ案件では、最新ブラウザ、及びInternet Explorer 11（IE11）のみの対応が増えたため、近年では、Flexible Boxをカジュアルに使用できるようになりました。 個人的には、広い画面では横並びだったものを、displayプロパティを変更す

20200116追記 chrome://flags/ より、「Experimental Web Platform features」を有効にすることで使用できます 20191210追記 モバイルブラウザを示すブーリアン値をもつSec-CH-UA-Mobileヘッダが仕様に追加されました。 ユーザエージェントは歴史的背景により、複雑な文字列が使用されています。 iOSでは User-Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 12_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/69.0.3497.105 Mobile/15E148 Safari/605.1Edgeでは User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64

追記: この件に関してエンジニアHubにもTypeScriptの記事を書きました: TypeScript再入門 ― 「がんばらないTypeScript」で、JavaScriptを“柔らかい”静的型付き言語に - エンジニアHub｜Webエンジニアのキャリアを考える！ TypeScriptに対する失望は2パターンあって、その理由は理解できるのですが、いずれにせよそこでTypeScriptを捨てる判断をするのはもったいないと思っています。この2つの失望を感じたとしてもなお、TypeScriptには導入する価値があると思っています。 パターン1: 実はJavaScriptに対する失望である そこらのブログやTwitterで観測していると、理由の7割くらいこれです。これは、TypeScriptが独立した言語ではなくJavaScriptへのトランスパイラ（言語変換ツール）であり、独立したランタイムを

Reduxのreducerはなんでreducerなのか、そもそもreducerってなんだ、みたいなことを調べたので書きます。間違ったこと書いてたら直します。 背景 Reduxでは、reducerってやつが状態の変更方法を知っています。reducerはReduxのドキュメントに以下のように書いてある通り、 https://redux.js.org/basics/reducers The reducer is a pure function that takes the previous state and an action, and returns the next state. 状態とアクションを受け取って、次の状態を返すやつです。 しかし、reducerという言葉はどういう意味なのでしょう。「状態とアクションを受け取って、次の状態を返すやつ」を、なぜreducerと呼ぶのでしょう。 W

JavaScriptでWeb的なプログラムを書いたことがある人は、XMLHttpRequestを使った経験もあるのではないかと思います。XMLHttpRequest，略してXHRは、JavaScript（+DOM）でサーバーとHTTP通信をするための唯一の方法としての地位を長らく保ってきましたが1、ここ3〜4年でより新しいAPIであるfetch APIが登場しました。fetch APIが出たばかりの頃は何だこのおもちゃはと正直思いましたが、いつの間にか仕様が充実していい感じになっていました。 皆さんは、この新しいAPIであるfetchをちゃんと使っているでしょうか。それとも、古いXHRを未だに使っているのでしょうか。この記事では、未だにfetchを使っていない人を主な対象としてfetchの使い方を解説します。（XHRと比較しながら解説するので$.ajaxとかaxiosとかしか使ったことがな

2019年版: 脱Babel!フロント/JS開発をTypeScriptに移行するための環境整備マニュアル環境構築TypeScriptライブラリReact TL;DR いろいろ書いていますが、一番書きたかったのは最初のライブラリと最後のReact Componentのプロジェクトの作り方ですね。ぱっとnpm installして、最初から型定義ファイルが入っていて、@typesを持っているライブラリを探したり、自分で.d.tsを書いたりしなくてもいい世界がやってきて欲しいな、という気持ちから書いています。 ここで紹介したTypeScript環境構築はすべて、自分用にYeomanのテンプレートとして作成したので、以下のジェネレータをインストールして選択したらそれでおしまいです。 @shibukawa/typescript (npmには公開していないので、checkoutしてビルドしてインストール

Frontend Conference Fukuoka 2018で発表した資料です。 https://frontend-conf.fukuoka.jp/ 各リンク先を確認する場合は、以下のpdfを参照ください http://tonkotsuboy.github.io/slides/181204_frontend_fukuoka/181208_frontendconffukuoka.pdf はてなブックマーク http://b.hatena.ne.jp/entry/s/speakerdeck.com/tonkotsuboy_com/2019nian-madenijian-zhi-siteokitai-cssjavascriptfalseshou-fa ご意見やご感想はTwitter ( https://twitter.com/tonkotsuboy_com ) までお寄せください。 #fec

はじめに この記事は 第2のドワンゴ Advent Calendar 2018 の9日目の記事です。 2018年3月にdwangoに内定をもらい、8月からアルバイトとして働かせてもらっているhiraike32と言います。 2019年4月からは新卒としてお世話になります。 アルバイトの配属はWebフロントエンドで、この4ヶ月間はReact/Reduxをゴリゴリと書いてきました。 今回はアドベントカレンダーの担当をいただいたので、学んできたことを生かしてWebを作ってみます。 dwango.co.jpをリメイクする dwango.co.jp ちょっと1からWebを作るのは荷が重かったので、dwangoの年代を感じる伝統のあるHPをReactで作り直してみました。 こんな感じです。 dwango-remake まあ、ほとんど同じデザインで作ったので、見た目自体はさほど変わりません。 変わったのは

https://frontend-conf.fukuoka.jp/

Enigmo Advent Calendar 2018の4日目の記事です。 この記事の目的 Enigmoが運営しているBUYMAでは古代から運用しているjQueryの他に、2016年頃から一部ページのフロントエンドをReact/Reduxで構築しています。 私自身もEnigmoに入社してからの約三年間でReact/Reduxアプリケーションの開発に多数携わってきましたので、そこで培った知見を共有したいと思います。 React/Reduxの利点 まずはじめに、ReactとReduxを使うメリットを再確認しておきたいと思います。 それぞれのメリットをしっかりと認識しておくことで、実装する際どう書くか迷ってしまった場合などにそのメリットを最大限活かす選択をすることができます。 Reactの利点 コンポーネント化が容易で再利用性が高い 状態をDOMから分離できる(Stateless) Reduxの

エンジニアの @_tohashi です。freee developers adevent calender 5 日目をやっていきます。 React などを使用した UI コンポーネントの実装、特に状態をどこで管理するかというのは実装者やアプリケーションの要件によって分かれがちなポイントであると思っていて、例としてはフォームの入力値、ダイアログの開閉、スピナーの表示などが挙げられます。各種ドキュメントや Issue, Example を見ても様々な流派があり、結局のところ Redux の FAQ にもあるようにこれが正解といったものはなくモデリングや要件に応じて適宜判断すべき話ではあるのですが、チーム開発においてはある程度方針を統一しておく必要があるでしょう。 本記事ではそうしたコンポーネントの状態管理のうち、特に非同期処理が絡んできて複雑になりがちなローディングについて自分の経験をもとに実

This is the evergreen copy of "Life of a Pixel". Video of the presentation at Chromium University (Nov 2020): http://bit.ly/loap-2020-video LIFE OF A Steve Kobes skobes@chromium.org Nov 2020 slides: bit.ly/lifeofapixel with special thanks to past presenters dknox@, chrishtr@, pdr@ "The unexamined...

結果はどうなったでしょうか。 自分が今使っているGoogle Chromeだとこうなりました。 結果は{a: 10}というオブジェクトです。まあ、これは当然ですね。3 + 5と入力すれば実行されて8が返ってくるのですから、{a: 10}というオブジェクトリテラルを書けば{a: 10}というオブジェクトが作られるのは当然です。 ……。 ここで、一部の人は「おいふざけんなよ」と思っているかもしれません。というのも、この例は環境によっては違う結果になるのです。具体的には、Chrome以外2のブラウザのREPL（FirefoxやEdgeなど）が該当します。あと、ts-nodeのREPLも該当するらしいです。これらの環境では、結果は{a: 10}ではなく次のようになります。 オブジェクトを作ったはずなのに結果が10とか意味不明ですね。そもそも、こんな簡単なプログラムで結果が全然違うとか、JavaSc

はじめに この記事は NTTテクノクロス Advent Calendar 2018 の13日目です。 NTTテクノクロスの @suzukima こと鈴木雅貴です。こんにちは。 社内ではHTML/CSS/JavaScript周りの技術を活かし、Webアプリの見た目や使い勝手を良くする仕事をしています。また、弊社の技術ブロクで、VRやCSS組版の話(止まっててすみません)について書いたりしています。 今回は、CSSの仕様がいい感じにまとめられているドキュメント CSS Snapshotを紹介します。コードはまったく出てきません！ CSS Snapshotとは CSSには数多くの仕様が存在するのですが、正直数が多く、使える/使えないを把握するのはなかなかに難しいです。 そんな人にオススメなのが、W3C CSS WGが発行するNote(ここでは参考資料と考えればよいでしょう)であります、CSS S

新しいプロジェクト始まると、開発者はいきなりプログラミングに飛びつく傾向があります。それもいいでしょう。結局、それが仕事なのですから。でも、時には飛びつく前にブレーキをかけて、ソフトウェア設計から手を付けるのもいい考えかもしれません。 “ホワイトボードを使う長袖のホワイトシャツの男性”（出典： Trent Erwin ／ Unsplash ) ソフトウェア設計にはいろいろな方法があります。UMLなどのモデリング言語のソフトウェアを利用することもできるし、 テキストを書いて 画像を使うこともでき、あるいはホワイトボードに描くこともできます。ここで大切なのは、ソフトウェアの開発中に設計を保存して再考できることです。設計は多少なりとも改善していかなければなりません。ですから、いつも最初からホワイトボードに描きたいというわけではないのならばデジタルデータで、設計を行うのも良さそうです。データの保存

ウェブの黎明期である2000年頃と比べてはるかにHTMLはコーディングしやすくなりました。10〜20年前のHTMLコーディングはどのようなものだったのでしょうか。 この記事では、NetscapeとIEのブラウザ戦争に決着がついた後の、IE6が全盛期となった2000年代のウェブサイト制作を振り返ります。懐かさに浸たり、現代のウェブの成り立ちに通じる温故知新な情報として参照ください。 テーブルレイアウト / spacer.gif XHTML・CSSが普及するまではテーブルレイアウトが一般的でした。テーブルレイアウトとはtableタグを使い、格子状にレイアウトしていく手法です。テーブルレイアウトは、デザインファイル（Image ReadyやFireworks）から画像を切り出す「スライス機能」と相性のいい方法でした。 <table border="0" cellspacing="0" cellp

あけましておめでとうございます！今年も本ブログをよろしくお願い致しやす🙏 さて、私はプログラミングに関する情報を調べる際、基本的に英語でググるようにしています。理由は単純で、英語のほうが圧倒的に情報量が多いからです。このエントリではいつも私が英語でググる際に使っているキーワードなどをメモしておきます。 実装した機能がうまく動かない場合 〜が表示されない メソッドなどが呼ばれない/実行されない プログラムで〜したい 2つの違いを知りたい 〜かどうかをチェックしたい 〜を検知したい 〜の実装方法を知りたい 〜についての最良の方法を知りたい あわせて読みたい 実装した機能がうまく動かない場合 〜 not work でググります。「動く」だからといって move で検索しても期待した検索結果にはなりません。 さらにOSバージョン等を指定する際は 〜 not work in iOS 12 のように

「変数のスコープは狭いほど良い」と妄信する 変数でもメソッド名でもクラス名でも言えることだが、単純に「スコープは狭いほどよい」という方針でプログラムすると、逆に保守性も可読性も悪いプログラムができあがることがけっこうある*1。 実際、「あちこちから頻繁にアクセスするようなオブジェクトやメソッド」は、スコープをぐっと広くしてしまった方が(場合によってはグローバル変数やグローバル関数にしてしまった方が)、いちいちパラメータ渡しのバケツリレーをせずに、オブジェクトや機能を使うことができ、プログラムの可読性も保守性もずっと向上することがけっこうある。 たとえば、プログラムのいろいろな箇所から比較的頻繁にアクセスする必要があるようなオブジェクトや機能がバインド(格納)された変数やメソッドのスコープをクラスやメソッド内のローカルにして、それを使うときは、いちいち各クラスやメソッドにパラメータ渡しのチェ