～2017/07/07(金)開催　Vue.js Tokyo v-meetup #4～ 会場：LINE株式会社　東京都新宿区新宿四丁目1番6号 JR新宿ミライナタワー23階 ■概要 Vue.js 日本ユーザーグループに主催による、Vue.js の MeetUp イベント開催します！！ ぜひ、参加して Vue.js について学び、Vue.js ユーザーと情報交換しましょう！ ■Agenda @kazupon LT1．WeexではじめるNative App開発　@KaraMisoRamen 株式会社オロ　フロントエンドエンジニア LT2．お仕事でNuxt.jsを使うか検討した話　@inouetakuya / いのうえたくや(おいちゃん) 氏 株式会社GMOペパボ　フロントエンドエンジニア LT3．Vue.jsのTransitionでいい感じのアプリにする　@nasum LT4．Vue.jsとFi

Hatena Engineer Seminar #8 https://connpass.com/event/60276/

Webサイトを公開した時に、サイトのパフォーマンス、SEO、セキュリティ、アクセシビリティ、コンテンツ、機能性の面から確認しておきたい項目がまとめられたチェックリストを紹介します。 2017年、最近のWebのテクノロジーや制作事情をふまえたものとなっており、ひと昔前とはいろいろ変化しています。 イラスト: Girls Design Materials 「Web Launch Checklist」は2017年最近のWeb制作事情をふまえて、サイト公開時の確認事項をまとめたものです。 確認項目は6つにカテゴリ分けされており、それぞれ最新の動向が取り入れられたものとなっています。 Web Launch Checklist Web Launch Checklist -GitHub そのまま利用してもよし、また編集して自分用のリストを作成することもできます。 パフォーマンスで確認したい項目 SEOで

こんにちは！Mackerelチームの id:amagitakayosi です。 先日開催された Hatena Engineer Seminar #8 のレポートをお届けします！ 目次 Hatena Engineer Seminarについて id:amagitakayosi 「はてなにおけるフロントエンド会の取り組み」 id:t_kyt 「がんばらないTypeScriptのはじめ方」 id:masawada 「フロントエンドの秩序は保たれているか?」(LT) id:akiym 「マンガビューワの遅延ロードのしくみ」(LT) パネルディスカッション 最後に Hatena Engineer Seminarについて developer.hatenastaff.com Hatena Engineer Seminar(以下「エンジニアセミナー」)は、はてなのサービスを開発する上で、エンジニアがどのよう

Reactの大きな特徴の1つは、ファイルを自由に構造できることです。自由ゆえ、パッと見て理解できる構造にならないこともあります。そのためStackOverflawや類似サイトでは、どんなファイルの構造にするか数多くの質問が寄せられています。ファイルの構造は主観的で、正しい答えがありません。本記事ではReactアプリを作成するとき、私が考えるツール選び、ファイル構造、コンポーネントの分解方法を解説します。 ビルドツールとエラー回避 アプリのビルドにWebpackを使ったことがあれば、私がWebpackの大ファンというのもうなずけるでしょう。Webpackは複雑なツールですが、バージョン2の優れた機能と新しい公式ドキュメントのおかげでだいぶ理解しやすくなりました。Webpackに触れてコンセプトを理解したら、とてつもないパワーを手にしたことになります。私はReact独自の仕様をしたJSXを含む

VTeacher 所属の Masaki Suzuki です。 ※各項目をできるだけ3行以内にまとめています デザイナーさんやフロントのエンジニアさん向けのReact.js（リアクトジェーエス）入門です。 「最近、『リアクト』と聞くけど、つまり何？」ってひとが対象です。 React.jsとは React.jsはUIのパーツ（構成部品）を作るためのライブラリです。 FacebookがOSSとして公開しています。 初回投稿日：2015年06月21日 この投稿はReactが話題になり始めた頃（6年前のv0.1の頃）、整理した記事です。 最新情報はこちら React Server Components 2021年からReactを始めるなら React Server Components 一択ではないか？ https://zenn.dev/rgbkids/articles/e58ef9b947b199

3, 4年前あたりから、jQuery無しでこう記述するとか、jQueryの一部の機能を代替する軽量スクリプトなどが出始めました。 2017年も半年が過ぎ、その状況はさらに変わり始めています。 (Now More Than Ever) You Might Not Need jQuery 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 現在のブラウザ事情 jQueryに替わる、JavaScriptの選択肢 マイクロライブラリの台頭 IE9への対応はポリフィルで NodeListの反復 jQueryは遅いのか？ jQueryについて私が嫌いなもの $なしでは生きていけない？ 現在のブラウザ事情 jQueryが2006年にリリースされてから、DOMとブラウザのAPIは飛躍的に向上しています。2013年に「You Might Not Ne

どうも。 ちゃんとしたブログを作ろうと思ってずっと何も書いていなかっためろたんです。 ちゃんとしたこと書こうと思います。 第1回 React.js 導入事例で話してきました。 第1回 React.js 導入事例で話してきました。 frontend-temple.connpass.com これです。 大体僕のぐちみたいになってしまっていたけど、まぁよかったかなって思ってる。 speakerdeck.com 発表資料は上のやつ。 僕のメールアドレスが隠れてなかったりしてちょっと焦ったりしてた。 準備不足ですね。 はい。 発表したってことはここまでにして、内容とかを書いていきたい。 よかったこと まぁこの辺はホント色んな所に書いてあるとおりでそれ以上のことはないかなと思います。 DOMの操作がなくなる？ 基本的にはなくなると思う。 実際やってると厳しいところが出てきて直接触らないといけないところ

にゃーん。これはねこの飼い主との思い出が詰まった投稿。 なお、画像は知人の飼い猫で、使用許可取ってない。 経緯 2011年11月にtornado.templateをJavaScriptに移植した。 使えはするけど、細かい機能まで作りきれてなかった。 ちょうど、今回の個人プロジェクトXで、 JavaScriptで書かれた テンプレートエンジン が必要になったので、メンテして使えるようにした。 前提の個人プロジェクトX 詳細は割愛。テンプレートエンジンに関して記載すると、 - X自体は外部のコード使いたくなかったので、巷で流行ってる？vanilla js。 - Closure Compilerは採用。 テンプレートエンジン ざっくりと整理。 こんな感じで使える。 var loader = new DictLoader({ "base.html": '<title>{% block title

はじめに 2017年6月17日(土)にng-japan 2017が開催されました。 その中でセッションに使用された資料が様々な場所で公開されていたので僭越ながらまとめさせていただきました。 公式 http://ngjapan.org ライブ配信(アーカイブ) ng-japan 2017ではライブ配信が行われていました。各セッションは以下のURLで視聴できます。 トラックA - https://www.youtube.com/watch?v=LbnLSD2pL18 トラックB - https://www.youtube.com/watch?v=P1X40cddHGU ご視聴ありがとうございました。ng-japan 2017のライブ配信を終了しました。 同じURLでアーカイブを見ることができますので、ブログ執筆や復習にご利用くださいhttps://t.co/7TraPhYohOhttps://

Angular座談会（後編）。コンポーネントの設計はどうする？ モジュール分割の方法は？ ビルド遅くない？ 開発者が生々しく語る現場の悩みとは。ng-japan 2017 JavaScriptフレームワークとして知られるAngularのイベント「ng-japan 2017」がAngular Japan User Group主催で6月17日に都内で開催されました。 本記事は「Angular座談会（前編）。コンポーネントの設計はどうする？ モジュール分割の方法は？ ビルド遅くない？ 開発者が生々しく語る現場の悩みとは。ng-japan 2017」の後編です。 頼りにしていたCrosswalkが開発終了に！ 白石氏　池田さんはCordovaとかでつらい経験があるんじゃないかと思うんですが。 池田氏 Cordovaはたしかにパフォーマンスチューニングがつらいところでした。 Cordovaをそのまま

Angular座談会（前編）。コンポーネントの設計はどうする？ モジュール分割の方法は？ ビルド遅くない？ 開発者が生々しく語る現場の悩みとは。ng-japan 2017 JavaScriptフレームワークとして知られるAngularのイベント「ng-japan 2017」がAngular Japan User Group主催で6月17日に都内で開催されました。 AngularはJavaScriptのフレームワークとして、PC用のWebサイトからモバイルアプリケーションまで、さまざまな開発現場で使われ始めています。ng-japan 2017で行われた「【座談会】Angular開発の生々しい話」は、そうした開発者が抱える技術的な悩み、課題などが率直に語られるセッションとなりました。 この記事ではその内容をダイジェストで紹介します。 【座談会】Angular開発の生々しい話 白石氏　この座談会

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

こんにちは、@mugi_uno です。 庭に花壇を作ったところ変に日焼けをしてしまい、半袖で外に出るのが恥ずかしいです。 つい最近、Misocaのフロントエンド周りのビルドをWebpackerを利用したものに置き換えました。 様々な知見が得られたので書いてみたいと思います。 Webpacker? フロントエンド用のビルドツールであるwebpackをRailsから簡単に使えるようにするためのRubyGemsです。 github.com Rails5.1からはこのWebpacker経由で、rails new の際に同時にwebpack用の設定ファイルを生成することもできます。 流行りのフロントエンド環境を構築しようとする際、最近ではwebpackを利用するケースが多いですが、実際にはES6やReactなどが混ざることも多く、慣れていないと設定するだけでもなかなか敷居が高いです。 さらに、Rai

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