jQuery

はじめに jQueryとは？メリットと基本的な使い方 jQueryのメリット jQueryの基本構文 jQueryと通常のJavaScriptの違いを徹底比較 要素の取得と操作 イベント処理の違い jQueryの基本メソッドと実践的な使い方 よく使われるjQueryのメソッド jQueryによるアニメーション jQueryプラグインの活用でWebサイトを進化させる jQueryを使った簡単なサンプルプログラム HTMLコード CSSコード jQueryコード（JavaScript） jQueryの使用における注意点とベストプラクティス まとめ 参考文献 jQuery標準デザイン講座作者:神田 …

理解度を高めるために、ブログにメモとして記録に残しています。 今回は、デイトラ初級編DAY22③モーダルで画像の拡大表示をしようです。 ・メニュー一覧の画像をクリックすると、 ・縦横画面いっぱいに薄いグレーの背景ボックスを表示 ・その枠の中心に拡大されたメニュー写真を表示 ・画面のどこかをクリックすると拡大写真と背景ボックスを非表示 ・アニメーションはフェードイン・フェードアウト ✅HTML ・後でpropで取得できるように、メニューの各imgタグにjs-modalを追加。 ・graydisplayクラスを追加。 CSS ・js-modalにスタイルを当てるのではなく、クリックしたときの gr…

こんにちは、デイトラ受講生のsaayaです。 理解度を高めるためにも、ブログに学んだことをメモして、 記録に残していきたいと思います。 今回は、デイトラ初級編DAY21の①ドロワーメニューの実装をしました。 ・Menuをクリックすると、 ・3つのメニューを表示します ・開閉時間は指定なしです ✅HTML ・Menuの下に、新たにtoggle-listとしてリストを作った。 ・それぞれをtoggle-itemとした。(cssで使うため) ・親要素にtoggle ✅CSS ・#toggleを親要素として、toggle-listの位置を整えた。 ・paddingで周りの余白を平等にとり、 toggl…

はじめに 初めまして、第3チーム所属の小倉です。 昨年度、私たちのチームにはコード保守性の改善を目的としたフロントエンドの刷新というミッションがありました。 本記事ではその中で取り組んだjQueryからReactへの移行方法について紹介します。

今日は休みを振り替えて、打ち合わせと図面などの準備を行って行きました。 仕事の合間、棟梁と書類についての打ち合わせを行いました。 そして、 棟梁と熱い話ができて良かったです。 前々から、今の会社の古くからある慣習やメンバー、その部分に風穴を開けること、 均衡を壊して新しい風を吹かせる事、保守的を非として、革新派を是とすること、 立ち止まったら、新しい強い流れで押し流してしまう事。 自分も含め、ハラハラした不安定に身を置く事によってのみ成長できること、 自分のみならず、それを周りにも波及させて安定を破壊して、均衡を壊して新しい風を生む事、そういった事に楽しみと成長の糧を見出してきました。 今日は…

今日は午前中、運転免許の更新や他の用事でうろうろして帰宅しました。 帰宅後、掃除をルンバが平行して行っている間に、昼食準備や二階の掃除を行いました。 その後は息子を迎えに行くまで、ひたすら、パソコンに向かって、動作を試したり、勉強したりを繰り返していました。 意外に時間はあっという間に過ぎてしまいますね。 私はスケジュールの合間合間の時間を利用して、そこにパチパチやることをはめて行くのが好きです。 昼寝もしっかり取りますが、時間はきっちり区切ります。 一日、終えて、何してたんだろう？ということにならない様に大切に時間を使えたらと思います。 今日も夜活です。プロゲートから始まり、制作と試すの続き…

今週の仕事も終わりです。 今週もやり切りました！！ とは言え、明日休んで、次の日は打ち合わせです！！ その流れで、翌日から、また一週間が始まります。 建築は中々、週2日休むというのが難しいですね。 内容が好きな事なので、苦は無いですが、建築の仕事に終わりはないですね。 しかし、これは嬉しいことです。 お客様と契約を結んでくれる営業、設計の機会を与えてくれることに感謝です。 よく明日、会社が無くなってしまうことを想像して仕事をすること、働く場がある喜び、仕事の機会に感謝する気持ちは非常に大切です。 仕事が多くなると、作業の頭になる人が多い気がしますが、こうして明日も仕事があることに感謝する気持ち…

こんにちは。iimonでエンジニアをしているhayashiと申します。 普段は主に拡張機能を開発しております。 今回はTypeScriptでのシングルトーンパターンについて解説したいと思います。 シングルトン（singleton）とは、オブジェクト指向プログラミングにおけるクラスのデザインパターンの一つで、実行時にそのクラスのインスタンスがアプリケーション全体で一つだけであることを保証するために使用されます これにより以下の利点があります。 グローバルな状態管理: アプリケーション全体で共有される状態を一元管理するためにシングルトンパターンを使用します。例えば、ユーザーの認証情報や設定など。 …

これは「Happiness Chain Advent Calendar 2024」の15日目の記事です。 はじめに 今年も残りわずかとなりました。この時期になると、自然と1年を振り返り、どれだけ成長できたかを考える時間が増えますね。 この記事では、文系未経験からIT業界に飛び込んだ私が、受託兼SESのベンチャー企業に入社して1年半を過ごしてきたリアルを振り返ります。 これからIT業界を目指す方や同じような道を歩んでいる方々の参考になれば嬉しいです。 文系未経験からSEへ 入社当時の自分は、Webアプリ開発の経験はゼロ。もちろんチーム開発の経験等もありません。 フレームワークやいろんな技術を駆使…

本ページは、プロモーションが含まれています。 HTML は、ブラウザに文字や表などを表示させるために使用されるマークアップ言語です。 また、CSS は、HTML で記述されたタグやレイアウトを装飾するためのもので、 自分のサイトをイメージしたデザインにするためには CSS の書き方も必須になります。 Java や C言語などのプログラミング言語と違って、HTML タグや CSSの書き方を覚えて、 サイトのデザインを考えることがメインなので、独学で勉強することは難しくありません。 ここでは、HTML/CSS 未経験者や初心者が独学で勉強するための始め方を解説していきたいと思います。 HTML/C…

自分の未来をデザインする力を学ぶ【FACT(FIELD Academy of Creative & Technology)】 FACT(FIELD Academy of Creative & Technology)は、デザインとプログラミングを学びながら、自分の未来を切り開くスキルを身につけられるWebデザインスクールです。現場のプロが開発したカリキュラムを提供し、実践的なスキルを身につけられる環境を整えています。未経験からでもスタートでき、プロジェクト型の学びで即戦力となる人材を目指すことができます。 FACTが選ばれる理由 1. 実務に即したカリキュラム FACTのカリキュラムは、運営母体…

この記事は Yappli Advent Calendar 2024 の13日目の記事です。 Nuxtを採用した理由 当時のアーキテクチャの方針 現在の課題 1. アプリケーション全体がVuexと密結合になっている コード例 2. Vuexの移行コストが高い 3. グローバルで使わない状態もVuexに存在している 4. 肥大化したVuexモジュールの認知負荷が高い 5. dispatchが型安全でない どうするのが良さそうだったか 1. Vuexを参照する層を限定する 2. ラッパーを噛ませてVuexを参照する これからの旅路 必要な分だけグローバルな状態管理をする グローバルで持ちたい状態やロ…

maccha Advent Calendar 2024の11日目の記事です． 久しぶりに自分のwebサイトを更新しました．就活が終わってから一切手を加えていなかったので，それまでの間に溜まったあれこれが加わっています． 折角このタイミングで更新をしたので，今回はこのサイトを眺めながら今年の出来事を振り返ってみようと思います．

このエントリは、SmartHR Advent Calendar 2024 シリーズ2の10日目の記事です。 こんにちは！SmartHRで基本機能の開発をしているプロダクトエンジニアのyamakeeeeeeeeenです。この記事では、基本機能のレガシー画面のリプレイスプロジェクトについてご紹介します。 基本機能の技術スタックとレガシー画面の現状 SmartHRは2015年にサービスをローンチ時、フロントエンドにjQuery、バックエンドにRuby on Railsを採用して開発されました。その後、2017年頃からReactが導入され、新機能の開発では主にReactが利用されています。 現在、基本…

※アソビュー！ Advent Calendar 2024 (B面) の 10 日目の記事です。 アソビューで新規事業のプロダクト開発を行っている竹内です。 私はこれまで主にバックエンドとプロジェクトマネジメントに携わってきました。今回初めて React + TypeScript に挑戦したので、今回やったことを自身のためにも整理しつつ、ポイントだと感じたところを書いていきたいと思います。 はじめに まず私がどれくらいのフロントエンド歴かといいますと・・・ SI でバックエンド出身、最近までPjM中心 久しぶりにプレイングマネージャーでコードを書くことに フロントエンドをやったのは JQuery…

はじめに こんにちは、クラウドハウス労務でバックエンドエンジニアをしているtitti-008です。 本記事は Techouse Advent Calendar 2024 9日目の記事です。 昨日は Kaffff さんによる localStorage の値を Zod で安全にパースする でした。本日は、ChatGPTを活用した社内勉強会の継続開催の取り組みについて書きます。 背景 弊社Techouseには、素質ある多くのエンジニアインターンが在籍しています。エンジニアインターンの文化については、こちらの記事をご参照ください。彼らは将来優秀なエンジニアになることが期待される「金の卵」であり、各事業…

課題サイトまとめ（４） 完成例 Other 記述例 other.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Other | 課題サイト</title> <link rel="stylesheet" href="css/style.css"> <script src="js/script.js" defer></script> </head> <bod…

課題サイトまとめ（３） 完成例 Photoshop / Illustrator 記述例 psai.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Photoshop / Illustrator | 課題サイト</title> <link rel="stylesheet" href="css/style.css"> <script src="js/scri…