jQuery

ラジオボタンの設定をjqueryのスクリプトで行うときにハマるという話です。 問題の前提 ラジオボタンは通常複数の同一name属性をもつ要素が集まってできています。 <input type="radio" name="post_radio" value="val1" checked>要素１ <input type="radio" name="post_radio" value="val2">要素２ <input type="radio" name="post_radio" value="val3">要素３ こんな感じです。 ここで、要素３にチェックを入れるという設定をjqueryでやりたいとい…

学生の頃ってよくパフェとかシェイクとかアイスとか食べてたのに 大人になるとぜーんぜん食べなくなった。 ダイエットとか全然関係なく、そこへの欲求が出てこない。 だけど、大人になるまで食べたことなかったものを大人になって食べたいな～って 思うことも増え、挑戦することも増えた。 その中の1つがこのメロンソーダフロート。 一口目は喉を潤したいから、メロンソーダをストローでグイっと。 （ストローはグイっとではないと思うけど） しゅわしゅわを味わった後に、ぷかぷか浮かぶアイスをちゅるっと。 大人になって味わう、このモダンチックな食べ物と雰囲気。 THE★大人 幸せのひと時を有難う。 ☟本日の授業の流れ a…

台風のせいで毎日の気温変化があり、頭と体がついていかない今日この頃。 ☟本日の授業の流れ a.m....jQuery＜val,html,prepend,append,remove,index,click,hover,mousemove,scroll, show,hide＞ p.m....4～5限目の途中まで-jQuery＜fadeIn,fadeOut,slideToggle,animate,stop, children,parent,each＞ 5限目の途中～6限目-javaScript＜基本文法(変数)、今後の話(為になる雑談)＞ ＞なんだか英語が使いこなせる人のように見える……(。-`ω-…

ちょうど朝起きて家を出るまで決まったTVを見るのがルーティンの我が子。 うん。ものの見事にロケットにジャックされましたわね。 7時近くになっても変わらないニュース。 該当する地域の方々は朝から怖い思い、大変な思いをされたと思います。 子供はそうじゃないんだよな～。 一時すると「まだ？」ってなっちゃう。 期待の東テレ様だって放送してんだ。一大事だよ、息子よ。 そうこうしているうちに学校行く時間に……(*´ω｀*) 一応昨晩、息子には「もしミサイルだの飛んで来たらどこに隠れたらいいかぐらいは考えて登下校してね！」って言いました★ しかし、田舎だから隠れる要素なし(´・ω・｀) ダッシュで家に帰って…

1. メソッドのシグネチャの引数は、final にする（Java） 2. 排他エラーチェック方法例（Java） 3. DOMの要素にイベントを付与する （JavaScript） 4. 特定のイベント発生後に、さらにイベントを発生させる （JavaScript） 5. 入力欄に最大文字数を入力後に次の項目にフォーカスが自動で移動する （JavaScript） 6. List で受け取った 集合オブジェクトを stream API を使用してフィルタリングを行い、最初の要素を取得（Java） 7. equals() の注意点（Java） 8. Fromタグでマルチなコンテンツ（画像・動画・リクエス…

PhpStormは jQueryのmin版を正常に読めないので、プロジェクトに追加してあっても $.() が未定義になってしまう。 そこで、同じバージョンのjQueryのminじゃない版を「外部ライブラリ」として追加することで解決する。 PhpStormで外部ライブラリは、外部ライブラリの上で右クリックで追加とかはできない。設定メニューから追加する。設定⇒言語＆フレームワーク⇒JavaScript⇒ライブラリ で、「追加」をおこなう 名前: なんでもよい フレームワークタイプ: jQuery 可視性: グローバルにしておくとどのプロジェクトからもこのライブラリが選択可能になる＋ を押して、外部…

Spring Boot の Webアプリで、jQuery を使ってファイルをアップロードする方法を書いていきます。 目次 バージョン コントローラーの作成 画面の作成 アップロードサイズの制限 起動クラスの作成 ビルドファイルの作成 動作確認 1. バージョン 動作確認で使用した製品のバージョンは以下の通りです。 Spring Boot 3.0.1 Java 17 jQuery 3.6.3 2. コントローラーの作成 ファイルアップロードを受け付けて、ファイルを保存するクラスを作成します。 src/main/java/org/example/controller/UploadControlle…

はじめに こんにちは🧑‍💻 ラボルのUIデザイナー/フロントエンドエンジニアの寺岡です。 今回は「GSAP」というアニメーション制作ライブラリの紹介になります。 Webサイトに動きのあるデザインを実装したいな〜と思っている方にオススメです。 目次 はじめに 目次 GSAPとは？ UIアニメーションの必要性 GSAPを導入する理由 1. アニメーションの実装難易度が低い 2. アニメーションの管理がしやすい 3. 安定性がある GSAPのインストール方法 CDNの場合 npmの場合 yarnの場合 基本的な実装例 Method Property Easing Handling Stagger T…

はじめに LCLでフロントエンドエンジニアをしている川辺です。 早いものでLCLに入社して既に7年が経ちました。 僕が入社した時から今に至るまでずっと言われ続けてきたことに「なびフロントエンドの開発環境を何とかしたい」というのがあります。 弊社ではバス比較なびという高速バスの比較サイトを運営しています。 www.bushikaku.net サービスをリリースしたのが2006年なのでリリースしてから15年以上の歳月が経ちました。 そしてフロント側はリリース時からほとんどの実装をjQueryで書かれています。 なので僕が入社した2016年頃からずっとフロントチームとしてこのレガシーなコードに対して…

↓↓クリックして頂けると励みになります。ランキング参加中プログラミング Bootstrapを利用する準備をします。 Yarnで必要なパッケージ「Bootstrap」「jquery」「popper.js」をインストールします。 コマンド yarn add jquery@3.7.0 bootstrap@5.3 popper.js@1.16.1 「popperjs/core」をインストールします。 コマンド yarn add @popperjs/core 記述追加 app/javascript/packs/application.js(11行目) require("jquery") import '…

/*吹き出し アイコン 左寄せ*/ .fukidashi1 { width: 95%; margin: 12px 14px; overflow: hidden; } .fukidashi1 .icon { float: left; margin-right: -70px; width: 70px; } .fukidashi1 .icon .wphg { width: 70px; height: 70px; } .fukidashi1 .icon img { width: 100%; height: auto; border: solid 3px #96bfe3; /*0%：四角 10%～:角丸…

苦悶の表情 こんにちは。webエンジニアの永田です。今回は直近で行った求人検索機能のリファクタのお話をしようと思います。 OpenWorkには、新卒向け求人検索機能と、社会人向け求人検索機能が古より存在しています。 各機能はUIや機能面で様々な違いがあるにも関わらず、バックエンド、フロントエンドともに同じコードを使用しており、作りも非常に古いものでした。そこで各機能を分離した上で、新卒向けの方を最近のOpenWorkでの構成に則って１から作り直しました。 （社会人向けの方も来季以降作り直す予定です。） 供養の意味も込め、この件に関する工夫等を共有できればなと思います。レガシーコードのリファクタ…

/*ボタン内spanの形状*/ .btn span { position: relative; z-index: 3; color: snow; margin-left: 9px; } a.btn.bgright { background: mediumturquoise; border-radius: 15px; box-shadow: 0px 3px 7px 1px rgba(0, 0, 0, 0.2); } .btn:hover span{ color: snow; } .btn span:after { content: ""; position: absolute; top: 35%…

jQuery（ジェイクエリー）とは、ウェブブラウザー用のJavaScriptコードをより容易に記述できるようにするために設計された軽量なJavaScriptライブラリである。ジョン・レシグが、2006年1月にリリースした。様々な場面で活用されており、JavaScriptライブラリのスタンダードと呼ぶ者もいる https://jquery.com/ ライブラリとは ライブラリとは、プログラムにおいてよく利用される機能を切り出して、再利用しやすいようにまとめたものです。ライブラリの利用により、よく利用する機能を1から作る必要がなくなり、効率的に開発を行うことができます。 ライブラリはプログラム作成…

プログラムとは？いよいよJavaScriptの授業が始まります。人によっては今回のJavaScriptがプログラムに触れる初めての機会になる場合もあります。 プログラムという物を触った事が無い人はまず、「プログラム」という物がどういう物なのか、という事を理解しましょう。 プログラム コンピュータプログラム（英：computer programs）とは、コンピュータに対する命令（処理）を記述したものである。コンピュータが機能を実現するためには、CPUで実行するプログラムの命令が必要である。プログラミング言語と呼ばれるコンピューターのための言語。 要はコンピューターに命令し、動かす為に使う物（言語…

checkboxとは複数の項目を選択出来るようにしたい時に使用するタイプです。checkboxの項目を必須にしたい時にrequired属性を使ってしまうと、required属性を指定している項目は必ずチェックしないと進めなくなってしまうので、checkboxの項目にrequired属性はNGです。 checkboxの項目を必須にしたい時はrequired属性の代わりにjQueryでreturn false機能を使いましょう。 $('form').submit(function(){ if($('input[name="check"]:checked').length === 0){ alert…

indieees の山口です。 今回は、お題の中から「今からプログラミング言語を学習するなら何を学ぶ？」について書きたいと思います。 まずは、今までに触れたことがあるプログラミング言語・スクリプト言語ですが、 Visual Basic 5/6 Delphi 5/6/7 Visual C# .NET Visual Basic .NET Android JAVA PHP 5.0～ (CakePHP) HTML/CSS (XML, NewsML) JavaScript (JQuery, React) TypeScript SQL (SQLServer, Oracle, PostgreSQL, MyS…

今ではウェブ開発において必須とも言える JavaScript ですが、初期は Flash 人気の影に隠れておりそれほど利用される言語ではありませんでした。2000年代後半頃から Google による Ajax の利用や jQuery の登場などから JavaScript 人気は徐々に高まり、Safari ブラウザの Flash 非サポートなどを経て現在の人気言語に至るような歴史を辿ってきました。 そのような変遷の中で、JavaScript の記法や関数などを定義している EcmaScript も次第に整備され、2015年の ES2015 をひとつのターニングポイントとして、現在は毎年最新バージ…

職業訓練でwebデザインを学び、個人制作で実際webサイトを１から作りました。 そして完成し皆の前でプレゼンして無事終了。次はグループ制作が始まります。 ４人グループになって役割分担を決めて、１つのサイトを制作開始。 最初、コーディングは個人制作の１つだけにするつもりだった しかし個人制作も合わせ、合計３つコーディングする必要になりました… 就職活動に使うポートフォリオには１つのみコーディングしたサイトを載せて、残りはすべてデザインのみと決めていたので予想外。 なのであと１０日程でコーディングを終わらせないといけません。 １つはグループ制作で私以外の３人は就職活動に専念したいから制作に意欲的で…