プログラミング

【誰よりも良いスタートダッシュを！】4月からエンジニアになる人がブックマークしておきたいサイトまとめ

4月からエンジニアとして働く学生やエンジニアに転職を目指している方は注目です！社内の業務以外でもエンジニアとしてスキルアップしたいと思っている人に普段から読んでおきたいサイトをまとめています。仕事にも直接役立つサイトが多いのでぜひ登録しておきましょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　調査手法：インターネット調査

4月からエンジニアとして働く学生やエンジニアに転職を目指している方に向けた記事となります。

エンジニアとしてのスキルアップをするためには社内の業務だけでなく、社外の勉強会や他社が取り組んでいることを知ることは重要です。とはいえ、「何を見たら良いんだろう」という人は多いでしょう。そういった人向けにブックマークしておきたいサイトをカテゴリ別に紹介していきます。

【ITニュースサイト】

CodeIQ Magazine

CodeIQという自分のエンジニアスキルを評価してくれるサービスのメディアです。CodeIQで実際に出題された問題・解答や現役エンジニアにインタビューしている記事などを掲載しています。また、エンジニア向けのイベントも多く開催されているので要チェックです。

CodeIQ Magazine

CodeZine

開発者向けのWebマガジンとなっています。実装してみる系の記事も多いので、IoTなど興味はあるけど触ったことがないという人には、一歩踏み出しやすくなるでしょう。マンガでプログラミングを解説している記事などもあるので、未経験のエンジニアでも見ていてためになるはずです。

CodeZine

@IT

「自分戦略」というカテゴリでは、人にフォーカスしてインタビューやキャリア相談にまつわる記事を掲載しています。今後エンジニアとしてステップアップしたいと考えている人には参考になると思います。

@IT

POSTD

スクリーンショット 2016-03-18 16.29.29

海外のプログラミングに関する情報を翻訳して発信しているメディアです。「Angular2の長所と短所」などトレンドになるであろう技術に関する話題が豊富です。

POSTD

SELECK

エンジニアやデザイナーに業務の中で使っている便利ツールなどを聞き、インタビュー記事として掲載しているメディアです。個人利用では発見できないようなツールが多く紹介されているので、チーム開発する上で役に立つでしょう。

SELECK

【プログラミング情報共有サイト】

Qiita

スクリーンショット 2016-03-18 16.28.38

プログラミングに関する知識の共有が多くされています。個人個人がどれくらい投稿しているかなども確認できるので、今後エンジニアとして転職する際のポートフォリオにもなるでしょう。開発の業務で行き詰まったらまずはQiitaを見ておけば解決するはずです。

また、Qiita:teamという社内だけで共有できる機能なども利用可能です。

Qiita

hacknote

WordPressやJavaについての技術共有が多く、最近ではIoTの取り組みも共有されています。

hacknote

[PR] プログラミングで挫折しない学習方法を動画で公開中

【スライド共有サイト】

技術系のイベントでは、LT(ライトニングトーク)と言ってエンジニアやデザイナーが日頃取り組んでいることの成果を発表することが増えています。そういったイベントでは、スライドを使って発表します。そして、そのスライドは後日サイト上にアップされていることが多いので、イベントに参加できなくても十分学べることはあるはずです。

以下はどちらも海外のサービスですが、日本語検索をしてもヒットする数はどんどん増えているので、ぜひブックマークしておきましょう。

SlideShare

SpeakerDeck

Speaker Deck

【エンジニア向けQ&Aサイト】

teratail

スクリーンショット 2016-03-18 16.29.02

回答率が90%以上という質問すればほとんどが解決しているというQ&Aサイトです。

回答したり、ベストアンサーをもらうとポイントが付与されランキングで上位にいくことができます。転職する際などにアピールする点になるかもしれませんね。

teratail

Stack Overflow

こちらは海外発の技術系Q&Aサイトです。日本語版としても展開されていますが、まだまだ英語でのQ&Aが多いでしょう。プログラム自体は英語で書いていくので、海外のサイトを見て英語に慣れておくと良いかもしれません。

Stack Overflow

【開発ブログ】

クックパッド開発ブログ

社内で使っている技術の話や登壇したイベントの話など役に立つ情報を頻繁に投稿されているブログです。クックパッドというとグルメや料理というイメージかもしれませんが、エンジニアが多い会社としても有名です。自社サービスの中でこういう技術を使ってこういう問題を解決したという事例を元に紹介などされているので、他の人が見ても勉強になることは間違い無いでしょう。

クックパッド開発ブログ

MEMOPATCH

スクリーンショット 2016-03-18 16.30.36

UIデザインの会社で有名ですが、エンジニアも多く在籍しています。このブログではUIデザインのトレンドや海外と日本のサービスの比較、イベントレポートなどベルリンに支社を持つGoodPatchだからこその視点で発信しています。デザインにも興味がある人や海外でのキャリアを考えている人にはおすすめです。

MEMOPATCH

Mercari Engineering Blog

スクリーンショット 2016-03-18 16.30.15

記事自体は少ないですが、スライドやGIFなどを埋め込んでいて1本あたりの記事のボリュームは多いです。メルカリはミートアップといってエンジニアやデザイナー向けに自社でイベントや勉強会も開催しているので、参加してみるのも良いでしょう。

Mercari Engineering Blog

VASILY DEVELOPERS BLOG

iQONというファッションアプリを運営している会社です。ファッションというと技術と対極にあるように感じますが、ブログでは機械学習など使ってみた記事も多く載っています。実際のサービスに反映されなくとも新しい技術を積極的に取り入れている様子が分かると思います。

VASILY DEVELOPERS BLOG

【技術系イベントまとめサイト】

社外のイベントに参加することで社内でも使える技術を知るということは多くあります。自分をスキルアップさせるためにもいろんな人と繋がりを作っておくことも大切です。

conpass

IT企業が自社で開催しているミートアップなど多くのイベントが掲載されています。新しい言語に興味があるという人でも初心者向けの勉強会も多く載っているので、ぜひ参加してみてください。

conpass

dots.

スクリーンショット 2016-03-18 16.31.08

インテリジェンスが運営している技術イベントサイトですが、渋谷にコミュニティスペースも運営しておりそこで開催されているイベントも多くあります。カレンダー機能でいつどんなイベントが行われているかチェックできるので、1週間に1度くらいはチェックしてみると良いでしょう。

dots.

ATND

ATNDではゲーム開発に関するイベントが多い印象です。実際にゲームを作っているエンジニアを呼んだイベントやこれからゲームを作りたい人向けの勉強会など。今後VRなども登場する中でゲームコンテンツはより一層増えていくので、興味のある人はぜひ見ておきましょう。

ATND

doorkeeper

コミュニティなどからイベントを探すことができるサイトです。関西グループなど地域で選ぶこともできますし、Rubyなど言語で選ぶことも可能です。

Doorkeeper

会社の中で使っていない技術でもまずは知る、そして使ってみることが大事です。最近では初心者歓迎のイベントも多々あるので、触ったことがなくても安心して参加できるはずです。社内以外にも自分のコミュニティを作っておくと新しい繋がりができるだけでなく、技術的な進歩も感じられるでしょう。

[お知らせ]TechAcademyでは初心者でも8週間でエンジニアになれるRuby on Railsオンラインブートキャンプを開催しています。RubyでWebアプリを開発したい方はご参加ください。

初心者でもOK！ゲームで遊ぶようにプログラミングを学べるサービス10選

プログラミング初心者にとってはプログラミングを勉強しようと思っても最初のハードルが高いこともあると思います。そんな悩みを持つ人でも、ゲームのように遊びな...

プログラミング

プログラミングを始める前に知っておきたい！4つの学習スタイルとは

本稿は、CourseReportのブログ記事を、CourseReportより了解を得て日本語翻訳し掲載した記事になります。これからプログラミングを始めよ...

プログラミング

【経験談から学ぶ！】より早くプログラミングを身につけるための方法

本稿は、Codementorのブログ記事を、Codementorより了解を得て日本語翻訳し掲載した記事になります。本稿のテーマは、プログラミング学習にお...

プログラミング

IT・Web系エンジニア向けオンライン学習サービス「type IT Academy」をやってみた！

オンラインでプログラミングを学習できるサービスが国内外問わず増えていることを以前の記事で紹介していますが、よりエンジニア向けに作られたサービスも始まっているよう...

プログラミング

Messengerがブラウザに！生まれ変わったOpera（オペラ）の特徴とは

本稿は、Web Designer Depotのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、イギリスで働くデザイナーBen Mos...

プログラミング

Visual Studio Code（VSCode）とは？インストールや使い方も現役エンジニアが解説

Visual Studio Code（VSCode）について、TechAcademyのメンター（現役エンジニア）が初心者向けに解説します。Visual Stud...

プログラミング

あわせてよく読まれている記事

JavaScriptのaddEventListenerの使い方を現役エンジニアが解説【初心者向け】

JavaScriptのaddEventListenerの使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。目次【ITニュースサイト】【プログラミング情報共有サイト】【スライド共有サイト】【エンジニア向けQ&Aサイト】【開発ブログ】【技術系イベントまとめサイト】そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。田島悠介今回は、JavaScriptに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 JavaScriptのaddEventListenerの使い方について詳しく説明していくね！大石ゆかりお願いします！ addEventListenerとは Webサイト開発において、「イベント」という概念はとても重要です。イベントとは、例えば「ユーザーがボタンをクリックする」「ページの読み込みが完了する」など、Webサイトにおいて発生する現象の総合的な名称です。 JavaScriptではこのイベントを検知し、検知したイベントの情報を使ってさまざまな処理ができます。イベントを検知するための仕組みのことを「イベントリスナ」といい、イベントリスナを定義するためのJavaScriptのメソッドが「addEventListener」（イベントリスナをadd = 追加する）です。 addEventListenerの使い方 addEventListenerは、以下のような文法で使用できます。イベントを検知する対象要素.addEventListener('イベント名', イベントを検知した時にする処理（関数）, オプション) 「イベントを検知する対象要素」には、さまざまな要素が指定できますが、Web開発でよく使うのはページ全体を表すwindowやdocument、または任意のHTML要素です。 addEventListenerの第一引数には、イベント名が入ります。 “click”（クリック）、”scroll”（スクロール）などが当てはまります。第二引数には任意の処理を含む関数を指定できます。第三引数には、より詳細な検知に関する設定を指定できますが、普段から頻繁に使うものではないため、今回は割愛します。 addEventListenerの詳細な仕様が気になる方は、こちらのMDNドキュメントで確認してみてください。この文法を利用して、「ユーザーがページをスクロールした時」というイベントリスナを定義する場合、以下のように記述します。 //対象要素がページ全体なので、windowを使う window.addEventListener('scroll', () => { console.log("スクロールされました") }) [PR] プログラミングで挫折しない学習方法を動画で公開中検知したイベントに関する情報を取得する addEventListenerの第二引数に指定した関数が実行されるとき、引数として1つのオブジェクトが渡されます。このオブジェクトには、検知したイベントに関するさまざまな情報が格納されています。実際にコードでイメージをつかみましょう！ window.addEventListener('click', (e) => { console.log(`クリックした位置は上から${e.pageY}、左から${e.pageX}です`) }) サンプルコードでは、ページの任意の箇所をクリックした際に、クリックした場所の座標を表示しています。ここで登場している “e” が、イベントオブジェクトです。実はこのeという名前はなんでもよいのですが、一般的にeventの頭文字であるeが広く使われています。このeに格納されている情報はイベントの種類によって異なるため、実装の際にconsole.log(e) と記述してイベントオブジェクトの内容を把握することができます。実際に書いてみようそれでは実際に書いてみましょう。今回は、3つのボタンのうちどれか1つをクリックした際に、クリックされたボタンの名前を表示するプログラムを書いてみましょう。 <button id="A">ボタンA</button> <button id="B">ボタンB</button> <button id="C">ボタンC</button> //3つのボタンを一括で取得　 const buttons = document.getElementsByTagName('button'); //3回繰り返す処理 for (let i = 0; i < 3; i++) { buttons[i].addEventListener('click', (e) => { //イベントオブジェクトを参照して、クリックした要素（e.target）のidを取得

JavaScript

話題の著者に聞いた！WordPress初心者が効果的に勉強する方法とは？

WordPressはブログをはじめ、最近では企業のWebサイトやWebサービスでも使われることが増えおり、数多くのWebサイトや書籍で紹介されています。WordPressの講座も多く開催されています。そんなWordPressの書籍WordPressプラグイン & WebAPI 活用ガイドブック [Version 3.x対応]を2013年1月に共著で出版された、西川伸一氏と星野邦敏氏に初心者がWordPressを勉強する方法についてインタビューしました。 WordPress関連のイベントでたくさん講演されているお二人ですので、これから勉強される方はぜひ参考にしてみてください。 ※本記事はEdTechの記事を再編集したものですお話を伺った人西川伸一氏（ノビル株式会社　代表取締役社長） WordPressの大規模イベント、WordCamp Tokyo 2012の実行委員長をつとめられました。 WEB制作、ディレクションの受託をしているかたわら、自社のウェブサービスとして子育て家族のための会員制ブログサービスころぐも運営されています。（ころぐはWordPressを使って作られたサービスです）星野邦敏氏（株式会社コミュニティコム代表取締役） WordPress日本語公式サイトのイベントカレンダー更新や、WordPressのイベントであるWordCampやWordBenchにスタッフやスピーカーとして関わっていらっしゃいます。自社サービスの運営を中心に、Web制作＆アプリ制作＆インターネットメディア広告のお仕事をされながら、個人として「WordPress 3.x (速習デザイン)」という書籍を共著で執筆したり、Web制作関係の雑誌に寄稿や講演なども行われています。現在は大宮でコワーキングスペース7Fを運営されています。 WordPress初心者が勉強する方法まずは西川伸一氏へのインタビューです。 –これからWordPressを勉強しようとする初心者が知っておくと良いことを教えてください WordPressの強みのひとつはコミュニティです。開発者コミュニティや勉強会がたくさんあるので、そこに参加した方がいいと思います。イベントなどの情報はWordBenchなどを見れば自分が住んでいる所の近くで開催されているイベントを見つけて参加することができます。注意点としては、WordPressは情報が多い一方で、間違った情報が公開されていることもあります。公開しているプラグインがたくさんの人にダウンロードされている人や、イベントで登壇しているような人のブログなどでは正しい情報が載っています。コミュニティのメンバーによるチェックが働いている、ということが正確さや品質の担保になるというわけです。 –初心者が見ておくといい情報があれば教えてくださいブログでおすすめなのは、WebデザインレシピでWordPressの情報が丁寧に載っています。また、後藤賢司さんがアップしている資料に載っているブログはどれも参考になると思います。西川氏おすすめのブログ記事 WordPressでブログじゃないWebサイトを作るときのいろいろ（サンプル付き） WordPressをカスタマイズするなら覚えておきたいアクションフックとフィルターフック WordPress で Web製作をしたいけど、PHP はまだちょっと … という人の PHP ガイドまた、書籍では「本格ビジネスサイトを作りながら学ぶ WordPressの教科書」「WordPress 3.x (速習デザイン)」「WordPress 3.x 現場のワークフローで覚えるビジネスサイト制作」あたりがおすすめです。他にもたくさんいい本が出ているので2冊くらいを読んで勉強してみるといいと思います。 [PR] プログラミングで挫折しない学習方法を動画で公開中WordPress初心者が参加するべきイベント続いて星野邦敏氏へのインタビューです。 –西川さんのインタビューで「WordPressを学ぶ上でイベントに参加した方がいい」とありましたが、これに星野さんも賛成ですか？もちろん賛成です。私自身もイベントを通じてWordPressの知識をつけてきました。もともと、前職では会計事務所で経理の仕事をしていました。その前に、先天性（生まれつき）の体の疾患が20代で見つかり、その手術のため入院していた時期があり、そのときにホームページ・ビルダーを使って自分のサイトを運営するようになったことがきっかけです。そのサイトの広告収入が得られるようになったので会社を作ることにしました。なので、これまでIT系の学校に通ったこともIT系の企業に所属していたこともありません。その後、WordPressを勉強するようになってWordCamp Tokyo 2009にいち参加者として参加しました。その時はちょうどWordBenchができたころだったので、イベントに参加しながら勉強するきっかけを作っていきました。イベントに参加すると、「PHPをはじめる勘所はどんな内容なのか」といった本だけではわかりずらい内容も人づてに理解することができます。また、これは個人的な意見ですがWordPressは数あるIT系のコミュニティの中でも教え合う文化が根付いているので、まったく知らない人でも基本的には優しく教えてくれる人が多いです。これから勉強したい人はイベントで話している人と顔見知りになればあとで質問することもできますので、まずは近所でやっているイベントに参加することをおすすめします。 –実際にイベントに参加しようと思ったらWordBenchを見るのが良いのでしょうか？ WordBenchとWordPressのイベントカレンダーはWordPressのイベント情報が網羅されていると思います。どちらもメインに更新しているのは私なので基本的には同じ情報が載っています。ただ、WordPressのイベントカレンダーはGoogleカレンダーを使っているため、直接リンクすることができません。なので、まずはWordBenchを見るのが便利かもしれません。また、WordPress日本語の公式twitterアカウントではイベントカレンダーの情報が自動的にツイートされるようになっていますので、これをフォローしてもいいと思います。 –WordPressのイベントはどんなものから参加していけばよいのでしょうか？ WordBenchに載っているようなイベントはWordPressが好きな人が無料のボランティアベースでやっているものが多くなっています。そのため、本当のゼロから勉強するのであれば、御社も運営しているような有料のWordPress講座の方が体系的に学ぶことができます。また、体系的に学ぶのであれば本を読むのもいいかもしれません。その上で、チップス的に知識をつけるのであればWordBenchに載っているイベントに参加するのがいいでしょう。まだまだWordPressはブログだけを作るものだと思っている人も多いと思いますが、実は上場企業の公式サイトや西川さんのころぐのようなWebサービスでも使われています。こういったサイトの制作事例や運営方法まで勉強できるのがイベントのいいところですね。インタビューは以上です。数々のWordPress関連イベントに関わっているお二人だけあってとても参考になりました。 WordPressをまだ使ったことがない人は、まずはWordPressをインストールするところから始めてみてください。 [お知らせ]TechAcademyでは、WordPressを使ってカスタマイズしたオリジナルサイトを構築できるWordPressオンラインブートキャンプを開催しています。期間中の8週間は現役エンジニアのメンターが毎日学習をサポートするので、独学よりも効率的に学ぶことができます。

インタビュー

話題の著者に聞いた！WordPress初心者が効果的に勉強する方法とは？

インタビュー

JavaScriptのイベントリスナーについて現役エンジニアが解説【初心者向け】

JavaScriptのイベントリスナーについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。 JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をみてみましょう。なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。田島悠介今回は、JavaScriptに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 JavaScriptのイベントリスナーについて詳しく説明していくね！大石ゆかりお願いします！目次イベントリスナーとは主要なイベント一実際に書いてみようまとめイベントリスナーとはイベントリスナーとは「ページが表示された」、「ボタンをクリックした」などの動作のことを表します。 JavaScriptにはあらかじめ様々なイベントが定義されており、それらのイベントが発生した際に動作するように対応付けておいた関数のことを「イベントリスナー」と呼びます。イベントが発生する仕組みまでは JavaScript 側で用意するものの、イベントとイベントリスナーとの対応付けは開発者が行わなければなりません。具体的にはaddEventListener()メソッドを使って対応付けを行います。 button.addEventListener("click", () => { // イベントが発生した時に動かす処理を記述 }); [PR] プログラミングで挫折しない学習方法を動画で公開中主要なイベント一覧 JavaScriptで発生する主要なイベントは、下記MDNのページで一覧にまとめられています。 MDN – イベントリファレンス実際に使ってみよう今回のサンプルプログラムでは、主要なイベントの中から「keydown」と「click」を使用してイベントリスナーの記述方法を確認しましょう。 index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>sample</title> </head> <body> <input type="text" id="text1"><br> <input type="button" id="button1" value="入力完了"> <div id="div1"></div> <div id="div2"></div> <script language="javascript" type="text/javascript"> const text1 = document.getElementById('text1'); const button1 = document.getElementById('button1');

JavaScript

JavaScriptでページ読み込み前に処理を実行する方法を現役エンジニアが解説【初心者向け】

JavaScriptでページ読み込み前に処理を実行する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。田島悠介今回は、JavaScriptに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 JavaScriptでページ読み込み前に処理を実行する方法について詳しく説明していくね！大石ゆかりお願いします！目次 DOMContentLoadedイベントとはページ読み込み前に処理を実行する方法実際に書いてみようまとめ DOMContentLoadedイベントとは HTMLの読み込みと解析が完了したときに発生するイベントです。スタイルシートや画像などの読み込みが終わっていなくても発生します。それに対して、スタイルシートや画像などの全てが読み込み完了した後は、Loadイベントが発生します。この2つのイベントは処理をしたいタイミングに合わせて使い分けます。上記の2つのイベントとページを表示する流れは下記のようになります。 HTMLの読み込み DOMContentLoadedイベントスタイルシートや画像などの全てのリソースの読み込み Loadイベント [PR] プログラミングで挫折しない学習方法を動画で公開中ページ読み込み前に処理を実行する方法 DOMContentLoadedイベントの発生タイミングで処理をおこなうことで、スタイルシートや画像などのリソースの読み込み前に処理をおこなうことができます。 DOMContentLoadedイベントの発生タイミングに処理を紐付ける方法について説明します。ブラウザに読み込まれたウェブページを表すDocumentオブジェクトに対して、addEventListenerメソッドを使い、DOMContentLoadedイベントと処理を関連付けます。実際に書いてみよう今回は処理を単純にするため、DOMContentLoadedイベントが発生したらコンソールにメッセージを表示するような処理にします。 document.addEventListener('DOMContentLoaded', (event) => { console.log(`DOMContentLoadedイベントが発生しました。`); }); これでDOMContentLoadedイベントと、コンソールに「DOMContentLoadedイベントが発生しました。」と表示する処理が紐づきました。必要に応じて処理の内容は書き換えるだけで使用できます。参考までに、Loadイベントで同様に処理を紐付けたい場合は、addEventListenerメソッドの第1引数のDOMContentLoadedをLoadに変更するだけです。両方のイベントに処理を紐付けた場合はDOMContentLoadedイベントが先に実行され、その後にLoadイベントが実行されます。まとめ DOMContentLoadedイベントを紹介しました。ページが読み込まれる前に処理をする場合は、DOMContentLoadedイベントを使ってください。また、ページの読み込みの後に処理をする場合は、Loadイベントを使ってください。使い分けることでより細かく画面を制御することができます。筆者プロフィール横山茂雄（よこやましげお）フリーエンジニアとして活動中。サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。TechAcademyジュニアのゲームアプリコースを担当しています。大石ゆかり内容分かりやすくて良かったです！田島悠介ゆかりちゃんも分からないことがあったら質問してね！大石ゆかり分かりました。ありがとうございます！ TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。

JavaScript

JavaScriptのonchangeの使い方を現役エンジニアが解説【初心者向け】

JavaScriptのonchangeの使い方について解説します。イベント発生を処理することができるので、実際のコードをもとに解説していきますので、理解を深めていきましょう。また、入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。田島悠介今回は、JavaScriptに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 JavaScriptのonchangeの使い方について詳しく説明していくね！大石ゆかりお願いします！イベントハンドラーonchangeとはイベントハンドラーとは、イベントの発生をJavaScriptで処理するための仕組みです。イベントには多くの種類があります。例えば以下のようなものです。ユーザーの操作：ボタンを押した、キーボードのキーを押したブラウザの状態の変化：ページを読み込んだ、読込が完了したその他：エラーが発生した関連するワードとして、イベントリスナーがありますが、イベントの発生を監視するのがイベントリスナーで、イベントハンドラーはイベント発生時に動作する関数という関係になります。詳しくは以下の記事を参考にしてください。 https://developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks/Events さて、onchangeは入力欄や選択肢が変更された時に発生するイベントです。<input>、<select>、及び<textarea>要素で対応しています。 onchangeの使い方 onchangeイベントにイベントハンドラーを対応付けるには、2つの書き方があります。1つ目はHTMLで指定する方法です。 <input onchange="イベントハンドラー名()"> もう1つはJavaScriptで指定する方法です。この場合、要素が存在していないとエラーになるので、JavaScriptはbody部の一番下に書く必要があります。 document.getElementById("要素名").onchange = イベントハンドラー名; [PR] プログラミングで挫折しない学習方法を動画で公開中実際に書いてみよう今回のサンプルプログラムでは、HTMLとJavaScript、2つの書き方でonchangeイベントにイベントハンドラを対応付ける方法を確認します。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> </head> <body> <label>機種</label> <select id="model" onchange="flight()"> <option value="">選択してください</option> <option value="B773">ボーイング777-300</option> <option value="A388">エアバスA380-800</option> <option value="YS11">YS-11</option>

JavaScript

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

【ITニュースサイト】

CodeIQ Magazine

CodeZine

@IT

POSTD

SELECK

【プログラミング情報共有サイト】

Qiita

hacknote

【スライド共有サイト】

SlideShare

SpeakerDeck

【エンジニア向けQ&Aサイト】

teratail

Stack Overflow

【開発ブログ】

クックパッド開発ブログ

MEMOPATCH

Mercari Engineering Blog

VASILY DEVELOPERS BLOG

【技術系イベントまとめサイト】

conpass

dots.

ATND

doorkeeper

記事を検索

関連するキーワード

関連する記事

あわせてよく読まれている記事

TechAcademyから 現役エンジニアの方へ お知らせ

TechAcademyから
現役エンジニアの方へ
お知らせ