以前、Pythonでハッシュ値を計算するGUIアプリを作ったことがありました。 jsstudy.hatenablog.com ブラウザーが使える環境なら、PythonでGUIアプリを作るよりも、JavaScriptでWebアプリを作る方が簡単です。 参考情報 qiita.com note.onichannn.net labs.cybozu.co.jp www.ipentec.com 以上の情報を参考にして、ハッシュ値を計算するWebアプリを作ってみましょう。 md5ハッシュ値を計算するJavaScriptのWebアプリ (1) 以下のページから、「md5.js」というJavaScriptファイルをダウンロードします。 https://labs.cybozu.co.jp/blog/mitsunari/2007/07/md5js_1.html ↓ https://labs.cybozu.co.

読書メモを図にしたいとき、簡単なグラフを作成できるツールがあったら便利です。 調べたらいくつか候補がありました。 PlantUML　https://plantuml.com/ja/ Mermaid.js　https://mermaidjs.github.io/ Typora　https://typora.io/ 今回は、手軽に使えて、拡張性もありそうなMermaid.jsを試してみます。 Mermaid.jsとは？ Visual Studio CodeでMermaid.jsを使う方法 Markdown Preview Enhancedの使い方 図の出力 見た目のカスタマイズ 参考 Mermaid.jsとは？ Mermaid.jsは、JavaScriptでグラフやチャート図を描くためのライブラリーです。 （英語の「mermaid」は、日本語で「人魚」という意味） （公式サイト） https:

無料で学べる「JMOOC」というオンライン講座があります。 JMOOCの中に、JavaScriptの講座もありました。 JMOOC https://www.jmooc.jp/ www.jmooc.jp ja.wikipedia.org 一般社団法人日本オープンオンライン教育推進協議会（Japan Massive Open Online Courses Promotion Council）は、2012年より米国で始まった無償教育サービス「MOOC」（オンラインで大学レベルの授業を無償で公開し、終了条件を満たした受講者に修了証を提供する）の日本語での無償提供及びその普及・拡大を目的とし、2013年11月に設立された非営利団体である。 略称は「JMOOC（ジェイムーク）」。 JavaScript講座 https://www.fisdom.org/F00000125/ www.fisdom.org

自分に対する投資として、週１の読書に取り組んでいます。 jsstudy.hatenablog.com 今週の読書は、子供向けのJavaScript入門書の「JavaScriptふりがなKidsプログラミング」という本を読んでみました。 子どもから大人までスラスラ読める JavaScriptふりがなKidsプログラミング ゲームを作りながら楽しく学ぼう！ ふりがなプログラミングシリーズ 作者:リブロワークス 発売日: 2019/11/22 メディア: Kindle版 2020年4月から小学校でプログラミング教育が必修化されます。 プログラミング教育：文部科学省 小学生にプログラミングを教えるにはどうすれば良いでしょうか？ 小学5年生以上が読者対象になっている本書は、教育方法の参考になるかと思います。 目次 はじめに 監修者・著者・イラストレーター紹介 プログラムの読み方 チャプター（１） J

「Yarn」は「npm」を改良したツールです。 yarnpkg.com 前提 Yarnのインストール Yarnとnpmの違い まとめ 前提 WindowsにYarnをインストールする場合、事前に Node.js npm がインストールされている必要があります。 Node.jsとnpmまだ入ってない場合は、先にインストールしておきます。 （参考） jsstudy.hatenablog.com Yarnのインストール Windowsでコマンドプロンプトを開き、以下のようにコマンドを入力します。 npm install -g yarn Yarnがインストールされたら、以下のコマンドでYarnのバージョンを確認してみます。 yarn -v 「1.19.1」などとバージョンが表示されたらOKです。 Yarnとnpmの違い npmの代わりにYarnを使うメリットは何でしょうか？ （参考） www.go

モダンなJavaScriptの要点について紹介された資料がありました。 speakerdeck.com 要点 アロー関数 クラス 非同期処理 各機能の利便性に注目 要点 モダンJavaScript再入門 / Re-introduction to Modern JavaScript - Speaker Deck [JavaScript] [入門] ?slide=12 アロー関数 ・関数の理解はモダンJS理解への近道 ・functionの必要性が減っている / ?slide=15 クラス ・prototypeのことは忘れよう / ?slide=27 非同期処理とは？ ・モダンなWebフロントエンド開発には必須の知識 2019/11/02 13:05 b.hatena.ne.jp アロー関数 関数の理解はモダンJS理解への近道 functionの必要性が減っている クラス prototypeのこ

JavaScript学習マラソンの第18回は、 「現代の JavaScript チュートリアル」パート１の2.15「関数式とアロー」です。 関数式とアロー https://ja.javascript.info/function-expressions-arrows を読んでみます。 JavaScriptの関数の書き方にはバリエーションがある 前回は、JavaScriptの「関数」の書き方（関数宣言）について学びました。 jsstudy.hatenablog.com 今回も、JavaScriptの「関数」の書き方を学びますが、前回の「関数宣言」とは別の書き方を学びます。 関数宣言 関数式　←New！ アロー関数　←New！ 「関数式」と「アロー関数」について、JavaScriptチュートリアルの説明を見てみましょう。 ja.javascript.info 数値aと数値bの合計を求める関数が、

JavaScript学習マラソンの第17回は、 「現代の JavaScript チュートリアル」パート１の2.14「関数」です。 関数 https://ja.javascript.info/function-basics を読んでみます。 関数 そもそもですが、「関数」（かんすう）って何でしょうか？ 数学の授業で習った「関数」と、プログラムに出てくる「関数」は、何か共通点があるのでしょうか？ 数学の関数 数学 関数 - Google 検索 ja.wikipedia.org 数学における関数（かんすう、英: function、函数とも書かれる）とは、かつては、ある変数に依存して決まる値あるいはその対応を表す式の事であった。 この言葉はライプニッツによって導入された。 その後定義が一般化されて行き、現代的には数の集合に値をとる写像の一種であると理解される。 数学の「関数」の詳細は、Wikipe

はてなブックマークでVue.jsのYouTube動画が人気を集めていました。 b.hatena.ne.jp 動画を見てみたら、「たにぐち まことのプログラミング学習応援チャンネル」というコンテンツでした。 https://www.youtube.com/user/tomostajp/playlists www.youtube.com たにぐちまことさんと言えば、HTMLやJavaScriptの本を書かれている方ですね。 twitter.com www.amazon.co.jp 本屋で、たにぐちさんの著書をよく見かけます。 これからWebをはじめる人のHTML&CSS、JavaScriptのきほんのきほん 作者: たにぐちまこと 出版社/メーカー: マイナビ出版 発売日: 2017/03/27 メディア: 単行本（ソフトカバー） この商品を含むブログを見る さて、動画チャンネルを見たら、Vu

JavaScript学習マラソンの第16回は、 「現代の JavaScript チュートリアル」パート１の2.13「switch文」です。 switch文 https://ja.javascript.info/switch を読んでみます。 条件分岐のswitch 条件分岐には、if文がありました。 jsstudy.hatenablog.com if文と同様に条件分岐を実現する仕組みとして、JavaScriptではswitch文も用意されています。 switch文の文法、使い方はチュートリアルの説明通りですね。 ja.javascript.info developer.mozilla.org switch 文は式を評価し、その式の値が case のラベルと一致するなら、その case に関連付けられた文を実行します。 JavaScriptのswitch文の注意点 他の手続型プログラミング言

以前、JavaScriptの比較について学びました。 jsstudy.hatenablog.com JavaScriptの比較で、間違えやすい点があったのでメモしておきます。 JavaScriptで配列やオブジェクトを比較するときの注意点 JavaScriptでは、配列やオブジェクトの中身が同じ内容かどうか？を比較検証するとき、生のデータのままでは比較がうまくできない場合があります。 予想外の挙動でうまくいかない場合は、配列やオブジェクトをいったんJSONに変換して、文字列として比較すると対処できます。 JavaScriptの変数の特徴 原因は、JavaScriptの変数の仕組みにあります。 （参考） qiita.com これから説明で"値の参照"という言葉を使いますが、これは例えるならたくさんある引き出しのどこに値をしまったかを表すメモのようなものです。 それから便宜上、"値の参照"にS

JavaScript学習マラソンの第15回は、 「現代の JavaScript チュートリアル」パート１の2.12「ループ: while と for」です。 ループ: while と for https://ja.javascript.info/while-for を読んでみます。 プログラムに必要な制御 C言語やJavaScriptのような手続型言語では、プログラムの動きをコントロールするために、３つの仕組みが用意されています。 それが、「構造化プログラミング」の「順次」「反復」「分岐」です。 （「分岐」は、「条件分岐」とか「選択」などとも表記されます。） （こういうプログラミングに関する豆知識は、コンピューターサイエンスで詳細が説明されていますが、簡単なまとめとしては情報処理試験の教科書などでも説明されています。） キタミ式イラストIT塾 基本情報技術者 平成31/01年 (情報処理技

JavaScript学習マラソンの第14回は、 「現代の JavaScript チュートリアル」パート１の2.11「論理演算子」です。 論理演算子 https://ja.javascript.info/logical-operators を読んでみます。 条件判定で必要な道具 ifで条件分岐するとき、１つの条件だけでなく、複数の条件を並べて判定する場合がありますね。 「1000円以上」の商品：１つの条件で判定 「1000円以上」かつ「5000円以下」の商品：複数の条件で判定 そのとき、どのように条件をつなげていくか？を決めるのが「論理演算子」です。 JavaScriptには3つの論理演算子があります: || (OR:論理和), && (AND:論理積), ! (NOT:否定) JavaScriptの論理演算子には、 「&&」　AND　　かつ 「||」　　OR　　または 「!」　　NOT　　

関数型プログラミングの理解を深めるために、OCamlの本を読んでいます。 プログラミングの基礎 (Computer Science Library) 作者: 浅井健一 出版社/メーカー: サイエンス社 発売日: 2007/03/01 メディア: 単行本 購入: 17人 クリック: 409回 この商品を含むブログ (127件) を見る 「簡約」について調べていたら、分かりやすい説明の記事がありました。 tarao.hatenablog.com ラムダ計算は, 多くのプログラミング言語, とくに関数型言語の原形になっています. ラムダ計算について理解しておくことは, 多くのプログラミング言語の習得に役立つでしょう. ラムダ計算はチューリング完全で, 計算能力としてはふつうのプログラミング言語と同じです. ラムダ計算で計算を書く訓練をしておくことは, 任意の計算を関数のみを使って(他の制御構文を

JavaScriptの新しいバージョン（ES2015以降）の要点が３つにまとめられていました。 Modern JavaScript in React Documentation · GitHub gist.github.com 細かいことを抜きにすれば、とりあえずこの３点だけ理解しておけばOKですね。 日本語訳 上記リンクの英文は、日本語でざっくりとこんな意味でしょうか。 If you haven’t worked with JavaScript in the last few years, these three points should give you enough knowledge to feel comfortable reading the React documentation: ここ数年JavaScriptを使ったことがない人でも、以下の３点でReactのドキュメントを

Reactの勉強メモ。 Reactを準備なしですぐに練習してみたい場合、オンラインの実行環境が用意されているので、すぐに試してみることができます。 「CodeSandbox」というオンラインエディターを使うと、すぐにReactを試せます。 jsstudy.hatenablog.com CodeSandboxとは？ (p.31) 「CodeSandbox」は、オンライン上で直接Reactなどのコードを記述できるエディターアプリケーションです。 ブラウザーでページを開くだけで、Reactを記述する環境が一式揃っており、雛形から書き始めることができます。 codesandbox.io https://codesandbox.io/ ブラウザーでこのURLにアクセスすると、以下のようなWebページが表示されます。 「OPEN REACT」ボタンをクリックすると、エディター画面が表示されます。 これ

Reactの勉強メモ。 Reactの本を読んでたら、「JSX」という仕組みの話が出てきました。 JSXは、JavaScriptでHTMLを扱うために用意されたJavaScriptの拡張構文とのこと。 jsstudy.hatenablog.com 本の中ではJSXについてサラッと説明されていて、いまいちよく分からなかったので検索してみました。 とりあえず、JSXに関する資料を集めておいて、後でもう一度見直してみたいと思います。 ReactのJSXとは？ 「JSX」と命名されている仕組みは複数あるようです。紛らわしいですねｗ qiita.com Facebook（React）のJSX DeNA（AltJS）のJSX AdobeのJSX React - Wikipedia JSXは、JavaScriptの構文に対する拡張である。 HTMLと外観が似ているが、JSXは多くの開発者がよく知っている構

C#でAI（人工知能）を作る方法を解説した本がありました。 「AIプログラマになれる本」という本です。 AIプログラマになれる本 (日経BPパソコンベストムック) 作者: 日経ソフトウエア 出版社/メーカー: 日経BP社 発売日: 2019/02/18 メディア: ムック この商品を含むブログを見る 目次 【第1章】 Part 1　ニューラルネットワークをゼロから実装する 前編 Part 2　ニューラルネットワークをゼロから実装する 後編 Part 3　Pythonで遺伝的アルゴリズムのプログラムを作る 【第2章】 Part 1　人工知能で画像生成に挑戦 基本編 Part 2　人工知能で画像生成に挑戦 いろいろな画像編 【第3章】 Part 1　スマートスピーカーのアプリを作ろう Alexa編 Part 2　スマートスピーカーのアプリを作ろう Google Home編 【第4章】基礎から実

「JavaScript関数型プログラミング」を読んでいたら、意味がよく分からない用語が出てきたのでメモ。 jsstudy.hatenablog.com レンズ （p.48） レンズ（Lenses）と呼ばれる関数型のアプローチ レンズは、オブジェクトの変更を普遍的に一括管理する最良の選択肢です。 （純粋な）関数参照とも呼ばれるレンズは、状態を持つデータ型の属性を不変的にアクセスし操作できる関数型プログラミングのソリューションです。 レンズの内部的な動作はコピーオンライトに似ており、状態の管理と複製を適切に処理できる内部ストレージコンポーネントを利用しています。 しかし、レンズを自分で実装する必要はありません。 関数型JavaScriptライブラリRamdaの実装を利用できます。 JavaScriptでデータを可変ではなく不変で扱いたい場合、Ramda.jsという関数型ライブラリーのLensと

JavaScriptでマインドマップのようなグラフを描画するライブラリーを探してみました。 有向グラフとは？ グラフ理論 - Wikibooks グラフ理論におけるグラフ （Graph）とは、頂点(node)と辺(edge)により構成された図形のことである。 グラフは主に、有向グラフ （directed graph）と無向グラフ （undirected graph）の2つに分類される。 有向グラフとは、頂点と向きを持つ辺（矢印）により構成されたグラフであり、無向グラフとは、頂点と辺により構成されたグラフである。 統計的テキスト解析(6)～語のネットワーク分析～ マインドマップとは？ マインドマップ - Wikipedia マインドマップはトニー・ブザン(Tony Buzan)が提唱した思考・発想法の一つ。頭の中で起こっていることを目に見えるようにした思考ツールのこと。 描き方は、表現したい