この記事の目標 「最終的に JavaScript になるのに、なんでわざわざ TypeScript を使うべきなのか? JavaScript で良くない?」 という質問に答えられるようになる なぜ TypeScript を使うべきなのか? いきなり結論を書きます。 A. 実行時エラーの少ない JavaScript を使いたいから TypeScript で書かれたコードはコンパイルが通らないと JavaScript に変換できません。そのため、生成される JavaScript コードは必ずコンパイルに成功したものです。コレが TypeScript を使っていて一番嬉しいポイントです。 まあ、いきなり結論を書いてもよく分からないと思います。順に話していきます。 型エラーとはなにか TypeScript でコンパイルを通すには、コード上の型エラーを無くす必要があります。 型エラーとは、型システム

はじめに やっぱりwebpackがわからない（エピソード1）、エピソード2を公開しているのですが、そもそもnpmからわからない、という人もいると思いますので、今回はnpmに関して説明します。 なお、やっぱりwebpackがわからないではViteに関して触れていますが、Node.jsもDenoという新しいランタイム環境が登場しています。ですが、やはりまだ開発現場で使用するには難しいと思いますので、Node.jsを使用するうえでnpmはちゃんと理解しておいた方がいいです。 npmとは npm とはNode.jsのパッケージを管理するシステム、所謂パッケージ管理システムです。アプリケーションを作成する際、便利なパッケージをそのプロジェクトにインストールして、使用することができます。 ところで、パッケージとは一体何なのでしょうか？ パッケージとは システム開発ではモジュール、パッケージ 、ライブラ

HTMLやCSSには、ユーザーインタラクション（ユーザー操作）を無効化するための方法がいくつか存在します。たとえば、マウスやタッチ操作を無効化したいときはCSSでpointer-events: noneを要素に指定するなど、制御したいユーザー操作によってさまざまです。 カルーセルやモーダルなユーザーインターフェイス（UI）では、非アクティブな要素が操作されないように「画面には表示されているが、あらゆるユーザー操作を受け付けない状態」にしたい場合があります。具体的には、以下のユーザー操作を無効化します。 マウスやタッチ操作を無効化したい テキスト選択を無効化したい キーボードフォーカスをあえて無効化したい 音声読み上げをあえて無効化したい 必要なプロパティや属性を複数指定することが考えられますが、そのようなときに役立つのがinertイナートと呼ばれるHTMLのグローバル属性です。 inert

うりうりさんの↓のコメントを見て、そういえばnpm ciって見たことあるけどチェックしてないなぁ。というかnpm installも雰囲気で使ってるなぁ。と思ったので、うりうりさんに教えてもらったことを手がかりに、npm installとnpm ciについて調べた。 これ、node_modulesキャッシュしてたり npm install使ってるけど npmのグローバルキャッシュ(~/.npm)をキャッシュした上で npm ciで早くなったりしないんだろうか GitHub Actions上でテストを約3倍早くした話https://t.co/MpmFktGBxU— wreulicke (@wreulicke) March 14, 2023 ちょこっと検索して見てみたところ、新旧情報があって自分が混乱したのと、公式ドキュメントには概要は書かれているものの詳しい内容は書かれていないので（僕が見つけ

そう、JSON にはコメントを記載するための構文がないのです。近年では設定ファイルなどで利用されることも多い JSON ですが、コメントによる説明が不要なキーを名付けることは現実的ではありません。どうしよう、困ったな。 TL;DR コメントをつけるだけなら JSONC を使いましょう。 （2020-02-17追記） 各フォーマットの比較などに使えるデモページを公開してみました。 （2020-03-15追記） 続編を書きました。 どうしても JSON にコメントを書きたい 同じようなことに悩む先人は多いため、インターネット上には様々なアイデアが提案されています。 たとえば JSON Schema Core Draft 2019-091 では以下のような記述があります： 8.3. Comments With "$comment" This keyword reserves a location

エンジニア同士の情報共有を目的としたコミュニティ「ふわふわエンジニアタイム」が主催する「Markup Meetup」。3回目の今回は、フロントエンドエンジニア、マークアップエンジニア、コーダー、デザイナーの垣根なく、HTML / CSS / JavaScript に関わるナレッジを共有する場として開催されました。ここで登壇したのは、株式会社ゆめみの佐々木祥晶氏。導入事例を交えながら「Three.js」の魅力、メリット・デメリットを語りました。 株式会社ゆめみ所属・新人フロントエンドエンジニア 佐々木祥晶氏：それでは発表いたします。題目は、「Three.js の魅力を語る」です。 目次ですね。最初に軽く自己紹介をして、本編で「『Three.js』とは何ぞや？」とか、そういったことをいろいろ話していき、最後に軽くまとめをしていければなと思っています。 では、軽く自己紹介を。初めまして、佐々木祥

書籍執筆しました！『1冊ですべて身につくJavaScript入門講座』これまでHTMLやCSS、WordPressの入門書を書いてきた私ですが、このたび新たにJavaScriptの入門書、『1冊ですべて身につくJavaScript入門講座』という本を執筆しました！2023年3月1日発売で、本日より予約開始です！ カバーイラストはこれまでと同様ICHIRAKU STUDIO 様に描いていただきました！今回も素敵なイラストをありがとうございます！ こんな人におすすめWeb サイトに動きをつけてみたい人HTML と CSS の基礎を学んだあと、何を勉強しようか考えていた人一度 JavaScript を勉強したけど挫折した人最近の JavaScript の書き方を学びなおしたい人jQuery を卒業したい人JavaScript ってなんだろう？というところから、動きのある Web ページを作ってみ

この記事について JavaScriptはお好きですか？ Reactなどフロンドエンドを中心に人気の言語なので、触ってる人はたくさんいると思います。 奥深くて自分も好きな言語ですが、結構なんとなくで触っていたりしませんか？ 今回は自分が後輩によく聞かれた事や、自分が引っかかった事をたくさん書いていきます。 つまり基本的には初心者向け、よくても中級者向けです。 何か一個でも知らない事があれば御の字のつもりで書いたので、ぜひ気軽に読んでください！ JavaScript編 略称はJS、Javaダメぜったい いなさそうなのに稀にいるという・・ Web開発から入ってプログラムを広く知らない場合に発生しやすい？ Javaは全く別に王者がいるので、万が一使っていたららやめましょう。 略称は JS（じぇーえす） でお願いします。 データ型、Object Objectはキーと値をいくつも持てるJSのデータ型で

私たちはこのオープンソースプロジェクトを世界中の人々に提供したいと考えています。このチュートリアルの内容をあなたが知っている言語に翻訳するのを手伝ってください。

JavaScript は非常に関数指向な言語であり、これにより多くの自由があります。ある時点で作成した関数を別の変数にコピーしたり別の関数に引数として渡し、後でまったく別の場所から呼ぶことができます。 私たちはすでに関数がその外（“外側” の変数）にアクセスできることを知っています ですが、関数が作成されたあとで外側の変数を変更すると何が起きるでしょうか？関数は最新の値 or 古い値どちらを取得するのでしょうか？ また、関数がパラメータとして渡され、別のコード部分から呼び出される場合、新しい場所での外側の変数にアクセスできるのでしょうか？ これらのシナリオやより複雑なシナリオを理解するために、知識を広げていきましょう。 JavaScript では変数を宣言する方法が3通りあります: let, const（モダンな方法）,とvar (過去の名残)です。 この記事では、例には let を使用し

久しぶりに、いわゆるポエムを。 新規・運用ヘルプを問わず、受託や副業でよくフロントエンドをやってるWeb屋の見解、そして手札のお悩み。 この先、また技術選定する際なんかにも参考になるかと思ったので。 React 「いまフロントエンドやるなら最初に覚えるべき！」は、もう過去の話かなーと個人的には思ってる。 Reactは`UI = fn(state)`なのが良い！とか言われるけど、あなたが必要としてるのは`UI = Component(props)`かもよって。 一昔前までは、たしかにあらゆる面で頭一つ抜けてる印象はあったけど、今はそうでもないか、その差はだいぶ埋まってきてると思ってる。（もちろん先行者利益みたいなところで、エコシステムはまだまだ優位な差があるかもしれんけど、それもあまり実感できたことはないし、いまからはじめる人はそんなんで困らんやろうし） 原初の時代からReactな案件をそれ

プログラミングをしていると「改行コードを一括でHTMLの<br>に置き換えたい」といった場面がよくあります。JavaScriptで文字列を置換するにはどうすれば良いでしょうか？JavaScriptに用意されているreplace関数を使いこなすことで、文字列を容易に置換することができます。何かと役に立つJavaScriptのreplace関数と様々な置換の方法を解説します。 文字列を置換するための関数は多くのプログラミング言語に標準で用意されています。JavaScriptで文字列を置き換えるにはどうすれば良いでしょうか？ まず、JavaScriptのreplace関数について解説します。その後、正規表現での置換など様々な置換の方法を実際のサンプルコードで解説します。JavaScriptのreplace関数を活用して文字列の置換を行ってみましょう。 JavaScriptの文字列置換関数：rep

reduceもmap等とどうようループします。で今回は配列が3つなので3回ループし、それぞれの処理として下記のような処理が実行されます。 1回目：prevの値は初期値の0、currentには1が入ります。なので、0 + 1 = 1が（次のprev値として）返ります。 2回目：prevの値は1、currentには2が入るので、 1 + 2 = 3が返ります。 3回目：prevの値は3、currentには3が入るので、 3 + 3 = 6が返ります。で、これが最終的な結果として返ります。 いかがでしょうか。 基本 プリミティブ 合計、平均値、最大値、最小値とか。 平均値に関してだけは、sumを利用して別途計算するのがてっとり速いかと。 const numbers = [1, 2, 3, 4, 5]; //合計 const sum = numbers.reduce((prev, current)

JavaScriptの配列には reduce() があります。 ▼ Array.reduceメソッドのMDNでの解説 reduce() メソッドは、配列のそれぞれの要素に対して、順番通りに、ユーザーが提供した「縮小」コールバック関数を呼び出します。その際、直前の要素における計算結果の返値を渡します。配列のすべての要素に対して縮小関数を実行した結果が単一の値が最終結果になります。 引用元　：　https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce この説明にもあるように・・・ 「直前の要素における計算結果の返値」 要素それぞれに独自コールバックを実行し、 その結果を１つの単一値にできる便利なものです。 この表現だと意味不明だと思うので…… いくつかArray.redu

今回、javascriptのreduceについてまとめたのでメモ。 reduceを使って文字のアニメーションを実装するサンプルも作成しました。 reduceはどんなことができるか reduceは配列の値を順番に処理するメソッドです。ちなみにreduceは英語で「まとめる」という意味があります。 その言葉通り、コールバック関数で返ってきた値を累積して1つの値にまとめます。 基本構文は次の通りです。 const result = arr.reduce(callback( accumulator, currentValue, index, ary), defaultValue); 変数resultに累積した値が格納されます。 引数の詳細は次の通りです。 accumulator： callbackの戻り値 currentValue： 現在処理している値 index： インデックス ary： red

//アロー関数 const arrowAddFunc = (a, b) => { return a + b; } //1個しか評価項目が無い場合は以下のようにも書ける //中括弧とreturnの省略が出来る const arrowAddFunc = (a, b) => a + b; //評価項目が1個だけ、かつ引数が1個しか無い場合はこのようにも書ける //括弧も省略できる const arrowDoubleFunc = a => 2 * a; 省略して、１行で書ける事も出来ますが、アロー関数を書き慣れていない人がパッと見た時に、やや分かりづらいかもしれません。必ずしも１行で書かなければいけない理由はありません。いずれにしろ、 functionをいちいち書く必要がなく、短く書く事が出来ます。しかしアロー関数の真価は thisを束縛しないという点にあるでしょう。 アロー関数で書く理由② th

WordPressプラグイン「SEO SIMPLE PACK」とは？初心者向けの使い方と設定方法 2025.04.02

JavaScriptは軽量でクロスプラットフォームのオブジェクト指向プログラミング言語です。 以前、JavaScriptはクライアントサイドでのみ使用されていて、ブラウザ上でのwebページの動的な表現に使われるくらいでした。 近年ではサーバーサイドでも利用されるようになり、現代のWeb開発、Webアプリケーションに不可欠なものとなっており、人気のプログラミング言語になっています。 JavaScriptの基礎から応用的な知識まで、じっくりと扱っていきます。WebやHTMLの知識も別に得ておく必要もあります。 JavaScriptの基礎 JavaScriptの入門的な位置付けとして、基礎的な文法・構文を扱っていきます。速習的に扱いますので、特に細かい部分は書籍などで確認も合わせてするといいでしょう。 なお、ここでは基本的な内容を扱うのでJavaScriptのES5と言われている従来からある仕様

【改訂版発売中！】【完全案件特化】JavaScriptをどこまで学ぶべきかの学習ロードマップ＋頻出パーツの作り方8選 - セカヤサBooks 【お知らせ】 内容を2024年に向けて更新、追加した改訂版を公開しました！ →https://zenn.dev/hideki_climax/books/0e124eb17a67b3 ・HTML/CSSの次は何を勉強すれば良いの？ ・案件が取れない ・未経験だけど転職を考えている ・フリーランスで実績を積みたい そんなあなたの悩み、全て解決します。 JavaScriptをどこまで深めれば案件が獲得できて、収入に繋がるのか。 フリーランスで7年間エンジニアをしてきた僕が思う 「Web制作領域においてJavaScriptで何ができれば良いか」 をまとめました。 そして圧倒的に頻出のUIパーツ8つの作り方を徹底解説しました。初心者でもすぐに実践できます。実際

Let'sプログラミングでは初心者の方を対象にJavaやPython、PHP、Rubyなど色々なプログラミング言語の解説を行っています。 Java Java入門 これからJavaを使ったプログラミングの習得を目指している方を対象としたチュートリアルです サーブレット(Servlet) / JSP入門 サーバサイドで動作するアプリケーションの作成方法 Androidプログラミング入門 モバイル向けプラットフォーム Android で動くアプリの作成 Swingを使ってみよう GUIを使ったJavaアプリケーションの作成で使用するSwing入門です Eclipse入門 開発環境として広く使われているEclipseのインストールと活用法 Javadocの記述 ソースコードからHTML形式の仕様書を生成します Apache POIでExcelを操作 Excelファイルの作成・操作