スゲーかっこ悪いコードを、かっこよくしたい

Question

下記のHTMLとCSSを前提にして、「.one」から「200px」を取得するコードを作ってみました。

コードの意図としては、$('要素').style('width');だと、「HTMLのwidth」じゃなくて、「実際のwidth」が取得されるから、「HTMLのwidth」をなんとか取得してやろう、という感じです。

でもコードがスゲーかっこ悪いんです。

スゲーかっこいい人がいたら、教えてくれませんでしょうか？

###前提のHTMLとCSS
この「.one」から「200px」を取得したいのに、$('要素').style('width');だと取得できないんです。

<div class="flex">
  <div class="one" style="min-width:100px; width:200px;">
    <div class="a">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
  </div>
  <div class="two" style="min-width:500px;">
    <div class="a">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
  </div>
</div>

.flex {
    display: flex;
    justify-content: space-between;
    align-items: start;
    width: 500px;
}

###「.one」から「200px」を取得するコード
これが自分のコードですが、スゲーかっこ悪いっす。

/*
これでは「100px」が取得されてしまう
*/
const width = $('.one').css('width');
console.log (width ); // 100px 

/*
200px が取得できた！けどかっこ悪い！
*/
const attr = $('.one').attr('style');
console.log( getStyle( 'width', attr ) ); // 200px

function getStyle( want, attr ){
  let init = attr.split(';');
  let splited = [];
  $.each(init,function(i,v){
    const replaced = v.replace(/\s+/g, "");
    const key = replaced.split(':')[0];
    const val = replaced.split(':')[1];
    splited.push( { [key]:val } );
  });
  let result;
  $.each(splited,function(i,v){
    if( Object.keys(v)==want ){
    	result = v[want]
    }
  });
  return result;
}

Comments

[hermit19901127]

主の目的か分かりませんが、「かっこいいコードを組みたい」と存じます…。

アンチパターンとして、「すっごくカッコ悪いコード」が記された宝石箱のようなサイトを紹介いたします…
http://unkode-mania.net/
息抜きにどうぞ…

[hermit19901127]

かっこいいコードを組みたいのであれば「フレームワーク」「デザインパターン」等を、己が今学びたい言語と一緒に検索して学ぶの最適解です…

でも、時々は泥臭い実装を強いられる時はあります。

[tefu-tefu]

うける！おもしろいですね！

[hermit19901127]

誰が見てもうなづいてくれるような格好いいコードを組みたいと思ってた時期は自分もありますが、
でも、たまには泥臭いクソみたいなコードを打つ事を強いられることがあるのが現実ではあります…、が

設計部分から情報を得て、根本をクソにしない立ち周りをするための情報収集は大事ですね。

「学びたい言語 デザインパターン」とかで学ぶと、結構出てきますよ。

[tefu-tefu]

なるほどフレームワークにデザインパターンですか。勉強します。

[tefu-tefu]

知らない言葉だったので検索してみます！

[hermit19901127]

ここ余談ですが、「姿勢」からプログラマに入ろうとする貴殿の立ち回りは面白いです…助言いたします

まずプログラマとして形から入っていくなら「ハッカーズ」という書籍がおすすめです
https://www.amazon.co.jp/ハッカーズ-スティーブン・レビー/dp/487593100X/ref=sr_1_1?keywords=%E3%83%8F%E3%83%83%E3%82%AB%E3%83%BC%E3%82%BA&qid=1571749199&s=books&sr=1-1
プログラマ界のハリーポッターみたいな書籍です。昔から活躍していたハッカーの歴史になります。

[hermit19901127]

リーダブルコード-―より良いコードを書くためのシンプルで実践的なテクニック　と言う書籍もおススメです。
かっこいいプログラマを目指すならコードもかっこよくなければなりません。

[hermit19901127]

そのうえで、プログラムは「動機」が大事です。でもかっこいいプログラマに「ヒロイン」がいないのはつまらないですよね。
ならば、VisualStudioを導入してWPFで、自分にふさわしいヒロインの画像を閲覧するための最高のツールを開発するのも一考だと思います。
かっこいいプログラマには、二次元とはいえヒロインを立たせる舞台も必要です。

[tefu-tefu]

ヒロインとは！理系と文系の見事なコントラストとハーモニーあふれるアドバイス！知的でかっこいいっす！
『ハッカーズ』、50年代のMITですか！先日ナショジオで90年代ネットバブル時代のドラマを見たので興味ありです。ありがとうございます！

[hermit19901127]

ハッカーの根源理念は「自分が作ったものをシェアしてハッカー同士で便利な環境を作る」事にあると存じます…。そういう共存関係を築けると理想ですね。

[tefu-tefu]

ハッカーの根源理念、なかなか考えませんね。良い機会をありがとうございます。理念に則って勉強をすすめたいと思います！

Answer 1

というよりmin-width:100px; 必要ですか？
いらないです。結局width:200px; にしているのに、

なのでmin-widthを消して

const width = $('.one').css('width');
console.log(width);

でいいです。

---

どうしてもというなら

$('.one').css('min-width','unset');
const width = $('.one').width();
console.log(width);

Comments

[tefu-tefu]

それがいるから困ってるんです！前提を変えないで！

[kyoya0819]

> それがいるから困っているんです！
どんな状況か全くつかめません。
例えばどういう状況を想定していますか？

[kyoya0819]

追記しました。

[kyoya0819]

サンプルは
https://codepen.io/asuchi0819/pen/abbpPeY?editors=0011#0
で（alertにしてあります）

[tefu-tefu]

なるほどそうきましたか！あくまで前提のmin-widthを排除してやろうということですねｗ参考にさせていただきます。

[kyoya0819]

追記しました（2回目）

[tefu-tefu]

追記みました！unsetは考えてなかったですが、でも削除できるならそもそも質問は生じないので、とりあえずご参考にさせていただきます。

[kyoya0819]

色々要件不明瞭すぎです。
「カッコいい」を求めるのは良いですが最低限の知識とマナーとドキュメントはお読みください。
話はそれからです。

[tefu-tefu]

それからですね！不手際すみませんでした！

Answer 2

https://codepen.io/jun68ykt/pen/XWWpoER?editors=1111
のご回答が最高にかっこいいと確信したので、これをもって解決とさせていただきますー！

Comments

[Zuishin]

https://teratail.com/questions/218743

最低にかっこ悪い。

[tefu-tefu]

え？そちらのご回答かっこよくないですか？？正規表現とか、propertiesでオブジェクトを作るとか、スゲーかっこいいって思いました。

[Zuishin]

いや、あなたが。

[tefu-tefu]

なるほど！わざわざすみません！

[hermit19901127]

これからかっこよくなるターンだ。
質問するとき、こういうパターンに従うといいと思うぜ

https://qiita.com/seki_uk/items/4001423b3cd3db0dada7

[tanishi_a]

質問と直接関係ないこと、かつ余計なお世話で申し訳ないんですが、感想です。

(1) もう一方の質問の件
　回答が良いと思ったのなら高評価つけてあげてほしいなと思いました。
(2) この質問の件
　自己解決して勝手に終わらせた風に見えてしまう書き方なので
　「もう一方の質問」で解決したよ、とリンク貼る等したほうが分かりやすいと思いました。

そのへんが、回答くれたひとたちへの敬意がないように見えて、
マイナス評価がついてるのではないか、と勝手に推察しました。