HTMLもといMarkdown内で行列演算とか微分とかやって欲しいな～っと思いググったら， Javascriptに標準でMathというライブラリがあるみたい．しかし，それには微分や行列演算の機能がない．他にいいのはないかってことで，math.jsを使ったJavascriptを埋め込むのが良さそう．．．ということに．

math.jsの導入

例のごとく，はてなブログの管理画面からデザイン＝＞ヘッダより，

<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/7.0.2/math.js"></script>

を追記すれば，はてなブログでmath.jsが使えます．

また，出力する際にMathJaxというJavascriptも使用するので， www.halu7.com で書いてあるように，

<script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=TeX-MML-AM_CHTML' async></script>
<script type="text/x-mathjax-config">
 MathJax.Hub.Config({
 tex2jax: {
 inlineMath: [["\\(","\\)"] ],
 displayMath: [ ['$$','$$'], ["\\[","\\]"] ]
 }
 });
</script>

を以上と同じようにヘッダ部分に追記しておけば良いかと思います～

math.js使ってみた

微分

math.derivative()で微分．

行列

inputタグから入力された数字は一旦Number()でデータ型を変更してからmath.jsのfunctionに渡さないと，動いてくれません．使う場合は忘れずに．～

任意の零行列（2階のテンソル）の作成

単位行列を作成

identity()ならば数値入れるだけでできますわ～

行列演算

ボタンをクリックすると，3行2列の行列と2行3列の行列がランダムに生成されて，そのアダマール積と行列積が示されます．

たまに行列の生成あたりでエラーになるかな？生成というより表示でかも．．．その際は再度ボタンをクリックしてください．

アダマール積（要素ごとの積）

dotMultiply()では行列の要素ごとの積演算になります．

行列積

math.jsではdotはベクトル演算のみですが，multiply()であれば行列積も可能です．

参考

Javascriptによるフォーム入力は以下サイトを参考，というよりコピペ．

Javascriptのmath.jsの結果を $\LaTeX$ 変換して出力する方法．

Javascriptのコード

"F12"キーでページのソースコード見ても同じだとは思いますが，一応載せときますわ．

<form id="form0" action="#">
  微分したい数式：
  <input type="text" id="input_message0-0" value="x^3+3*x^2+2*x"><br>
  何で微分する？：
  <input type="text" id="input_message0-1" value="x"><br>
  <div align="center"><input type="button" onclick="func0()" value="送信"></div>
</form>
<script language="javascript" type="text/javascript">
function func0() {
var input_message = math.derivative(document.getElementById("input_message0-0").value,document.getElementById("input_message0-1").value);
document.getElementById("output_message0_0").innerHTML = `そのまま：${input_message}`;
document.getElementById("output_message0_1").innerHTML ='$$\\LaTeX 変換：' + math.parse(String(input_message)).toTex() + '$$';
MathJax.Hub.Typeset(document.getElementById("output_message0_1"))
}
</script>
<div align="center">
<div id="output_message0_0"></div>
<div id="output_message0_1"></div>
</div>
<form id="form1" action="#">
  <input type="number" id="input_message1" value="">
  <input type="button" onclick="func1()" value="送信">
</form>
<div id="output_message1"></div>
<script language="javascript" type="text/javascript">
function func1() {
var input_message = Number(document.getElementById("input_message1").value);
document.getElementById("output_message1").innerHTML ='$$' + math.parse(String(math.zeros(input_message,input_message))).toTex() + '$$';
MathJax.Hub.Typeset(document.getElementById("output_message1"))
}
</script>
<form id="form2_1" action="#">
  <input type="number" id="input_message2_1" value="">
  <input type="button" onclick="func2_1()" value="送信">
</form>
<div id="output_message2_1"></div>
<script language="javascript" type="text/javascript">
function func2_1() {
var input_message = Number(document.getElementById("input_message2_1").value);
document.getElementById("output_message2_1").innerHTML ='$$' + math.parse(String(math.diag(math.ones(input_message)))).toTex() + '$$';
MathJax.Hub.Typeset(document.getElementById("output_message2_1"))
}
</script>
<form id="form2_2" action="#">
  <input type="number" id="input_message2_2" value="">
  <input type="button" onclick="func2_2()" value="送信">
</form>
<div id="output_message2_2"></div>
<script language="javascript" type="text/javascript">
function func2_2() {
var input_message = Number(document.getElementById("input_message2_2").value);
document.getElementById("output_message2_2").innerHTML ='$$' + math.parse(String(math.identity(input_message))).toTex() + '$$';
MathJax.Hub.Typeset(document.getElementById("output_message2_2"))
}
</script>
<form id="form3" action="#">
  <div align="center"><input type="button" onclick="func3()" value="ランダムに行列を生成"></div>
</form>
<script language="javascript" type="text/javascript">
function func3() {
// ランダムな行列を生成
var matrix_a = [];
for (let i =0; i<6; i++){
  matrix_a.push(Math.floor(Math.random()*11))
}
matrix_a = math.reshape(math.matrix(matrix_a),[2,3])

var matrix_b = [];
for (let i =0; i<6; i++){
  matrix_b.push(Math.floor(Math.random()*11))
}
matrix_b = math.reshape(math.matrix(matrix_b),[3,2])
// 行列を表示
matrix_a_tex = math.parse(String(matrix_a)).toTex() 
document.getElementById("output_message3").innerHTML ='$$\\text{行列A}=' + matrix_a_tex + '$$';
MathJax.Hub.Typeset(document.getElementById("output_message3"))
matrix_b_tex = math.parse(String(matrix_b)).toTex()
document.getElementById("output_message4").innerHTML ='$$\\text{行列B}=' + matrix_b_tex + '$$';
MathJax.Hub.Typeset(document.getElementById("output_message4"))
// アダマール積
document.getElementById("output_message5").innerHTML ='$$\\text{行列A} \\circ \\text{行列A}=' + math.parse(String( math.dotMultiply(matrix_a,matrix_a))).toTex() + '$$';
MathJax.Hub.Typeset(document.getElementById("output_message5"))
document.getElementById("output_message6").innerHTML ='$$\\text{行列B} \\circ \\text{行列B}=' + math.parse(String( math.dotMultiply(matrix_b,matrix_b))).toTex() + '$$';
MathJax.Hub.Typeset(document.getElementById("output_message6"))
// 行列積
document.getElementById("output_message7").innerHTML ='$$\\text{行列A} \\times \\text{行列B}=' +matrix_a_tex +'\\times'+matrix_b_tex+'=' + math.parse(String( math.multiply(matrix_a,matrix_b))).toTex() + '$$';
MathJax.Hub.Typeset(document.getElementById("output_message7"))
document.getElementById("output_message8").innerHTML ='$$\\text{行列B} \\times \\text{行列A}=' +matrix_b_tex +'\\times'+matrix_a_tex+'='  + math.parse(String( math.multiply(matrix_b,matrix_a))).toTex() + '$$';
MathJax.Hub.Typeset(document.getElementById("output_message8"))
}
</script>
<div id="output_message3"></div>
<div id="output_message4"></div>
<div id="output_message5"></div>
<div id="output_message6"></div>
<div id="output_message7"></div>
<div id="output_message8"></div>

芋の独り言

当ブログへのアクセスは当ブログのプライバシーポリシーに同意したものとみなします．

はてなブログでJavascriptを使って軽～く行列演算