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入門です

JavaScript の非同期処理は非常に難しく、その難しさの原因は「制御の流れ」が掴みづらいことにあります。 この本では非同期処理を理解するために必要な概念であり、仕組みでもあるイベントループでプロミスチェーンの処理がどのように行われるかをクイズ形式で学ぶことによって、非同期処理の「制御の流れ」を掴めるように訓練します。 知識面については中枢となるイベントループの機構から、実行環境と API、async/await や Promise.all などの一通りの範囲を学習し、最終的には並列化や順序づけて反復処理を行うための制御方法と TypeScript での型注釈までを網羅します。

世界で一番初心者に優しいWeb制作のメディア。HTML/CSS/JavaScript、WordPress、Web制作の考え方を解説します。

オブジェクト オブジェクトはプロパティの集合です。プロパティとは名前（キー）と値（バリュー）が対になったものです。 プロパティのキーには文字列またはSymbolが利用でき、値には任意のデータを指定できます。 また、1つのオブジェクトは複数のプロパティを持てるため、1つのオブジェクトで多種多様な値を表現できます。 今までも登場してきた、配列や関数などもオブジェクトの一種です。 JavaScriptには、あらゆるオブジェクトの元となるObjectというビルトインオブジェクトがあります。 ビルトインオブジェクトは、実行環境にあらかじめ定義されているオブジェクトのことです。 ObjectというビルトインオブジェクトはECMAScriptの仕様で定義されているため、あらゆるJavaScriptの実行環境で利用できます。 この章では、オブジェクトの作成や扱い方、Objectというビルトインオブジェクト

Chromeに実装された疑似クラス「:has()」がjQueryの「:has()」に悪影響、一定の条件下でWebサイトが壊れる可能性 最近リリースされたSafariとChromeで、CSSのSelectors Level 4（現時点でドラフト）仕様にある疑似クラス「:has()」が相次いで実装されました。 疑似クラス「:has()」は、カッコ内に要素を書くと、その要素を持つ親要素にのみ指定したスタイルを設定できる、という便利な機能を提供してくれます。 ところがこの「:has()」のChromeにおける実装は、jQueryで似たような機能（カッコ内の要素を持つ親要素を選択する）を提供する「:has()」に悪影響を及ぼし、このjQueryの「:has()」を使っているWebサイトでは、Chromeを利用した場合に一定の条件下でWebサイトが壊れるなどの問題を引き起こすことが分かりました（同じエ

ReactやVueを使わずに、素のJavaScriptでDOM操作する時のやつです。 何度も同じようなことをググって時間を溶かしていたので、よく使うやつをまとめてみました。 要素の取得 // 最初に見つかった要素1つを取得 document.querySelector("#hoge-id"); //[object HTMLElement] document.getElementById("hoge-id"); //[object HTMLElement] //条件に合う要素を全て取得 document.querySelectorAll(".hoge-class"); // [object NodeList] document.getElementsByClassName("hoge-class"); // [object HTMLCollection] Array.from(documen

JavaScriptライブラリの「GSAPジーサップ」はウェブサイトのモーション制作に役立ちます。GSAPは高機能であり、実行性能が良好で、互換性も高い利点があります。 始点と終点の間を補間することでモーションを実現することは「トゥイーン」と呼ばれます（Betweenが語源）。トゥイーンの機能を提供するJSライブラリは多くの種類が存在しますが、その中でもGSAPは評判が高く、機能の多さでは群を抜いています。当サイトの記事『トゥイーンライブラリの比較検証』でも、類似のライブラリに比べて性能が高いことを確認しています。 旧TweenMax時代から数えてGSAP利用歴18年の筆者が、GSAPのおさえておくべき最低限の使い方から、現場で役立つテクニックを紹介します。 ▼GSAP公式サイト GSAP入門は前後編の2回にわたり解説します。前編では基本的なGSAPの使い方を中心に説明します。 GSAPの

ウェブ制作で React(Next) や Vue(Nuxt)、jQuery が最近どれぐらい使われているのか調べてみたdate2022.9.4(Sun.)tagsweb developmentFrontendJavaScript ウェブアプリケーション開発で React や Vue を使うのはよくある話かなと思うのですが、マーケティングや広報活動など広告クリエイティブ系のウェブサイト制作ではどれぐらい使われているのかなと思い、暇つぶしにリサーチしてみました。 調査方法母集団ウェブギャラリーサイトをいくつか見て比較的国内系のセレクトが多そうな https://io3000.com/ さんから 2022 年に紹介されている 175 件と、ウェブサイトのアワードサイトとして有名な https://www.awwwards.com/websites/ さんで 2022.8 以降に Winner と

https://insidegovuk.blog.gov.uk/2022/08/11/how-and-why-we-removed-jquery-from-gov-uk/ GOV.UK is the online home for the UK government, so we have to make sure that it works for everyone regardless of their device or connection speed. This means we’re always looking for ways to improve performance and user experience, as well as the code beneath. For a long time our frontend code on www.gov.uk - th

jQueryにおいても、ほかのプログラム言語同様に変数を扱うことが多々あります。取得した情報の処理や演算結果をページ内に反映するなど、より複雑な処理を行う上で変数の存在は欠かせません。 プログラマー jQueryでも変数を使っていろいろ処理したいのですが、扱い方はどうすれば良いですか？ プロジェクト リーダー 変数が扱えるようになると、やれることが増えるので使いこなしたいところですね！さっそく見ていきましょう。 変数とは 変数は様々な情報を入れるための箱のような存在で、ページ内にある情報を一時的に保持したり、指定した処理を加えて変更 したりするために利用します。例えば、Aという箱の中に情報Bを入れたとして、ほかの情報Cとの差を比較することが可能です。 また、よく使う設定値をコード上にそのまま入力していた場合、修正する際に手間がかかりますが、変数を用いていればその設定値を変えるだけで済みます

Vue.jsのコミュニティは活動は盛んで、日本にも、Vue.js 日本ユーザーグループがあります。Vue.jsの普及と、Vue.jsエコシステムへの貢献を行っています。大規模カンファレンスである、「Vue Fes Japan」を年に一度実施しており、2022年も10月16日オンライン開催を予定しています。 【参考】：Vue.js JP 【参考】：Vue Fes Japan Vue.jsの活用事例ですが、国内外問わず利用が拡大しています。最新の事例は、Vue.js 日本ユーザーグループが主催する「Vue Fes Japan」でも公開されています。 コミュニティを通じた活用事例発表の他にも事例は多くありますが、今閲覧しているサイトにVue.jsが使われているかどうかは簡単にわかります。具体的には、Chrome拡張機能の「Vue.js Devtools」をインストールすると、Vue.jsで開発さ

JavaScript による開発に向けて道具や環境を整えるにあたり、実に様々な用語があります。 N番煎じどころではない話題ではありますが、それらの主観的な説明を試みました。 Disclaimer: React やその他の各種フレームワークなどは入れていません。 すべて独学、かつメチャ小規模なものばかり作っている人なので、偏りがあります。 古かったり間違ってたりしましたらぜひ教えていただければ……。 冗長な読み物感を多少含みます。 同じような or さらに詳しい情報がググれば山のようにあるので、ぜひ個別の確認を。 なお、URLを明示しないリンクは基本的に記事内で飛ぶだけで、外部リンクは基本URL付きです。 目次 一般 言語 エディター／バージョン管理 実行環境 JavaScript 標準仕様 パッケージ コーディングスタイル モジュール バンドル コードのサイズ削減 書かなかったこと 一般

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

はじめに 今やあらゆるサイトで使用されているハンバーガーメニュー。 私たちウェブサイト系のエンジニアは数え切れないくらい実装してきている定番パーツです。 しかしながらその実装は容易ではありません。自分の作り方に自信を持てていない方も少なくないのではないでしょうか。 ただ単にそれっぽく動くものを作るのであれば簡単ですが、アクセシビリティやメニュー展開時の他の箇所の挙動など、不具合がないように徹底的に作り込もうとするとなかなか難しいものです。 今回はそんな厄介な存在であるハンバーガーメニューについて、私なりの現在の作り方を紹介したいと思います。。 ハンバーガーメニューの実装で気を付けるべきこと ハンバーガーメニューの作り方を見る前に、ハンバーガーメニューのあるべき姿、実装時に気を付けるべきことを洗い出してみましょう。 私が思い浮かぶものだと以下のようなものがあります。 メニューボタン、アコーデ

function init() { var name = "Mozilla"; // name は、init が作成するローカル変数 function displayName() { // displayName() は内部に閉じた関数 console.log(name); // 親関数で宣言された変数を使用 } displayName(); } init(); init() 関数はローカル変数 name を作成し、それから関数 displayName() を定義しています。displayName() は init() の中で定義されている内部関数で、その関数本体の内部でしか利用できません。displayName() 自体はローカル変数を持っていませんが、外側のスコープで宣言された変数にアクセスできるので、displayName() では親関数 init() で宣言された変数 name を

こんにちは、デザイナーの奥田です。 最近では「脱jQuery」や「Vanilla.js」という言葉が流行っていますがjQueryをはじめに覚えた僕としてはなかなかハードルが高いイメージでした。 jQueryを切り捨てるメリットとしては「ファイルサイズ」や「表示速度」があると思います。そこまで大きな差は感じないかもしれませんが少しでもクオリティを上げるためであれば切り替えてみてもいいかもしれません。 今回は脱jQueryする際によく使う書き方をjQueryとNativeを見比べながら解説していきたいと思います。 Table of contents要素の取得イベントの操作クラスの操作属性の操作スタイルの操作ループ処理Vanilla.jsのプラグイン最後に要素の取得IDはDocument内に1つというルールがあるので取得はgetElementByIdで取得するのが手っ取り早いでしょう。 ID//