React.js, Vue.jsが使えない状況でメンテナンス性の高いJavaScriptを書く3つのポイント - エムスリーテックブログ
エムスリー エンジニアの岩本です。 この記事は エムスリー Advent Calendar 2018 の23日目の記事です。 React.jsやVue.jsを使えれば、開発のベストプラクティスなどがあるので、メンテナンス性の高いプログラムはずいぶんと書きやすくなったと思います。本当に仮想DOMの功績は大きいですね。 しかし、世の中にはそういったライブラリを使うことができないプロジェクトもあるわけです。古すぎて、一部分だけ最新のソースコードにすることが憚られたり、サイズの問題でライブラリを入れることができなかったり。。。 その場合どのように書けばメンテナンス性の高いプログラムを書くことができるのでしょうか。そこでIE6時代からJavaScriptをもりもりと書いている私なりのベストプラクティスを紹介します。 そもそもなぜメンテナンス性の悪いコードとなってしまうのか jQueryではセレクタで
混沌を極める jQuery のコードをいかにして Vue.js に頼らずに整理したか - Qiita
序 師走ですね。年の瀬が近づいてくると、酔っ払った元社員に絡まれることが稀によくあります。 私は jQuery から Vue.js への置き換えで何をやらかしたのか - Qiita 可能ならいきなりフロントエンドのライブラリを導入するよりも jQuery のみで MVVM パターンへ移行したほうがよかったかなぁと今になると思います。 結局のところ、jQuery で苦しんでいたのは、複雑な「状態」が表示やイベントハンドル系のコードとごっちゃになっていたから です。 うん、分かる。当時、この取組みを「大変そうだなー」と思いながら横で眺めていました。 まさか、続きを自分でやることになるとは夢にも思っていませんでしたが(｡◉ᆺ◉) ごあいさつ どうも、 @cesare と申します。 クラウドワークスでサービスの開発や運用を手がける傍ら、たまに機械学習とか VR とかに手を出して遊んでいます。 この
jQueryへの依存を外す方法 - dely engineering blog
こんにちは！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 へと少しづつ置き換えられ
中間データのスキーマを安全に変更する手順 - Qiita
ここのところデータパイプラインの配線繋ぎかえ工事をしていたのですが、とくに目立ったダウンタイムや障害なく終われたので、その基本パターンをメモしておきます。 主に繋ぎかえたのはデータベースかストレージ挟んだ多段バッチですが、ストリーミングやサービス間通信でも一方通行なら、だいたいこんな感じになるのではないかと思います。 カラム（フィールド）追加パターン とあるデータベース（ストレージ）のテーブル（パス）にカラム（フィールド） a があって、それを読み書きしているとします。この流れに b を加える手順を考えてみましょう。 ※用語は環境によって適当に読みかえてください。 テーブルにカラム b を NULL 許可 （オプショナル）で追加します。 この段階では b は NULL で書かれていて、読まれません。 カラム b の値を書くようにします。 カラム b の値を読むようにします。 この時、NUL
レガシーなフロントエンドコードを整理するためにどう立ち向かったか - Misoca開発者ブログ
2エントリ連続でこんにちは、@mugi_unoです。 名古屋には台湾ラーメンイタリアンという名物があるそうです。 富山県民の私には理解が追いつきませんでした。 フロントエンドでの金額計算処理 さて、Misocaは請求書作成サービスなので、金額計算処理が欠かせません。 フロントエンドも例外ではなく、消費税額や合計額を算出するロジックが存在します。 機能変更が必要になった!! 諸事情により、そのロジックに変更を加える必要が生じました。 長くプロダクトを支えてくれていた存在ですが、内容的にはいわゆるレガシーなコードで、たびたび開発者ミーティングでも課題として挙げられることがありました。 git log で確認してみると、該当コードに対しての機能的な変更は2015年の冬から行われていません。 何が問題だったのか？ DOM操作と計算ロジックの混在 Misocaでは、新しくコードを書く際はVueやRe
Announcing the Second Edition of "Refactoring"
For the past two years, I've been working on a second edition of my book "Refactoring". Here I have details about the new edition and some memos describing my thoughts in the last months of this project. The book is now available and you can buy it from informit (the web presence of the publisher), Amazon, or your favorite book seller. Purchasing the book gives you access to the canonical web edit
同僚のコードレビューでこんなにクラスの設計が良くなったという話 - Qiita
弊社では、案件とは関係のないプロジェクトでも業務時間中にみんなにコードレビューを依頼できる時間が確保されています(参加は任意)。案件のコードレビューを依頼したり、ちょっとした個人の制作物を見てらったりと使い方は色々です。 先日、TypeScriptの練習にQiitaのAPIを叩いていて記事を表示するブログウィジェットを作成しました。このウィジェットのレビューを依頼したところ、クラスの設計について具体的な指摘と、それに対する改善を経験できたのでこの記事に記載します。 今回作ったQiitaWidgetの要件 Qiitaの公式APIV2から記事とユーザー情報を取得し、HTMLテンプレートに表示する 投稿の合計いいね数を算出するために、あるユーザーの投稿を全件取得する (このために複数回リクエストの送信とレスポンスデータの結合を行う) パラメータによってユーザー、いいね数によるソート、表示件数、ラ
Extracting Logic from React Components - Jack Franklin
July 17, 2017Extracting Logic from React ComponentsIn the previous screencast we took a React component that was doing too much and refactored it, splitting it into two components that are easier to maintain, use and test. Although I'd recommend watching that video first, you don't need to have watched it to read this blog post. You can find all the code on GitHub if you'd like to run it locally.
Refactoring JavaScript
If your JavaScript is a mess, frameworks can only do so much to help. No matter what framework, "compiles-to-JS" language, or library you use, bugs and performance concerns will always be an issue if the underlying quality of your JavaScript is poor. With this hands-on guide, you’ll learn how test and refactor your existing code to help reduce complexity, improve readability, and gain confidence i
脱jQueryのためにしたこと - Qiita
この記事は加筆して「脱jQueryのためにしたこと - ICS MEDIA」に引っ越しました。 64000PV、480いいねとフロントエンド界隈でご好評いただいた内容です。ぜひご覧ください。 ※Google検索で辿り着いた方にリンク切れとなっては申し訳ないので、元の記事を残しています。ご了承ください。 Register as a new user and use Qiita more conveniently You get articles that match your needsYou can efficiently read back useful informationYou can use dark themeWhat you can do with signing up
Refactoring 30000 lines of JS with types - Reaktor
30000 lines of client-side JavaScript. No tests. Two difficult TV deployment platforms with poor tooling. Strong dependencies on poorly documented
FLOCSSを使ってCSSファイルを20,000行から9,000行にした話 - Qiita
入社して僕が最初にアサインされたのがこのプロジェクト。 サービスをスタートさせたのは今年の２月。最初は外注でとりあえずサービスを作ることに集中していたらしい... その結果、どのスタイルがどこに作用するか全く分からないCSSの魔境でした。 これでは簡単なページを追加するにも一苦労。 そこで、20,000行あるCSSファイルのリファクタリングに踏み切りました。 当時の問題 スタートアップのサービスなのでもっと機能を追加したり、変更したりしたいと言う要望は日に日に大きくなっていました。 一方で、実際に機能を作ったとしてもそれを view に反映させるのも日に日に苦しくなっていました。 僕たちを苦しめていた理由は以下の通りです。 どこにスタイルが作用しているか分からないので、CSSを安易に変更ができない。 新しい部品を付け足す時にCSSの影響範囲を考慮しなくてはならず、プロダクトのUI変更が困難
Refactoring a JavaScript video store
The simple example of calculating and formatting a bill for a video store opened my refactoring book in 1999. If done in modern JavaScript, there are several directions you could take the refactoring. I explore four here: refactoring to top level functions, to a nested function with a dispatcher, using classes, and transformation using an intermediate data structure. 18 May 2016 Many years ago, wh
もう失敗しない！プロジェクト書きなおして、最高の開発環境を手に入れる - クックパッド開発者ブログ
ちくしょう、プロジェクトまるごと書き直したい 自分で作り始めたプロジェクトであっても、途中から相乗りしたプロジェクトであっても、誰もが一度は体験する気持ちではないでしょうか。 私が携わっている「おいしい健康」も例外ではありません。 プロジェクトを全て書き直したいと思う一方で、全てのコードを書き換えようとするアプローチは、これまで作ってきた見た目や機能、ビジネスロジックを再現しきれずに潰えてしまう。という話しも良く聞きます。 実は全て書き直したいのではなく、その大きな目的としては以下のようなモノがあるのではないでしょうか。 シンプルな作りに変えたい 不要なコードが重なり、動作が遅くなっているところを解消したい 新しいライブラリ、新しい技術を取り込めるようにしたい 今回は、このような目的を達成しつつ、プロジェクトの書き換えを行った私達の話をしたいと思います。 cookpad本体からのプロジェク
Refactor.io - Share your code instantly for refactoring and code review.
Refactor.io. Share your code instantly for refactoring and code review.
GitHubエンジニアによる「リファクタリングにおける冒険とは」の翻訳 - Qiita
GitHubのエンジニア Ben Lavender によるYAPC2015のセッション「Adventures in Refactoring」のスライドが公開されたので、翻訳を試みました。 注）私はセッションには行っていないため、いくつかわからない箇所がありますので、編集リクエストを送って頂けると幸いです（同時通訳の内容を公開してくれたら、もう少しわかるのですが・・・）。 ちなみに英語ですが動画も公開されています。 Adventures in Refactoring / Ben Lavender リファクタリングとは？ （できれば）振る舞いを変えずにコードを変えること 第1部 リファクタリングする理由 リファクタリングする理由として悪いもの 一貫性を上げる
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Redux Refactoring Patterns with @ngrx/platform
GitHub - southpolesteve/esm-refactor: A tool for refactoring JavaScript Modules
GitHub - jurassix/refactoring-codemods: Refactoring support for JavaScript via jscodeshift codemods
GitHub - davidmfoley/node-trucker: import-aware file management and dependency analysis for javascript
