[Vue warn]: Unknown custom element:
<a-entity> - did you register the component correctly?
For recursive components, make sure to provide the "name" option.
指定した範囲の整数、指定した文字列をランダムで取得する方法について class を利用して記述する。本記事では class の書き方、Math.floor(), Math.random() についてまとめる
前提知識
Javascript の基礎知識
ランダムクラスの作成
.js
//ランダムクラスの作成classRandom{intRange(min,max){// min ~ max の間のランダムな整数を取得(詳細は「乱数の取得（数値）方法」に記載）// min (include), max(exclude)returnMath.floor(min+(max-min)*Math.random())}}constgetRandomInt=()=>{//ランダムクラスのインスタンス化constRandom=newRandom();for(leti=0;i<20;i++){//ランダムクラスのintRangeの実行constans=Random.intRange(18,66);console.log(ans);}}getRandomInt();
<!DOCTYPE html><html><head><title>Title</title><!-- Required meta tags --><metacharset="utf-8"/><metaname="viewport"content="width=device-width, initial-scale=1, shrink-to-fit=no"/></head><body><pid="value"></p><p><buttonid="increment">Increment</button></p><script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script><script src="js/index.js"></script></body></html>
※小ネタ：VsCodeを使う際にjQueryを含んだ簡単なマークアップテンプレートを用意するには、Bootstrap 4, Font awesome 4, Font Awesome 5 Free & Pro snippets という拡張機能をインストールし、b4-$で入力補完すると手軽に生成できます。
VM108:1 Uncaught ReferenceError: $ is not defined
at <anonymous>:1:13
at processResponse (rails-ujs.js:283)
at rails-ujs.js:196
at XMLHttpRequest.xhr.onreadystatechange (rails-ujs.js:264)
importReactfrom'react';classLanguageextendsReact.Component{// Übergeben "props" mit Daten als Argumentrender(){return(<divclassName='language-item'><divclassName="language-name">{this.props.name}</div>
<imgclassName='language-image'src={this.props.image}/>
<divclassName="language-introduction">{this.props.introduction}</div>
</div>
);}}exportdefaultLanguage;
(行っていること)
データを持つpropsを引数に渡しています。
class構文だとこの処理に "this.props.image" など this を使うのが特徴的です。
Class構文(Language.js)
importReactfrom'react';importLanguagefrom'./Language'import'./App.css';classMainextendsReact.Component{render(){//Datenarray Definition (MAP)constlanguageList=[{name:'English',image:'http://hudehisa.sakura.ne.jp/gitgub_image/react_flag_england.png',introduction:'Diese Sprache wird vom Vereinigten Königreich und den Vereinigten Staaten gesprochen.'},{name:'Japanish',image:'http://hudehisa.sakura.ne.jp/gitgub_image/react_flag_japan.png',introduction:'Diese Sprache wird in Japan gesprochen.'},{name:'Deutsch',image:'http://hudehisa.sakura.ne.jp/gitgub_image/react_flag_germany.png',introduction:'Diese Sprache wird in Deutschland und der Schweiz gesprochen.'}];return(<div><h1>WelcheSprachesprichstdu?</h1>
<divclassName='language'>{/* Datenarray aufrufen */}{languageList.map((languageItem)=>{return(<Languagename={languageItem.name}image={languageItem.image}introduction={languageItem.introduction}/>
)})}</div>
</div>
);}}exportdefaultMain;
importReactfrom'react';importReactDOMfrom'react-dom';import'./App.css';importHeaderfrom'./Header';importFooterfrom'./Footer';importMainfrom'./Main';import*asserviceWorkerfrom'./serviceWorker';ReactDOM.render(<React.StrictMode><Header/><Main/><Footer/></React.StrictMode>,
document.getElementById('root'));// If you want your app to work offline and load faster, you can change// unregister() to register() below. Note this comes with some pitfalls.// Learn more about service workers: https://bit.ly/CRA-PWAserviceWorker.unregister();
importReactfrom'react';importLanguagefrom'./Language'import'./App.css';constMain=(props)=>{//Datenarray Definition (MAP)letlanguageList=[{name:'English',image:'http://hudehisa.sakura.ne.jp/gitgub_image/react_flag_england.png',introduction:'Diese Sprache wird vom Vereinigten Königreich und den Vereinigten Staaten gesprochen.'},{name:'Japanish',image:'http://hudehisa.sakura.ne.jp/gitgub_image/react_flag_japan.png',introduction:'Diese Sprache wird in Japan gesprochen.'},{name:'Deutsch',image:'http://hudehisa.sakura.ne.jp/gitgub_image/react_flag_germany.png',introduction:'Diese Sprache wird in Deutschland und der Schweiz gesprochen.'}];return(<><h1>WelcheSprachesprichstdu?</h1>
<divclassName='language'>{/* Datenarray aufrufen */}{languageList.map((languageItem)=>{return(<Languagename={languageItem.name}image={languageItem.image}introduction={languageItem.introduction}/>
)})}</div>
</>
)}exportdefaultMain;
importReactfrom'react';classLanguageextendsReact.Component{// Übergeben "props" mit Daten als Argumentrender(){return(<divclassName='language-item'><divclassName="language-name">{this.props.name}</div>
<imgclassName='language-image'src={this.props.image}/>
<divclassName="language-introduction">{this.props.introduction}</div>
</div>
);}}exportdefaultLanguage;
(行っていること)
データを持つpropsを引数に渡しています。
class構文だとこの処理に "this.props.image" など this を使うのが特徴的です。
Class構文(Language.js)
importReactfrom'react';importLanguagefrom'./Language'import'./App.css';classMainextendsReact.Component{render(){//Datenarray Definition (MAP)constlanguageList=[{name:'English',image:'http://hudehisa.sakura.ne.jp/gitgub_image/react_flag_england.png',introduction:'Diese Sprache wird vom Vereinigten Königreich und den Vereinigten Staaten gesprochen.'},{name:'Japanish',image:'http://hudehisa.sakura.ne.jp/gitgub_image/react_flag_japan.png',introduction:'Diese Sprache wird in Japan gesprochen.'},{name:'Deutsch',image:'http://hudehisa.sakura.ne.jp/gitgub_image/react_flag_germany.png',introduction:'Diese Sprache wird in Deutschland und der Schweiz gesprochen.'}];return(<div><h1>WelcheSprachesprichstdu?</h1>
<divclassName='language'>{/* Datenarray aufrufen */}{languageList.map((languageItem)=>{return(<Languagename={languageItem.name}image={languageItem.image}introduction={languageItem.introduction}/>
)})}</div>
</div>
);}}exportdefaultMain;
importReactfrom'react';importReactDOMfrom'react-dom';import'./App.css';importHeaderfrom'./Header';importFooterfrom'./Footer';importMainfrom'./Main';import*asserviceWorkerfrom'./serviceWorker';ReactDOM.render(<React.StrictMode><Header/><Main/><Footer/></React.StrictMode>,
document.getElementById('root'));// If you want your app to work offline and load faster, you can change// unregister() to register() below. Note this comes with some pitfalls.// Learn more about service workers: https://bit.ly/CRA-PWAserviceWorker.unregister();
importReactfrom'react';importLanguagefrom'./Language'import'./App.css';constMain=(props)=>{//Datenarray Definition (MAP)letlanguageList=[{name:'English',image:'http://hudehisa.sakura.ne.jp/gitgub_image/react_flag_england.png',introduction:'Diese Sprache wird vom Vereinigten Königreich und den Vereinigten Staaten gesprochen.'},{name:'Japanish',image:'http://hudehisa.sakura.ne.jp/gitgub_image/react_flag_japan.png',introduction:'Diese Sprache wird in Japan gesprochen.'},{name:'Deutsch',image:'http://hudehisa.sakura.ne.jp/gitgub_image/react_flag_germany.png',introduction:'Diese Sprache wird in Deutschland und der Schweiz gesprochen.'}];return(<><h1>WelcheSprachesprichstdu?</h1>
<divclassName='language'>{/* Datenarray aufrufen */}{languageList.map((languageItem)=>{return(<Languagename={languageItem.name}image={languageItem.image}introduction={languageItem.introduction}/>
)})}</div>
</>
)}exportdefaultMain;
