フロントエンドエキスパートチームの@koba04です。 10/25,26の2日間、ネバダで開催されたReact Conf 2018に参加して来ました。 今回は、気になっている人も多いKeynoteで発表されたHooksとConcurrent Reactについて紹介したいと思います。 今回紹介された内容は、2014年後半くらいからReactを見てきた中でも、最も大きな変更であると言えます。 React Conf 2018 React Conf 2018のストラップ カンファレンスのトーク自体はすでにYouTubeで公開されているので、全トーク観ることが出来ます。 https://www.youtube.com/playlist?list=PLPxbbTqCLbGE5AihOSExAa4wUM-P42EIJ Hooks Hooksは、GitHub上でも一切公開されておらず、React Conf

某社で自分が React/Redux + TypeScript などの講習をやってみた結果、TypeScript 入門用資料が必要だと思って書いたやつです。 このドキュメントのターゲット TypeScript で書かれたプロジェクトに参加する人 TypeScript を導入するために、その事前知識が必要な人 このドキュメントの読み方 ES2015 for Beginners ES2015 for ES5 Programmers ES Modules 非同期表現: Promise と async/await TypeScript エコシステム編 自分が React/Redux などの講習でいろいろやってみた結果、 ES2015 と TypeScript を同時に教えると、初学者は何がどの概念に由来するかの区別が出来ずに混乱します。なので、ES5 -> ES2015, ES2015 -> Ty

YES! Nuxt 2.0 is finally out!We are really excited to release Nuxt.js v2.0.0, a major release with a lot of improvements. We recommend to look at the GitHub release note to know more about the technical details 🕵️‍. This article has been published on stage, see https://twitter.com/nuxt_js/status/1043092485310955520 Create-nuxt-appWe are proud to announce our official scaffolding tool that takes o

Vue School の無料コース「Vuex for Everyone」を受講した．Vue.js 初心者でも受講できるレベルになっているし，今まで Vue.js を書いたことはあるけど，Vuex はまだ使ったことがないという人にもオススメできる．進め方にもよるけど，写経するとしても2,3時間あれば終わる． Vuex for Everyone 今回受講した「Vuex for Everyone」の題材は「shopping-cart」で，ステップバイステップに実装を進めていく．動作確認をしながら，機能を追加したり，リファクタリングをしたりする． vueschool.io 動画を見るとわかるけど，とにかく実装スピードが早いので，写経する場合は何度も戻して見直す必要がある．ただ困ったときは Vue School の GitHub にセッションごとにコミットされているので，それを活用すればオッケー．

JavaScipt についてのハンズオンを開催している JSLounge が提供する、プロフェッショナルによる上質な資料を使って、自宅で最新技術をキャッチアップできる資料販売サイトです。

Aug 11, 2018 このブログはこちらの翻訳ブログです。 過去数ヶ月にわたり、私たちは Vue アプリケーション用の標準ビルドツールチェーン、次世代の Vue CLI について懸命に取り組んできました。 今日私たちは Vue CLI 3.0 のリリースとそれに付随する全てのエキサイティングな機能を発表することにわくわくしています。 豊富なビルトイン機能Vue CLI 3 は以前のバージョンとは全く別物です。書換えのゴールは以下の 2 つです： モダンなフロントエンドツール、特に複数のツールを混在させる場合の構築疲れを軽減する； どんな Vue アプリのデフォルトにもなるよう、可能な限りツールチェインにベストプラクティスを組込む 核として、 Vue CLI は webpack 4 の上に構築された事前設定済みのビルド設定を提供します。開発者が必要とする構成の量を最小限に抑えることを目指

マイクロアドでアプリケーションエンジニアをしているNです。 日々、バッチを作ったりWEBアプリケーションを作ったりしています。 今回はライトにJavaScriptフレームワークを導入したお話を書いていきたいと思います。 導入のきっかけ その１~きっかけのきっかけ~ マイクロアドではいろいろな用途でWEBアプリケーションを利用しています。 当然ではありますが一部特殊な用途ではない限りJavaScriptでの実装が含まれています。 これらのいくつかにはjQueryが使われており、現在も運用されています。 そんな中、 あるWEBアプリケーションを刷新する機会があり改めてjQueryを多用したコードを見返すことに、、、 その２ ~jQueryって非常に強力~ jQueryを多用した実装を見返して、改めて思ったのが jQueryって非常に強力。 一方で、この強力なライブラリになんでもお世話になってい

｜DMM inside

AirBnb がReactNativeをやめることが話題になってますね。 medium.com RNの未熟さ、社のRNのForkのメンテナンスコスト、JavaScriptのスケールのしなさ、JavaScriptCoreの実装の違い、クラッシュレポートが信頼できない、開発者は主に片方のプラットフォームしか知らないのでOSSのライブラリはバグってる、結局ブリッジを描く人間が必要、人が雇えない、山ほど出てくる…— Hello (@rejasupotaro) 2018年6月19日 以下私見です。 RN採用可否のフローチャート 自分がRN使いたいといって相談された際にはこういう感じで返してます。基本的にはExpo 採用可能か否かで判断してます。 Expo ではじめる ReactNative 開発環境 - Qiita プラットフォームごとにUXを突き詰める必要がある => RN やめとけ Q: 社内に

2018年4月21日、株式会社サイバーエージェントが主催するイベント「Battle Conference U30」が開催されました。30歳以下のエンジニアによる30歳以下のエンジニアのための技術カンファレンスである本イベントには、さまざまな領域で活躍する若手が登壇。企業の枠を超えて、自身の技術・事業・キャリアに関する知見を発表しました。「Nuxt.jsとGraphQLから見えたWeb開発の未来」に登壇したのは、株式会社スマートドライブの大木尊紀氏。Nuxt.jsとGraphQLを開発に用いるメリットと、今後のフロントエンドエンジニアの価値について語りました。 Nuxt.jsとGraphQLに見る、Web開発の未来 大木尊紀氏（以下、大木）：よろしくお願いします。「Nuxt.jsとGraphQLから見えたWeb開発の未来」とけっこう大層なこと言ってますけど、最後までお聞きください。 大木尊紀

M3 ではグローバル CTO の Brian が、サービスの海外展開や技術基盤の共通化などを積極的に進めています。その中のプロジェクトの１つとして、アメリカで提供している医療ニュースのリニューアルにチャレンジしています。2018 年 5 月には日本オフィス所属のイギリス人エンジニア @christophrowley と日本人のエンジニア (筆者)が 1 ヶ月ほどニューヨークに出張してリニューアルの検討をしてきました。 ( ↑ Chrisが撮影してくれた NY の写真 ) 今回の記事は、リニューアルで採用を検討している GraphQL を Apollo + JavaScript で作るチュートリアルです。 TL;DR Apollo を使って、クライアントサイド、バックエンドを作るチュートリアルを紹介 英語・海外での開発に挑戦したいエンジニアを絶賛募集中です。もし興味があればランチ行きましょう

Nuxt Meetup#2 ブログ枠ギリギリ参加のものです。というわけで参加レポ＆感想などをば。 自己紹介ですが株式会社GEEKってところでマークアップとフロントエンドやってますyamanokuと申します。社内メインはReact.jsですが個人的にはVue.js推しです。 Nuxtに関しては自サイトのリニューアルとかPWAアプリとかで使わせてもらってます。あと去年のVue.js アドベントカレンダーにNuxt感想記事とかも載せてます。 前回第１回は株式会社SCOUTERにて開催され、そこまで規模は大きくはなかったのですが、２回目となる今回はメルペイ社協力の下、100人を超える参加者がくるというNuxt.jsへの興味の高さが伺える人数でした（途中申し込み人数追加も何回かあった模様）。 ・sue71 「Nuxt＋TypeScript事始め」 ・corosuke_k「Web初心者がNuxtでサイ

Introduction Developers have a number of choices today when it comes to selecting a JavaScript framework or UI library for building scalable web apps. React / Next.js, Vue / Nuxt, Angular…the list of solutions continues to grow, but just how do you decide on which to use in a sea of so many options? To help you understand the options, we created TodoMVC - a project which has offered the same Todo

1年くらい前に仕事でNuxt.jsをいじる機会があったんだけどそれ以来使ってなかった。 ただ、GW中にNuxt tech bookを読んだところ久々にいじりたくなってしまい。 そこでちょうどFirebase HostingとPWA化に関して調べてたとこだったので、Nuxt.jsのサイトをPWA化してFirebase Hostingで動かす手慣らしでもしておこうかと思いやってみた。 ただ、普通にやっても面白くないので一応Lighthouseのスコアを満点にすることを目指してみることにした。 コンテンツはNuxtのスターターキットの初期生成されるページ。このページを対象に行う。 以下、Firebase Hostingの設定・Nuxtのプロジェクト作成・PWA設定・Lighthouseのスコア上げの流れで説明してます。 一応ソースはこちらで。 nuxt-firebase-hosting-samp

KMC春合宿2018での発表資料です

Nuxt.jsのプロジェクトで使用しているパフォーマンス向上のためのテクニックです。 .nuxt/dist と static ディレクトリはNginxから直接配信する 静的ファイルはNuxt.jsのサーバを使わずにNginxから配信します。CDNなどを使うともっと効果的でしょう。 location / { root /path/to/nuxt/static; try_files $uri @proxy; } location @proxy { proxy_pass http://127.0.0.1:3000; } location /_nuxt { alias /path/to/nuxt/.nuxt/dist; } APIエンドポイントをサーバーとクライアントで分ける SSRのサーバとAPIサーバが同一LAN内の場合は、余計なネットワークコストを発生させないように、SSR時はLAN内で通信

React/Reduxの新規サービスにおいて、 1.UIの改善 2.コードの改善 3.得られた知見 について話します。 twitterはこちら。 https://twitter.com/shikichee