更新が必要なnpmパッケージを可視化する - Hatena Developer Blog
こんにちは。ウェブアプリケーションエンジニアのid:masawadaです。普段は、はてなブログチームで開発を行なっています。 今回は、日々の開発で生まれた困りごとを解消するために作ったyarn-outdated-formatterというツールを紹介します。 経緯 以前id:amagitakayosiが「フロントエンドPodcastはじめました - Hatena Developer Blog」にて書いたとおり、はてなには現在「フロントエンドエンジニア」という肩書きのメンバーはいません。はてなブログチームでも全員がバックエンド(Perl)とフロントエンド(JavaScript)両方のコードを書いており、どちらかというとバックエンドがメインのためクライアントサイドは片手間になりがちという問題がありました。 そこで、チーム内でFWG(フロントエンド・ワーキング・グループ)という会を組織しました。F
Webpack の本質とそれがよく分かるチュートリアル - おいちゃんと呼ばれています
DHH さんが Rails 5.1 に Webpack を取り入れる意向 を示し、webpacker gem なるものをつくり始めたようである。 今後ますます Webpack は利用されていくであろうが、一方で Webpack はいろんなことができ過ぎるが故にかえって本質が掴みにくい点があると思う。そういえばこの間も、同僚のデザイナーに Webpack がよく分からないんですけど？と質問されていたのだった。 そこで今回 Webpack の本質つまり Webpack がどんな問題を解決しようとしているものなのかについて整理する。また Webpack の中核となる機能をよく理解できるチュートリアルを見つけたので紹介する。 （フロントエンドエンジニア Advent Calendar 2016 - Qiita の 9日目が空いていたので、後付けだけどそこに登録した） Webpack がつくられた背
フロントエンドにおいてModel-View-Controllerは死んだのか？ | POSTD
多くのフロントエンド開発者が 一方向のアーキテクチャ を採用し始めている中で、Model-View-Controller（MVC）に未来はあるのでしょうか。 状況を把握するために、まずはフロントエンドのアーキテクチャの進化を振り返ってみたいと思います。 過去4年にわたり、私は多数のWebプロジェクトに取り組み、フロントエンドの構築、そしてフロントエンドとフレームワークの統合に多くの時間を費やしてきました。 2010年以前は、従来のウェブサイトにDOM操作を追加する場合は大抵JavaScript（ jQuery が書かれたプログラミング言語）が使用されていました。当時の開発者はアーキテクチャ自体についてはそれほど気に掛けていなかったと思います。コードベースを構造化する場合、 Revealing module pattern のようなものがあれば十分でした。 現在、多くの議論が交わされているフ
フロントエンドの適材適所と、エンジニアは何を学ぶべきか
Kaizen Platform フロントエンドエンジニアの中村です。 現在開発中のプロダクトでは、フロントエンド開発のフレームワークに React + Redux を採用しています。 当初は自分が一人で開発していましたが、チームのRubyエンジニアの皆が次々と React を習得、気がつけばフロントエンドの機能実装も担うようになり、おかげでフロントエンド専門の自分はUIデザインの補佐 & UXの向上へ手が回せるようになりました。 弊社のビジョンは『21世紀の新しい雇用と働き方の創出』ということで、会社の壁を越えた適材適所を目指しているのですが、社内でも「適材適所」が進んでいるというわけです。 畢竟、開発チームの皆さんが仕事しやすいよう、技術基盤の整備に邁進するのですが、新しいツールやライブラリを導入するにも適宜判断が必要になりまして、じゃあ何をどう選ぶかについて意見を持てる & 説明ができ
jQueryのその先へ〜Webフロントエンドの全体感をつかもう〜
O documento discute como escrever JavaScript de forma mais eficiente usando a biblioteca jQuery. Apresenta os principais conceitos como seletores, manipulação do DOM, eventos e efeitos que facilitam e simplificam o desenvolvimento front-end. Também fornece exemplos práticos de como implementar diversas funcionalidades com poucas linhas de código jQuery.
無料のPOSレジアプリを作った話。名古屋クリエイターズマーケットで活用するまでの苦労話
冒頭でも触れましたが、レジアプリは名古屋で毎年2回開催されているなごやクリエーターズマーケット（通称クリマ）の写真販売ブースに向けに制作しました。 「写真好きのつどい」名古屋クリエイターズマーケット https://photo-love-gathering.tumblr.com/ オフィシャルページも、簡単ですがTumblr上で制作してみました。 解決したかったこと私の参加しているクリマのブースでは、複数の出展者で写真にまつわる商品を販売しています。出展者が複数いるため、販売価格や商品が多様で、商品の管理や売上の管理、また会計方法が年々複雑になりました。 そこで、商品管理や売上集計の複雑さや手間を取り除くために、できるかぎりの事は自動化してしまおうと考えました。これがレジアプリを作ろうと思った切欠です。 現在、巷ではレジアプリが沢山存在しますが、解消したかったニーズと一致しなかったので、頑
npm-scripts で Web フロントエンド開発を管理する - アカベコマイリ
gulp なしの Web フロントエンド開発から 1 年あまり。その間、特に問題もなく npm-scripts で Web フロントエンド開発を管理できているので、この間に得られた運用知見や所感などをまとめてみる。 npm-scrips とは？ 最近の Web フロントエンド開発では AltJS/AltCSSのビルドやリリース用イメージ作成などに Node.js + npm を利用することが一般化してきた。そのためプロジェクトは package.json で管理することになる。package.json の提供する代表的な機能として プロジェクト情報の定義 プロジェクトの成果物を npm として配布するための情報 プロジェクト名、バージョン、作者などのメタデータを定義する 依存モジュール管理 プロジェクトが依存する npm とバージョンを管理する この情報へ基づき npm install コ
20160930 フロントエンド高速化 業務編 (社内勉強会)
業務内容が書いてあったのを省いたのでわかりにくくなっているとは思いますがアップロードしておきました。Read less
Seleniumアレルギーのための処方箋 - Qiita
何年も前、SeleniumやWebDriverの話で盛り上がった記憶があります。ただ、その当時はまだRailsなどバックエンド中心の文脈でした。今、フロントエンドに軸足が移る中、ブラウザテストの状況はどうなったのでしょう? 不思議なことに、フロントエンド界隈でそれほど話題に上がって来ないですよね (私の周りだけ?)。結構大事なのに。実は皆さん、「Seleniumアレルギー」なんじゃないですか? 公式サイトに漂う ゼロ年代感(下図)。Javaへの躊躇、「めんどくさい」と聞かされ続けた過去、無意識に避けてしまうのがSeleniumです。 ただ、フロントエンドの文脈でこそ、ブラウザテストは重要度を増しています。そこで「Selenium触りたくない病」の筆者が、 四苦八苦した背景 と、2016年だからこそ 見えてきた落とし所 を書いてみたいと思います。 註: 思ったより長文になってしまいました。先
最近のフロントエンドへの違和感 - nobkzのブログ
そういえば今日これらを読んでて d.hatena.ne.jp d.hatena.ne.jp その中で Mediumなど海外メディアでは、もはやこの種のツールを組み合わせたフロントエンド開発が当たり前として受け入れらており... はぁ? 「海外では当たり前()なんですねw 海外ってどこですか? タンザニア? パフアニューギニア? 」などみたいなリアクションを取りつつ、んで、まぁ、フロントエンドに関して、書きたかったことがあって、丁度良いので書いてみる。 というのも、フロントエンドが「凄く変化が早い」「ついていくのに大変」「新しい!!すごい」「これからは○○フレームワーク」だとかそんないろいろな意見が見られて、なんというか違和感を感じてるので今回はそれについて書く。 フロントエンドは変化が早い? まずこれ。僕は普通に違和感を感じている。確かに、jsフレームワークやライブラリとしたら、jQuer
フロントエンドで使ってるものがあまり変わってない - No Regrets in Bathing
自分のスタックはあまり変わっていない。ほとんど10年のツケを払っていない。学習能力が低いせいでもあり、選んだスタックがバージョンを重ねている成果でもある。 毎回使う フレームワーク：Vue.js 消耗、などの意見が散見されたが、べつに今でも便利に使えている。 browserifyやwebpackがあれば便利だけど、なくてもいい、ってバランスが好き データフローは特に考えない。状態がそこにあるので書き換えれば良い。 あまり頭を使わなくていいのが助かる Reactの考え方は好きなのだけど、よっしゃFluxやるぞって気持ちにはならず、Reactのみでよしなにやるソリューションが広まったらいいなと思う。 ビルドシステム： browserify / watchify substackの作るものはどれも品質が高いので、もうsubstack製品だけ使っていればいいやという気持ちになりがち。余計な処理が全
Angular2は「モダンJavaScriptの学習セット」！エキスパートによるディスカッションが熱かった（詳細な注釈付き！）
Angular2は「モダンJavaScriptの学習セット」！エキスパートによるディスカッションが熱かった（詳細な注釈付き！） 白石 俊平（HTML5 Experts.jp編集長） こんにちは、編集長の白石です。 去る3月9日、AngularJSのエキスパートによる座談会におじゃまさせていただきました。この座談会はAngularJS Japan User Groupの佐川 夫美雄さんの呼びかけによるもので、お題はもちろん、現在β版として公開中のAngular2。「ハードル高い」「Angular1と違いすぎる」など、いろんな情報も飛び交う中で、Angular2の魅力と課題について存分に語っていただきました。 Angular2に関心のある方にはもちろんのこと、Angular1しか触ったことのない方、そもそもAngularJSは初めてという方にとっても貴重なご意見が満載！エキスパート同士の会話と
【フロントエンド】新規 Web アプリケーション開発案件をふりかえってみた | PSYENCE:MEDIA
4 ヶ月あまり続いた新規開発案件がようやく落ち着きを見せたので、ここらで振り返りをしてみたいとします1)リリースまでに巻き取れなかった不具合や未実装箇所が幾つか残っているので、まだ気持ち的には終われていないのですが…。 サービスのおおまかなアウトライン コンシューマ ( 一般ユーザー ) 向けサービス ブラウザで動く Web アプリケーション ワンソースによるレスポンシブレイアウト サポートするブラウザは IE9 以降や Android4.x 以降のモダンブラウザのみ Ruby on Rails 多言語対応あり SEO 対策はそれなりに必要 わりとフワッとしか要件が決まっていないままスタートしたので、TRY & ERROR を繰り返しながらの開発 すごく大雑把ですが、だいたいこんな感じの Web アプリケーションです。これを踏まえてフロントエンドをどのように開発していくかを設計していきまし
最近のJavaScriptフレームワークの評価とか - albatrosary's blog
最近JavaScriptフレームワークについて色々指標のようなものを提示するブログが流行っているようだ。適材適所のもと、これは大規模向きとか小規模向きとか早いだの遅いだの。加え「gitなんか覚えなくたって死なない」とか、UXうえい！みたいな話だと思いきや内容がUIに限ったこととか。 一体最近のフロントエンドはどうなってるんだ？という雰囲気になってきましたので、少しメモ的に書きました。 JavaScriptフレームワークについて JavaScriptフレームワークの状況を見ると（フレームワークかライブラリかの議論は置いておき） DOM Web Components Virtual DOM に分かれます。JavaScriptフレームワーク初期の頃はDOMを直接操作するものが多く出現してきましたが、レスポンスなど扱いに難しい面もあり、他のアプローチが考案されました。それがWeb Compoent
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Universal JavaScript