すべてのカテゴリ

システムやプログラムをちょっと調整したい時や調子が悪い時に、色々自分で試される方がいらっしゃいます。ご自身で色々試されてから、どうにもできなくてご相談を受けることがあります。これはいい面悪い面があって、いい面：こちらからお聞きすれば現在の状況がある程度わかる。悪い面：色々試された結果、事態が深刻化してしまう事がある。2つめがなかなか厄介で、色々触った後で見てもそれが「元々のエラーになっていた部分」なのか「後から書き換えて更にエラーを引き起こしている部分」のかがわかりません。ご相談を受けると、かなりの高確率で後者の状態になっています。こうなると、直すまでの時間がかかり、最悪は元に戻せない状態になることもあります。簡単なことだから自分で出来そう！と下手にいじらず、簡単そうなこともプロにご相談ください。https://coconala.com/services/1689980

【作り直し】 18歳の時プロバイダーの ジャストネットに契約してHPを作り アナログ回線からISDNにして 世界に向けて俺の事を発信した！ しかし最初HPの使用できる容量が たったの2メガしか与えられず ロクな物が出来なかったけど 半年後10メガまで拡大された！ °˖☆◝(⁰▿⁰)◜☆˖° なので2メガじゃ容量が足りなくて 作れなかった事を盛り込んだHPを 新たに全部作り直す事にして ホームページビルダーで作り始める そしてとりあえず大まかに作りあげ 他の人達のHPの良い所を盛り込む為 色々見るとホームページビルダーじゃ 作れないHPがいくつか存在した。 そこで一体どうやってそのHPを 制作してるのか雑誌で調べてみると HTMLと言うHP制作専用言語があり みんなそれで作ってるみたいだった ( *ﾟｪﾟ))ﾌﾑﾌﾑ しかもこの言語が最近できたばかりで 数週間おきに新しいHPの表現方法が 言語にどんどん追加されてるみたいで これを使って迫力あるHPを作ると言う この事を知ってどうしても俺は 自分が納得するHPを作りたいから HTMLを勉強する決意をし熱くなり 早速HTMLの本を買って勉強を始めた 〓＝〓＝〓＝〓＝〓＝〓＝〓＝〓＝〓 【納得いかない事】 それから1週間後だいぶHTMLを覚え テキストにHTMLを直接書いて作り 出来上がった物をブラウザーで 実際に表示させて確認した。 すると色々ミスってる所が多く 何度も修正して手直しを続け やっとの思いで完成させたと思ったら 容量が200㍋位に膨れ上がってた！ なので容量を減らす為 ファイルを圧縮し画像を減らし 何とか10㍋にすると

こんにちは、webサイト（ホームぺージ）に使われるHTML 、CSSなどのプログラミング言語を使って、WEBサイトなどを作ります。では早速説明したいと思います。プログラミング言語についてですか、HTML,CSS, javascriputなどあります。他にもrubyやjava、phpなどたくさんあります。webサイト作成で使う主な、プログラミング言語は、HTML,CSS,JavaScriputです。ではHTMLなんですが、HTMLを簡単に言うと骨組みといったところでしょうか、あと文字などもHTMLで書きます。CSSは、柄ですね。JavaScriptは、動きですね。ざっとこんな感じです。それで、HTMLCSSで、出来たのがこちらの写真です。こんな感じで、出来ます。大体動きをつけなくてもオシャレなサイトは作れます。まあ、これは１０分程で作った代物なので少しオシャレさには、かけます。この上のtopとかのボタン押しても普通に反応します。じゃあなんで、JavaScriptつけるの？っていう話ですよね。それは、JavaScriptを付けるとさっき言ったように、動きを付けることができます。動画をご覧ください。このようにクリックすると、開いたり閉じたりできるやつを付ける事ができます。いかがでしたでしょうか。お分かりいただけましたか。このように、HTML,CSSである程度で、できます。なのでJavaScriptは、付けたら便利ですが、絶対付けなくてもいいという感じです。ご覧いただきありがとうございます。これが私が出品しているサービスです。ご覧ください！！さっき言ったホームページ制作もやっています。

Google Apps Script、通称GASについての話題は、Webを使う多くの人にとってちょっとした関心事かもしれません。特に、「GASって結局JavaScriptなの？」という疑問を持つ方も少なくないでしょう。そこで、この記事ではGASとJavaScriptの関係を、専門用語を控えめにして、できるだけわかりやすく解説してみます。GAS(Google Apps Script)とはGASとは、Googleが提供するプログラミング言語のことで、Googleの様々なWebサービス（Googleドキュメントやスプレッドシート、フォームなど）を自動化したり、カスタマイズするために使われます。たとえば、スプレッドシートに情報を自動で整理したり、フォームの回答に基づいてメールを自動送信するといった作業をプログラムで行えるようにするのがGASの役割です。GASとJavaScriptの共通点GASは、その根底にJavaScriptを持っています。ですから、もしあなたがJavaScriptに少しでも触れたことがあるなら、GASを学ぶのは意外とスムーズかもしれません。変数の使い方、ループ（繰り返し処理）、条件分岐といった基本的なプログラミングのコンセプトが、GASでも全く同じように使われます。GASとJavaScriptの違いしかし、GASがJavaScriptと完全に一緒かというと、そうではありません。GASはGoogleのWebサービスと密接に結びついており、そのための特別な機能やコマンドが用意されています。この点が、通常のWebページ作成などに使われるJavaScriptとは異なる大きな

基本は下記のsampleクラスをいれることで右回転のアニメーションが実装されます、ローディング画面など世話になるので覚えて損はないですtransform-originで回転基準を変更したりtransfoemにxyzを指定してそれを基準に回転するなど結構勝手が効きますtransというcssのコードを調べればいろいろでてくるの興味があればどうぞ※アットマークがブログにのっけれないので【ここにアットマーク】にしてます。.sample{  animation:3s  kaiten; }【ここにアットマーク】keyframes kaiten{   0%{ transform:rotate(0);}   100%{ transform:rotate(360deg); } }

こんにちは！冬の深まる季節、寒いですね。。私の家の外でも雪が降っています。今回は、あなたのWebサイトにも少し冬の魔法をかけてみませんか？JavaScriptを使って、訪問者に雪の降る体験を提供する方法を紹介します。エンジニアではないサイト運営者の方々でも簡単に実装できるよう、技術的な言葉を避けて説明します。なぜ雪の演出を加えるのか？Webサイトに動的な要素を加えることで、訪問者の注目を引き、記憶に残りやすくします。雪が降るアニメーションは、特に冬のプロモーションやイベントにぴったりで、サイトに季節感を加えることができます。それでは、どのようにしてこの魔法を実現するのでしょうか？JavaScriptで雪を降らせるJavaScriptは、ウェブページに動きを加えるためのプログラミング言語です。この言語を使って、雪の粒を画面上に描き、ゆっくりと下に落ちるアニメーションを作ることができます。基本的な考え方は、雪の粒を表す小さな要素をたくさん作り、それらがランダムに、そして自然に画面を横切るように動かすことです。実装のステップ1. 準備: まず、あなたのWebサイトに追加するHTMLファイルとJavaScriptファイルを用意します。3. 雪の粒を作る: HTMLの中で、雪の粒を表す要素を作ります。これは、CSSを使って白い丸や星の形にすることができます。4. 動きを加える: JavaScriptを使って、これらの雪の粒に動きを加えます。雪の粒それぞれに対して、画面の上から下へとゆっくり移動するように指示します。また、ランダムに左右に揺れる動きも加えることで、より自然な雪の降り方を演出

Webサイトを運営する上で、JavaScriptは欠かせない技術の一つです。しかし、JavaScriptを「フロントエンド」と「バックエンド」でどのように使い分けるかは、エンジニアではないサイト運営者にとってはややこしい話かもしれません。この記事では、技術的な難しい言葉を避けて、フロントエンドとバックエンドの違いを簡単に説明します。JavaScriptがサイト運営にどのように役立つのか、その理解を深めていただければ幸いです。フロントエンドとはフロントエンドは、ざっくり言うと、訪問者がブラウザを通して直接見て、触れることができるウェブサイトの部分です。ここでのJavaScriptの役割は、ウェブサイトをもっと使いやすく、また魅力的にすることです。例えば、スライドショーを表示したり、ボタンをクリックした時に何かがポップアップするような動きを加えたりします。このような動的な機能をウェブサイトに追加することで、訪問者にとって快適で楽しい体験を提供できます。バックエンドとはバックエンドは、フロントエンドの裏側で動いている部分で、訪問者には直接見えません。ここでは、ウェブサイトのデータの保存や管理、ウェブサイトがどのように動作するかという「ロジック」が実行されます。JavaScriptがバックエンドで使われる場合、サーバー上での処理に関わります。例えば、ユーザーがフォームに入力した情報をデータベースに保存したり、ユーザーのリクエストに基づいて特定の情報をウェブページに表示したりします。フロントエンドとバックエンドの違い簡単に言えば、フロントエンドは「見た目」と「ユーザーの体験」を、バックエ

はじめにWebアプリケーションやAPIのバックエンドシステムを開発する際、データベースとのコネクション管理は重要な要素の一つです。効率的なコネクション管理は、アプリケーションのパフォーマンスとスケーラビリティに大きく影響します。このブログ記事では、コネクションプールの概念について解説し、Node.jsのMySQLライブラリを使った具体的な実装方法を紹介します。コネクションプールとは？コネクションプールは、データベースへの接続をプール（予め準備された接続の集まり）として管理する技術です。アプリケーションがデータベースとの通信を必要とする際、新たにコネクションを確立するのではなく、プールから利用可能なコネクションを取得します。使用が終わったコネクションは、再利用のためにプールに戻されます。この方法の利点は、コネクション確立のオーバーヘッドを削減し、リソースを効率的に使用できる点にあります。結果として、アプリケーションの応答性が向上し、大量の同時接続をより効果的に処理できます。Node.jsでのコネクションプールの実装Node.jsでMySQLデータベースとのコネクションプールを実装するには、mysqlライブラリを使用します。以下は、Node.jsでコネクションプールを設定し、使用するための基本的なステップです。ステップ 1: 必要なパッケージをインストールするまず、mysqlパッケージをプロジェクトにインストールします。npm install mysqlステップ 2: コネクションプールを作成するmysqlライブラリを使用して、コネクションプールを作成します。以下のコードスニペット

来週に初のサービスを出品する予定です。たぶんです。(笑)サービスは、「マルチメディア デザイン ブック」です。サービスのタイトルは未定です。ブックのサンプルを制作中ですが、今回は、ブックの概要的な説明です。＼ページめくり／本物の本のようなページめくりができるため、本物の本のような読書体験を閲覧者に提供できます。＼マルチメディア／文章、画像、写真、フォトギャラリー、動画、YouTube、Viemo、アニメーション、音声、ナレーションなどをページに展開できます。＼リンクと埋め込み／配置した要素をインタラクティブにできます。 要素へのマウス操作で詳細情報をポップアップウィンドウに表示したり、関連Webサイトに移動できます。ブックのページから離れることなく、シームレスな情報提供ができます。 リンクと埋め込みでインタラクティブなブックにできます。＼アニメーション効果／配置した要素を回転、ズームイン/アウト、バウンスなどアニメーション効果を表現できます。 ページをより魅力的に表現でき、読者をブックに集中させることができます。＼IDとパスワード／閲覧、ダウンロード、コピー防止としてIDとパスワードを設定可能。 ＼ブック配信／パソコン、タブレット、スマートフォンでの閲覧に対応。 オンライン、オフラインで閲覧できます。＼Googleアナリティクス／ブックにトラッキングIDを設定することにより、ブックの各ページが追跡できます。 訪問閲覧者のトラフィック、ページビュー、継続時間、直帰率などのイベントが測定され、マーケティングでの指標を分析、管理できます。 また、検索エンジンにブックのタイトル、キーワ

「プログラミングって何から学べば良いかわからない‥」「プログラミングスクールって高額過ぎて踏み出せない‥」そんな風に思っていませんか？　私もそうでした。私は4人子供を育てながら小学校で教員をしていましたご存知のように教員は超絶ブラック。子供に学びを教える喜びを味わいながらも、自分の働く環境について強く疑問を持つようになりました自分を変えたい、新しい技術を学びたい。プログラミングって興味あるけど、何から始めたらいいかすらわからない。独学は挫折の連続。スクールは高額で決心がつかず、迷って動けない時期がずっとありました結局貯金をはたいて、某有名プログラミングスクールに通うことに決めましたそこでの学びは私にとって本当に有意義でした。専属の先生が一つ一つの質問に丁寧に答えてくれて、安心して学ぶことができました。子育て仕事と苦労しながら先生の支えがあってなんとか卒業できましたしかし卒業後に、ある後悔をしました。それは、「スクールが即戦力のエンジニアまで専門性を高められるほどの環境」だからこそ、私のような「基礎基本もわからない初心者にとって無駄に高額すぎる環境」だという気づきです例えるなら初心者にとってスクールは【小学生が算数を学ぶのに大学に通う】ようなもの私はプログラミングを学んだ嬉しさと、どこか満足しきれない思いを抱えて卒業しました。もしこの話を聞いて少しでも興味を持っていただいた方には、私のような思いをさせないように、私がプログラミングスクールに150万円以上費やして学んだ知識・経験から、基礎基本の部分をまとめ、お子さんから大人まで初心者の方にも分かるように、安価な値段でお教えします。

この記事では、ワードプレスサイトにローンシュミレーションを設置する方法を解説いたします。コピペで簡単に設置できるのでご利用ください。元利均等でのローンシュミレーション元利均等でのローンシュミレーションで、毎月の返済額が試算できます。javascriptで記述されたコードをコピペで簡単に設置できますが、計算式を覚えておくと利用方法やカスタマイズの幅が広がるかと思いますので、記載します。【計算式】毎月の返済額＝（借入金額×（借入金利÷12）×（1+（借入金利÷１２））＾返済回数）÷（（1+（借入金利÷１２））＾返済回数ー１）計算式に数字を入れていくと下記になります。エクセルに＝以降を入力すると確認できます。借入金額：3,000万円借入金利：0.75％返済回数：420回81235.45＝(30000000*(0.0075/12)*(1+(0.0075/12))^420)/((1+(0.0075/12))^420-1)Javascriptで元利均等ローンシュミレーションを作成する下記の様なローンシュミレーションを設置できます。デザインなどはカスタマイズしてお使いいただけます。ここから下にコードを記載しております。【フォーム】設置箇所：記事内 inputの各要素に下記のnameを割り当てて、ユーザーが入力後に計算ボタンをクリックすると、javascriptで作成されたPMT（）関数が実行されてoutputの要素の値が変わります。 借入金額：pv 融資金利：ir 返済期間（月数）:np<form method="post" target="_top" name="loan">

サービスを予定しています「マイ・トラベリング・ブック」についてブックのページめくりのサンプルです。「マイ・トラベリング・ブック」は、そのページに表現するコンテンツはなんでも可能です。サービスとしては、ブックのコンテンツを旅行ということにしています。今回は、ブックのページめくりの状況を動画にしましたのでご覧下さい。ページの内容は旅行ではありませんが、ページめくりのサンプルとなります。／ページめくり／PC／インフォグラフィックス素材のブック／※PCではマウスでの操作になります。／ページめくり／スマホ／GIFアニメーションのブック／※スマホ、タブレットでは指での操作になります。※横に回転すると見開きで表示されます。※「マイ・トラベリング・ブック」はHTML5、CSS、JavaScriptにて構築。「マイ・トラベリング・ブック」のサンプルができるまで、このようなサンプルを時々に投稿したいと思っています。宜しくお願いします。／名前のない空を見上げて／MISIA／hima.cover／／夏をあきらめて／サザンオールスターズ／hima.cover／こちらもご覧下さい。（以前投稿した動画）　

当サービスは、高品質、高コスパのLP（ランディングページ）を制作します。 高品質な有料画像、売れるためのLP構成ガイド付き！ 当サービスの特徴 ・高品質なテンプレートをベースにお客様に合わせたカスタマイズします。 ・LPの構成から文章・画像・カラーを変更可能です。 ・売れるLPに必要な構成のガイド付きで文章作成も安心です。 ・シンプルでわかりやすく見やすい、情報が伝わるデザイン ・ご自身で構成順序の並び替え、ブロックの非表示も可能なため、ABテストも簡単です。 通常では高額になる作り込まれたLPをベースに使用することで、高品質、低価格かつ高コスパを実現しています。 当サービスはこのような方におすすめです ・はじめてLPを制作する方 ・高品質なLPをできるだけ安価で欲しい方 ・派手なデザインよりもシンプルでわかりやすく写真を活かしたデザインで制作したい方 ・HTMLの知識が無くてもご自身で定期的に更新してABテストを行い方 当サービスはこのような方におすすめいたしません ・キャッチコピーや文章作成まですべて丸投げでお任せしたい方 ・低品質でいいからとにかく安く済ませたい方 ・予算は惜しまずレベルの高いデザイン・クオリティで制作した方 LP制作内容 スマートフォン表示対応 画像選定（著作権フリーの写真・イラスト） WordPressの導入、初期設定 お問い合わせフォーム 内部SEO対策、表示速度対策 セキュリティ対策 お知らせやブログの投稿機能可 SNS連携可 簡単なスクロールアニメーション Googleマップ、You Tube動画埋め込み Googleアナリティクス・Google

ココナラで Google Apps Script (GAS) の開発を請け負っている方は沢山いらっしゃいますが、そもそも Apps Script が用途に合っているかどうかを依頼者自身で判断することは些か難しい事があるのではないかと思います。そこでソフトウェア開発者ではないビジネスユーザを対象に、Apps Script を利用してやりたいことが適切に実現できるか否かを判断するために重要なポイントを、できるだけ平易簡潔にまとめてみます。※分かりやすさのため、限定的な機能や特殊な手段でのみ実現できることは省略しています。正確な情報は公式サイトなどをご参照ください。 Apps Script とは Google が提供するクラウドローコードプラットフォームです。JavaScript を使って Google サービスの拡張・統合・タスクの自動化・簡易 Web アプリの作成ができます。よくある使い方・スプレッドシートのマクロ・カスタム関数・アドオン Excel VB マクロの代わりにスプレッドシートでは JavaScript マクロを組むことができ、これは Apps Script の一種です。単純な操作であれば「マクロを記録」することで自動作成することもでき、これが最もシンプルな使用例です。同様に、独自のスプレッドシート関数を作ることができ、外部データを参照したり複雑な計算式を一つの関数にまとめて利用できます。アドオンとしてスプレッドシートの画面内に独自のメニューやサイドバーを追加することもできます。これらは全て Apps Script に紐づけたスプレッドシートの中でのみ利用できます。・

そのアニメーション本当に要る？Web制作においてCSS、JavaScriptを使ったアニメーションはよく見かけると思います。アニメーションは見た目にもインパクトに残りやすいですが、使いどころを間違うとそのサイトで伝えたいことが分かり辛くなる可能性があります。アニメーションを使うと分かり辛くなる例そのサイトの目的が文章を主とした情報提供である場合、アニメーションとは相性が悪いです。例えばニュースサイトやブログなどでスクロールするたびに文章がアニメーションで出てくるとどうなるでしょう？読み辛くなります。人間は文章を読む時、視線が上から下に動きます。しかし読んでいってもアニメーション待ちで下の方の文章が間に合っていないとストレスになりますし、そのサイトですべき文章での情報提供の価値が薄れてしまいます。また、初心者のポートフォリオサイトで無駄にアニメーションを使っているのがよくあります。自分の能力を見せるために動きのあるサイトを使いたくなる気持ちは分かりますがポートフォリオサイトの目的は"こんな作品を作った"、"こんな能力があります"とアピールすることが目的かと思います。それなら見やすく分かりやすいレイアウトを行いリンク先の自分の作品で適切なアニメーションを使うことができることをアピールした方が良いと思います。アニメーションを使うと効果的な例ビジュアルのみでユーザに価値提供できるようなサイトはアニメーションと相性が良いです。ファッション、フード、アニメなどなど...極端に言うと写真1枚でもそれがなんのサイトか説明できるジャンルはアニメーションと相性が良いです。日本と海外のサイトの違いと

期限を設定してバナーを表示・非表示できたら、日時を気にして自分でいちいち外さなくていいし、楽天市場のキャンペーンみたいに夜中に終了しようと、時間になったらサッと非表示にできます！コピペで出来るので、興味がある方はぜひやってみて下さい⭐️Swiperスライダーを用意する先日の記事のSwiperスライダーを使っていきます。index.htmlに時間指定で表示非表示のJavaScriptを追加する下記を</style>と<script>の間についきします。<!-- time limit --><script type="text/javascript">let myClass = document.getElementsByClassName("js-time_limited");for (let i = 0; i < myClass.length; i++) {let appearTime = myClass[i].getAttribute("data-appear_time");let disappearTime = myClass[i].getAttribute("data-disappear_time");let threshould_start = Date.parse(appearTime);let threshould_end = Date.parse(disappearTime);const current = new Date(Date.now() + ((new Date().getTimezoneOffset

はじめに初めまして．ココナラでプログラミングや語学など様々なサービスを展開中のodrag0nと申します．早速ですが今回はGASを使用して，「サイトの更新をチェックし、更新されていたらメールで通知する」するというプログラムを書いてみたいと思います．GASとは？Google Apps Script（GAS）は、ひとことで言えばGoogleが提供する各種サービスの自動化／連携を行うためのツールです。GASを使うと、Gmailやカレンダー、Googleスプレッドシート、Googleドライブなど、Googleが提供する様々なサービス上で処理を自動化したり、複数のサービスを連携させたりできます。ExcelやWordなどでマクロやOfficeスクリプトなどを使ったことのある方は、それらのGoogle版だとイメージしていただければいいと思います！GAS のメリットとして、学習コストが低いこと、開発環境の構築が不要なこと、Google サービスとの連携が簡単であること、スクリプトの実行が自動化できることなどが挙げられます。活用例としては，Googleスプレッドシート上に設置したボタンのクリックで文字列を一括変換したり、GoogleスプレッドシートのデータをGmailに取り込んでメールを自動作成・送信したりすることができます。プログラムの流れ今回実装するプログラムの流れとしては以下のようになります．1. 監視するサイトのURLを設定する。2. 最新のコンテンツを取得する。3. 前回のコンテンツと比較する。4. 変更があれば、メールを送信する。早速実装を始めてみましょう！

下記を用意します。名前はなんでも良いです。- index.html- script.jsscript.js内に下記JavaScriptを書いて、時間を取得します。const today = new Date()console.log(today)▼index.htmlをGoogle Chromeなどで開いて、コンソール画面を確認します。※Google Chromeだと右クリック→検証→Consoleをクリックします。console.log(today)が出ています。続いて下記を追記して、時間と分を取得します。const hour = today.getHours()const minutes = today.getMinutes()console.log(hour)console.log(minutes)▼コンソール画面で確認します。時間と分が出ました！次は◯時◯分という形で出してみましょう！以下を追記します。1行目はバッククォートで囲んでいます。↓コレ`const time = `${hour}時${minutes}分`console.log(time)次に先ほどのhourを使って、もしも18時以降なら（hourが17より大きかったら）…こんばんは上記当てはまらなくて、もしも12時以降なら（hourが11より大きかったら）…こんにちは上記当てはまらなくて、もしも5時以降なら（hourが4より大きかったら）…おはようございますどれにも当てはまらなかったら、（hourが4以下）…無理しないでくださいを表示してみます。下記を追記してください。function greeting()

▼月を小文字のアルファベット3文字で表示したいとき。const months = ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec']▼曜日を日本語で表示したいとき。const daysJa = ['日', '月', '火', '水', '木', '金', '土']▼曜日を小文字のアルファベット3文字で表示したいとき。const daysEn = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat']▼使ってみよう！const today = new Date()console.log(today)const months = ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec']const daysEn = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat']const daysJa = ['日', '月', '火', '水', '木', '金', '土']console.log(`今日は${today.getMonth() + 1}月${today.getDate()}日(${daysJa[today.getDay()]})。英語で月省略形は、${months[today.getMonth()]}。曜日省略形は、${daysEn[today.getDay()]

はじめに初めまして．ココナラでプログラミングや語学など様々なサービスを展開中のodrag0nと申します．早速ですが今回はGASを使用して，「Formの入力をDocsに入力し，PDF化してMailで送信」するというプログラムを書いてみたいと思います．GASとは？Google Apps Script（GAS）は、ひとことで言えばGoogleが提供する各種サービスの自動化／連携を行うためのツールです。GASを使うと、Gmailやカレンダー、Googleスプレッドシート、Googleドライブなど、Googleが提供する様々なサービス上で処理を自動化したり、複数のサービスを連携させたりできます。ExcelやWordなどでマクロやOfficeスクリプトなどを使ったことのある方は、それらのGoogle版だとイメージしていただければいいと思います！活用例としては，Googleスプレッドシート上に設置したボタンのクリックで文字列を一括変換したり、GoogleスプレッドシートのデータをGmailに取り込んでメールを自動作成・送信したりすることができます。プログラムの流れ今回実装するプログラムの流れとしては以下のようになります．１，フォームで回答者から回答を受け取る２，回答をプログラム上で変数に代入する３，オリジナルドキュメント（雛形）のコピーを作成４，コピードキュメントに２の変数を代入５，コピードキュメントのPDFを作成６，５をメールで送信早速実装を始めてみましょう！

更新が長らく出来ていませんでした。今日は久しぶりの更新です！この頃、いろいろとお問い合わせがあり対応に追われておりましたので、ついつい、明日、明日と思っていたら。。。。なんと、ずーっと更新しない日が20日以上も経ってしまいました。フォローをしていただいている皆さんにごめんなさい。WIXフォームならファイルアップロードを作ることが簡単出来る！一般的にファイルのアップロードは一見簡単そうに見えますが、サーバーにファイル情報をアップロードするには、多数の設定を必要とします。まずは、・ファイルのアップロードを許可する権限・許可されたファイルをどのディレクトリに保存するか？・アップロードされたファイル名が他の物と重なって消えないように名前変更・アップロードできるサイズと転送速度の設定でエラーを回避・アップロードしたファイルが壊れないように、ファイル形式の設定これらをWIXなら簡単に項目を追加するだけで出来てしまいます。使いたいと思っても、有料オプションを追加しない利用できないWIXでファイルアップロードは有料版のAsend BY WIXを使わないと、この機能は使えません。毎月有料版の支払いをしていれば利用できます。オリジナルプログラムなら毎月の費用がなくてアップロードが可能実際にアップロードを自動で行って、ファイル名を変換して、メールにリンク先ファイルを作成して送信することができます。興味がある方は、ご連絡をください。

WIXで作成していると、フォームを利用してオーダーをしてほしい時に、値段の組み合わせやメニュー選択によって費用が変わるようなサービスをされている業種などでは、お客様に利用してほしいと思っても費用感を伝えることが自動で出来ないので、オーダーを頂いてから後ほど返信するか？もしくは、予め簡単な費用感を出しておいて、後は直接お問い合わせしてもらうしか無いですよね？でも、このハードルが結構高いです。実際にアクセス解析を見ていくと、問い合わせを見ても離脱する方が多いのが事実です。切羽詰った方以外はどんな業種でも、オーダーは勿論、お問い合わせすら腰が重いのです。ある程度の費用感を伝えることが出来るとお客様も安心そこで、お客様自身で費用や価格を動的に計算して料金や費用のイメージしてもらうことで、お客様は気を使わずにシュミレーションが出来るので安心感を与えることが出来ます。WIXでお客様に対して費用がいくらぐらいになるのかを伝えたい時に、ネットショップや販売プランなどを使えば、全て用意されているのでデータを入れるだけで簡単に価格や決済もできます。しかし、エアコンの修理や車検の費用など、お客様の希望に合わせて、費用が加えていくサービスを提供する企業の皆さんには、メニュー構成をお客様に伝えながら選択して頂いて価格や費用を出すようなサイトを簡単に作ることができません。事業のチャンスを掴むのか？捨てるのか？実際にWIXでサイトを作った方や作りかけてる方は、WIXで作ってきた時に出来ることと、出来ないことの壁にぶつかる時がきます。でも、WIXでどこまで出来るのかを予め知っていれば、今できなくても将来、あな

入力フォームについて、いろいろとWIXの標準でできることもありますが、ここをこんな風に制御が出来たらなって、いう一例をアップしてみました。実際にJasonを理解されている方には、簡単なことをやっていると思いますが、多くのWIXユーザーが思っている。痒いところに手が届かない部分の一例をご紹介させていただき、WIXでもここまで出来るってことを知っていただけたら良いなと思います。「よみがな」に「ひらがな」以外を入れない制御会員情報の登録フォームやお問い合わせフォームの項目で意図としない入力が無いようにしたいけど、なんとか入力の制御が出来ないかなぁと思うことがありませんか？そこで、一例ですが、「よみがな」に、漢字やカタカナなどを入れると入力エラーを表示して、入力した文字を削除するプログラム制御をご紹介します。郵便番号検索もこんな風に自動入力ができます入力する郵便番号から住所を呼び出してきて、住所に入れるプログラムと同時に、郵便番号にハイフンを入れないように、ハイフンを削除します。また入力文字が７文字でない場合は、入力エラーが表示されます。これで、会員情報やお問い合わせされた方の情報を統一して管理することができます。サイト設計からWeb制作に多数の事業に関わってきた経験談ですWIXの公認パートナーの中でも、多分、私が一番WIXに問題点を指摘していると思います。それは、WIXを本気で使いこなそうと思ったからこそ、徹底的機能を分析しています。だからこそ、WIXを利用するに当たって機能に妥協するのではなく、WIXを便利なツールとして利用して頂くためにも、私は些細な問題点まで、毎日のようにWIX

Three.jsを使って太陽系の3Dモデリングを作成しました。メタバースやVRなど3Dモデリングの盛り上がりが最近ありますが、なかなか敷居が高そうと私自身感じています。しかし比較的容易に、とく追加のソフトウェアも買う必要なく、標準的なブラウザで3Dモデルを作る・動かすことができます。しかもJavaScriptで。Three.jsというライブラリを使えば、上記のようにブラウザ上で動かせるものが簡単に作成できてしまいます！（ココナラのブログでは動画はyoutubeのものしか貼れないため、一旦撮影したものを載せています。。。）ご興味のある方、一度ご相談いたしませんか？

超初心者向け、プログラミング講座もう少し簡単なプログラミングの話をと言うリクエストに答えて、初めてプログラミングを学習する型向けの連載を始める事にしました。講座のゴールは、簡単な Web プログラミングができるようにと言うのがゴールです。Web プログラミングなので、使用するプログラミング言語は Javascript（Node.js）を利用します。第一回は、まずは、プログラミングをするための準備です。プログラミングをするための準備最初に行うのは、コンピュータの準備です。スマホではできません！ コンピュータも色々ありますが、今回の連載では、Windows の PC を利用するのを前提でお届けします。 Mac をご利用の方でも、ほぼ同じような事が可能なのですが、今回は「超初心者」向けで、本当に初めてプログラミングをやってみようと言う方を対象にしていますので、混乱を防ぐ意味で、Windows10（もしくは Windows11）を使って進めていく事にします。最新の PC は、2022 年現在だと、Windows11 を搭載した物が殆どだと思いますが、少し古い PC だと Windows10 の場合もあると思いますが、どちらも似ているので取り敢えずこの二つを利用するのを前提で進めて行きます。プログラミングをするのに必要な物は、今回は二つのアプリです。インターネットにアクセスするための Web ブラウザは、PC にすでに入っていると思いますので、まずは以下の二つを用意します。＊　Microsoft Visual Stadio Code (VSCODE)＊　Node JSです。どちらもインタ

はじめに Javascriptには便利な配列用のメソッドがたくさんありますが、いざ、イメージ通りの処理を行おうとすると、自分で実装しなくてはならないことが多いです。よく使いそうなものからニッチなものまでいくつかのロジックサンプルを紹介します。前提として、共通の引数として使用する一次元配列は以下とします。 const array01 = [1,6,2,5,8,7,3,4,9,2,6,8,1,3,5]; const array02 = [10,15,20,5,35,25,30];なお、二次元配列やその他多次元配列の場合、別途処理内容が異なりますので、今回は考慮していません。■比較的よく使いそうな処理1. 配列の要素をランダムに並べる 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; };console.log(arrayRandom(array01));// 出力例　[6,8,9,8,4,3,1,5,2,6,

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

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

Vue 公式チュートリアル　〜　部品からデータを渡すVue 公式チュートリアルのステップ 13 は、「部品」の方から呼び出し元（親）にデータを渡す方法を学習します。前回までのポイントは？ステップ１０までは、基本的に、 「Vue の部品」の基本的な記述の仕方を中心に学習しました。 ステップ１１からは、メインのページから別に作成した「部品」を呼び出す方法を学習しています。記述の仕方は基本的に同じですが、ポイントは、「部品」を呼び出す側（親）と呼び出される側（子）の間でのデータのやり取りです。前回のステップ１２では、呼び出し側から「部品」にデータを渡すやり方を学習しました。呼び出し側と、呼び出される方の両方に記述が必要でした。今回学ぶのは？ステップ１３では、前回とは反対に、呼び出される側（子）から、呼び出し側（親）にデータを渡す方法を学習します。まずは、変更前のコードです。(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>これが、呼び出し元（親）のコードです。特に新しい点は

はじめに 最近、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))

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

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

Vue 公式チュートリアル　〜　変数の変化をチェックするVue 公式チュートリアルのステップ 10 は、変数の状態が変わるのをチェックする方法です。Javascript の変数を表示に使う場合、変数が変わったら表示も更新したい場合が多くなります。そういう場合のやり方です。前回までのポイントは？Vue の公式チュートリアルもステップ 10 まで来ました。 何となく Vue で、Web ブラウザに表示させるやり方がわかってきたのではないかと思います。 ステップ９までで、基本的な Vue の部品の書き方がわかって、HTML と Javascript、HTML と CSS、CSS と Javascript の連携のやり方も一部は体験しているので、あとは「回数」を増やして実際に使えるようになる様な練習が必要になってきます。今回のポイントは？ステップ１０では、新しいポイントがいくつかあります。まずは、変更前のサンプルコードを見てみましょう！<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

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 の部分

Vue 公式チュートリアル　〜　データの一覧を表示するVue 公式チュートリアル　〜　データの一覧を表示するVue の公式チュートリアルのステップも、ステップ７まできました。だんだん、プログラミングの要素が入ってきてプログラミングの学習らしくなってきました。このステップでは、データの一覧を表示する方法を学習します。前回までのポイントは？前回までに、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++,

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

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

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

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

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 を学んだ上で学習した方が良いというのが通常の学習方法

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

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

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

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

はじめに 一次元配列を指定の要素数ごとに分割し、二次元配列にする必要があったため、そのロジックに関する小ネタです。本記事は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

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

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

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

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

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

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

昨日は「もりけん塾」でフロントエンドエンジニアを目指す方への勉強会でした過去最多の参加希望応募で盛り上がりました。定期的にやっていきたいと思います。ぜひ、自分のサービスをご購入くださいませ。一緒に頑張りましょう

nodenvを使っていたのですが乗り換えましたvolta使ってみると良いですよ

今日からココナラを始めたRyu。ですこんにちは :)仕事・相談を探すのページで提案をしてたんですが・・・・同じ事、繰り返し書くの面倒くさっ∑(ﾟ◇ﾟ；) と早くもなってしまいました。どうやら、アプリでは定型文として挿入できる機能があるようで・・・いや、PC版はないんかい！挨拶や実績などは毎回同じ感じの事を入れないといけないわけで。毎回、毎回打ってられません :(と言う事でブックマークレット!javascript:(()=>{document.getElementsByTagName('textarea')[0].value="ここにテンプレートにしたい文字を入れる。改行は\nで!"})();使い方は（クロームの場合)ブックマークバーで右クリック > ページを追加 >　URL部分を上のスクリプトに変えるだけ!これで提案ページでそのブックマークを押すと定型文が挿入されるようになります :)もしかして自分が分かってないだけで最初から出来たりするのかな・・・？

Javascriptでのネットワークアクセスどこからデータを入手するかで変わる処理プログラムの基本動作はデータ処理かイベント処理に大きく分けられます。データ処理の場合は、受け取ったデータに処理を加え流処理になります。イベント処理は、ボタンをクリックするなどのUIの操作などで発生したイベントに対応した処理を行うものです。エラーなどの処理もイベント処理に入ります。WebアプリやWebサービスの場合、データをネットワークを経由して取得する場合が多くなります。ネットワークから取得するという事は、別のコンピュータからデータを受け取るという事になります。この場合、コンピュータが応答できない場合や、コンピュータ自体が稼働していない事があります。この場合、データを受け取れない事になります。一方で、同じコンピュータからデータを入手する場合、この場合は、コンピュータのドライブ（HDDやSSD)やメモリからデータを取得することになります。このデータは殆どの場合問題なく取得できる場合が多く、プログラムを書く上では問題にならない場合が殆どです。ネットワーク経由のデータはいつ届くかわからない！さて、ネットワーク経由でデータを取得する場合に問題となるのは、いつデータが来るか予想できない点です。 幾つか可能性があって、ネットワークが混んでいる（負荷が高い）場合は、ネットワーク上の「相手」が稼働している場合でも、データが届くまでに時間がかかる場合が多くなります。また、ネットワークに障害があるとデータが届かない場合もあります。さらに、ネットワーク上の相手のコンピュータが稼働していない場合にも、データは届きません。

bitcoinjs-libとtruffleを使って、ビットコインと連動して動くERC20トークンを作ってみました。 こちらが、トークンの購入画面です。金額を入力して、購入ボタンを押すとMetaMaskが開きます。このコントラクトにはイベントが定義されています。 実行結果をEtherscanから確認。サーバー側でイベントを感知して、ビットコインを移動します。 その結果がこちら。テストネットのビットコインが足りず桁を下げています。本来なら1 BTC = 1 トークンを想定しています。 また、ビットコインのテストネットなので、当然アドレスがイーサリアムのものと変わっています。 こちらのテストネットのアドレスは、送金者のイーサリアムのアドレス + ○○（セキュリティ面を考慮して秘密）で作っています。 ビットコインの送金完了後、ウォレット側にトークンを送ります。トークンが送られて、残高が1となりました。 省略しますが、売却を押すとコントラクトのイベントが実行された後、トークンを送金する関数が動きます。 そのイベントを感知してビットコインの移動が行われるのも確認できました。 また、ビットコインの移動が失敗（残高不足など）すると、トークンを送金者に返金する部分も上手く動作しました。 今回は、動作確認のためビットコインの移動は、あるアドレスから別のアドレスへ移動させただけですが、実際に使う時はコインチェック等の取引所のAPIを使ったらいいのではないかと思っています。

Javascript の非同期処理Javascript を学習していて分かり難い部分に非同期処理があります。 なぜ、こんな処理をするのかプログラムを勉強したての方には分かり難いし、思ったように動かない部分です。 この記事では、その非同期処理に目を向けてみました。非同期処理とは？非同期処理という言葉自体が余り馴染みのない言葉で、よくわからないというのが多くの方の第一印象だと思います。 簡単に言うと、完全に正確な表現ではありませんが、プログラムを書いた順番で実行されない処理と考えると少し分かりやすくなります。非同期の処理に対する言葉は同期処理と言いますが、これは基本的に上から順番に実行される処理です。 もちろん、プログラムには、条件で実行する部分を分けたり、繰り返し処理（ループ）などがあるので、完全に書いた順番で実行されるわけではありませんが、基本的には、処理の流れはプログラムの上から下へと言う流れで、一つ一つの処理が終わってから次の処理をするようにできているプログラミング言語が多くなっています。ところが、Javascript では、処理が終わる前に次の処理を実行してしまうことが多く、この辺りが初心者の方には分かり難い部分になっています。この記事で紹介している、Firebase のデータベースのアクセスなども非同期の処理の代表格です。処理には時間がかかる！非同期の処理を行う一番の理由は、「処理には時間がかかる」からです。 当たり前の様ですが、これが非同期の処理を取り入れている大きな理由です。 特にデータを読み込んだりするのには、時間がかかります。データをどこから読むかと言うと、いろ

# はじめにesbuild は、キャッシュなしで高速なビルドを可能とする Node.js のビルドツールです。ビルドツールには、esbuild の他に、Webpack、Gulp、Parcel、Rollup、Browserify、FuseBox などがあります。私自身が webpack を普段使っていて、ビルドに時間がかかりすぎているのが気になり、esbuild について調べてみようと思いました。esbuild の特徴としては、- キャッシュなしでの高速なビルド- ES6 と CommonJS をサポート- ES6 の Tree shaking 対応（利用されていないコードの除去）- JavaScript と Go による API- TypeScript と JSX をサポート- ソースマップの生成- ソースコードの最小化- プラグイン（現在、experimental で v1.0.0 より前に対応予定）が挙げられます。この中でも注目すべきは、そのビルド速度にあると思います。# なぜ早いのか？1. esbuild は Go で書かれており、ネイティブコードへコンパイルしているほとんどのビルドツールは、Javascript によって書かれており、JIT コンパイルを使用するため、速度が遅い。Go は、並列処理が得意で共有メモリをスレッド間で使用する。また、ヒープメモリも共有している。よって、CPU を効率的に使用して、並列処理を行える。2. 並列で処理を行う昨今のPCは、複数のメモリを持っているため、効率的に並列処理を行える。3. esbuild は、0 から速度を意識して作られた

以前に書いた記事のネタ元になったアプリの話です。機密情報に当たる部分もございますので、詳細は伏せますが、ある特殊染料を扱うクライアント様からのご相談で、染料調合割合を計算するためのカラーサンプラーアプリを制作した時の話です。なお、本記事はQiitaで公開した記事の要約版と補足となります。要件定義要望は概ね以下の通りでした。 1.タブレットでの使用を前提2.ＣＭＹそれぞれの濃度１００％時の色成分初期値（ＲＧＢ）を変更したい 3.３色間の調合割合ごとの混色結果を一括で確認したい 4.タップした部分の各色調合割合を表示したい問題点や要望を踏まえ、要件定義を行ない、ＵＩ及びＵＸに関するプロトタイプの仕様をまとめました。以下は関連部分の抜粋です。 1.タイル状のカラーブロックを濃度１０％刻み固定でピラミッド状に並べる（カラーテーブル） 2.問題点の補完用として直線状に並べたカラーブロックを別に用意する 3.スライダーにて各色個別の割合調整、全体の濃度調整を行う 4.カラーブロックをクリックで調合割合を表示する ※実際のアプリでは、monacaとOnsen UIで構築しました。なお、プライベートアプリのため一般公開はしていません。技術的な話1-カラーブロックの集合体、カラーテーブル生成 ベースのロジックは以前の記事を参照いただければと思いますが、今回は自動生成部分をアプリ用にクラスにしたものをそのまま使用しています。簡単に説明すると、カラーブロックを直線状に並べるクラスと、それを拡張してピラミッド状に並べるクラスになります。 上記のインスタンスはＣＭＹ各色ブロック、クリックイベントを設定

Javascript の変数の話Javascript に限らず、プログラミング言語には変数という概念があります。プログラムで扱うデータを入れる場所です。最新の Javascript では３種類の変数を利用する事ができます。＊　const＊　let＊　var　です。constとletは後から導入された物ですが、基本的にはこの２つを利用することが推奨されています。理由は、なるべくバグを出さないようにするためというのが大きいと思います。どうして、constやletを使うとバグを生み出し易いのかご存知ですか？この記事では Javascript での変数について書いてみました。varだけでプログラムは書けます！当たり前ですが、varだけでもプログラムは書けます。慎重にコードを書けば別にvarを使う事自体は問題ないのですが、少し大きなプログラム、特に後から手直ししたりする場合にバグの原因になるのでconstやletを使うことが推奨されています。幾つか理由がありますが、var の問題は大きいものが２点です同じ名前の変数を複数宣言できる変数の宣言前の参照も許されている（値はundefined）ESLint などプログラムをチェックするプログラムを使えば、「危ない」コードは見つけてくれます。そうした仕組みを上手く利用する場合は、大きな問題ではないのですが、こうした、仕組みを利用しない場合バグの原因になり易いので、letやconstが導入されました。それでも、verが残されているのは、互換性のためなので、新しくプログラムを書く際には基本的には「var」は使わないのがいちばんです！バグの少ないプログ