絞り込み条件を変更する
検索条件を絞り込む
有料ブログの投稿方法はこちら

すべてのカテゴリ

79 件中 1 - 60 件表示
カバー画像

[Javascript] 配列操作あれこれ小技 とりあえず4点

はじめに Javascriptには便利な配列用のメソッドがたくさんありますが、いざ、イメージ通りの処理を行おうとすると、自分で実装しなくてはならないことが多いです。よく使いそうなものからニッチなものまで、今回はとりあえず4点のロジックを紹介します。前提として、共通の引数として使用する一次元配列は以下とします。 const array = [1,6,2,5,8,7,3,4,9,2,6,8,1,3,5]; なお、二次元配列やその他多次元配列の場合、別途処理内容が異なりますので、今回は考慮していません。■配列の要素をランダムに並べる Array.reduceを使っている例も見受けられますが、無駄な配列を生成しない分、Array.forEachを使うほうがシンプルかと思います。実際の処理内容も、先頭から順次、Math.randomによって生成されたインデックス番号の要素と入替えているだけです。const arrayRandom = arr => {    arr.forEach((_, i) => {         const j = Math.floor(Math.random() * (i + 1));         [arr[i], arr[j]] = [arr[j], arr[i]];     });     return arr; };// 出力例 [6,8,9,8,4,3,1,5,2,6,7,2,1,3,5];■配列中の特定値の数を取得 エクセルなどではCOUNTIF関数に該当しますが、その機能限定版といったところです。処理内容は単純で、条件式に合致する要素
0
カバー画像

見やすく管理しやすいコーディングのコツ

見やすく管理しやすいコーディングのコツプログラムが小さい場合はあまり問題になりませんが、プログラムが複雑になって大きくなってくると、コーディングのやり方によっては、管理が大変になる場合が多くなります。この記事では、「見やすく」「管理しやすい」コーディングのコツを紹介します。誰がプログラムを読むか?最初にプログラムを書いた人以外が、プログラムを見る(読む)ことは、現実的にかなりあります。 一人で開発を行っていても、依頼されてプログラムの開発を行う場合、納品後の管理は依頼者側で行う場合が多くなります。また、会社などでは、最初にプログラムを書いた人が退職したり、別の仕事に就いたりして、その後の管理は別の人が行う場合もたくさんあります。また、プログラムを書いた本人でも、時間が経つと細かい部分は忘れてしまう場合が多く、開発してしばらくして何かの問題が出て、プログラムのコードを見直す場合には意外に時間がかかってしまうものです。こうした事態に備えるため、業務でプログラムを開発する場合はドキュメント(設計仕様書)を作成するのが普通です。 しかし、ドキュメントがあっても、プログラムのソースコードはいずれにしても読む必要があります。 つまり、ソースコードが見やすく、管理しやすいよう書いてあるかどうかで、そうした管理のために費やす時間は大きく変わってきます。ハードコーディングの問題管理が面倒なプログラムに「ハードコーディング」が多いプログラムがあります。 「ハードコーディング」とは、プログラムの中に「具体的な値」を直接書く書き方です。例えば、最近の投稿で紹介している、Vue と Firebase に
0
カバー画像

Chromeブラウザで開いているタブのURLとタイトルをすべて取得してcsvファイルに保存する拡張機能

以前に題記のような内容の依頼がありました。購入までには至りませんでしたが、ソースコードを途中まで作成していたのでそれを一通り完成させ、需要があるのかどうかも分かりませんが、難しい内容でもないためこのブログにて公開いたします(ソースコードは有料にしてみます)。機能としては以下になります。・Addボタンを押すと開いているタブのページのタイトルとURLをすべて取得しローカルストレージに保存(URLに重複があった場合は除く)。・Removeボタンでチェックボックスにチェックされた項目の削除・CheckAllボタンですべての項目をチェック・Saveボタンでcsvファイルに出力・追加したタイトルとURLリストはLocalStorageに保存されるのでRemoveされない限り、ブラウザを閉じても保持されます。・かなりシンプルなものなのでツールとしての完成度はそれほど高くありません。ソースコード自体は自由に複製や改変しても構いませんが、それによる損害の責任は負いかねます。ただ内容を別の場所で公開する場合は一報ください。使用可能なChromeのバージョンは88以降です。以下はソースコードになります。
0 1,000円
カバー画像

Vue 公式チュートリアル 〜 部品からデータを渡す

Vue 公式チュートリアル 〜 部品からデータを渡すVue 公式チュートリアルのステップ 13 は、「部品」の方から呼び出し元(親)にデータを渡す方法を学習します。前回までのポイントは?ステップ10までは、基本的に、 「Vue の部品」の基本的な記述の仕方を中心に学習しました。 ステップ11からは、メインのページから別に作成した「部品」を呼び出す方法を学習しています。記述の仕方は基本的に同じですが、ポイントは、「部品」を呼び出す側(親)と呼び出される側(子)の間でのデータのやり取りです。前回のステップ12では、呼び出し側から「部品」にデータを渡すやり方を学習しました。呼び出し側と、呼び出される方の両方に記述が必要でした。今回学ぶのは?ステップ13では、前回とは反対に、呼び出される側(子)から、呼び出し側(親)にデータを渡す方法を学習します。まずは、変更前のコードです。(App.vue)<script>import ChildComp from "./ChildComp.vue";export default {  components: {    ChildComp,  },  data() {    return {      childMsg: "No child msg yet",    };  },};</script><template>  <ChildComp />  <p>{{ childMsg }}</p></template>これが、呼び出し元(親)のコードです。特に新しい点は
0
カバー画像

[Javascript] 一次元配列から最大値、最小値、平均、合計、分散、標準偏差を算出する

はじめに 最近、Javascriptメインの統計に関する案件依頼があり、その際に使用した必要最低限の統計解析セットを紹介します。なお、分散及び標準偏差に関しましては、公式も含めこちらでの解説は割愛します。あくまでもJavascriptのコードの紹介となります。また、分散と標準偏差以外はワンライナーの関数式となり、それぞれ独立で利用可能です。前提として、共通の引数として使用する一次元配列は以下とします。const array = [10,15,20,5,35,25,30];■最大値コードレビューした際、よくfor文やforEachで順次確認するロジックを見かけます。降順にソートしたものの先頭が最大値になります。const max = arr => arr.sort((a,b) => b-a)[0];console.log(max(array));// 35■最小値 最大値と逆の考え方です。昇順にソートしたものの先頭が最小値となります。const min = arr => arr.sort((a,b) => a-b)[0];console.log(min(array));// 5■合計array.reduceは配列のそれぞれの要素に対して、順次ユーザー定義のコールバック関数を実行し、その処理によって配列の各値を一つの値にまとめます。この説明では分かりづらいですが、配列要素の合計を求めるのはこのメソッドの基本形です。const sum = arr => arr.reduce((a,b) => a+b);console.log(sum(array))
0
カバー画像

Vue公式チュートリアル 〜 部品にデータを渡す

Vue公式チュートリアル 〜 部品にデータを渡すVue の公式チュートリアルを使ってゼロから Web 開発の学習をする方法を紹介しています。今回は、メインのページから呼び出す「部品」にデータを渡す方法を学習します。前回までのポイントは?前回のステップでは、これまで学習に使っていたメインの部品(ページ)から新たに作成した部品を呼び出す方法を学習しました。 これまで、学習した基本的な「書き方」は、Vue で使う「部品」を作る場合には同じ容量で使う事ができます。つまり、これまで学習した事が使いこなせるようになれば、「部品」を作ることに役立てることができます。そこで、改めてこれまで学習した「Vue の部品の基本」をもう一度見直してみてください。今回の学ぶのは?今回、学習するのは既に書いていますが、作成した Vue の「部品」を呼び出す際にデータを渡す方法を学習します。なぜ部品にデータを渡す事ができると、部品が使いやすくなるからです。例えば、ページの先頭に書く情報(ヘッダーと呼ばれる場合もあります)に例えばアプリのタイトルをこの部分に入れたい場合です。 部品にデータを渡せない場合は、部品の中でタイトルのデータを作る方法になります。しかし、この場合は、アプリごとに「別の物」になってしまいます。 部品を呼び出す際にデータを渡せれば、同じ部品を利用する事が可能になります。Vue は、そうした事を考慮して、部品にデータを渡す機能をサポートしています。このステップではそれを学習します。今回の変更前のコードです。(App.vue)<script>import ChildComp from
0
カバー画像

Vue 公式チュートリアル 〜 「部品」を呼び出す!

Vue 公式チュートリアル 〜 「部品」を呼び出す!Vue の公式チュートリアル、ステップ 11 は、これまでは一つの大きな「部品」を扱ってきました。このステップでは、別の「部品」を作成して、呼び出すと言う使い方を学習します。どちらかというとこちらの方がよく使う方法です。前回までのポイントは?前回までは、メインの表示部分だけを作って、その「部品」を表示するという課題でした。 メインの表示部分の部品を作る基本を中心に、その書き方を学習してきました。これは、部品の作り方の基本をカバーしているので、別の部品を作る場合にも利用できます。今回学習するのは?今回学習するのは、新たに「別の部品」を作成して、「メインの表示部分で使う」やり方を学習します。例によって、変更前のコードから見ていきましょう!今回は二つの部分に分かれています。 コードが表示されている右側の画面の上にファイルの名前が書かれています。 今回扱うのは、メインのページの部品の「App.vue」ともう一つの部品「ChildComp.vue」の二つです。(App.vue)<script>export default {  // register child component};</script><template>  <!-- render child component --></template> 今まで学習してきた、「メインのページ」の「部品」です。 現時点では、基本的に何もない状態です。(ChildComp.vue)<template>  <h
0
カバー画像

Vue公式チュートリアル 〜 変数の変化をチェックする

Vue 公式チュートリアル 〜 変数の変化をチェックするVue 公式チュートリアルのステップ 10 は、変数の状態が変わるのをチェックする方法です。Javascript の変数を表示に使う場合、変数が変わったら表示も更新したい場合が多くなります。そういう場合のやり方です。前回までのポイントは?Vue の公式チュートリアルもステップ 10 まで来ました。 何となく Vue で、Web ブラウザに表示させるやり方がわかってきたのではないかと思います。 ステップ9までで、基本的な Vue の部品の書き方がわかって、HTML と Javascript、HTML と CSS、CSS と Javascript の連携のやり方も一部は体験しているので、あとは「回数」を増やして実際に使えるようになる様な練習が必要になってきます。今回のポイントは?ステップ10では、新しいポイントがいくつかあります。まずは、変更前のサンプルコードを見てみましょう!<script>export default {  data() {    return {      todoId: 1,      todoData: null,    };  },  methods: {    async fetchData() {      this.todoData = null;      const res = await fetch(        `h t t p s://jsonplaceholder.typicode.com/todos/${this.todoId}`      );      this
0
カバー画像

Vue 公式チュートリアル ~ Vue の部品の状態とテンプレートのリファレンス

Vue 公式チュートリアル ~ Vue の部品の状態とテンプレートのリファレンス今回は、今までとは違ったステップです。Vue の仕組みを理解するには意味のある内容ですが、初めて Vue を学習する人には、知識として覚えておけば十分です。では、早速内容を見てみましょう。前回までの復習Vue の部品の書き方の基本を使って、少しプログラムらしい例として、「やる事の一覧を管理」をするための、シンプルなアプリを前の二つのステップで学習しました。ちょっとしたアプリにしたので、初めて、HTML や Javascript を学習している人には、ちょっと学習する項目が多くなっていました。 今回の、ステップはシンプルなので、時間が許すようならば、前回までの復習を今一度やってみてください!今回学ぶのは?今回学ぶのは、「Vue の部品」の状態と、HTML の記述(template のタグの部分)で利用できる「リファレンス」の使い方です。「Vue の部品」は、Vue の中で「部品が作られる(準備される)」状態から、Web ブラウザで表示できるような状態に「組み込まれた状態」など、いくつかの違った「状態」があります。この「状態」によって、実際に表示される内容が微妙に違ってきます。変更前のコードです。<script>export default {  // ...};</script><template>  <p ref="p">hello</p></template> この変更前のコードだと、HTML の部分(template の部分
0
カバー画像

Vue 公式チュートリアル 〜 データの一覧を表示する

Vue 公式チュートリアル 〜 データの一覧を表示するVue 公式チュートリアル 〜 データの一覧を表示するVue の公式チュートリアルのステップも、ステップ7まできました。だんだん、プログラミングの要素が入ってきてプログラミングの学習らしくなってきました。このステップでは、データの一覧を表示する方法を学習します。前回までのポイントは?前回までに、Vue の表示で使う「部品」の基本を中心に、HTML、CSS、Javascript の簡単な書き方と、連携のやり方を学んできました。 前回は、Javascript のプログラムの条件で表示を変える方法を学びました。Vue では、HTML の方にも「プログラム」のような記述ができるのが特徴の一つです。標準の HTML には、ない書き方を中心に覚えていく必要があることがだんだんわかってきたと思います。今回学ぶのは?今回学ぶのも、HTML の中にプログラムのような書き方をするやり方です。 今回は、同じようなデータの集まり、プログラムでは配列(array)の中に入っているデータをまとめて表示するやり方です。例題では、「todo(やる事)」の一覧を表示するという内容になっています。<script>// give each todo a unique idlet id = 0;export default {  data() {    return {      newTodo: "",      todos: [        { id: id++, text: "Learn HTML" },        { id: id++,
0
カバー画像

Vue でボタンをクリックした時の処理

Vue でボタンをクリックした時の処理Vue 公式チュートリアルのステップ4です。このステップでは、Web ブラウザ上に作成した「ボタン」をクリックした時の処理を学習します。前回までのポイントをもう一度例によって最初は、前回までの復習です。 前回までに、Vue の「部品」を記述するファイル「.vue」は、HTML・CSS・Javascript の記述を書く部分に分かれています。* HTML は、「template」のタグの部分に記述します。* CSS は、「style」のタグの部分に記述します。* Javascript は、「script」のタグの部分に記述します。 Vue では、この三つの部分をうまく連携させて、色々な機能を実現しています。 特に、HTML の部分は、標準の HTML の書き方とは、若干違う部分もあるので、その辺りを意識しながら、Vue 独自の書き方をマスターする必要があります。これまでは、この三つの基本部分を使った例と、簡単な連携を学習してきました。今回学ぶのは?今回は、HTML と Javascript の連携で、新たに「ボタン」を使った事例を学習します。 ボタンをクリックする度にボタンに表示されている数字を1づつ増やして表示をするという機能を実現します。以下のコードが変更を加える前のコードです。<script>export default {  data() {    return {      count: 0,    };  },};</script><template>  <!-- make this bu
0
カバー画像

Vue の公式チュートリアル 表示する文字に色をつける

Vue の公式チュートリアル 表示する文字に色をつけるVue の公式チュートリアルの第3回目です。ステップ3では、表示する文字に色を付けるやり方を学びます。これまで、Vue の「部品」のファイル「.vue」ファイルに HTML と Javascript を埋め込むやり方を学んできました。今回は、CSS を使って文字に色をつけます。前回までのポイントをもう一度まずは、前回までの復習です。 Vue の「部品」として表示する内容をまとめたファイルが「.vue」ファイルです。 このファイルには、三つの部分があります。* HTML を書く部分:「template」のタグの部分に書きます* Javascript のプログラムを書く部分:「script」のタグの部分に書きます* CSS を書く部分:「style」のタグの部分に書きます。 Javascript で、表示に使うデータを指定することもできます。 Vue のフレームワークでは、標準の HTML とは少し書き方が違っています。また、Javascript も特有の書き方で書くので、まずは標準的な書き方を覚えてしまう方法で学習を進めます。今回の学ぶのは?ステップ3で学ぶのは「表示する文字に色をつける」やり方です。標準的な HTML の文字も CSS を使うと、「体裁(見た目)」を整える事ができます。Vue でも、同じコンセプトで、表示のデータの「体裁(見た目)」を整える事ができます。これまでの復習で書いた通り、Vue の部品の「.vue」ファイルの中は、三つの部分から構成されていて、HTML/CSS/Javascript を記述できます。
0
カバー画像

Vue の公式チュートリアル 表示内容をプログラムで決める

Vue の公式チュートリアル 表示内容をプログラムで決めるVue の公式チュートリアルのステップ2です。このステップでは、Javascript のプログラムから表示に使うデータを決める方法です。前回のポイントは?ステップ2を始める前に、前回のステップ1の内容を簡単に復習しておきます。前回のポイントは、基本的な HTML の記述を Vue で表示させる方法でした。<template>  <h1>Hello World!</h1></template> のように、「tempalte」のタグの間に表示させたい文字を書けば良いだけでした。 あとは、Vue が勝手に処理して表示してくれます。「.vue」ファイルには、「template」の他に、「script」のタグには、Javascript のプログラムを、「style」のタグには CSS の記述を書くことができます。 あとは、少し HTML のタグを幾つか学習しました。今回学ぶのは?ステップ2では、表示に使うデータを Javascript のプログラムで決めるやり方です。こうすることで、プログラムで処理したデータを Web ブラウザで表示する事ができるようになります。このステップでは、その前段階で Javascript で設定した値を表示する方法を学習します。「.vue」ファイルの構造はステップ1で学習した通りです。今回は、「template」のタグ以外に、「script」のタグに Javascript のプログラムを書きます。<template>   <h1>H
0
カバー画像

Vue の公式チュートリアル(ステップ1)をやってみる!

Vue の公式チュートリアル(ステップ1)をやってみる!フロントエンドのフレームワークの学習を通して、Web 開発の基本をマスターする実施例として、Vue の公式サイトにあるチュートリアルをやってみるという連載を紹介する事にしました。初めて、Web 開発のプログラミングの学習をされる方是非見てみてください!Vue の公式チュートリアルフロントワークのフレームワークを最初に学習するスタイルで Web 開発に必要なプログラミングを学ぶ実施例として、Vue の公式チュートリアルを使った学習例を紹介してみる事にしました。このチュートリアルは、Vue の公式ベージの一部として紹介されている物です。(日本語版のサイトはサイトはサイトはこちら)日本語のサイトは英語のサイトと同じではないようです。(2022 年 2 月現在) 英語のサイトの公式チュートリアルを見た感じでは、初心者の学習には良さそうなので、これを元に学習する初心者のための記事を少し連載の形で書いてみることにしました。全部で 14 のステップになっていて、一つづつ学習した場合、14 日間で基本をマスターできる事になるので興味のある独学者はやってみると良いと思います。チュートリアルの形式は、画面の右側に、コードを入力できる部分と、その結果を表示する部分が作られていて、一番最初は開発用の PC などに設定する事なく学習できるのも魅力です。まずは、このオンラインでコードを入力しながら学ぶというスタイルでやってみる方法を紹介します。最初の課題は?最初の課題はシンプルに、単純な HTML の記述を Vue の部品として表示させるというシンプ
0
カバー画像

React の公式チュートリアルを見てみました

React の公式チュートリアルを見てみましたWeb 開発のショートカットとして、フロントエンドのフレームワークのチュートリアルをやってみると言う学習方法を紹介しました。この記事では実際に React のチュートリアルを見てみました。React のチュートリアルリアクトの公式サイトにチュートリアルが紹介されています。このチュートリアルは、「tic-tac-toe」と言うゲームです。日本だと「🟡 ❌」という感じで、縦・ 横・斜めのいずれかで三つ揃えるゲームです。これを順番に従って作っていくと、簡単な React のアプリが作れる様になっています。 まずは、React を使うための設定から始まって、React を使ったコードの書き方を解説しています。React の簡単な仕組み最初に、簡単に React とは何かを書いておくと、「Web ブラウザ上で動くアプリを簡単に作るための仕組み」です。HTML と CSS は Web ページを書くための言語です。一方で Javascript は Web ブラウザで動かすプログラムを書くためのプログラミング言語です。もちろん、Javascript を使って、 Web ブラウザの表示も作る事ができますが、HTML で直接書くよりわかりにくいコードになってしまいます。そこで、HTML の記述を Javascript の中に組み込む様な形で使えるようにしたのが React がやっている事です。HTML に似た記述で「JSX」と呼ばれています。JSX は HTML に非常に似た記述方法なので、HTML を学んだ上で学習した方が良いというのが通常の学習方法
0
カバー画像

Javascript と Typescript

Javascript と TypescriptWeb 開発では、Javascript は欠かせませんが、最近では Typescript も注目されています。Typescript を勉強しておいた方が良いのか迷う場合も多いと思います。どちらが良いのかを考えてみました!Javascript は必須Web 開発をする場合、バックエンドは別にしてもフロントエンドの Web ブラウザで動作するプログラムは Javascript になります。したがって、フロントエンドに関わる開発では Javascript は必須のプログラミング言語という事になります。そうした、理由もあって Javascript を学習する人はたくさんいますが、最近では企業のある程度の規模の開発では Typescript が使われるケースも増えています。そうなってくると、Typescript を学習しておいても損はなさそうな状況になりつつあります。ところで、Web 開発者を目指してプログラミングを学習する人の場合はどうでしょうか?この連載で既に書いてきたように、「今必要な事に絞って学習する」ことで、学習を効率よく進めて短期間で成果を出すという考え方で言えば、Javascript でプログラミングを書ければ、Typescript はなくても良い事になります。そう考えると、Typescript を初心者が学習するのは後でも良いという事になりそうです。Typescript の正体とは?ところで、Typescript の正体をご存知ですか? 一言で言うならば、Typescript は Javascript をベースに、変数の型や初
0
カバー画像

アプリの中のデータの形

アプリの中のデータの形アプリの中で扱うデータの形は同じデータでも目的や利用するプログラミング言語で変わってきます。この記事では、プログラムの中で扱うデータの形の例について紹介します。ネットリストのデータの形先日紹介した、回路図の接続情報であるネットリストを読み込んだ時のデータは、Python の「Dictionary」というデータの形を使いました。 Python で処理する場合には、扱い易いデータの形ですが、実際には、同じネットリストのデータでもデータの持ち方には別のデータの形にしても扱う事が可能です。例えば同じ Python を利用する場合でも、「Dictionary」以外だと、例えば「Net」というクラスを作る方法もあります。 Python はオブジェクト指向の記述方法もサポートしているので、少し複雑な回路設計支援のアプリを書く場合、クラスにして、Net のデータを扱うメソッド(method)を一緒に実装するとプログラム全体の見通しが良くなりますし、モジュールの再利用もやりやすくなります。先日の例で「Dictionary」を採用した理由は、例としてできるだけシンプルに実装した方がわかり易いと思ったので Python の Dictionary を利用して、他の処理は関数で実装するという方法を採用しました。他の言語で実装したらどうなる?次に、Python 以外の言語で実装する場合を考えてみます。 例えば、Python ではなくて、Javascript で実装する場合には、どうなるでしょうか?一つの方法は、上で紹介したように Javascript もオブジェクト指向の記述が可能な
0
カバー画像

Pythonは簡単?

Pythonは簡単?最近はいろいろな用途で Python が利用できるケースが多く、たくさんのアプリが Python で書かれています。果たして Python は簡単なプログラミング言語なのでしょうか?よく利用されるプログラミング言語最近のソフトウエア開発では、Python や Javascript は良く利用されるプログラミング言語です。 特に、OS などに依存しない言語で、どの PC でも利用できるのは大きな魅力です。少し前は同じような理由で Java が広く使われた時もありました。日本では、Ruby なども良く利用されていますが、この辺りのプログラミング言語は、初心者の学習でも最初に選ばれる事も多く、これらのプログラミング言語を利用した仕事も多くなっています。実際に、Python や Javascript でプログラムを書くと比較的短時間で大抵のプログラムを開発できます。そう考えると、Python や Javascript は簡単な言語と言えそうです。比較の対象は、C 言語や C++これに対してよく比較される言語が、C 言語や C++になります。 いろいろな人に話を聞くと、C 言語や C++は「難しい」「難しそう」というイメージを持っている人が多いようです。 Java はこれらの中間に位置する感じになります。しかし、実際のコードを見てみると、基本的な書き方はほとんど同じです。 プログラムの基本は、「繰り返し処理(ループ)」「条件分岐」です。あとは、変数の型と演算です。 一番古い部類に入る C 言語の書き方と、見た目上は大きな違いはありません。新しい、プログラミング言語の場
0
カバー画像

プログラミング言語の話

プログラミング言語の話Raspberry Pi を利用したデジタル通信の話をお届けしていますが、今日は記事にするだけの進捗がなかったので少し違う話を書いてみました。 いろいろなプログラミング言語がありますが、どの言語を使うかをどうやって選んでいますか?人気のプログラミング言語というのは存在しますが、万能なわけではありません。この記事では、プログラミング言語について少し考えてみました。プログラミング言語の選択肢プログラミング言語は、「流行り」もありますが、いろいろな種類のプログラミング言語があって、学習する際にどれを選んだら良いのか、開発ではどの言語を使ったら良いのか迷う場合も多くなります。最初に考えるのは、まず「選択肢」があるのかどうかを考えてみます。 実際に、開発の内容によっては、選択肢がない場合もありますし、いろいろな選択肢がある場合もあります。その違いはどこから来るのかを最初に考えてみます。 殆ど選択肢がない場合の良い例は、Web プログラミングのフロントエンドです。Web アプリなどのフロントエンドのプログラムは、Web ブラウザ上で動作します。現在標準的に利用されている Web ブラウザは、Javascript のプログラムしか実行できません。従って、フロントエンドの開発を目的にする場合は、利用するプログラミング言語は必然的に Javascript になります。このように書くと、Typescript でも出来ると言われる方もいらっしゃると思います。Typescript は Javascript の延長上にあるプログラミング言語で、型をより厳格に扱う言語になります。Ja
0
カバー画像

script要素の src属性に .js 以外の拡張子を指定してもエラーにはならない

WebページのHTMLにおいて、JavaScriptファイルを読み込むには、<script src="xxxxx.js"></script>と書きますが、src属性に指定するファイルの拡張子は .js でなくてもエラーにはなりません。.js以外のファイル(中身はJavaScriptコード)を指定しても普通に処理されます(但し、画像・動画・音声・CSVの拡張子だけはブロックされます)。ファイルの拡張子によって HTTPレスポンスの Content-Type ヘッダーは変化しますが、一般的なブラウザは script要素で指定されたリソースの Content-Type を無視します。Content-Type ではなく、script要素の type属性に指定された「スクリプトを表すタイプ」を重視します(デフォルトは text/javascript)。ラボラジアンでは、Webに関するサービスを出品しております。こちらもよろしくお願い致します。
0
カバー画像

Import maps の使い方

1. Import maps とは?・「JavaScript の実際のファイル名」と「そのファイルを import するときに指定する名前」を切り離すことができます(2つの対応情報はJSON形式で用意しておきます)。 ・これにより、ファイル名が後から変わっても(ファイル名にバージョン番号が含まれている場合など)、一度記述した import 文を変更する必要はなくなります(JSON形式による対応情報側のみを変えます)。・npm のパッケージ名のようなシンプルな名前でインポートできます。 ・静的インポート、動的インポートのどちらでも使えます。 2. Import maps の使い方 Import maps を使う手順は以下です。 (1) <script tyle="importmap"> というタグの中に、モジュールファイルのURLと名前の対応を記述します。このサンプルコードでは、”./foo.12345.js” という相対URLで表されたファイルに対して、”foo” という名前をつけています(マッピング)。 (2) (1) でつけた名前を使って import します。 静的インポートの場合動的インポートの場合3. polyfill (shim) 2021年11月現在、Firefox や Safari では使えないようですが、以下のページで polyfill (shim) が用意されています。 🔗 guybedford/es-module-shims     URL: "http://" + "github.com/guybedford/es-module-shims"
0
カバー画像

[Javascript] Array.reduceを使って一次元配列をn個ずつに分割して新しい二次元配列を返す

はじめに 一次元配列を指定の要素数ごとに分割し、二次元配列にする必要があったため、そのロジックに関する小ネタです。本記事はQiitaで公開した記事の要約版と補足になります。技術的な話 const chunkedArr = ((arr, size) => arr.reduce((previous, _, i) => i % size ? previous : [...previous, arr.slice(i, i + size)], []))(originalArr, num);//originalArr = [1,2, ... ,n]、num = nポイントはArray.reduece()の使い方になります。特に第一引数を返す際、スプレッド構文を利用することでワンライナーにすることができます。もちろん、スプレッド構文を使わなくてもワンライナーで記述することは可能です。要するに、Array.reduece()の第一引数と第二引数の振る舞いが理解できれば、様々なバリエーションで表題のような結果を得るロジックを記述できるということです。[追記] 2021.11.30頂いたコメントより、処理負荷の面からも結果が配列ならArray.flatMap()を使用するほうがより適切であると判断し、以下、サンプルを記載しておきます。(結果がオブジェクトなら、Array.reduce()で良いでしょう)const chunkedArr = ((arr, num) => arr.flatMap((_, i, arr)=>i%num? []: [arr.slice(i, i+n
0
カバー画像

【技術者向け】Chromeの拡張機能を作ってみませんか?

Chromeの拡張機能って知っていますか?Chromeで行う様々な操作をカスタマイズすることができる機能です。Chromeウェブストアで公開されていて、色々と便利な拡張機能が簡単にインストールできます。そんなChromeの拡張機能ですが、自分で作ることができます。私は趣味で10点程作成しました。その内、1つはChromeウェブストアで公開しています。その経験から拡張機能を作る良さについて語りたいと思います。良さを語る前に真逆なことを言います。正直Chromeの拡張機能はブームが過ぎ去ったと思います。一時期は様々な拡張機能が作成され、便利なchrome拡張機能を紹介する記事が溢れていました。しかし、拡張機能でユーザーの情報を不当に収集したり、ウィルスをダウンロードするものが作られ、Chromeの拡張機能は危険であると言われるようになりました。そこでユーザーが離れていきましたが、致命的だったのが2020年9月21日にChromeウェブストアで有料の拡張機能の新規公開を中止したことだと思います。これで多くの開発者が離れていきました。それでブームは去ってしまったと考えています。現在でも様々な無料の拡張機能がウェブストアで公開されていますが、以前のような活気はないように感じます。また、パソコンを使うユーザーが減りスマートフォンへ移行したことも要因の一つとして考えられるでしょう。そんな斜陽なChrome拡張機能ですが、私はこれの作成にハマっています。良さについて語ります。斜陽とは言いましたが、WebブラウザとしてはChromeはまだまだ現役です。Webブラウザシェアランキング(2021年6
0
カバー画像

JavascriptとPHP その2

前回、Javascriptについて触れましたが、大事なことを書き忘れていました。Topに戻るボタンやスライドショー、スマホサイトには必須のハンバーガーメニュー(3本線のよく見るメニュー)など身近なものは多々あります。あえてこれを難しく定義するならば、以前はHPに動きを持たせるプログラムとされていましたが、現在はその程度のことであれば、CSSアニメーションで制御できる。そこで、端末(フロントエンド)の操作でHPを動かすことができるプログラムとでも言えばいいと思います。この定義で言うと、その最たる例が、皆さんご存知のGoogleMapsやストリートビューです。どうやってサーバーに上げてるか不思議じゃないですか?だって、上空だって見えるんですから笑仕組みの話は割愛しますが、あれはJavascriptで動いています。Javascriptすげー。とても奥が深い深いプログラムです。ここで話を終わらせるのも無責任な話ですね。もし興味のある方は、GoogleMapsについては、「Ajax(エイジャックス)」「非同期通信」でググってください。マニアックな話になります 笑。ストリートビューに関しては、「GoPro Max」というカメラをYouTubeで調べたら、仕組みがイメージできると思います。このように撮影した画像をJavascriptの技術で繋いでいるということです。ではPHPについて説明しますね。まずは、前回のおさらい。スマホやパソコンなどのフロントエンドと呼ばれるものにURLを入力してサーバーを「呼ぶ」➡︎バックエンドと呼ばれるサーバーは届いた呼びかけに「応答して発信する」➡︎フロントエン
0
カバー画像

Googleアナリティクスについて

ビジネスでHPを持つと気になるのが、アクセスログ。つまり、一体何人の人がHPを訪れてくれたのだろうか・・・レンタルサーバーにもこの機能がついていますが、もっとも一般的でかつ使い勝手のよいのが、Googleアナリティクスです。無料版と有料版がありますが、その落差たるものや。ちょっと前までは130万円/月とか言われていました。ちなみに今は営業さんとのやり取りで値段が決まるそうです。0円 or 100万円オーバーか。その選択肢にはちょっと笑ってしまいます。ご安心ください。有料版は大企業が分析に使っているケースがほとんどで、通常は無料版を使用します。さて、ここからが本題。これを使うと時間帯のアクセスは当然のことながら、閲覧したのはPCかスマホか。他にもFacebook経由で訪れたとかそんなことまでわかります。このシステムはJavascriptと呼ばれるプログラムで動いていますが、弊社で製作したHPにはもちろん無料で仕込んでいます。但し、利用に際しGoogleのアカウントからアナリティクスの設定が必要。このあたりは個別にご連絡させていただいております。Googleは他にもHPに関連することでとても便利なサポートをやってくれています。例えば、HPを作る上で必須となるWebフォント。端末ごとで表示されたHPの書体が変更になるとそれはそれでスッキリしません。弊社を含め、HPの多くはGoogleフォントを使用し、端末ごとの差異を防ぐ工夫をしています。これを仕込むことで、MacのパソコンからHPを閲覧しようが、Android携帯でHPを閲覧しようが、その書体は統一されたものとなります。Google
0
カバー画像

【Laravel】#3スクールマネージメントシステム作ってみた!~クラス予定ページ~

今回はクラスページのクラス予定に関するページについて紹介したいと思います。ここのページではクラスの予定のみが閲覧できるようになっています。それでは見ていきましょう。まずは基本のビジュアルから⬇︎月毎に閲覧できるようになっており、今月の予定が初期表示されるような仕様になっています。予定名、予定日のみが表示されるようにし、選択すると詳細が表示されます。こんな感じです⬇︎こちらの詳細ページで詳しく内容が確認できます。右側の⚙マークを押すと...⬇︎編集ページになっています。こちらですぐに内容変更ができるようになっておりアクセスしやすくしました。では登録画面を見ていきましょう⬇︎バリデーション(バリデーションは未入力のチェックや数字の半角指定などを判定する機能のことです!!)付きの情報入力画面です。確認ページ⬇︎(*全画面に戻った時のセッションについてはコード解説の時に解説します)登録ページ⬇︎情報が反映されました⬇︎ 予定をクラスごと、試験ごとなど分けていますがここに関して全て統一した予定でもいいのではないかとも思いましたが、例えば朝礼、夕礼での先生の話さなければならないことをすぐに確認できるのは便利だなと思い予定を細かく分けました。先生がいかに一つの仕事に集中できるかここが大事なのかなと思います。 こういうどうしたら先生の多すぎる業務を効率化できるか?と言う問に対してシチュエーションを想定しながらアプリの仕様を考えると、具体的な仕様が見えてきます(月毎表示の方がいいのではないか、すぐに内容修正をかけられた方がいいのではないか等)。次回は授業スケジュールのビジュアル紹介です。ありがと
0
カバー画像

Webページ上でボタンを押したときに、必要な JavaScriptコードを読み込んで実行するサンプル

1. 必要になったときに JavaScript コードを読み込んで実行するあるWebページ上にボタンが設置されており、これを押すと何かしらの JavaScript コードが実行されるとします。 この場合、Webページにアクセスした際にその JavaScript コードを読み込んでおく必要はありません。「ボタンを押したとき」に読み込んで実行すればよいわけです(速度に問題がなければ)。これなら、Webページの読み込み&表示の高速化にもつながります。 この動作を実現するための、JavaScript の動的インポートを利用したコード例を紹介します。 「動的インポート」というのは、「必要なときに読み込んで実行する」といった意味になります。2. コード例(1) JavaScript モジュールの記述ボタンが押されたときに実行する JavaScript コードを単独の JavaScript ファイルに記述するのですが、今回ファイル名は、utils.js とします。内容は以下です。- - - - - ここから - - - - -export default {   say: (msg) => {     // ここに処理を書きます    alert(msg);   } };- - - - - ここまで - - - - -・say という名前のメソッド (関数) を定義しています。受け取ったメッセージを、アラート表示するだけのメソッドです。 ・ここでは 1つのメソッドしか記述していませんが、複数のメソッドを記述することもできます。 このファイルは、他のファイルから読み込んで貰うために、
0
カバー画像

【Laravel】#1スクールマネージメントシステム作ってみた!

 こんにちは、今回から少しずつLaravelでの学校や塾向け業務効率化Webアプリ開発の過程をここに残していきたいと思います。 Laravelを学び始めた人や、プログラミングに興味がある初心者の方にわかりやすい内容を発信できればと思います      (僕は全て独学です!誰でもできます!!!)。 兎にも角にも今回はこのアプリケーションで何ができるのかを紹介していきたいと思います。 top画像の左にあるのが用意しているメニューです。⬇︎こちら(きっかけはいつも日本の学校の先生って仕事量の多さが異常に多いなと思っていて、それを解決できるアプリ作ったら面白そうだなと思ったからです。ちなみに文部科学省の『教員が担うべき業務』を読んで内容を考えました。)それぞれの大まかな内容として•トップページ  --  今日の天気、予定、行事などが閲覧できるページ•クラスページ -- 先生が担当のクラスに関する情報が閲覧できる•成績管理   --   クラスの成績管理閲覧ページ•学校行事   --   学校行事の詳細を閲覧できるページ•カレンダー  --  予定一覧がカレンダーで確認できるページ•メッセージ  --  メールのような機能をつけたい(まだ開発していません)•職員フォロー --  教員同士の掲示板のようなページ•指導要領  --授業で必要なプリントなどを選べる(まだ開発していません)•情報登録画面 --  各情報の登録ページトップページクラスページ成績管理学校行事職員フォロー情報登録画面 こんな感じの見た目で開発しており、使いさすさシンプルさ、直感的な操作性を意識して見た目を整えています。 
0
カバー画像

WordPress: 特定の記事に特定のCSSを出力する方法

1. はじめに WordPress サイトにおいて、「特定の記事を表示するときだけ、特定の CSSを出力する」方法を紹介します。それぞれのページが、なるべく必要最低限のCSS(スタイル)を出力することによって、ページの読み込み&表示速度を改善するのが目的です。特定の記事だけに対して、特定のCSS(スタイル)を出力します2. 特定の記事を表示するときだけ、特定のCSSを出力する方法 2-1. 概要 いろいろなやり方があるとは思いますが、本記事では以下の方法を紹介します。(1) 特定のページのみが必要とするCSSを、1つのファイルに切り出しておく。(2) functions.phpファイルに、「記事IDが○○な記事ページを表示するのであれば、△△というCSSファイルを出力する処理」を記述する。このとき、CSSファイルの中身を <style>タグ内にインライン展開する。2-2. 具体的な手順 (1) まず、A という記事だけが必要とするCSS(スタイル)を記述した .css ファイルを、テーマディレクトリ直下に配置します。ここでは、a.css というファイル名にします。 (2) 記事 A の ID番号を調べます。 これは、記事A を編集する際のURLに入っています。?post=XXXXX という部分の XXXXX が ID番号です。 ここでは、記事AのIDは「1111」だとします。 (3) テンプレートの functions.php ファイルに以下を記述します。- - - - - ここから - - - - -add_action( 'wp_enqueue_scripts'
0
カバー画像

<script>タグのdefer/async属性について(その2:実例)

1. はじめに先日書いた以下の記事の補足です。&lt;script&gt;タグの属性によって、JavaScript ファイルがどのように読み込まれるのか、以下の3パターンを実際のWebページを使って比べます。(1) defer / async 属性を指定しない場合(2) defer 属性を指定した場合(3) async 属性を指定した場合2. 方法Chrome ブラウザのデベロッパーツール (DevTools) が持つ [Performance] パネルにて、読み込み処理を解析します。以下のHTMLファイルを読み込ませます。60行のファイルです。画像の中で示した、3つの &lt;script&gt;タグで JavaScript ファイルをそれぞれ読み込ませます。この &lt;script&gt;タグに defer / async 属性を指定します。また、以下の記事も参考にしてください。3. それぞれの読み込み処理を観察する(1) defer / async 属性を指定しない場合以下が解析結果の画面です。defer / async 属性を指定しない場合 (拡大する場合は、右クリックして別タブで画像を開いてください)画像の中で [0...48] とあるのは、HTMLファイルの0行目から48行目に対するパース処理です。以前書いた記事でも説明しましたが、1つのHTMLファイルを上からいくつかに分割して、上の部分からパースされます。それぞれのパース処理の間で別の処理が行なわれることもあります。今回の場合、1回目のパース [0...48] 対象行の直後に、&lt;script&gt;タグが
0
カバー画像

Webページが読み込まれる際、HTMLは分割されてパースされます

1. はじめにこの記事では、Webページが読み込まれる際、HTMLが分割されて段階的にパースされる様子を観察します。2. 前提知識(1) (HTML)パースは、HTMLを読み込んでDOMツリーという「HTML要素から構成される木構造」を構築する処理を指します。(2) これとは別に、CSSを元に CSSOMツリーが構築されます(装飾を担当)。(3) DOMツリーとCSSOMツリーから、レンダリングツリーが構築されます。(4) レンダリングツリーができた上で、画面のレイアウトやレンダリングが行なわれ、画面にWebページが表示されます。(5) HTMLファイルの途中までの情報を元にしても、以上の処理を行うことができます。以下の記事も参考にしてください。3. 方法Chrome ブラウザのデベロッパーツール (DevTools) が備えている [Performance] パネルで、Webページの読み込み処理を解析させ、その結果を観察します。4. 解析した結果を観察するとあるWebページを、[Performance] パネルで解析しましたので、その結果を紹介します。まず、このWebページのHTMLファイルは、654行あります(下画像参照)。[Sources]パネルで htmlファイルを表示していますここから、[Performance]パネルで行った解析の結果画面を載せていきます。1回目のHTMLパース処理※ 横軸は時間で、左から右に時間が進みます。画面中央左端あたりの青い四角の部分で、HTMLファイルが読み込まれています。そこから下の部分では、Mainスレッドで実行された処理が時系列で表示
0
カバー画像

Webページ読み込み高速化に対する<script>タグのdefer/async属性について(その1)

1. はじめに「Webページの読み込み高速化」という観点から、「&lt;script&gt;タグの defer / async 属性」について書いてみます。2. &lt;script&gt;タグに defer / async 属性を付けた場合のブラウザの動作まず、HTMLの仕様である HTML Living Standard から画像を引用します。HTML Living Standard - 4.12.1 The script element から引用※ 拡大する場合は、右クリックして別タブで開いてください。※ 関係ない部分には影を付けました。この画像では、以下の3種類の動作についての違いについて説明されています。(1) ただの &lt;script&gt;タグ(2) defer 属性付きの&lt;script&gt;タグ(3) async 属性付きの &lt;script&gt;タグここで図示されている違いを言葉で説明すると以下になります。(1) ただの &lt;script&gt;タグ1. HTMLのパース(*1)を止める2. JavaScriptファイルをダウンロードする3. JavaScriptコードを実行する4. JavaScriptコードの実行が終わったら、HTMLのパースを再開します。(*1) HTMLを読み込んでDOMツリーを構築する処理(2) defer 属性付きの&lt;script&gt;タグ1. HTMLのパースを止めず、並列に JavaScriptファイルをダウンロードする2. HTMLのパースが完了したら、JavaScriptコードを実行する (DO
0
カバー画像

Javascript のプログラムの流れの作り方

Javascript のプログラムの流れの作り方プログラムで重要なのは、「流れ」という話をしました。今回は、プログラミング言語を Javascript に絞って、どのように流れを作るかを考えてみました。「入口」と「出口」を決めるJavascript のプログラムは、関数(function)を使わなくても記述できます。しかし、関数(function)を意識した方が入口と出口がハッキリしやすいので、関数を意識したコーディングをすることをお勧めします。あとは、関数を呼び出す事で処理をするようなスタイルにします。関数の入口は引数と呼ばれるもので、関数を呼び出す際に一緒にデータを渡すようになっています。 出口は関数が返してくる処理結果です。関数によっては、値を返さないで処理だけを行うこともあります。例えば、Web ページのボタンが押された場合の処理の場合、一連の処理を行なって終了という場合が殆どなので、値を返しません。例としては、ボタンを押したら別の表示に切り替えるという場合、呼び出し元に結果を返す必要がありません。このような関数はボイド(void)型、要は返り値がない関数として定義されます。その場合は、コメントに処理結果などを描いておくと、開発後や開発者以外の人がソースコードを見たときに内容の理解の助けになります。これが決まると、最初に関数に渡す物と処理結果が何なのかがハッキリするので、関数が何をするのかの方向が決まります。 あとは、必要な結果を得るための流れをプログラムとして記述すれば良いことになります。流れを作る「構造」は2種類で OKプログラムの基本は「上から下」なので、それ以外
0
カバー画像

Webページの高速化とSEOの関係

「Webページの表示を高速化すること」と「SEO」との関係を私なりに簡単に説明してみます。私はSEOの専門家ではないため、間違っているところがありましたら教えていただけると大変ありがたいです。まず、SEOで重要となる「Google検索のランキング要因」を表す図を載せます。(Google検索のランキング要因)※ GoogleがWebページを評価するアルゴリズムは公表されていませんが、考え方はガイドラインとして公開されています。また、社員の方が語ってくれることもあります。ということで、ざっくりとした項目になっています。Google検索のランキング要因はいろいろな項目があるようですが、ページの読み込み速さなどは「ページエクスペリエンス(*1)」という「ユーザーが気持ちよく使えるページか?」を表すカテゴリに分類されます。このページエクスペリエンスの重要度は高くありません。コンテンツの品質の方が重要です。(*1) 厳密には、「Search signals for page experience」といいます。このページエクスペリエンスの中に、Googleが提唱する「CWV (Core Web Vitals)」という3つの指標が含まれています。以下の3つです。(1) LCP(ページの読込が速いか)(2) FID(すぐに操作できるか)(3) CLS(最初の画面描画時に、画面上の要素が動かないか)ここで大事なポイントは、ランキング要因となっているのは、ただのCWVではなく「CWVのフィールドデータ」となっている点です(図を参照)。フィールドデータというのは、日頃ユーザーがそのWebページにアクセ
0
カバー画像

PageSpeed Insights による「スクロール パフォーマンスを高める受動的なリスナーが使用されていません」について

1. 問題点PageSpeed Insights (PSI) や Chrome の Lighthouse といったツールで、Webページのパフォーマンス測定をしていると、「スクロールパフォーマンスを高める受動的なリスナーが使用されていません」という指摘を受けることがあります。日本語での指摘内容英語での指摘内容2. 原因メッセージ 最下部に ファイル名と行数が記載されているので、その箇所を見てみると 以下のような JavaScript コードが見つかるはずです。- - - - - ここから - - - - -document.addEventListener("touchstart", () =&gt; {   // ここに色々処理が書いてあります  // … });- - - - - ここまで - - - - -この JavaScript コードは、「”touchstart” という名前のイベントが発生したときに実行する処理」を記述しています。”touchstart” 以外でも「画面のスクロールが発生するイベント」であれば、同様に指摘されるはずです。 スクロールが発生するイベントで実行されるコードなので、ここで重い処理が実行されてしまうと、スクロールの動作がもたついてしまう可能性があります。 ここで記述されている addEventListener() メソッドには、この問題を避けるための引数が用意されています。このメソッドの第二引数として「{ passive: true }」を指定すると、イベントリスナーに書いたコードをスクロール処理とは別扱い(別スレッド)で実行してくれるので
0
カバー画像

Webページの読み込み&表示の高速化(重い処理は「専用Worker」に任せる)

1. 専用Worker による JavaScript コードの実行についてWebページを読み込む際に、(1) JavaScript で何か重い処理を実行している。(2) その処理は画面上の要素を必要としない。(3) 画面の描画される時点で、その処理は必ずしも完了している必要はない。という場合は、その処理を 専用Worker に任せることで、そのページの読み込み&表示を高速化することができます。通常、Webブラウザを使ってあるWebページにアクセスする場合、「そのWebページが持っている JavaScript コードの実行」と「そのWebページの描画処理」とは、メインスレッドと呼ばれる「同じプログラムの流れ」の中で実行されるため、前者に時間が掛かかると、後者が遅くなってしまいます。※ Chrome デベロッパーツールの [Performance] パネルで検証を行うと、メインスレッドを確認することができます。下画像の「Main」とある部分がそれです。(Chromeデベロッパーツールの [Performance]パネル)「Main」の部分を展開すると、いろいろ忙しそうに処理を実行しているのが分かります。(Main を展開したところ)なのですが、専用Worker というものを使って JavaScript コードを実行すると、メインスレッドとは別の「プログラムの流れ」の中で実行されるので、画面の描画処理に影響を与えることはなくなります。※ 下画像は、上とは別のページで [Performance]パネルの検証を行った結果です。「Main」の他に「Worker」という項目が表示されています