元Webデザイナー兼コーダーの備忘録

ウェブデザインやプログラミング、ブログのカスタマイズなどについてアウトプットしています。

 メニュー

» HTML入門のまとめはこちらです。

2022-01-01から1年間の記事一覧

2022年の反省と2023年の目標

年末ということで、今年の勉強について反省します。今年1年を振り返り、来年の勉強に活かしたいです。来年勉強したいことも併せて挙げます。 2022年に勉強したこと 反省 2023年の目標 2022年に勉強したこと YAML mustache p5.js SVG Processing Three.js jQu…

Processingにおけるランダムウォーク(random walk)

The Nature of Code(PDF版)からランダムウォークについて取り上げます。Processingでプログラムを書いて、動作を確認します。動作を確認できるところがProcessingの楽しいところです。Processingのデフォルトのプログラミング言語は、Javaです。Javaの勉強も…

高校数学の学び直しその2

高校数学の学び直しの続報です。 以前の記事で、ベクトルと三角比、三角関数あたりを勉強し直したことを書きました。そこからさらに勉強を進めたので、そのことについて書きます。 そもそも数学を学び直すきっかけは、Processingで必要になったからです。 高…

【Three.js】Three.jsの記事まとめ

当ブログで紹介したThree.jsの記事を一覧にまとめました。Three.jsは、ブラウザ上で3DCGを描画するJavaScriptのライブラリです。5Gが主流になったら需要が高まるかもしれません。 Vue.jsの記事まとめ 今後の取り組み 参考サイト Vue.jsの記事まとめ 【Three.…

読書記録:2022年に読んだ本の紹介

2022年に読んだ本をメモとして残します。ブログで紹介していない本も載せています。今年は、ビジネス・経済系の本を読んだ年でした。本当はもっと本を読みたいのですが、読書スピードが遅いので仕方ありません。来年も同じくらいのペースで読めればと考えま…

【より良いコードとは】「リーダブルコード」の感想

本書は、読みやすいコード=理解しやすいコードという考えで書かれています。そのため、理解しやすいコードを書く方法について4部にわたり取り上げています。 本の紹介 学んだこと 表面上の改善 ループとロジックの単純化 コードの再構成 感想 本の紹介 読み…

高校数学の学び直し

高校数学の学び直しをしています。 何故、高校数学の学び直しをしているのかや数学とプログラミングについて書いています。端的に言うと、Processingでプログラミングするのに数学が必要になったので、高校数学の学び直しをしているというお話です。 高校数…

Sass(SCSS)の学習メモ

Sassの勉強をしました。その内容をメモとして残します。Sassの入門的な内容について書きます。 ネスト 変数 mixin mixinに引数を渡す & 四則演算 CSSのcalc関数 import ネスト <div class="header"> <div class="log"></div> <div class="tagline"></div> <div class="menu"> <ul> <li><a href="">メニュー1</a></li> <li><a href="">メニュー2</a></li> <li><a href="">メニュー3</a></li></ul></div></div>

Processingのダウンロードとインストール:Linux編

LinuxにProcessingをインストールしました。その時に行ったことを備忘録として残します。ちなみに、Linux mint 21にProcessingをインストールしました。個人的には、新たな学びがあったので良かったです。 Processingのダウンロード ファイルの展開 インスト…

【JavaScript】モジュールのimport/export(3)

今回は、モジュールのインポートとエクスポートの特殊な書き方について見ていきます。具体的には、*(アスタリスク)を使った記述と再エクスポート、副作用のあるインポートの3つについてです。 事前準備 *でまとめてインポートする 再エクスポート 名前付きエ…

【JavaScript】モジュールのimport/export(2)

モジュールのインポートとエクスポートについて書きます。その中でもデフォルトインポート(default import)とデフォルトエクスポート(default export)の記述について書きます。 事前準備 モジュールのimport/export 変数のdefault import/default export 関…

【JavaScript】モジュールのimport/export(1)

モジュールのインポートとエクスポートについて書きます。その中でも名前付きインポート(named import)/名前付きエクスポート(named export)とエイリアスについて書きます。 事前準備 モジュールのimport/export named import/named export 複数の変数をimpo…

ブログ開設2年目の振り返り

今年の9月でブログ開設2年になります。少し遅くなりましたが振り返ります。こんなブログもあるのだと思って見ていただけたら幸いです。 ブログを数値で振り返る 課題・後回しにしていること 今後について ブログを数値で振り返る 当ブログの数値を簡単にでは…

【JavaScript】モジュールの書き方

JavaScriptのモジュールは、ES2015で追加された仕組みです。今回は、モジュールの基本の書き方について勉強したことを書きます。クライアント側のJavaScriptでもモジュールが使えるようになり、便利になりました。 モジュールと名前空間 モジュールなしのJav…

Node.jsとVS CodeでHTML・CSSの開発環境を作る

Node.jsとVS CodeでHTML・CSSの開発環境を作ってみました。タスクランナーのGulpを使わずに、npm scriptsでPugとSassの変換処理を自動化してみました。また、ファイルに変更があったら自動でブラウザを更新するようにしました。 やりたいことは4つで、1.Pug…

LinuxにVisual Studio Codeをインストールする

LinuxにVisual Studio Codeをインストールしました。その時に行ったことを備忘録として残します。ちなみに、Linux mint 21にVisual Studio Codeをインストールしました。 Visual Studio Codeのインストール Visual Studio Codeの起動 参考サイト Visual Stud…

LinuxにNode.jsをインストールする

LinuxにNode.jsをインストールしました。その時に行ったことを備忘録として残します。コマンドの詳しい使い方については、取り上げていません。ちなみに、Linux mint 21にNode.jsをインストールしました。 Node.jsを始める nvmのインストール Node.jsのイン…

Linux Mintのインストール

Linuxを試したくて、Linux Mintをインストールしました。その際、参考にしたサイトをご紹介します。 Linuxのインストール 必要なもの 初期設定 今後の意気込み 参考サイト Linuxのインストール 下記の動画を参考にLinux Mint 21をインストールしました。 【L…

テキストエディタの遍歴と使い分け

最近、新しくテキストエディタを入れました。そこで、これまでのテキストエディタの遍歴と今後の使い分けについて書きます。 私のテキストエディタ遍歴 メモ帳 Emacs,vim TeraPad Atom Visual Studio Code テキストエディタの使い分け 余談 私のテキストエデ…

AtomにLiveServerを追加してコーディングを効率化する

今回は、LiveServerについて書きます。色々と調べていたらLiveServerというものに出会いました。ウェブサイトを制作する方にとって便利な機能なので導入してみると良いです。 コーディングの流れ LiveServerの追加 所感 参考サイト コーディングの流れ 編集 …

Atomにターミナルを追加して使い勝手を良くする

開発する上でストレスに感じていたことがあります。今回は、その改善のためにしたことを書きます。具体的には、エディタにターミナルの機能を追加したことと仮想環境に接続する方法についてです。 課題 Atomにターミナルを追加 vagrantの仮想環境に接続する…

Pugの学習メモ

Pugは、HTMLの拡張言語です。pug-cliを使って、Pugを試します。Pugはそのままではブラウザに表示されません。HTMLに変換する必要があります。 インストール 準備 DOCTYPE宣言 基本 テキストを複数行記述する場合 リストタグの書き方 IDとCLASS タグを省略し…

【Vue.js】Vue.jsの記事まとめ

当ブログで紹介したVue.jsの記事を一覧にまとめました。Vue.jsは、UIを構築するのに便利です。フロント部分の制作に役立つことでしょう。 Vue.jsの記事まとめ 関連項目 Vue.jsの記事まとめ 【Vue.js】Vue.jsの導入 【Vue.js】条件付きレンダリング:v-ifとv-s…

【取っつきやすい】「会計クイズを解くだけで財務3表がわかる 世界一楽しい決算書の読み方」の感想

本書は、会計クイズを開催している著者が、楽しく決算書を読み解くことに主眼を置いて書いた本です。 会計知識がない私でも抵抗なく読み進めることができました。決算書の読み方が分からないで困っている方は、本書を足掛かりにすると良いです。 本の紹介 学…

【Vue.js】コンポーネントでv-modelを使う

コンポーネントでv-modelを使う方法について書きます。v-modelをそのまま使うのではなく、v-bind:valueとv-on:inputに置き換えて実現します。 v-modelとv-bind:value,v-on:input コンポーネントでv-modelを使う 最終的な記述 参考サイト v-modelとv-bind:val…

【Vue.js】コンポーネントのイベント:$emit(),$event

私自身、Vue.jsの理解がまだまだ浅いです。メモ程度のものとして見て頂ければと思います。 今回は、コンポーネントにイベントを設定する方法について書きます。ポイントは、$emit()と$eventです。イベントをどのように紐づけるのかや、イベントでの値の渡し…

【Vue.js】コンポーネントにデータを渡す:props

例えば、コンポーネントを使ってブログを作成するとなると、記事のタイトルや投稿内容などのデータをコンポーネントに渡して処理することになります。今回は、コンポーネントにデータを渡す方法について書きます。 カスタム属性としてデータを渡す Vueインス…

Ajaxで外部データを取得し、テンプレートに読み込む

以前の記事(Ajaxで外部データを取得する)で、Ajaxを利用して外部データを取得するコードをご紹介しました。このコードでは、JavaScriptのコードの中にHTMLのコードが含まれていました。今回は、JavaScriptからHTMLを分離する例を書きます。 以前のコード:XML…

【mustache入門:JS版】mustache.jsの再入門

以前、mustacheの記事を書きましたが、勉強し直したので改めて記事にします。今回は、HTMLとJavaScriptの分離に焦点を当てて書きます。 HTMLを挿入する例 HTMLのテンプレート化 HTMLコードの分離 まとめ 参考 HTMLを挿入する例 id属性がresultである要素の子…

【jQuery】Ajaxで外部データを取得する

jQueryのAjaxを使って、外部データ(JSON、XML、HTML)を取得する方法を見ていきます。 JSONの取得 XML(RSS)の取得 HTMLの取得 まとめ 参考 JSONの取得 ex.)気象庁のサイトから東京都の天気予報のデータをJSON形式で取得 取得先:https://www.jma.go.jp/bosai/f…

» HTML入門のまとめはこちらです。