JavaScript学習マラソンの第13回は、 「現代の JavaScript チュートリアル」パート１の2.10「条件演算子: if, '?'」です。 条件演算子: if, '?' https://ja.javascript.info/ifelse を読んでみます。 プログラムの基本構造 JavaScriptは、プログラミング言語の分類でいうと、「手続型」の言語です。 手続型のプログラミング言語の基本的な動作原理は「構造化プログラミング」という仕組みです。 構造化プログラミング - Wikipedia 「三つの構造化文」 順次　順接、順構造とも言われる。プログラムに記された順に、逐次処理を行なっていく。プログラムの記述とコンピュータの動作経過が一致するプログラム構造である。 反復　一定の条件が満たされている間処理を繰り返す。 分岐　ある条件が成立するなら処理Aを、そうでなければ処理Bを行

JavaScript学習マラソンの第12回は、 「現代の JavaScript チュートリアル」パート１の2.9「対話: alert, prompt, confirm」です。 対話: alert, prompt, confirm https://ja.javascript.info/alert-prompt-confirm を読んでみます。 Webブラウザーのホストオブジェクトとは？ JavaScriptのalert()、prompt()、confirm()メソッドについて学ぶ前に、JavaScriptのオブジェクトの仕組みについて復習しておきましょう。 「オブジェクト」とは？ 「オブジェクト」（Object）という用語は、JavaScriptに限らず他のプログラミング言語でも出てきます。 jsstudy.hatenablog.com データと処理をまとめて束にしたもの が「オブジェクト」

JavaScript学習マラソンの第11回は、 「現代の JavaScript チュートリアル」パート１の2.8「比較」です。 比較 https://ja.javascript.info/comparison を読んでみます。 比較とは？ aとbが同じか、違うか？ 違う場合は、大きいか、小さいか？ などということを比べる作業ですね。 JavaScriptの比較演算子 等価演算子（同じか、違うか） ==　等価 !=　不等価 ===　厳密等価（一致） !==　厳密不等価（不一致） 関係演算子（大きいか、小さいか） >　大なり演算子 >=　大なりイコール演算子 <　小なり演算子 <=　小なりイコール演算子 という比較用の演算子（記号）が用意されてます。 developer.mozilla.org 比較は条件分岐（ifやswitch）で使用 比較は、ifやswitchなど、条件分岐の処理で使われま

JavaScript学習マラソンの第10回は、 「現代の JavaScript チュートリアル」パート１の2.7「演算子」です。 演算子 https://ja.javascript.info/operators を読んでみます。 演算子とは？ 演算子の多くは既に学校で学んでおり、よく知られています。加算 +, 乗算 *, 減算 - などです。 演算子 - Wikipedia 演算子（えんざんし、英: operator symbol, operator name）は、数式やコンピュータプログラミング言語などで、各種の演算を表わす記号・シンボルである。 演算が作用する対象のことを被演算子（operand; オペランド、被演算数、引数）という。 たとえば、n と 3 との和を表す式 "n + 3" において、"+" は演算子であり、その被演算子は "n" と "3" である。 演算とは？ 演算（

JavaScript学習マラソンの第9回は、 「現代の JavaScript チュートリアル」パート１の2.6「型変換」です。 型変換 https://ja.javascript.info/type-conversions を読んでみます。 型変換とは？ 型変換 - Wikipedia 型変換（かたへんかん、英: type conversion）とはプログラムにおいて、あるデータ型を他のデータ型に変換することである。 型キャスト（英: type casting）とも呼ばれる。 データの「型」（Type） コンピューターのプログラムは、 データ 処理 という２つの構成要素から成り立っています。 データには種類があり、データの「型」で分類することができます。 JavaScriptには、７種類のデータ型が用意されていました。 jsstudy.hatenablog.com number型：　整数と

JavaScript学習マラソンの第8回は、 「現代の JavaScript チュートリアル」パート１の2.5「データ型」です。 データ型 https://ja.javascript.info/types を読んでみます。 データの型（Type） コンピューターのプログラムは、 データ 処理 という２つの構成要素から成り立っています。 データには種類があり、データの「型」で分類することができます。 データ型 - Wikipedia データ型（データがた、data type）とは、（コンピュータにおける）データ（値）の種類に関する分類である。データタイプとも。 具体的にいうと、たとえば 0, 1, 2, -42 といったような値は整数型であり、"foo", "Hello" といったような値は文字列型である。 JavaScriptでは、７種類の型が用意されています。 number型：　整数と浮

Ubuntuのテストサーバーにnodebrewをインストールしてみます。 nodebrewは、Node.jsのバージョン管理ツールです。 github.com nodebrewのインストール方法 Ubuntuのバージョンは、18.04LTSです。 curlコマンドを使う場合 Ubuntuのコンソール画面で、次のコマンドを入力します。 $ curl -L git.io/nodebrew | perl - setup wgetを使う場合 これでうまくいかない場合は、別の方法で試してみます。 （いったん、Perlのスクリプトファイルをダウンロードする。その後Perlで実行する。） $ wget git.io/nodebrew $ perl nodebrew setup Windows10上にVagrantで入れたUbuntuの場合、仮想マシン内部から外部へのインターネットアクセスがおかしくなる場

JavaScript学習マラソンの第7回は、 「現代の JavaScript チュートリアル」パート１の2.4「変数」です。 変数 https://ja.javascript.info/variables を読んでみます。 変数 変数の特徴 letキーワード 変数の値の再代入 定数 定数の特徴 constキーワード 「var」キーワード まとめ 変数 コンピューターのプログラムは、 データ 処理 という２つの構成要素から成り立っています。 プログラムでデータを扱う仕組みとして、「変数」や「定数」があります。 変数 (プログラミング) - Wikipedia プログラミングにおいて、変数（へんすう、variable）とは、プログラムのソースコードにおいて、扱われるデータを一定期間記憶し必要なときに利用できるようにするために、データに固有の名前を与えたものである。 一人一人の人間が異なる名前に

JavaScript学習マラソンの第6回は、 「現代の JavaScript チュートリアル」パート１の2.3「モダンなモード, "use strict"」です。 モダンなモード, "use strict" https://ja.javascript.info/strict-mode を読んでみます。 Strict モード（厳格モード） JavaScriptには、「Strictモード」という仕組みが用意されています。 "use strict" ディレクティブは “最新” モードにエンジンを切り替え、いくつかの組み込みの機能の振る舞いを変更します。 JavaScriptの文法は、バージョンアップを重ねる度にちょっとずつ変わってます。 JavaScriptのコードを古い文法ではなく新しい文法で書く場合、JavaScriptのコードを解釈するコンパイラーに対して、「最新のバージョンでコードを解釈

JavaScript学習マラソンの第5回は、 「現代の JavaScript チュートリアル」パート１の2.2「コード構造」です。 コード構造 https://ja.javascript.info/structure を読んでみます。 文末の区切りはセミコロン「;」 JavaScriptの命令文は、区切りとして文末にセミコロン「;」を付けます。 セミコロンの省略 文末のセミコロンを省略しても、JavaScriptには「自動セミコロン挿入」という機能があって、省略された文末のセミコロンが自動的に補われて、プログラムは動作します。 https://tc39.github.io/ecma262/#sec-automatic-semicolon-insertion 自動セミコロン挿入の欠点 しかし、「自動セミコロン挿入」にも欠点があり、プログラマーが思っているのとは違う形でセミコロンが挿入されてし

JavaScript学習マラソンの第4回は、 「現代の JavaScript チュートリアル」パート１の2.1「Hello, world!」です。 Hello, world! https://ja.javascript.info/hello-world を読んでみます。 <script>タグ チュートリアルでは、JavaScriptをHTMLページに組み込んで使う方法で練習しています。 HTMLページにJavaScriptのプログラムを埋め込むには、<script>タグを使います。 <script>タグの使い方 www.htmq.com <script> - スクリプト - とほほのWWW入門 <script>タグでJavaScriptのプログラムを埋め込む方法は、2種類あります。 コードを直接書く方法 コードを書いた外部ファイルを読み込む方法 ちょっとした短いコードなら、(1)「直接書く

JavaScript学習マラソンの第3回は、 「現代の JavaScript チュートリアル」パート１の1.3「開発者コンソール」です。 開発者コンソール https://ja.javascript.info/devtools を読んでみます。 ブラウザーについているデバッガー JavaScriptの学習で、Webブラウザーには「Google Chrome」を使ってみます。 Google Chrome - Wikipedia Google Chrome（グーグル・クローム）は、HTMLレンダリングエンジンにBlinkを採用し、Googleが開発しているウェブブラウザである。 www.google.co.jp Chromeには、「デベロッパーツール」というデバッガーが付いています。 デバッガ - Wikipedia デバッガ（Debugger）とは、デバッグを支援するプログラムのこと。 対話

JavaScript学習マラソンの第2回は、 「現代の JavaScript チュートリアル」パート１の1.2「コードエディタ」です。 コードエディタ https://ja.javascript.info/code-editors を読んでみます。 IDE JavaScriptでプログラムを書くときに便利なIDEやエディターが、いろいろ紹介されていますね。 統合開発環境 - Wikipedia 統合開発環境（とうごうかいはつかんきょう）、IDE (Integrated Development Environment) は、ソフトウェアの開発環境。 統合開発環境を使うことによって、巨大かつ複雑なソフトウェアでも、作成者に負担をかけることなく開発することが可能になる。 Visual Studio Code 個人的には、今なら「Visual Studio Code」（無料）で良いかなと思います。

JavaScript学習マラソンの第1回は、 「現代の JavaScript チュートリアル」パート１の1.1「Javascript 入門」です。 Javascript 入門 https://ja.javascript.info/intro を読んでみます。 JavaScriptの発祥 JavaScriptは、最初Webページにプログラムを組み込むためのプログラミング言語として開発されました。 今は他の用途も広がりましたが、やはり多いのはWebサイトでの使用ですかね。 JavaScript - Wikipedia 登場時期　1995年 設計者　ブレンダン・アイク 影響を受けた言語　C言語、Java、Perl、Python、Scheme、Self JavaScriptの特徴 JavaScriptは、SchemeやSelfも参考にして作られたので、その特徴があります。 Schemeは、Lisp

勉強は短距離走ではなく長距離走と似ている、という話がありました。 「現代のJavaScriptチュートリアル」というJavaScriptの素晴らしい教材（無料）があったので、これを勉強して最後まで完走してみたいと思います。 jsstudy.hatenablog.com ja.javascript.info （オリジナル）英語版 javascript.info 知識ゼロからのJavaScript入門 作者: 小笠原寛 出版社/メーカー: 技術評論社 発売日: 2018/08/08 メディア: 単行本（ソフトカバー） この商品を含むブログを見る

はてなブックマークを見ていたら、JavaScriptの教材が紹介されていました。 「現代のJavaScriptチュートリアル」という学習サイトです。 ja.javascript.info 目次 パート１　JavaScript言語 1　導入 1.1　Javascript 入門 1.2　コードエディタ 1.3　開発者コンソール 2　JavaScript の基礎 2.1　Hello, world! 2.2　コード構造 2.3　モダンなモード, "use strict" 2.4　変数 2.5　データ型 2.6　型変換 2.7　演算子 2.8　比較 2.9　対話: alert, prompt, confirm 2.10　条件演算子: if, '?' 2.11　論理演算子 2.12　ループ: while と for 2.13　switch文 2.14　関数 2.15　関数式とアロー 2.16　Java

Webサイトを作るとき、表示速度を早くするために、静的ページを中心にしたいです。 静的ページ＝早い：Webサーバーに置いたHTMLファイルをそのまま表示 動的ページ＝遅い：アクセスのたびにプログラムでHTMLを生成して表示 Webサイトのコンテンツ制作を管理するCMS（コンテンツ管理システム）の中で、静的ページを作れるソフトは、「静的サイトジェネレーター」（Static Site Generator）と呼ばれています。 WordPressにも静的ページ作成のプラグインを入れたら、静的サイトジェネレーターとして使えますね。 jsstudy.hatenablog.com StaticGen 今どきの静的サイトジェネレーターにはいろいろあって、どれがいいのか？いまいちよく分かりませんでした。 とりあえずの検討材料として、「StaticGen」という静的サイトジェネレーターの人気ランキングがあった

はてなブックマークを見てたら、無料のJavaScriptの教科書を見つけました。 タグ「JavaScript」 を検索 - はてなブックマーク ECMAScript 2018時代のJavaScript入門書 efcl.info この書籍について · JavaScriptの入門書 #jsprimer これからJavaScriptを始める人がES2015以降をベースにして学べる本(予定) プログラミングをやったことがあるが、今のJavaScriptがよくわからないという人が、 今のJavaScriptアプリケーションを読み書きできるようになるもの。 ES2015以降の新しいバージョンのJavaScriptが対象となってます。 Webページなら随時、加筆や訂正ができるので便利ですね！ 無料で読めるので、誰でも勉強できて、ありがたいです。 WIPって何だろ？と思ったら、「作業中」という意味みたいで

GitHubなどで、ユーザーのトレードマークのような画像がありますね。 これは、「identicon」（アイデンティコン）と呼ばれています。 http://identicon.net/ An Identicon is a avatar which represents a hash of unique information. こんなかんじの画像です。 このような幾何学模様は、生成するアルゴリズムで、色や形、大きさが違います。 いろいろな作成方法が考案されているので、自分の好みのものを探して使ってみましょう。 で、このアイデンティコンの画像をJavaScriptで表示する方法がありました。 jdenticon.com 「Jdenticon」というライブラリーを使うと、JavaScriptでブラウザー上にアイデンティコンを表示できます。 <html> <head> <title>Jdenti

Vue.jsの勉強メモ。 jsstudy.hatenablog.com Vueの起動 (p.37)　Vueアプリケーションの作成 アプリケーションの作成をはじめるには、コンストラクタ関数Vueを使ってルートとなるVueインスタンスを作成します。 var app = new Vue({ // オプション }) 返り値はルートのインスタンスになっており、変数化しておくことでコンソールからアクセスできますが必須ではありません。 慣例的にappやvm（ViewModelの略）といった変数名が使用されます。 「ルート」という用語が、いまいちピンと来なかったので検索。 jp.vuejs.org Vue インスタンスの作成 全ての Vue アプリケーション は、Vue 関数で新しい Vue インスタンスを作成することによって起動されます。 var vm = new Vue({ // オプション }) V