Enum.Parseの使い方

C#ではint.Parsefloat.Parseを使って文字列型から数値型への変換ができます。これと同じような感じで文字列型からenum型に変換する方法がないかなと思って調べてみました。

ということで、SystemにあるEnum.ParseEnum.TryParseを使うと良いみたいです。

使い方は次のような感じです。

enum Example { Apple, Orange, Grape }

Enum.Parse

try {
  var value = (Example)Enum.Parse(typeof(Example), "Apple");
  // 実行したい処理
}
catch (ArgumentException) {
  // エラー処理
}

Enum.TryParse

Example value;

if (Enum.TryParse("Apple", out value)) {
  // 実行したい処理
}

大文字・小文字を無視して変換したい場合はignoreCase=falseとしてみてください。

リンク

Enum.Parse Method (System) | Microsoft Docs
https://docs.microsoft.com/en-us/dotnet/api/system.enum.parse?view=netframework-4.8

Enum.TryParse Method (System) | Microsoft Docs
https://docs.microsoft.com/en-us/dotnet/api/system.enum.tryparse?view=netframework-4.8

jQueryを使わないで要素を取得したりクリックイベントを設定したりする方法

jQueryを使った

$('img').click(function(){
  var text = $(this).attr('alt');
  console.log(text);
});

のような事を、jQueryを使わないJavaScriptで実装したいと思って少し調べてみました。

要素の取得

id属性が設定されている要素(例: <div id="example">example</div>)はgetElementByIdを使って取得できます。

var element = document.getElementById('example');
console.log(element);

特定のclass属性が設定されている要素(例: <div class="example">example</div>)を取得したい場合はgetElementsByClassNameを使います。

var elements = document.getElementsByClassName('example');
for (var i = 0; i < elements.length; ++i){
  var element = elements[i];
  console.log(element);
}

特定のタグが設定されている要素(例: <div>example</div>)を取得したい場合はgetElementsByTagNameを使います。

var elements = document.getElementsByTagName('div');
for (var i = 0; i < elements.length; ++i){
  var element = elements[i];
  console.log(element);
}

ちなみに、forの部分は

Array.prototype.filter.call(elements, function(element){
  console.log(element);
});

のような感じで書くこともできるみたいです。

要素にイベントを設定

取得した要素にクリックイベントを設定するにはonclickを使って

element.onclick = function(e){
  console.log('clicked');
};

のようにするか、addEventListenerを使って

element.addEventListener('click', function(e){
  console.log('clicked');
});

のような感じで設定できます。

<a>タグとか、クリックイベントが期待通りに設定できない場合は

e.preventDefault();

を試してみてください。

属性値の取得

例えば、<img>の属性値alt(例: <img src="example.jpg" alt="example">example)を取得したい場合はgetAttributeを使って次のようにします。

var text = element.getAttribute('alt');
console.log(text);

まとめ

ということで、最初の

$('img').click(function(){
  var text = $(this).attr('alt');
  console.log(text);
});

をjQueryを使わないで実装してみると、次のような感じになります。

var elements = document.getElementsByTagName('img');
Array.prototype.filter.call(elements, function(element){
  element.addEventListener('click', function(e){
    var text = e.getAttribute('alt');
    console.log(text);
  });
});

リンク

Document.getElementById() – Web APIs | MDN
https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById

Document.getElementsByClassName() – Web APIs | MDN
https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName

Document.getElementsByTagName() – Web APIs | MDN
https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByTagName

GlobalEventHandlers.onclick – Web APIs | MDN
https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick

EventTarget.addEventListener() – Web APIs | MDN
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

Event.preventDefault() – Web APIs | MDN
https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

Element.getAttribute() – Web APIs | MDN
https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute

jQuery elementを配列に変換する方法

<a>タグのhrefを調べたい場合

$('a').each(function(){
  console.log($(this).attr('href'));
}

のような感じで使うことが多かったのですが、使いたいプラグインの関係で配列に変換する必要があり、簡単な方法を調べてみました。

ということで、mapmakeArrayを使って次のような感じで配列に変換できるみたいです。

var elems = $('a').map(function(){ return $(this).attr('href'); });
var ar = $.makeArray(elems);

console.log(ar);

実行結果

Array(3) [ "https://example.com/", "https://example.net/", "https://example.org/" ]

リンク

jQuery.makeArray() | jQuery API Documentation
https://api.jquery.com/jquery.makeArray/

.map() | jQuery API Documentation
https://api.jquery.com/map/


jQuery elementをわざわざ配列に変換する機会は多くないと思いますが、必要になったら参考にしてみてください。